/* ==========================================================================
   IRONITT v2 — Settings (js/full-settings.js)
   --------------------------------------------------------------------------
   A takeover dialog: a category list on the left, one reading column on the
   right. Inside the dialog nothing is boxed again — a settings group is a
   small title over hairline-separated rows, and groups are separated by
   space and one hairline. Phones get a full-screen menu that drills into a
   full-screen page (the master-detail logic lives in full-settings.js).
   This file owns the frame and the shared controls; the special pieces
   (devices, colour picker, keybinds, ...) follow in their own part.
   ========================================================================== */

/* ---- Frame ------------------------------------------------------------- */
.full-settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  /* No backdrop blur: re-blurring the whole screen every frame of the open
     animation cost 50-90ms frames. The takeover covers most of the screen,
     so a darker scrim does the job. */
  background: color-mix(in srgb, var(--scrim) 100%, #000 30%);
}
.full-settings-overlay.active,
.full-settings-overlay.closing { display: flex; }
.full-settings-overlay.active { animation: v2-scrim-in var(--surface-glide) var(--surface-ease-in) forwards; }
.full-settings-overlay.closing { animation: v2-scrim-out var(--surface-glide) var(--surface-ease-out) forwards; }

.full-settings {
  position: relative;
  display: flex;
  width: 94vw;
  max-width: 1120px;
  height: 88vh;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
  animation: v2-dialog-in var(--surface-glide) var(--surface-ease-in) both;
}
.full-settings-overlay.closing .full-settings {
  animation: v2-dialog-out var(--surface-glide) var(--surface-ease-out) forwards;
}

.full-settings__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  color: var(--text-muted);
  font-size: 16px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.full-settings__close span {
  font-size: 8px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  line-height: 1;
}
.full-settings__close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---- Sidebar ----------------------------------------------------------- */
.full-settings__sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 248px;
  border-right: 1px solid var(--border-color);
}
.full-settings__sidebar--hidden { display: none; }
.full-settings__sidebar-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}
/* js/full-settings.js slides this to the active item (offsetTop/Left). */
.full-settings__nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  pointer-events: none;
  opacity: 0;
}
.full-settings__nav-indicator.visible { opacity: 1; }
.full-settings__nav-label {
  padding: 16px 12px 6px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.full-settings__nav-label:first-of-type { padding-top: 8px; }
.full-settings__nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.full-settings__nav-item i { width: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.full-settings__nav-item:hover { color: var(--text-primary); }
.full-settings__nav-item:not(.active):hover { background: color-mix(in srgb, var(--bg-hover) 60%, transparent); }
.full-settings__nav-item.active { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.full-settings__nav-item.active i { color: var(--accent-color); }
.light-mode .full-settings__nav-item.active i { color: var(--accent-solid); }
.full-settings__nav-back { height: 32px; color: var(--text-muted); font-size: var(--font-size-xs); }
.full-settings__nav-separator { height: 1px; margin: 8px 12px; background: var(--border-color); }
.full-settings__nav-item--danger,
.full-settings__nav-item--danger i { color: var(--color-danger); }
.full-settings__nav-item--danger:not(.active):hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.full-settings__sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Content ----------------------------------------------------------- */
.full-settings__content {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.full-settings__content-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-width: 820px;
  /* No top padding: a sticky child sticks inside the padding box, so a top
     padding left a band above the sub-tab bar where content scrolled past.
     The title carries the space instead. */
  padding: 0 48px 64px;
}
.full-settings__content-scroll > :first-child { margin-top: 40px; }
.full-settings__mobile-back { display: none; }

.fs-section-title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.fs-section-desc { margin-bottom: 24px; font-size: var(--font-size-sm); color: var(--text-muted); }

/* A settings group: title over rows. Groups are split by a hairline. */
.fs-card { padding: 4px 0 24px; }
.fs-card + .fs-card,
.fs-subtab-content + .fs-subtab-content > .fs-card:first-child { padding-top: 24px; border-top: 1px solid var(--border-color); }
.fs-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-2xs);
  line-height: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.fs-card-title::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent-color);
}
.fs-danger-zone .fs-card-title { color: var(--color-danger); }
.fs-danger-zone .fs-card-title::before { background: var(--color-danger); }

