:root {
  --xf-accent:  #95ac7c;
  --xf-accent-dark: #6c8452;
  --xf-text:    #d8d8d8;
  --xf-muted:   #8a8a8a;
  --xf-dim:     #666;
  --xf-line:    rgba(255, 255, 255, .06);
  --xf-surface: rgba(255, 255, 255, .03);
}

/* -----------------------------
   1. Table reset — switch <table> into block mode so CSS Grid works on rows.
   ----------------------------- */
.xfields,
.xfields tbody,
.xfields tr        { display: block; width: 100%; }
.xfields tr > td   { display: block; }

/* -----------------------------
   2. Section heading (group title).
   Mimics the native form dividers ("Old password", "Avatar", ...).
   ----------------------------- */
.xf-group-header td {
  padding: 28px 0 14px !important;
  border: 0 !important;
}
.xf-group-header:first-child td { padding-top: 8px !important; }

.xf-group-title {
  display: block;
  padding-bottom: 12px;
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* -----------------------------
   3. Row layout — grid with fixed 200px control column on desktop.
   ----------------------------- */
.xf-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--xf-line);
}
.xf-row:last-child { border-bottom: 0; }

.xf-row > td {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-width: 0;
}

/* Left cell: icon + (label / description) */
.xf-row > td:first-child {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.xf-icon {
  color: var(--xf-dim);
  font-size: 14px;
  width: 16px;
  text-align: center;
  margin-top: 3px;
  transition: color .15s;
}
.xf-row:hover .xf-icon { color: var(--xf-accent); }

.xf-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.xf-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--xf-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.xf-desc {
  color: var(--xf-muted);
  font-size: 12px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Right cell: native controls fill the column */
.xf-row > td:last-child { justify-self: stretch; }
.xf-row > td:last-child select,
.xf-row > td:last-child .selectric,
.xf-row > td:last-child .jq-selectbox,
.xf-row > td:last-child .jq-selectbox__select {
  width: 100% !important;
  max-width: 100%;
}

/* Toggle rows: switch aligned to the right edge of the 200px column */
.xf-row--toggle > td:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* -----------------------------
   4. Anchor link (copy deep-link icon) — appears on row hover.
   ----------------------------- */
.xf-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--xf-dim);
  opacity: 0;
  text-decoration: none;
  border-radius: 4px;
  font-size: 10px;
  position: relative;
  transition: opacity .15s, color .15s, background .15s;
}
.xf-row:hover .xf-anchor,
.xf-anchor:focus          { opacity: 1; }
.xf-anchor:hover          { color: var(--xf-accent); background: rgba(149, 172, 124, .1); }
.xf-anchor.is-copied      { opacity: 1; color: var(--xf-accent); background: rgba(149, 172, 124, .15); }

.xf-anchor.is-copied::after {
  content: 'copied';
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--xf-accent);
  white-space: nowrap;
  pointer-events: none;
  animation: xfFade 1.5s ease forwards;
}

@keyframes xfFade {
  0%   { opacity: 0; transform: translate(-4px, -50%); }
  15%  { opacity: 1; transform: translate(0, -50%); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Touch devices: make anchor faintly visible since there's no hover */
@media (hover: none) {
  .xf-anchor { opacity: .4; }
}

/* -----------------------------
   5. Scroll-to-anchor highlight.
   ----------------------------- */
.xf-row.xf-highlight { animation: xfHighlight 2s ease; }

@keyframes xfHighlight {
  0%   { background: rgba(149, 172, 124, .10); }
  60%  { background: rgba(149, 172, 124, .05); }
  100% { background: transparent; }
}

/* -----------------------------
   6. Toggle switch — replaces binary Enabled/Disabled selects.
   ----------------------------- */

/* Visually hide the original <select> without removing it from the form */
.xf-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

.xf-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; 
}

.xf-switch-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  order: 1;
}

.xf-switch-label {
  order: 0;
  min-width: 22px;
  font-size: 12px;
  color: #7a7a7a;
  text-align: right;
}
.xf-switch-input:checked ~ .xf-switch-label { color: var(--xf-accent); }

.xf-switch-track {
  order: 2;
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  transition: background .2s ease;
  flex-shrink: 0;
}
.xf-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #c8c8c8;
  border-radius: 50%;
  transition: transform .2s ease, background .2s ease;
}
.xf-switch-input:checked + .xf-switch-track                    { background: rgba(149, 172, 124, .35); }
.xf-switch-input:checked + .xf-switch-track .xf-switch-thumb   { transform: translateX(16px); background: var(--xf-accent); }
.xf-switch-input:focus-visible + .xf-switch-track              { box-shadow: 0 0 0 2px rgba(149, 172, 124, .4); }

/* -----------------------------
   7. Native Save button — widened, turns green on dirty state.
   ----------------------------- */