.fs-subtab-content {
  scroll-margin-top: 72px;
  border-radius: var(--radius-lg);
  transition: background-color 600ms ease, box-shadow 600ms ease;
}
/* Jumping to a section flashes it: a soft rounded wash that reaches 12px
   past the content (the spread follows the radius), then fades. */
.fs-subtab-content.highlight {
  background: var(--accent-subtle);
  box-shadow: 0 0 0 12px var(--accent-subtle);
  transition-duration: 180ms;
}

/* ---- Sub-tabs + segmented control (one pill bar, indicator by JS) ----- */
.fs-subtab-bar,
.fs-segmented {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
.fs-subtab-bar {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  width: fit-content;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Content scrolling under the bar is hidden by a ground-coloured halo. */
  box-shadow: 0 -12px 0 6px var(--bg-primary), 0 6px 12px 4px var(--bg-primary);
}
.fs-subtab-bar::-webkit-scrollbar { display: none; }
/* The halo reaches 18px up; keep the page title clear of it at rest. */
:is(.fs-section-title, .fs-section-desc) + .fs-subtab-bar { margin-top: 20px; }
.fs-subtab-indicator,
.fs-segmented-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  pointer-events: none;
}
.fs-segmented-indicator { opacity: 0; }
.fs-segmented-indicator.visible { opacity: 1; }
.fs-subtab,
.fs-seg-option {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  user-select: none;
  transition: color var(--transition-fast);
}
.fs-seg-option i { font-size: 12px; }
.fs-subtab:hover, .fs-seg-option:hover { color: var(--text-primary); }
.fs-subtab.active, .fs-seg-option.active {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
}
.fs-seg-label { margin-bottom: 10px; font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ---- Rows -------------------------------------------------------------- */
.fs-field-row,
.fs-toggle-row,
.fs-slider-row,
.fs-select-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.fs-field-row:last-child,
.fs-toggle-row:last-child,
.fs-slider-row:last-child,
.fs-select-row:last-child { border-bottom: 0; }

.fs-field-row,
.fs-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fs-field-info,
.fs-toggle-info { flex: 1; min-width: 0; }
.fs-field-label { margin-bottom: 2px; font-size: var(--font-size-xs); color: var(--text-muted); }
.fs-field-value { font-size: var(--font-size-md); overflow-wrap: anywhere; }
.fs-toggle-label,
.fs-slider-label,
.fs-select-label { font-size: var(--font-size-md); color: var(--text-primary); }
.fs-toggle-desc { margin-top: 2px; font-size: var(--font-size-sm); color: var(--text-muted); line-height: var(--leading-normal); }
.fs-select-label { margin-bottom: 8px; }

/* Quiet secondary button: field edits and small actions. */
.fs-field-edit-btn,
.full-settings__small-btn {
  flex-shrink: 0;
  white-space: nowrap;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast);
}
.fs-field-edit-btn:hover,
.full-settings__small-btn:hover { background: var(--bg-hover); }
.full-settings__small-btn.danger { color: var(--color-danger); }
.full-settings__small-btn.danger:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }

.full-settings__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-bottom: 24px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast);
}
.full-settings__save-btn:hover { background: var(--accent-hover); }

.fs-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-danger) 60%, transparent);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}
.fs-btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }

.full-settings__field { margin-bottom: 16px; }
.full-settings__field label { display: block; margin-bottom: 6px; font-size: var(--font-size-xs); color: var(--text-muted); }
.full-settings__field input,
.full-settings__field select,
.full-settings__field textarea { width: 100%; resize: vertical; }

.full-settings__member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.full-settings__member-info { flex: 1; display: flex; flex-direction: column; }
.full-settings__member-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.full-settings__member-role { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: capitalize; }

/* ---- Switch ------------------------------------------------------------ */
.fs-toggle { position: relative; flex-shrink: 0; width: 44px; height: 24px; }
.fs-toggle input { position: absolute; width: 0; height: 0; opacity: 0; }
.fs-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.fs-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: var(--text-muted);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.fs-toggle input:checked + .fs-toggle-track { background: var(--accent-solid); }
.fs-toggle input:checked + .fs-toggle-track::after { transform: translateX(20px); background: var(--text-on-accent); }
.fs-toggle input:focus-visible + .fs-toggle-track { box-shadow: var(--focus-ring); }

/* ---- Slider ------------------------------------------------------------ */
.fs-slider-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fs-slider-actions { display: flex; align-items: center; gap: 4px; }
.fs-slider-value { min-width: 40px; text-align: right; font-size: var(--font-size-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fs-slider-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  color: var(--text-muted);
  font-size: 12px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.fs-slider-reset:hover { background: var(--bg-hover); color: var(--text-primary); }
.fs-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
}
.fs-slider:hover, .fs-slider:focus { border: 0; }
.fs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: var(--accent-color);
  cursor: pointer;
}
.fs-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--accent-color);
  cursor: pointer;
}

.fs-select {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 14px;
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ---- Choices ----------------------------------------------------------- */
.fs-radio-group { display: flex; gap: 8px; padding: 8px 0; }
.fs-radio-option {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.fs-radio-option:hover { background: var(--bg-hover); }
.fs-radio-option.active { border-color: var(--accent-color); color: var(--text-primary); font-weight: var(--font-weight-semibold); }

.fs-option-stack { display: flex; flex-direction: column; }
.fs-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 12px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  color: var(--text-primary);
}
.fs-option-card:last-child { border-bottom: 0; }
.fs-option-card:hover { background: var(--bg-secondary); }
.fs-opt-icon { flex-shrink: 0; width: 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.fs-option-card.active .fs-opt-icon { color: var(--accent-color); }
.fs-opt-text { flex: 1; min-width: 0; }
.fs-opt-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.fs-opt-desc { margin-top: 2px; font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.4; }
.fs-opt-check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  border: 1.5px solid var(--border-strong);
  transition: border-color var(--transition-fast);
}
.fs-opt-check i { display: none; }
.fs-opt-check::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: var(--accent-color);
  transform: scale(0);
  transition: transform var(--transition-fast);
}
.fs-option-card:hover .fs-opt-check { border-color: var(--text-muted); }
.fs-option-card.active .fs-opt-check { border-color: var(--accent-color); }
.fs-option-card.active .fs-opt-check::after { transform: scale(1); }