.xf-save-native {
  width: 180px;
  max-width: 100%;
  transition: background-color .2s ease, color .2s ease;
}
.xf-save-native.is-dirty {
  background-color: var(--xf-accent-dark) !important;
}

/* Center Save wrappers in both tabs (template adds .center; mirror wrap is injected by JS) */
.form_submit.center,
.xf-save-mirror-wrap {
  text-align: center;
}
.xf-save-mirror-wrap { margin-top: 24px; }

/* -----------------------------
   8. Mobile floating action button (FAB) — only on small screens.
   Hidden by default; JS toggles .is-visible when form is dirty and real Save
   button is offscreen.
   ----------------------------- */
.xf-save-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
  transition: opacity .2s ease, transform .25s ease;
}
.xf-save-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.xf-save-fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--xf-accent-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4),
              0 0 0 1px rgba(149, 172, 124, .3);
}
.xf-save-fab-btn:hover { background: #7a9560; }
.xf-save-fab-btn i     { font-size: 12px; }

/* Hide FAB entirely on desktop */
@media (min-width: 641px) {
  .xf-save-fab { display: none !important; }
}

/* -----------------------------
   9. Mobile overrides — stack into a single column, except toggles stay inline.
   ----------------------------- */
@media (max-width: 640px) {
  /* Select rows stack vertically: label on top, full-width control below */
  .xf-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .xf-row > td:first-child { gap: 12px; }

  /* Toggle rows stay horizontal — switch vertically centered with the label block */
  .xf-row--toggle {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px;
    align-items: center;
  }
  .xf-row--toggle > td:last-child {
    justify-self: end;
    align-self: center;
  }
}

/* -----------------------------
   10. Neutralize artifacts from older script versions and legacy userprofile.js.
   ----------------------------- */
.info-icon,
.tooltip-text,
.xf-search-row,
.xf-search,
.xf-clear,
.xf-empty,
.xf-tabs-row,
.xf-tabs,
.xf-tab,
.xf-status,
.xf-group-toggle,
.xf-group-count,
.xf-chevron,
.xf-save-bar,
.xf-save-check {
  display: none !important;
}
/* Override hover rule so colored icons don't all turn green on row hover */
#xf-add-red-bolt-to-books-published .xf-icon,
#xf-buble-tags .xf-icon,
#xf-reading-options .xf-icon,
#xf-christmas-theme .xf-icon,
#xf-negative-comments .xf-icon,
#xf-hide-negative-comments .xf-icon,
#xf-translation-of-all-sections-of-the-site .xf-icon,
#xf-chatgpt .xf-icon {
  transition: none;
}
.xf-row:hover#xf-add-red-bolt-to-books-published .xf-icon,
.xf-row:hover#xf-buble-tags .xf-icon,
.xf-row:hover#xf-reading-options .xf-icon,
.xf-row:hover#xf-christmas-theme .xf-icon,
.xf-row:hover#xf-negative-comments .xf-icon,
.xf-row:hover#xf-hide-negative-comments .xf-icon,
.xf-row:hover#xf-translation-of-all-sections-of-the-site .xf-icon,
.xf-row:hover#xf-chatgpt .xf-icon {
  filter: brightness(1.15);
}

/* Solid colors */
#xf-add-red-bolt-to-books-published        .xf-icon { color: #dc5d5d; }  /* New book marker — red */
#xf-buble-tags                             .xf-icon { color: #4a8bdb; }  /* Tags as blocks — blue */
#xf-negative-comments                      .xf-icon { color: #a66cc9; }  /* Dim negative comments — purple */
#xf-hide-negative-comments                 .xf-icon { color: #e8944a; }  /* Hide negative comments — orange */
#xf-translation-of-all-sections-of-the-site .xf-icon { color: #3a7bd5; }  /* Translate the whole site — blue */
#xf-chatgpt                                .xf-icon { color: #30c7d4; }  /* AI features — azure */

/* RGB-gradient Reading options icon */
#xf-reading-options .xf-icon {
  background: linear-gradient(135deg, #ff5252 0%, #40c057 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Christmas tree — green body with red ornament accent */
#xf-christmas-theme .xf-icon {
  background: linear-gradient(160deg, #3fa55c 0%, #3fa55c 55%, #dc5d5d 55%, #dc5d5d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.language-selector{margin-top:30px;text-align:center}.language-selector-title{display:flex;align-items:center;justify-content:center;margin-bottom:15px;color:#4a8bdb;font-size:16px}.language-selector-title i{margin-right:8px}.language__img_active{opacity: 1!important;box-shadow: 0 0 8px #95ac7c;}.language-selector img{opacity: 0.5;width:30px;height:20px;cursor:pointer;border-radius:3px;transition:transform .2s,box-shadow .2s;border:1px solid #444}.language-selector img:hover{transform:scale(1.1);box-shadow:0 0 8px rgba(168,132,243,.5)}