/* ---- Home: every category at a glance -------------------------------- */
.fs-grid-home {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 48px 32px;
}
.fs-grid-home-inner { width: 100%; max-width: 820px; }
.fs-grid-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 8px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-2xs);
  line-height: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.fs-grid-section-label::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent-color);
}
.fs-grid-section-label:first-child { margin-top: 0; }
.fs-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
.fs-grid-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.fs-grid-card:hover { background: var(--bg-secondary); }
.fs-grid-card-icon { flex-shrink: 0; width: 20px; padding-top: 2px; text-align: center; color: var(--accent-color); font-size: 15px; }
.light-mode .fs-grid-card-icon { color: var(--accent-solid); }
.fs-grid-card-info { min-width: 0; }
.fs-grid-card-title { margin-bottom: 2px; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.fs-grid-card-desc { font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.4; }
.fs-grid-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.fs-grid-logout {
  height: 36px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-danger) 60%, transparent);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast);
}
.fs-grid-logout:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.fs-grid-version { font-size: var(--font-size-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Support row ------------------------------------------------------- */
.fs-coffee {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.fs-coffee-icon { flex: none; width: 20px; text-align: center; color: var(--accent-color); font-size: var(--font-size-lg); }
.light-mode .fs-coffee-icon { color: var(--accent-solid); }
.fs-coffee-info { flex: 1; min-width: 0; }
.fs-coffee-title { margin-bottom: 2px; font-weight: var(--font-weight-semibold); }
.fs-coffee-desc { font-size: var(--font-size-sm); color: var(--text-muted); }
.fs-coffee-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast);
}
.fs-coffee-btn:hover { background: var(--accent-hover); }

/* ---- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) and (min-width: 769px) {
  .full-settings__sidebar { width: 216px; }
  .full-settings__content-scroll { padding: 32px 32px 56px; }
}

/* ---- Phones: full-screen menu -> full-screen page --------------------- */
@media (max-width: 768px) {
  .full-settings {
    flex-direction: column;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation-name: v2-sheet-in;
  }
  .full-settings-overlay.closing .full-settings { animation-name: v2-sheet-out; }
  .full-settings__close { top: max(10px, env(safe-area-inset-top)); right: 10px; }
  .full-settings__close span { display: none; }
  .full-settings__sidebar { display: none; }
  .full-settings__content { min-height: 0; }

  .fs-grid-home { padding: calc(56px + env(safe-area-inset-top)) var(--space-md) calc(var(--space-2xl) + env(safe-area-inset-bottom)); }
  .fs-grid { grid-template-columns: 1fr; }
  .fs-grid-card { border-bottom: 1px solid var(--border-color); }
  .fs-grid-card:hover { background: none; }
  .fs-grid-card:active { background: var(--bg-secondary); }

  .full-settings__content-scroll {
    min-height: 0;
    max-width: none;
    padding: 0 var(--space-md) calc(var(--space-2xl) + env(safe-area-inset-bottom));
  }
  .full-settings__content-scroll > :first-child { margin-top: var(--space-md); }
  .full-settings__mobile-back {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-height: 56px;
    padding: env(safe-area-inset-top) 64px 0 var(--space-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
  }
  .full-settings__mobile-back i { font-size: 14px; color: var(--text-muted); }

  .fs-segmented { display: flex; }
  .fs-seg-option { flex: 1; padding: 0 10px; }
  .fs-field-row, .fs-toggle-row { gap: 16px; }
  .fs-coffee { flex-wrap: wrap; }
  .fs-coffee-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Special pieces
   ========================================================================== */

/* ---- My Account: banner + avatar --------------------------------------- */
/* The banner is the user's own colour, flat (js sets the background). */
.fs-account-banner { height: 88px; border-radius: var(--radius-lg); }
.fs-account-info { padding: 0 4px; }
.fs-account-avatar {
  position: relative;
  width: 76px;
  height: 76px;
  margin-top: -38px;
  margin-left: 16px;
  border: 4px solid var(--bg-primary);
  background: var(--bg-elevated);
  color: var(--accent-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.fs-account-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  border: 2px solid var(--bg-primary);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: 11px;
}

/* ---- Profiles: name, bio, banner colour, preview ----------------------- */
.fs-inline-input,
.fs-inline-textarea { width: 100%; }
.fs-inline-input { height: 44px; padding: 0 14px; border-radius: var(--radius-md); }
.fs-inline-textarea { min-height: 96px; padding: 12px 14px; border-radius: var(--radius-md); resize: vertical; line-height: var(--leading-normal); }
.fs-bio-count { margin-top: 6px; text-align: right; font-size: var(--font-size-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fs-color-inline { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: stretch; }
.fs-color-inline-preview {
  position: relative;
  min-height: 120px;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.fs-color-inline-hex {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--chip-on-media);
  color: var(--text-on-media);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.fs-color-inline-body { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.fs-color-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-color-preset {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: transform var(--transition-fast);
}
.fs-color-preset:hover { transform: scale(1.1); }
.fs-color-preset.active { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary); }
.fs-color-hex-row { display: flex; align-items: center; gap: 10px; }
.fs-color-hex-label { font-size: var(--font-size-xs); color: var(--text-muted); }
.fs-color-hex-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.fs-color-hex-field:focus-within { border-color: var(--accent-color); }
.fs-color-hex-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.fs-color-hex-input:hover, .fs-color-hex-input:focus { border: 0; }
.fs-color-hex-apply {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast);
}
.fs-color-hex-apply:hover { background: var(--accent-hover); }

.fs-profile-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  text-align: center;
}
.fs-profile-preview-avatar { width: 64px; height: 64px; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--accent-color); background: var(--bg-elevated); }
.fs-profile-preview-name { font-family: var(--font-display); font-stretch: 125%; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.fs-profile-preview-bio { max-width: 40ch; font-size: var(--font-size-sm); color: var(--text-secondary); }
.fs-profile-preview-bio:empty { display: none; }

/* ---- Privacy: public link, block list ---------------------------------- */
.fs-mono { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.fs-public-profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.fs-public-profile-url {
  flex: 1 1 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fs-public-profile-copy,
.fs-public-profile-card,
.fs-unblock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.fs-public-profile-copy { background: var(--accent-color); border-color: transparent; color: var(--accent-text); }
.fs-public-profile-copy:hover { background: var(--accent-hover); }
.fs-public-profile-card:hover,
.fs-unblock-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.fs-block-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.fs-block-item:last-child { border-bottom: 0; }
.fs-block-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fs-block-avatar { width: 32px; height: 32px; font-size: var(--font-size-xs); }

/* ---- Devices ----------------------------------------------------------- */
.fs-device-actions { margin-bottom: 16px; }
.fs-btn-logout-others {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-danger) 60%, transparent);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast);
}
.fs-btn-logout-others:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.fs-btn-logout-others:disabled { opacity: 0.5; }
.fs-devices-list { display: flex; flex-direction: column; }
.fs-device-loading { display: flex; align-items: center; gap: 10px; padding: 16px 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.fs-device-loading-spinner {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-round);
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-color);
  animation: fsSpin 800ms linear infinite;
}
@keyframes fsSpin { to { transform: rotate(360deg); } }
.fs-device-card { border-bottom: 1px solid var(--border-color); }
.fs-device-card:last-child { border-bottom: 0; }
.fs-device-card-glow, .fs-device-icon-pulse { display: none; }
.fs-device-card-inner { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.fs-device-icon-wrap { flex-shrink: 0; }
.fs-device-icon { width: 24px; text-align: center; color: var(--text-muted); font-size: 20px; }
.fs-device-card--current .fs-device-icon { color: var(--accent-color); }
.fs-device-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fs-device-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fs-device-name { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.fs-device-current-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); color: var(--accent-color); }
.fs-device-current-badge i { font-size: 6px; }
.fs-device-meta,
.fs-device-details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.fs-device-details { font-size: var(--font-size-xs); color: var(--text-muted); }
.fs-device-meta-item,
.fs-device-detail { display: inline-flex; align-items: center; gap: 6px; }
.fs-device-meta-sep { width: 3px; height: 3px; border-radius: var(--radius-round); background: var(--border-strong); }
.fs-device-actions-col { flex-shrink: 0; }
.fs-device-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.fs-device-logout-btn:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }

/* ---- Appearance: themes, logo, cosmetics ------------------------------- */
.fs-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.theme-option:hover { background: var(--bg-hover); }
.theme-option.active { border-color: var(--accent-color); }
.theme-option.locked { color: var(--text-muted); }
.theme-color-dot { flex: none; width: 14px; height: 14px; border-radius: var(--radius-round); }
.theme-color-dot.aether-star-host { display: inline-flex; align-items: center; justify-content: center; }
.theme-color-dot.aether-star-host svg { width: 14px; height: 14px; }
.theme-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-option .lock-icon { font-size: 11px; color: var(--text-muted); }

.fs-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.fs-logo-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.fs-logo-option:hover { background: var(--bg-hover); }
.fs-logo-option.active { border-color: var(--accent-color); }
.fs-logo-preview { display: flex; }
.fs-logo-label { font-size: var(--font-size-sm); color: var(--text-secondary); }
.fs-logo-option.active .fs-logo-label { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.fs-logo-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--font-size-sm); color: var(--text-muted); }

.fs-cosmetic-tile-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* ---- Keybinds + language ----------------------------------------------- */
.fs-keybind-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.fs-keybind-row:last-child { border-bottom: 0; }
.fs-keybind-action { font-size: var(--font-size-md); }
.fs-keybind-key {
  min-width: 64px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 -2px 0 var(--border-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.fs-keybind-key:hover { border-color: var(--accent-color); }
.fs-keybind-key.recording { border-color: var(--color-danger); color: var(--color-danger); }

.fs-language-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.fs-language-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  text-align: left;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.fs-language-option:hover { background: var(--bg-hover); }
.fs-language-option.active { border-color: var(--accent-color); }
.fs-lang-native { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.fs-lang-english { font-size: var(--font-size-xs); color: var(--text-muted); }

@media (max-width: 768px) {
  .fs-color-inline { grid-template-columns: 1fr; }
  .fs-color-inline-preview { min-height: 72px; }
  .fs-device-card-inner { flex-wrap: wrap; }
  .fs-device-actions-col { width: 100%; padding-left: 40px; }
}

/* The settings home names itself, so a phone user knows where they are. */
.fs-grid-title {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}
.fs-grid-title + .fs-grid-section-label { margin-top: 20px; }

/* A masked e-mail never breaks mid-word; it ellipsises instead. */
.fs-account-info .fs-field-info { min-width: 0; }
.fs-account-info .fs-field-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.fs-field-edit-btn i { font-size: 11px; }