/* ============================================================
   LUCRA SETTINGS — column, stage, dock (v7)
   ------------------------------------------------------------
   The single visual layer for the Settings page (FINAL-SPEC v7).
   Structure (Trading_Journal.html):
     .st-shell → .st-main (one .st-panel per category)
     .st-panel → .st-insp  the column: title, one line, groups of controls (no box)
               + .st-stage the stage: what the controls do — the live app, the account,
                           the receipt … — in the window's own proportions (layoutSettingsBand)
     .st-dock (fixed to the window's bottom edge, lives at the top of <body>): a glass
                capsule with the nine categories and the search as its own lens.
   Colour comes only from the app tokens (light / dark / grey and every accent pair):
   the accent paints controls, profit and loss paint P&L, status shows as a glyph and a
   word, everything else is neutral. Nothing grows or moves under the pointer.
   Control ids, persistence and business behaviour live in js/app.js.
   ============================================================ */

.page-settings,
.st-ov,
.st-dock {
  --st-col-gap: 40px;
  --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --st-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --st-hair: rgba(0, 0, 0, 0.07);
  --st-hair-w: 1px;
  --st-hint: var(--text-hint, #6E6E73);
  --st-line: var(--st-hair);
  --st-line-strong: color-mix(in srgb, var(--text) 14%, transparent);
  --st-hover: color-mix(in srgb, var(--text) 4%, transparent);
  --st-well: #F2F3F5;
  --st-well-edge: rgba(0, 0, 0, 0.05);
  --st-thumb: #FFFFFF;
  --st-thumb-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.10), 0 3px 8px -2px rgba(0, 0, 0, 0.10);
  --st-switch-off: rgba(0, 0, 0, 0.12);
  --st-ok: #248A3D;
  --st-warn: #B25E00;
  --st-destructive: #D70015;
  --st-danger: var(--st-destructive);
  --st-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  --st-stage-bg: #F5F6F8;
  --st-stage-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  --st-object-bg: #FFFFFF;
  --st-object-shadow: 0 0 0 1px rgba(15, 17, 21, 0.07), 0 1px 2px rgba(15, 17, 21, 0.05), 0 24px 48px -24px rgba(15, 17, 21, 0.22);
  --st-window-ring: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 24px 60px -28px rgba(15, 17, 21, 0.22);
  /* Dock glass (FINAL-SPEC Appendix B). */
  --dock-tint: rgba(246, 247, 249, 0.42);
  --dock-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(250, 251, 252, 0.62) 100%);
  --dock-rim-hi: rgba(255, 255, 255, 1);
  --dock-rim-lo: rgba(255, 255, 255, 0.55);
  --dock-edge: rgba(15, 17, 21, 0.09);
  --dock-depth: inset 0 -10px 18px -14px rgba(15, 17, 21, 0.10);
  --dock-shadow: 0 10px 30px -6px rgba(15, 17, 21, 0.16), 0 2px 8px rgba(15, 17, 21, 0.07);
  --dock-caustic: rgba(255, 255, 255, 0.90);
  --dock-glyph: rgba(29, 29, 31, 0.74);
  --dock-glyph-hover: rgba(29, 29, 31, 0.96);
  --dock-lens-hover: rgba(15, 17, 21, 0.05);
  --dock-lens-active: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 249, 0.92));
  --dock-lens-active-shadow: 0 0 0 0.5px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.10), 0 4px 10px -2px rgba(15, 17, 21, 0.10);
  --dock-label-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 252, 0.88));
  /* v6 names still used by the categories that keep their content this round, mapped onto
     the v7 materials (they resolve per theme through the tokens above). */
  --st-radius: 11px;
  --st-ctl-h: 40px;
  --st-field: var(--st-well);
  --st-field-line: var(--st-well-edge);
  --st-field-line-hover: var(--st-line-strong);
  --st-field-shadow: none;
  --st-btn: var(--st-well);
  --st-btn-hover: color-mix(in srgb, var(--text) 7%, var(--st-well));
  --st-seg: var(--st-well);
  --st-seg-on: var(--st-thumb);
  --st-chip: var(--st-well);
  --st-sheet: var(--st-object-bg);
  --st-sheet-line: var(--st-hair);
  --st-sheet-shadow: var(--st-object-shadow);
  --st-window-line: var(--st-hair);
  --st-window-shadow: var(--st-object-shadow);
  --st-ink: var(--text);
  --st-on-ink: var(--bg);
  /* Primary actions are ink, not accent: the accent belongs to profit, switches and focus. */
  --st-ink-btn: #1D1D1F;
  --st-ink-btn-text: #FFFFFF;
  --st-pop-bg: #FFFFFF;
  --st-pop-shadow: 0 0 0 1px rgba(15, 17, 21, 0.08), 0 2px 6px rgba(15, 17, 21, 0.06), 0 28px 60px -18px rgba(15, 17, 21, 0.28);
  --st-chip-bg: rgba(15, 17, 21, 0.055);
  --st-chip-bg-hover: rgba(15, 17, 21, 0.085);
  --st-seg-track: rgba(15, 17, 21, 0.055);
}
@media (min-resolution: 2dppx) {
  .page-settings, .st-ov, .st-dock { --st-hair-w: 0.5px; }
}

:root[data-theme="dark"] .page-settings,
:root[data-theme="dark"] .st-ov,
:root[data-theme="dark"] .st-dock {
  --st-hair: rgba(255, 255, 255, 0.08);
  --st-well: rgba(255, 255, 255, 0.045);
  --st-well-edge: rgba(255, 255, 255, 0.08);
  --st-thumb: linear-gradient(180deg, #2B313C, #242A33);
  --st-thumb-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.45);
  --st-switch-off: rgba(255, 255, 255, 0.16);
  --st-ok: #30D158;
  --st-warn: #FF9F0A;
  --st-destructive: #FF453A;
  --st-stage-bg: #161A21;
  --st-stage-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --st-ink-btn: #ECEEF2;
  --st-ink-btn-text: #0B0F18;
  --st-pop-bg: #1D222A;
  --st-pop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
  --st-chip-bg: rgba(255, 255, 255, 0.06);
  --st-chip-bg-hover: rgba(255, 255, 255, 0.10);
  --st-seg-track: rgba(255, 255, 255, 0.06);
  --st-object-bg: linear-gradient(180deg, #1E232C, #1A1F27);
  --st-object-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 34px 60px -28px rgba(0, 0, 0, 0.75);
  --st-window-ring: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -36px rgba(0, 0, 0, 0.9);
  --dock-tint: rgba(26, 30, 38, 0.56);
  --dock-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0.035) 100%);
  --dock-rim-hi: rgba(255, 255, 255, 0.62);
  --dock-rim-lo: rgba(255, 255, 255, 0.13);
  --dock-edge: rgba(255, 255, 255, 0.075);
  --dock-depth: inset 0 -10px 18px -14px rgba(0, 0, 0, 0.55);
  --dock-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.70), 0 2px 8px rgba(0, 0, 0, 0.45);
  --dock-caustic: rgba(255, 255, 255, 0.16);
  --dock-glyph: rgba(236, 238, 242, 0.70);
  --dock-glyph-hover: rgba(255, 255, 255, 0.98);
  --dock-lens-hover: rgba(255, 255, 255, 0.075);
  --dock-lens-active: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.075));
  --dock-lens-active-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.34), inset 0 -0.5px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.32);
  --dock-label-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05)), rgba(26, 30, 38, 0.86);
}

:root[data-shade="grey"] .page-settings,
:root[data-shade="grey"] .st-ov,
:root[data-shade="grey"] .st-dock {
  --st-hair: rgba(255, 255, 255, 0.10);
  --st-well: rgba(255, 255, 255, 0.06);
  --st-well-edge: rgba(255, 255, 255, 0.10);
  --st-thumb: linear-gradient(180deg, #5A5E66, #52565E);
  --st-thumb-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16), 0 1px 3px rgba(0, 0, 0, 0.30);
  --st-switch-off: rgba(255, 255, 255, 0.20);
  --st-destructive: #FF8078;
  --st-stage-bg: #43464D;
  --st-stage-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --st-ink-btn: #F2F3F5;
  --st-ink-btn-text: #2A2C31;
  --st-pop-bg: #4A4D55;
  --st-pop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  --st-chip-bg: rgba(255, 255, 255, 0.08);
  --st-chip-bg-hover: rgba(255, 255, 255, 0.12);
  --st-seg-track: rgba(255, 255, 255, 0.08);
  --st-object-bg: linear-gradient(180deg, #4C5058, #474B53);
  --st-object-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 50px -26px rgba(0, 0, 0, 0.5);
  --dock-tint: rgba(74, 77, 85, 0.62);
  --dock-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.045) 100%);
  --dock-rim-hi: rgba(255, 255, 255, 0.58);
  --dock-rim-lo: rgba(255, 255, 255, 0.14);
  --dock-edge: rgba(255, 255, 255, 0.10);
  --dock-depth: inset 0 -10px 18px -14px rgba(0, 0, 0, 0.35);
  --dock-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
  --dock-glyph: rgba(238, 240, 243, 0.74);
  --dock-glyph-hover: #FFFFFF;
  --dock-lens-hover: rgba(255, 255, 255, 0.09);
  --dock-lens-active: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.09));
  --dock-lens-active-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.36), inset 0 -0.5px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.24);
  --dock-label-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)), rgba(70, 73, 80, 0.92);
}
/* On the light stage the wells are white (the stage itself is the recessed grey). */
:root:not([data-theme="dark"]) .page-settings .st-stage { --st-well: #FFFFFF; --st-well-edge: rgba(0, 0, 0, 0.08); }

/* Every hidden element stays hidden. Several legacy component classes set their own
   display, which used to beat the UA [hidden] rule — e.g. the fee configuration and an
   "Effective total $0.00" stayed visible while cost tracking was switched OFF. */
.page-settings [hidden],
.st-ov[hidden],
.st-ov [hidden] { display: none !important; }

/* ── Shell and band ────────────────────────────────────────── */
/* The band runs from the panels' top to 120px above the window's bottom edge (dock and
   label live there); layoutSettingsBand() sizes the column and the stage. */
.page-settings { gap: 0; padding-bottom: 118px; }
.page-settings .st-shell { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.page-settings .st-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ── Panel: column | stage ─────────────────────────────────── */
.page-settings .st-panel:not(.is-active) { display: none; }
.page-settings .st-panel.is-active {
  display: grid;
  grid-template-columns: var(--st-col-w, 330px) var(--st-stage-w, minmax(0, 1fr));
  grid-template-rows: var(--st-stage-h, 100%);
  column-gap: var(--st-col-gap);
  align-items: start;
  padding-inline: var(--st-band-pad, 0px);
}
.page-settings .st-panel > .st-insp,
.page-settings .st-panel > .st-stage { min-width: 0; min-height: 0; height: 100%; }

/* A category switch: the column fades (160 ms), the stage fades and rises 8px (220 ms).
   The dock stands still. */
.page-settings .st-panel.is-switching > .st-insp { animation: st-fade-in 160ms var(--st-ease) both; }
.page-settings .st-panel.is-switching > .st-stage { animation: st-rise-in 220ms var(--st-ease) both; }
@keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Column ────────────────────────────────────────────────── */
.page-settings .st-insp {
  display: flex;
  flex-direction: column;
  /* Visible: the body below reaches 6px past the column on both sides so the selection rings of
     the tiles at its edges are drawn whole (a hidden overflow here cut their left edge). */
  overflow: visible;
}
.page-settings .st-head { flex: none; display: block; padding: 0; margin-top: -6px; border: 0; }
.page-settings .st-head-tile { display: none; }
.page-settings .st-head-text { min-width: 0; }
.page-settings .st-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.015em;
  outline: none;
}
.page-settings .st-subtitle { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 20px; letter-spacing: -0.005em; }
.page-settings .st-insp-body {
  --fade-top: 0px;
  --fade-bottom: 0px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 26px -8px 0 -6px;
  padding: 6px 8px 24px 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}
.page-settings .st-insp-body::-webkit-scrollbar { display: none; }
.page-settings .st-insp-body.has-more-above { --fade-top: 26px; }
.page-settings .st-insp-body.has-more-below { --fade-bottom: 40px; }

/* Groups: anchored from the top, a fixed 28px rhythm — never spread out. */
.page-settings .st-insp .st-group { padding: 0; border: 0; }
.page-settings .st-insp-body > * + * { margin-top: 28px; }
.page-settings .st-insp .st-group > * + * { margin-top: 12px; }
.page-settings .st-insp .st-group > .st-card-head + * { margin-top: 0; }
.page-settings .st-insp .st-group > .st-hint { margin-top: 8px; }

.page-settings .st-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 20px;
  margin: 0 0 12px;
}
.page-settings .st-card-title,
.page-settings .st-list-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
}
/* Right of a head only an action may stand (in the accent); quiet figures read as a
   continuation, never as grey meta in a corner. */
.page-settings .st-card-meta { margin-left: auto; color: var(--st-hint); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-settings .st-section-note { color: var(--st-hint); font-size: 12.5px; font-weight: 400; }
.page-settings .st-section-note strong { color: var(--text-2); font-weight: 600; }
.page-settings .st-head-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
}
.page-settings .st-head-action svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-head-action svg .is-fill { fill: currentColor; stroke: none; }
.page-settings .st-head-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-head-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Save state: one quiet line in the group head — "✓ Saved" fades out; a failure stays. */
.page-settings .st-card-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--st-ok);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: 0 2px;
  transition: opacity 160ms var(--st-ease), translate 160ms var(--st-ease);
  pointer-events: none;
}
.page-settings .st-card-meta + .st-card-status { margin-left: 10px; }
.page-settings .st-card-status svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-card-status.is-shown { opacity: 1; translate: 0 0; }
.page-settings .st-card-status.is-error { color: var(--st-destructive); opacity: 1; translate: 0 0; pointer-events: auto; }

/* ── The dock (FINAL-SPEC §5, Appendix B) ──────────────────── */
.st-glass {
  position: relative;
  isolation: isolate;
  background: var(--dock-sheen), var(--dock-tint);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: var(--dock-depth), 0 0 0 0.5px var(--dock-edge), var(--dock-shadow);
}
.st-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--dock-rim-hi) 0%, var(--dock-rim-lo) 18%, transparent 42%, transparent 62%, var(--dock-rim-lo) 86%, color-mix(in srgb, var(--dock-rim-hi) 70%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.st-glass::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -30%, var(--dock-caustic), transparent 58%);
  pointer-events: none;
}
.st-dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}
body:not(:has(.page-settings.is-active)) .st-dock,
body.auth-locked .st-dock,
body.auth-booting .st-dock { display: none; }
/* The app's modals live inside .app (a stacking context at z-index 1), so the body-portaled
   dock would paint — and catch clicks — ABOVE any open dialog. While one is open the dock
   yields; the page it navigates is behind the dialog anyway. */
body:has(.app .day-modal.is-open) .st-dock { opacity: 0; pointer-events: none; transition: opacity 120ms var(--st-ease); }
.st-dock-capsule { display: flex; height: 62px; padding: 0 5px; border-radius: 31px; }
.st-dock-item,
.st-dock-orb {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dock-glyph);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.st-dock-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 56px;
  height: 62px;
  padding: 0 13px;
}
.st-dock-item > i {
  position: absolute;
  inset: 6px 4px;
  border-radius: 25px;
  transition: background-color 140ms var(--st-ease), box-shadow 140ms var(--st-ease);
}
.st-dock-item svg,
.st-dock-orb svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 80ms var(--st-ease);
}
@media (hover: hover) {
  .st-dock-item:hover,
  .st-dock-orb:hover { color: var(--dock-glyph-hover); }
  .st-dock-item:hover > i { background: var(--dock-lens-hover); }
}
.st-dock-item:active svg,
.st-dock-orb:active svg { transform: scale(0.96); }
.st-dock-name {
  position: relative;
  z-index: 1;
  max-width: 128px;
  overflow: hidden;
  color: inherit;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.st-dock-item[aria-selected="true"] .st-dock-name { font-weight: 600; }
.st-dock-item[aria-selected="true"] { color: var(--accent); }
.st-dock-item[aria-selected="true"] > i { background: var(--dock-lens-active); box-shadow: var(--dock-lens-active-shadow); }
.st-dock-item:focus-visible,
.st-dock-orb:focus-visible { outline: none; }
.st-dock-item:focus-visible > i { box-shadow: 0 0 0 2px var(--accent); }
.st-dock-item[aria-selected="true"]:focus-visible > i { box-shadow: 0 0 0 2px var(--accent), var(--dock-lens-active-shadow); }
/* No dead zones: 8px above the glass, into the capsule padding, across the gap. */
.st-dock-item::after { content: ''; position: absolute; top: -8px; bottom: 0; left: 0; right: 0; }
.st-dock-item:first-child::after { left: -4px; }
.st-dock-item:last-child::after { right: -9px; }
.st-dock-orb { flex: none; width: 62px; height: 62px; border-radius: 50%; }
.st-dock-orb::after { content: ''; position: absolute; top: -8px; bottom: 0; left: -5px; right: 0; z-index: 4; }
.st-dock-orb[aria-expanded="true"] { color: var(--accent); }
.st-dock-orb:focus-visible { box-shadow: var(--dock-depth), 0 0 0 0.5px var(--dock-edge), var(--dock-shadow), 0 0 0 2px var(--accent); }
/* One label, above the glass, gliding from tab to tab (wireSettingsDock). */

/* ── Stage ─────────────────────────────────────────────────── */
.page-settings .st-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 48px;
  border: 0;
  border-radius: 20px;
  background: var(--st-stage-bg);
  box-shadow: var(--st-stage-shadow);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent;
}
/* A stage taller than the window scrolls and, like the column, fades out at the edge that has more
   (has-more-above / -below from settingsSyncScrollEdges): two sticky veils in the stage's own colour,
   so the stage keeps its edge and only the content fades. They take no room and no clicks. */
.page-settings .st-stage:not(.st-stage--preview)::before,
.page-settings .st-stage:not(.st-stage--preview)::after {
  content: '';
  position: sticky;
  z-index: 5;
  flex: none;
  align-self: stretch;
  display: block;
  pointer-events: none;
  opacity: 0;
}
.page-settings .st-stage:not(.st-stage--preview)::before { order: -1; top: 0; height: 26px; margin-bottom: -26px; background: linear-gradient(to bottom, var(--st-stage-bg), transparent); }
.page-settings .st-stage:not(.st-stage--preview)::after { order: 9999; bottom: 0; height: 40px; margin-top: -40px; background: linear-gradient(to top, var(--st-stage-bg), transparent); }
.page-settings .st-stage.has-more-above::before,
.page-settings .st-stage.has-more-below::after { opacity: 1; }
.page-settings .st-stage > * + * { margin-top: 40px; }
.page-settings .st-stage-head { flex: none; }
.page-settings .st-stage-title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
}
.page-settings .st-stage-title .st-cont,
.page-settings .st-card-title .st-cont { color: var(--st-hint); font-weight: 400; }
.page-settings .st-stage-sub { margin: 6px 0 0; max-width: 72ch; color: var(--st-hint); font-size: 13px; line-height: 18px; }
.page-settings .st-stage-sub:empty { display: none; }
.page-settings .st-stage-label { margin: 0; color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.page-settings .st-stage-note { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--st-hint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-settings .st-rule { flex: none; height: 0; margin: 0; border: 0; border-top: var(--st-hair-w) solid var(--st-hair); }

/* Objects on the stage: one lit surface per hero (receipt, account card, frames). */
.page-settings .st-object,
.page-settings .st-sheet-group {
  position: relative;
  flex: none;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  background: var(--st-object-bg);
  box-shadow: var(--st-object-shadow);
}
.page-settings .st-sheet-group { padding: 22px 24px 24px; }
.page-settings .st-sheet-group > .st-card-head { margin-bottom: 12px; }
.page-settings .st-sheet-group > * + * { margin-top: 12px; }
.page-settings .st-sheet-group > .st-card-head + * { margin-top: 0; }
.page-settings .st-sheet-group--grow { flex: 1 1 auto; }
.page-settings .st-sheet-row { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.page-settings .st-sheet-row > .st-sheet-group { display: flex; flex-direction: column; }
.page-settings .st-stage > .st-sheet-group + .st-sheet-group,
.page-settings .st-stage > .st-sheet-group + .st-sheet-row,
.page-settings .st-stage > .st-sheet-row + .st-sheet-group { margin-top: 20px; }

/* ── Rows and fields ───────────────────────────────────────── */
.page-settings .st-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  min-height: 40px;
}
.page-settings .st-row + .st-row { margin-top: 0; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-insp .st-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.page-settings .st-insp .st-row > .st-row-text { display: contents; }
.page-settings .st-insp .st-row > .st-row-text > .st-label { grid-column: 1; grid-row: 1; align-self: center; }
.page-settings .st-insp .st-row > .st-row-text > :not(.st-label) { grid-column: 1 / -1; }
.page-settings .st-insp .st-row > .st-row-control { grid-column: 2; grid-row: 1; align-self: center; }
.page-settings .st-insp .st-row .st-btn { height: 32px; padding: 0 14px; font-size: 13px; }
.page-settings .st-row-text { min-width: 0; }
.page-settings .st-label { display: inline; color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; }
.page-settings .st-label strong { font-weight: 600; }
.page-settings .st-hint { display: block; margin: 4px 0 0; max-width: 76ch; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-row-control { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.page-settings .st-row-control--end { align-items: flex-end; }
.page-settings .st-readout { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-readout:empty { display: none; }
.page-settings .st-value { color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.page-settings .st-value--figure { font-size: 15px; font-weight: 600; }
.page-settings .st-value--box { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 11px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
.page-settings .st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-settings .st-rows { display: block; }

.page-settings .st-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.page-settings .st-field + .st-field { margin-top: 16px; }
.page-settings .st-field-label { color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 18px; }
.page-settings .st-field .st-hint { margin-top: 0; }
.page-settings .st-field-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-settings .st-fields { display: grid; gap: 16px 12px; }
.page-settings .st-fields > .st-field + .st-field { margin-top: 0; }
.page-settings .st-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-settings .st-fields--2 > .st-field--wide { grid-column: 1 / -1; }
/* A refused financial entry: the field keeps the saved value, this line says what to enter. */
.page-settings .st-field-error { margin: 8px 0 0; color: var(--st-danger); font-size: 12.5px; line-height: 17px; }
.page-settings .st-field > .st-field-error { margin: 0; }
.page-settings .st-field-error[hidden] { display: none; }

/* Row lists: label left, value right, a hairline across the full width. */
.page-settings .st-kv { display: grid; gap: 0; margin: 0; }
.page-settings .st-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-kv > div:first-child { border-top: 0; }
.page-settings .st-kv dt { color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-kv dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.page-settings .st-kv dd.is-unknown,
.page-settings .st-unknown { color: var(--st-hint); font-style: italic; font-weight: 400; }

/* Figures in a row (storage, account facts): equal columns, hairline separators. */
.page-settings .st-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin: 0; }
.page-settings .st-facts > div { min-width: 0; padding: 2px 20px 2px 0; }
.page-settings .st-facts > div + div { padding-left: 20px; border-left: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-facts dt { color: var(--st-hint); font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-settings .st-facts dd { margin: 6px 0 0; color: var(--text); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-settings .st-facts dd.is-pos { color: var(--pos); }
.page-settings .st-facts dd.is-neg { color: var(--neg); }

/* ── Controls (FINAL-SPEC §4) ──────────────────────────────── */
/* Field: 40 high, radius 11, a well with a hairline edge. Placeholders never read "$0.00". */
.page-settings .st-input,
.page-settings .st-select select,
.st-ov .st-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--st-well);
  box-shadow: inset 0 0 0 1px var(--st-well-edge);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  transition: box-shadow 150ms var(--st-ease), background 150ms var(--st-ease);
}
.page-settings .st-input::placeholder { color: var(--st-hint); opacity: 1; font-weight: 400; }
.page-settings .st-input:focus,
.page-settings .st-select select:focus,
.st-ov .st-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), var(--st-ring);
}
.page-settings .st-input[readonly] { color: var(--text-2); }
.page-settings .st-input:disabled,
.page-settings .st-select select:disabled { opacity: 0.45; cursor: not-allowed; }
.page-settings .st-input--num { font-variant-numeric: tabular-nums; }
.page-settings .st-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.page-settings .st-input[type="number"]::-webkit-inner-spin-button,
.page-settings .st-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.page-settings .st-input--code { max-width: 120px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.page-settings .st-textarea { height: auto; min-height: 150px; padding: 11px 14px; line-height: 1.5; resize: vertical; }

.page-settings .st-select { position: relative; display: block; min-width: 0; }
.page-settings .st-select select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.page-settings .st-select svg {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  translate: 0 -50%;
  fill: none;
  stroke: var(--st-hint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.page-settings .st-affix { position: relative; display: block; }
.page-settings .st-affix-text {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  color: var(--st-hint);
  font-size: 15px;
  pointer-events: none;
}
.page-settings .st-affix .st-input { padding-left: 28px; }
.page-settings .st-affix--suffix .st-affix-text { left: auto; right: 14px; }
.page-settings .st-affix--suffix .st-input { padding-left: 14px; padding-right: 44px; }
.page-settings .st-affix--mini { width: 96px; flex: none; }
.page-settings .st-affix--mini .st-input { height: 36px; text-align: right; font-weight: 600; }

.page-settings .st-inline { display: flex; align-items: center; gap: 8px; }
.page-settings .st-inline .st-input { flex: 1 1 auto; min-width: 0; }

/* Switch: 44 × 26, the accent when on; the knob stretches while pressed. */
.page-settings .st-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 13px;
  background: var(--st-switch-off);
  cursor: pointer;
  transition: background 200ms var(--st-spring);
}
.page-settings .st-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  transition: transform 200ms var(--st-spring), width 200ms var(--st-spring);
}
.page-settings .st-switch:active::before { width: 26px; }
.page-settings .st-switch:checked { background: var(--accent); }
.page-settings .st-switch:checked::before { transform: translateX(18px); }
.page-settings .st-switch:checked:active::before { transform: translateX(14px); }
.page-settings .st-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-settings .st-switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* Segmented control — native radios (density, language, date format), role buttons (risk
   unit). 36 high; the thumb is one element that glides to the checked option. */
.page-settings .st-seg,
.st-ov .st-seg {
  --seg-n: 2;
  --seg-i: 0;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: 0;
  height: 36px;
  padding: 3px;
  border-radius: 11px;
  background: var(--st-well);
  box-shadow: inset 0 0 0 1px var(--st-well-edge);
}
.page-settings .st-seg::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--seg-n));
  border-radius: 8px;
  background: var(--st-thumb);
  box-shadow: var(--st-thumb-shadow);
  transform: translateX(calc(var(--seg-i) * 100%));
  transition: transform 260ms var(--st-spring);
}
.page-settings .st-seg:not(:has(input:checked, .active, .is-active, [aria-checked="true"]))::before { opacity: 0; }
.page-settings .st-seg:has(> :nth-child(3)) { --seg-n: 3; }
.page-settings .st-seg:has(> :nth-child(4)) { --seg-n: 4; }
.page-settings .st-seg:has(> :nth-child(2) input:checked, > :nth-child(2).active, > :nth-child(2).is-active, > :nth-child(2)[aria-checked="true"]) { --seg-i: 1; }
.page-settings .st-seg:has(> :nth-child(3) input:checked, > :nth-child(3).active, > :nth-child(3).is-active, > :nth-child(3)[aria-checked="true"]) { --seg-i: 2; }
.page-settings .st-seg:has(> :nth-child(4) input:checked, > :nth-child(4).active, > :nth-child(4).is-active, > :nth-child(4)[aria-checked="true"]) { --seg-i: 3; }
.page-settings .st-seg:has(> :nth-child(5)) { --seg-n: 5; }
.page-settings .st-seg:has(> :nth-child(6)) { --seg-n: 6; }
.page-settings .st-seg:has(> :nth-child(5) input:checked, > :nth-child(5).active, > :nth-child(5)[aria-checked="true"]) { --seg-i: 4; }
.page-settings .st-seg:has(> :nth-child(6) input:checked, > :nth-child(6).active, > :nth-child(6)[aria-checked="true"]) { --seg-i: 5; }
/* Equal options: the thumb is 1/n of the track, so every option is exactly that wide — as wide
   as the widest one (a grid of equal columns, not flex shares of unequal labels). */
.page-settings .st-seg,
.st-ov .st-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); }
.page-settings .st-seg--fill { display: grid; grid-auto-columns: minmax(0, 1fr); }
.page-settings .st-seg--fill { display: flex; }
.page-settings .st-seg--fill > * { flex: 1 1 0; }
.page-settings .st-seg-opt { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.page-settings .st-seg-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.page-settings .st-seg-opt span,
.page-settings .st-seg .risk-unit-seg {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: color 160ms var(--st-ease);
}
.page-settings .st-seg-opt:hover span,
.page-settings .st-seg .risk-unit-seg:hover { color: var(--text); transform: none; }
.page-settings .st-seg-opt input:checked + span,
.page-settings .st-seg .risk-unit-seg.active { color: var(--text); font-weight: 600; background: transparent; box-shadow: none; }
.page-settings .st-seg-opt input:focus-visible + span,
.page-settings .st-seg .risk-unit-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.page-settings .st-seg--unit { flex: none; }
.page-settings .st-seg--unit .risk-unit-seg { padding: 0 12px; }

/* Appearance subtitle: "on the right" beside the preview, "below" where it stacks (≤ 1180 px). */
.page-settings .st-sub-narrow { display: none; }

/* Stepper: [− value +] in a capsule; the hit areas grow to 44 high by padding. */
.page-settings .st-stepper {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 999px;
  background: var(--st-well);
  box-shadow: inset 0 0 0 1px var(--st-well-edge);
  transition: box-shadow 150ms var(--st-ease);
}
/* The number in the middle is a field: focused, the capsule takes the fields' focus ring. */
.page-settings .st-stepper:has(input:focus) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), var(--st-ring);
}
.page-settings .st-stepper button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 36px;
  margin-block: -4px;
  padding: 4px 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.page-settings .st-stepper button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.page-settings .st-stepper button:hover { color: var(--text); }
.page-settings .st-stepper button:disabled { opacity: 0.35; cursor: default; }
.page-settings .st-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-settings .st-stepper output,
.page-settings .st-stepper input {
  min-width: 64px;
  width: 64px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.page-settings .st-stepper input:focus { outline: none; }
.page-settings .st-stepper input::-webkit-inner-spin-button,
.page-settings .st-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Buttons: capsules. Primary = the accent with its own ink; tinted = 14 % accent; quiet =
   text; destructive = red text, never filled. No coloured glow under a button. */
.page-settings .st-btn,
.st-ov .st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--st-well);
  box-shadow: inset 0 0 0 1px var(--st-well-edge);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: background 150ms var(--st-ease), color 150ms var(--st-ease), opacity 150ms var(--st-ease), filter 120ms var(--st-ease), scale 80ms var(--st-ease);
}
.page-settings .st-btn svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-btn:hover { background: color-mix(in srgb, var(--text) 7%, var(--st-well)); transform: none; }
.page-settings .st-btn:active { scale: 0.98; }
.page-settings .st-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--st-well-edge), 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.page-settings .st-btn:disabled { opacity: 0.45; cursor: not-allowed; scale: 1; }
.page-settings .st-btn--primary,
.st-ov .st-btn--primary,
.page-settings .st-ac .st-btn--primary {
  height: 40px;
  padding: 0 20px;
  background: var(--st-ink-btn);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  color: var(--st-ink-btn-text);
  font-size: 14px;
}
.page-settings .st-stage .st-btn--primary { height: 38px; }
.page-settings .st-btn--primary:hover { background: var(--st-ink-btn); filter: none; opacity: 0.88; }
.page-settings .st-btn--primary:active { opacity: 0.8; }
.page-settings .st-btn--primary:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.page-settings .st-btn--soft { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: none; color: var(--accent-text, var(--accent)); }
.page-settings .st-btn--soft:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.page-settings .st-btn--soft svg { fill: currentColor; stroke: none; width: 12px; height: 12px; }
.page-settings .st-btn--quiet { background: transparent; box-shadow: none; color: var(--text-2); }
.page-settings .st-btn--quiet:hover { background: var(--st-hover); color: var(--text); }
.page-settings .st-btn--danger { background: transparent; box-shadow: none; padding: 0 2px; color: var(--st-destructive); font-size: 14px; font-weight: 500; }
.page-settings .st-btn--danger:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-btn--danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-destructive) 30%, transparent); }
.page-settings .st-btn.is-inert { cursor: default; opacity: 0.62; pointer-events: none; }
.page-settings .support-cancel-btn,
.page-settings .support-send-btn { width: auto; align-self: auto; }
.page-settings .support-cancel-btn .support-cancel-label { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.page-settings .st-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
}
.page-settings .st-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.page-settings .st-icon-btn,
.st-ov .st-icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--st-well);
  box-shadow: inset 0 0 0 1px var(--st-well-edge);
  color: var(--text-2);
  cursor: pointer;
  transition: background 150ms var(--st-ease), color 150ms var(--st-ease);
}
.page-settings .st-icon-btn svg,
.st-ov .st-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-icon-btn:hover,
.st-ov .st-icon-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, var(--st-well)); }
.page-settings .st-icon-btn:focus-visible,
.st-ov .st-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pro-gated action (restore): visible, explained, never opens the file picker. */
.page-settings .st-btn.is-locked { opacity: 0.55; cursor: not-allowed; }
.page-settings .st-pro-mark {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  color: var(--st-hint);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}
.page-settings .st-pro-mark svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.page-settings .st-row:has(#settings-restore-data.is-locked) .st-pro-mark { display: inline-flex; }

.page-settings .st-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: none;
  border-radius: 4px;
}
.page-settings .st-link:hover { color: var(--accent-text, var(--accent)); transform: none; }
.page-settings .st-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Selection tiles (colour theme, density, transitions): a picture, a label under it. */
.page-settings .st-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
}
.page-settings .st-tile-pic {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--st-hair);
  transition: box-shadow 120ms var(--st-ease);
}
@media (hover: hover) {
  .page-settings .st-tile:hover .st-tile-pic { box-shadow: 0 0 0 1px var(--border-strong); }
}
.page-settings .st-tile.is-active,
.page-settings .st-tile[aria-checked="true"],
.page-settings .st-tile:has(input:checked) { color: var(--text); font-weight: 600; }
.page-settings .st-tile.is-active .st-tile-pic,
.page-settings .st-tile[aria-checked="true"] .st-tile-pic,
.page-settings .st-tile:has(input:checked) .st-tile-pic { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.page-settings .st-tile:focus-visible,
.page-settings .st-tile:has(input:focus-visible) { outline: none; }
.page-settings .st-tile:focus-visible .st-tile-pic,
.page-settings .st-tile:has(input:focus-visible) .st-tile-pic { outline: 1.5px dashed var(--accent); outline-offset: -6px; }

/* ── General: who the journal belongs to, what it holds, how LUCRA writes ── */
.page-settings .st-stage--general > * + * { margin-top: 0; }
.page-settings .st-gen-id { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; min-height: 74px; }
.page-settings .st-gen-who { min-width: 0; }
.page-settings .st-gen-name {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-settings .st-gen-account { margin: 6px 0 0; color: var(--text-2); font-size: 15px; line-height: 22px; }
.page-settings .st-gen-plan { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.page-settings .st-gen-plan-title { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; }
.page-settings .st-gen-plan-detail { margin: 0; color: var(--st-hint); font-size: 13px; line-height: 18px; }
.page-settings .st-gen-plan-detail:empty { display: none; }
.page-settings .st-gen-plan-action { margin-top: 4px; }
.page-settings .st-stage--general > .st-rule { margin-top: 52px; }
.page-settings .st-stage--general > .st-gen-section { margin-top: 40px; }
.page-settings .st-gen-section > .st-stage-title { margin-bottom: 24px; }
/* Both figure rows share one grid of four equal columns, so their dividers line up. */
.page-settings .st-gen-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-settings .st-gen-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 24px; border-left: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-gen-cell:first-child { padding-left: 0; border-left: 0; }
.page-settings .st-gen-value {
  color: var(--text);
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.page-settings .st-gen-sample {
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-settings .st-gen-sample.is-long { font-size: 18px; line-height: 28px; }
.page-settings .st-gen-label { color: var(--st-hint); font-size: 13px; line-height: 18px; }
.page-settings .st-gen-timeline { height: 56px; margin-top: 32px; }
.page-settings .st-gen-timeline svg { display: block; overflow: visible; }
.page-settings .st-gen-timeline rect { fill: color-mix(in srgb, var(--text) 45%, transparent); }
.page-settings .st-gen-timeline text { fill: var(--st-hint); font-size: 11px; font-weight: 500; }
.page-settings .st-gen-empty { margin: 0; padding-top: 18px; color: var(--st-hint); font-size: 14px; }

/* ── Appearance ────────────────────────────────────────────── */
/* Colour theme: four miniatures of the dashboard (16:10) in a row, 10 apart. */
.page-settings .st-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.page-settings .st-theme-pic { aspect-ratio: 16 / 10; background: var(--st-well); }
.page-settings .st-theme-pic svg { display: block; width: 100%; height: 100%; }

/* Accent: seven dots, each pair split diagonally (profit top left, loss bottom right) in
   its colours of the current theme; the choice is named under the row. The ring is ink,
   not accent, so it never melts into the dot. */
.page-settings .st-accent-select { display: none; }
.page-settings .st-swatches { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.page-settings .st-swatches button {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: box-shadow 120ms var(--st-ease);
}
.page-settings .st-swatches button i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-pos, var(--pos-mark)) 0 calc(50% - 0.6px), var(--bg) calc(50% - 0.6px) calc(50% + 0.6px), var(--sw-neg, var(--neg-mark)) calc(50% + 0.6px) 100%);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.16);
}
.page-settings .st-swatches button i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.32), transparent 46%);
}
.page-settings .st-swatches button.is-active { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--text); }
.page-settings .st-swatches button:focus-visible { outline: 1.5px dashed var(--accent); outline-offset: 6px; }
.page-settings .st-accent-name { margin: 14px 0 0; color: var(--text); font-size: 13px; line-height: 18px; }
.page-settings .st-accent-name strong { font-weight: 600; }
.page-settings .st-accent-name .st-cont { color: var(--st-hint); font-weight: 400; }
.page-settings .st-insp .st-group > .st-accent-name { margin-top: 14px; }

/* Table density: two tiles with the real table's head and whole rows at half size. */
.page-settings .st-density { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-settings .st-density-opt { position: relative; }
.page-settings .st-density-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.page-settings .st-density-pic { position: relative; height: 76px; overflow: hidden; background: var(--surface); }
.page-settings .st-density-table { position: absolute; left: 0; top: 0; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; }
.page-settings .st-density-table .tp-table { margin: 0; }

/* Page transitions: two tiles with the dashboard's first two KPI cards, finished at rest. */
.page-settings .st-motion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-settings .st-motion-pic { height: 56px; background: var(--bg); }
.page-settings .st-motion-row {
  position: absolute;
  left: 8px;
  top: 8px;
  display: grid;
  grid-template-columns: 270px 270px;
  gap: 10px;
  width: 550px;
  margin: 0;
  transform: scale(0.3);
  transform-origin: 0 0;
  pointer-events: none;
}
.page-settings .st-motion-row > .card { animation: none; }
@media (hover: hover) {
  .page-settings .st-motion-opt[data-motion="on"]:hover .st-motion-row > .card { animation: st-mo-soft 1.65s cubic-bezier(0.33, 1, 0.68, 1) infinite both; }
  .page-settings .st-motion-opt[data-motion="on"]:hover .st-motion-row > .card:nth-child(2) { animation-delay: 60ms; }
  .page-settings .st-motion-opt[data-motion="off"]:hover .st-motion-row > .card { animation: st-mo-hard 1.65s steps(1, end) infinite both; }
}
@keyframes st-mo-soft {
  0% { opacity: 0; transform: translateY(6px); }
  11.5%, 100% { opacity: 1; transform: none; }
}
@keyframes st-mo-hard {
  0% { opacity: 0; }
  8%, 100% { opacity: 1; }
}

/* The preview is the stage: the copied window fills it edge to edge (no frame around a
   frame). Its tabs and the full-screen button sit where the window has its navigation
   handle — placeSettingsPreviewTabs() puts the bar's centre on the handle's. */
.page-settings .st-stage--preview {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--st-window-line);
  background: var(--bg);
  box-shadow: var(--st-window-shadow);
}
.page-settings .st-stage--preview > * { margin: 0; }
.page-settings .st-stage--preview > .st-pv-frame { position: absolute; inset: 0; display: grid; place-items: end center; }
.page-settings .st-stage--preview > .st-pv-frame > .st-pv-fit { border-radius: 0; background: transparent; box-shadow: none; }
.page-settings .st-pv-bar {
  position: absolute;
  left: var(--pv-tabs-x, 50%);
  top: var(--pv-tabs-y, 22px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 0 0 0.5px var(--border-strong), 0 8px 24px -10px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}
.page-settings .st-pv-tabs { display: flex; gap: 2px; }
.page-settings .st-pv-tabs .st-pv-tab {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.page-settings .st-pv-tabs .st-pv-tab:hover { color: var(--text); }
.page-settings .st-pv-tabs .st-pv-tab.is-active { background: var(--text); color: var(--bg); }
.page-settings .st-pv-tabs .st-pv-tab:focus-visible,
.page-settings .st-pv-fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-settings .st-pv-fs-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  box-shadow: inset 1px 0 0 0 var(--border);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.page-settings .st-pv-fs-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.page-settings .st-pv-fs-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-pv-frame,
.st-ov .st-pv-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.page-settings .st-pv-fit,
.st-ov .st-pv-fit {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--st-window-line), var(--st-window-shadow);
}
.st-pv-app {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--bg);
  pointer-events: none;
  user-select: none;
}
.st-pv-app .st-pv-abs { position: absolute !important; margin: 0 !important; }
.st-pv-app .st-pv-page {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vh, 14px);
  min-height: 0;
  overflow: hidden;
}
.st-pv-app .topbar { z-index: 1; }
.st-pv-app .st-pv-brand { color: var(--text); font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: 0.10em; text-transform: uppercase; }
.st-pv-app .st-pv-pro { display: block; color: var(--accent-text); font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.st-pv-app .st-pv-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 2px var(--surface);
  color: var(--on-accent);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
}
.st-pv-app .st-pv-fab { width: auto !important; }
/* The copy never plays the page entrance on its own — only "Play preview" does. */
.page.is-entering .st-pv-app :is(.kpi-row > .card, .dashboard-grid > .card, .dashboard-grid > aside > .card, .tp-header, .tp-overview-card, .tp-filters, .tp-table-card) { animation: none; }
.st-pv-frame.is-replay .st-pv-app :is(.kpi-row > .card, .dashboard-grid > .card, .dashboard-grid > aside > .card, .tp-header, .tp-overview-card, .tp-filters, .tp-table-card) {
  animation: page-item-in calc(var(--page-transition-duration, 480ms) * 0.58) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}
:root.reduced-page-motion .st-pv-frame.is-replay .st-pv-app :is(.kpi-row > .card, .dashboard-grid > .card, .dashboard-grid > aside > .card, .tp-header, .tp-overview-card, .tp-filters, .tp-table-card) { animation-duration: 1ms; animation-delay: 0ms; }

/* Full-screen preview. */
.st-pv-full {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px 24px 26px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
.st-pv-full.is-open { animation: st-fade-in 200ms var(--ease-out) both; }
@keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
.st-pv-full-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-pv-full-themes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--st-seg); box-shadow: inset 0 0 0 1px var(--st-line); }
.st-pv-full-theme {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.st-pv-full-theme:hover { color: var(--text); }
.st-pv-full-theme.is-active { background: var(--st-seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(15, 17, 21, 0.10), 0 0 0 0.5px rgba(15, 17, 21, 0.06); }
.st-pv-full-theme:focus-visible { outline: 2px solid var(--pos); outline-offset: 1px; }
body.st-pv-full-open #user-avatar-btn,
body.st-pv-full-open #user-pro-chip,
body.st-pv-full-open .lucra-fab-wrap { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Trading accounts ──────────────────────────────────────── */
/* The list: compact rows (60), the open one on a quiet ground exactly the column's width. */
.page-settings .st-acct-list { display: grid; gap: 2px; }
.page-settings .st-acct-list .account-row { position: relative; display: block; }
.page-settings .st-acct-list .account-option {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: none;
  transition: background 140ms var(--st-ease);
}
.page-settings .st-acct-list .account-option:hover { background: var(--st-hover); transform: none; box-shadow: none; }
.page-settings .st-acct-list .account-option.active { background: color-mix(in srgb, var(--text) 6%, transparent); }
:root:not([data-theme="dark"]) .page-settings .st-acct-list .account-option.active { background: #F2F3F5; }
.page-settings .st-acct-list .account-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-settings .st-acct-spark { display: block; width: 40px; height: 24px; }
.page-settings .st-acct-spark svg { display: block; overflow: visible; }
.page-settings .st-acct-spark path { fill: none; stroke: var(--text-2); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.page-settings .st-acct-spark circle { fill: var(--text-2); }
.page-settings .st-acct-spark circle.is-pos { fill: var(--pos-mark); }
.page-settings .st-acct-spark circle.is-neg { fill: var(--neg-mark); }
.page-settings .st-acct-list .account-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-settings .st-acct-list .account-copy strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.page-settings .st-acct-list .account-copy small { overflow: hidden; color: var(--st-hint); font-size: 12.5px; line-height: 17px; overflow-wrap: break-word; }
.page-settings .st-acct-list .account-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }
.page-settings .st-acct-list .account-net { color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; }
.page-settings .st-acct-list .account-net.is-pos { color: var(--pos); }
.page-settings .st-acct-list .account-net.is-neg { color: var(--neg); }
.page-settings .st-acct-list .account-balance { color: var(--st-hint); font-size: 12.5px; font-weight: 400; line-height: 17px; }
.page-settings .st-acct-add {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.page-settings .st-acct-add:hover { background: var(--st-hover); }
.page-settings .st-acct-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-settings .st-acct-add-ic { width: 24px; height: 24px; margin: 0 8px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.page-settings .st-acct-add-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.page-settings .st-insp-body > .st-acct-remove { margin-top: 32px; }
.page-settings .st-acct-remove .st-btn--danger { height: auto; padding: 0; }
.page-settings .st-acct-remove .st-hint { margin-top: 6px; }

/* The stage: the account card with the rules beside it, the daily loss limit below. */
.page-settings .st-stage--account > * + * { margin-top: 0; }
.page-settings .st-acct-top { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 414fr); column-gap: 40px; align-items: stretch; }
/* The card takes its column's width and its height from the 16:10 ratio. Stretched to the row
   instead (whenever the rules beside it are taller), a grid item with a ratio derives its width
   from that height and grows over the rules column. */
.page-settings .st-acct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  align-self: start;
  margin: 0;
  aspect-ratio: 16 / 10;
  padding: 28px;
  /* Visible (it was hidden): a 16:10 box keeps its content as its minimum height only while nothing
     clips it — WebKit treats clip like hidden — so where 16:10 is too short for the content (a phone,
     a ~760px window) the card now grows instead of squeezing the curve to nothing and cutting its
     last line. Everything inside sits in the padding; the name truncates on its own. */
  overflow: visible;
  border-radius: 20px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 55%), linear-gradient(155deg, #2A303A 0%, #1E232B 48%, #252B35 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 56px -24px rgba(0, 0, 0, 0.80), 0 2px 6px rgba(0, 0, 0, 0.35);
}
:root:not([data-theme="dark"]) .page-settings .st-acct-card {
  background: linear-gradient(155deg, #FFFFFF 0%, #F3F4F7 55%, #ECEEF2 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 17, 21, 0.06), 0 18px 40px -18px rgba(15, 17, 21, 0.22), 0 1px 2px rgba(15, 17, 21, 0.06);
}
:root[data-shade="grey"] .page-settings .st-acct-card { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 55%), linear-gradient(155deg, #555963 0%, #4A4E57 48%, #50545D 100%); }
.page-settings .st-acct-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; }
.page-settings .st-acct-card-head span + span { color: var(--text-2); font-size: 13px; font-weight: 500; }
.page-settings .st-acct-card-curve { position: relative; flex: 1 1 auto; min-height: 56px; margin: 18px 0 16px; }
.page-settings .st-acct-card-curve svg { position: absolute; inset: 0; display: block; overflow: visible; }
.page-settings .st-acct-card-curve path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.page-settings .st-acct-card-curve .st-eng-light { stroke: rgba(0, 0, 0, 0.55); }
.page-settings .st-acct-card-curve .st-eng-line { stroke: rgba(236, 238, 242, 0.62); }
.page-settings .st-acct-card-curve .st-eng-neg { stroke: color-mix(in srgb, var(--neg-mark) 85%, transparent); }
:root:not([data-theme="dark"]) .page-settings .st-acct-card-curve .st-eng-light { stroke: rgba(255, 255, 255, 0.95); }
:root:not([data-theme="dark"]) .page-settings .st-acct-card-curve .st-eng-line { stroke: rgba(29, 29, 31, 0.42); }
.page-settings .st-acct-card-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
/* The account's result is never shortened. Beside it the name gets the room the result's note does
   not need: the note ("after known costs · 233 trades") wraps under the figure before the name is
   cut — at 1280–1366 px the note's width alone cut "FTMO Challe…" while the figure's line had room.
   Only a card too narrow for the whole name and the figure moves the figure below the name; a name
   longer than the whole card still ends in "…". Both start at their narrowest (the name, the
   figure); the result's side grows first, up to its one-line width, the name's side takes the rest. */
.page-settings .st-acct-card-foot > div { flex: 1 1 auto; width: min-content; max-width: 100%; min-width: 0; }
.page-settings .st-acct-card-foot > .st-acct-card-net { flex: 100 0 auto; max-width: max-content; margin-left: auto; }
.page-settings .st-acct-card-name { margin: 0; overflow: hidden; color: var(--text); font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.015em; white-space: nowrap; text-overflow: ellipsis; }
.page-settings .st-acct-card-start { margin: 2px 0 0; color: var(--text-2); font-size: 13px; line-height: 18px; }
.page-settings .st-nowrap { white-space: nowrap; }
.page-settings .st-acct-card-net { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.page-settings .st-acct-card-net strong { color: var(--text); font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-settings .st-acct-card-net strong.is-pos { color: var(--pos); }
.page-settings .st-acct-card-net strong.is-neg { color: var(--neg); }
.page-settings .st-acct-card-net strong.is-none { color: var(--text-2); }
.page-settings .st-acct-card-net span { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-acct-rules { display: flex; flex-direction: column; min-width: 0; }
.page-settings .st-acct-rules > .st-field + .st-field { margin-top: 18px; }
.page-settings .st-acct-rules .st-readout { margin-top: 2px; color: var(--text-2); }
.page-settings .st-acct-facts { margin-top: auto; padding-top: 16px; }
.page-settings .st-acct-facts > div { min-height: 30px; }
.page-settings .st-acct-facts dt { color: var(--text-2); font-size: 13px; }
.page-settings .st-acct-facts dd { font-size: 13px; }
.page-settings .st-acct-facts dd.is-pos { color: var(--pos); }
.page-settings .st-acct-facts dd.is-neg { color: var(--neg); }
.page-settings .st-acct-cost-link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.page-settings .st-acct-cost-link.is-unknown { color: var(--st-hint); font-style: italic; font-weight: 400; }
.page-settings .st-acct-cost-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-acct-cost-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.page-settings .st-stage--account > .st-rule { margin-top: 32px; }
.page-settings .st-stage--account > .st-acct-limit { margin-top: 32px; }
.page-settings .st-acct-limit > .st-stage-title { margin-bottom: 18px; }
.page-settings .st-acct-limit-body { display: grid; grid-template-columns: minmax(0, 280fr) minmax(0, 168fr) minmax(0, 446fr); column-gap: 28px; align-items: start; }
.page-settings .st-affix--both .st-input { padding-right: 84px; }
.page-settings .st-affix-end { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--st-hint); font-size: 13px; pointer-events: none; }
.page-settings .st-acct-limit-side .st-readout { display: block; margin-top: 8px; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-acct-limit-side .st-hint { margin-top: 4px; }
.page-settings .st-dl-meter { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.page-settings .st-dl-count { color: var(--text); font-size: 48px; font-weight: 600; line-height: 52px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.page-settings .st-dl-label { min-width: 0; color: var(--text-2); font-size: 13px; line-height: 18px; }
.page-settings .st-dl-meter .st-hint:empty { display: none; }
.page-settings .st-dl-chart { min-width: 0; height: 148px; }
.page-settings .st-dl-chart svg { display: block; overflow: visible; }
.page-settings .st-dl-chart .st-dl-axis { fill: var(--st-hint); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.page-settings .st-dl-chart .st-dl-zero { stroke: var(--st-hair); stroke-width: 1; }
.page-settings .st-dl-chart .st-dl-bar { fill: color-mix(in srgb, var(--st-hint) 45%, transparent); }
.page-settings .st-dl-chart .st-dl-bar.is-deepest { fill: var(--neg-mark); }
.page-settings .st-dl-chart .st-dl-limit { stroke: var(--neg); stroke-width: 1; stroke-dasharray: 4 3; }
.page-settings .st-dl-chart .st-dl-limit-label { fill: var(--neg); font-size: 11px; font-weight: 600; }
.page-settings .st-dl-chart .st-dl-deep { fill: var(--st-hint); font-size: 11.5px; }
.page-settings .st-dl-chart .st-dl-deep-amt { fill: var(--text); font-weight: 600; }
.page-settings .st-dl-empty { margin: 0; padding-top: 40px; color: var(--st-hint); font-size: 14px; text-align: center; }

/* The account selector in the costs inspector: a quiet inline control. */
.page-settings .st-scope { display: flex; align-items: center; gap: 10px; padding: 16px 0 4px; }
.page-settings .st-scope .st-field-label { flex: none; }
.page-settings .st-select--scope { flex: 1 1 auto; }
.page-settings .st-select--scope select { font-weight: 600; }

/* ── Trading costs (FINAL-SPEC §7.4) ────────────────────────
   Column: the account, one status (glyph · title · one sentence · one action), "Advanced".
   Stage: one view at a time — the receipt of the latest trade, or the editor an action opened
   (rates with a live preview beside them, existing trades, FX, symbol rules, instruments,
   presets), each with "‹ Back to the receipt". Unknown is neutral and italic, never amber. */
.page-settings .st-cost-status { display: flex; flex-direction: column; align-items: flex-start; }
.page-settings .st-cost-glyph { display: block; width: 28px; height: 28px; color: var(--text-2); }
.page-settings .st-cost-glyph svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-cost-status[data-tone="ok"] .st-cost-glyph { color: var(--st-ok); }
.page-settings .st-cost-status[data-tone="warn"] .st-cost-glyph { color: var(--st-warn); }
.page-settings .st-cost-title { margin: 12px 0 0; color: var(--text); font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.015em; }
.page-settings .st-cost-lead { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 20px; letter-spacing: -0.005em; }
.page-settings .st-cost-lead:empty { display: none; }
.page-settings .st-cost-actions { align-self: stretch; margin-top: 20px; }
.page-settings .st-cost-actions:empty { display: none; }
.page-settings .st-cost-act { width: 100%; }

/* "Advanced": one row; its list pushes down beneath it (no overlay). */
.page-settings .st-cost-adv { border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-cost-adv-toggle,
.page-settings .st-cost-tools > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.page-settings .st-cost-adv-toggle { min-height: 52px; padding: 8px 0; }
.page-settings .st-cost-adv-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-settings .st-cost-adv-text strong { color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; }
.page-settings .st-cost-adv-text small { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-cost-adv-toggle svg,
.page-settings .st-cost-tools > button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--st-hint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--st-spring); }
.page-settings .st-cost-adv-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.page-settings .st-cost-tools { padding-bottom: 4px; }
.page-settings .st-cost-tools > button { min-height: 40px; padding: 0 10px; margin-inline: -10px; width: calc(100% + 20px); border-radius: 10px; color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-cost-tools > button + button { box-shadow: 0 calc(-1 * var(--st-hair-w)) 0 var(--st-hair); }
.page-settings .st-cost-tools > button[aria-current="true"] { color: var(--text); font-weight: 600; }
.page-settings .st-cost-tools > button[aria-current="true"] svg { stroke: var(--text); }
.page-settings .st-cost-adv-toggle:focus-visible,
.page-settings .st-cost-tools > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) {
  .page-settings .st-cost-tools > button:hover { background: var(--st-hover); color: var(--text); }
}

/* Stage views */
.page-settings .st-stage--costs > * + * { margin-top: 0; }
.page-settings .st-cost-back {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -8px 0 20px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
}
.page-settings .st-cost-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-cost-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-cost-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-settings .st-cost-view { flex: none; display: flex; flex-direction: column; min-width: 0; }
.page-settings .st-cost-view > .st-card-head { flex: none; align-items: baseline; margin: 0 0 24px; }
.page-settings .st-cost-view > .st-card-head .st-stage-title { flex: 1 1 auto; min-width: 0; outline: none; }
.page-settings .st-cost-view--receipt { flex: 1 0 auto; }
.page-settings .st-cost-view--receipt > .st-cost-head { justify-content: center; text-align: center; }
.page-settings .st-cost-view--receipt > .st-cost-head .st-stage-title { flex: 0 1 auto; }

/* The receipt: one real trade, line by line, on a straight-edged object. */
.page-settings .st-receipt-wrap { position: relative; align-self: center; width: min(100%, 520px); margin-top: 24px; }
.page-settings .st-receipt-stack { position: absolute; inset: 0; pointer-events: none; }
.page-settings .st-rc-ghost { position: absolute; top: -12px; left: 16px; right: 16px; height: 48px; border-radius: 16px 16px 0 0; background: var(--st-object-bg); box-shadow: var(--st-object-shadow); opacity: 0.7; }
.page-settings .st-rc-ghost[data-depth="2"] { top: -24px; left: 32px; right: 32px; opacity: 0.5; }
.page-settings .st-receipt,
.page-settings .st-cost-preview {
  position: relative;
  width: 100%;
  padding: 28px 36px 24px;
  border: 0;
  border-radius: 16px;
  background: var(--st-object-bg);
  box-shadow: var(--st-object-shadow);
  font-variant-numeric: tabular-nums;
}
.page-settings .st-receipt:empty,
.page-settings .st-cost-preview:empty { display: none; }
.page-settings .st-rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px dashed color-mix(in srgb, var(--text) 14%, transparent); }
.page-settings .st-rc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-settings .st-rc-sym { color: var(--text); font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; }
.page-settings .st-rc-meta { color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-rc-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--text-2); font-size: 13px; line-height: 18px; text-align: right; white-space: nowrap; }
.page-settings .st-rc-lines { margin: 0; padding: 4px 0; }
.page-settings .st-rc-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.page-settings .st-rc-line dt { color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-rc-line dd { display: flex; flex-direction: column; align-items: flex-end; margin: 0; color: var(--text); font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.page-settings .st-rc-line dd small { color: var(--st-hint); font-size: 12.5px; font-weight: 400; line-height: 17px; }
.page-settings .st-rc-line.is-unknown dd { color: var(--st-hint); font-size: 14px; font-weight: 400; font-style: italic; }
.page-settings .st-rc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-rc-total span { color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; }
.page-settings .st-rc-total strong { flex: none; color: var(--text); font-size: 28px; font-weight: 600; line-height: 32px; letter-spacing: -0.02em; white-space: nowrap; }
.page-settings .st-rc-total strong.is-pos { color: var(--pos); }
.page-settings .st-rc-total strong.is-neg { color: var(--neg); }
.page-settings .st-rc-total em { color: var(--st-hint); font-size: 14px; line-height: 20px; text-align: right; }
.page-settings .st-rc-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-rc-chip { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
/* Status colour only where the status is confirmed; "not known", partial and FX stay neutral. */
.page-settings .st-rc-status[data-status="verified"] .st-rc-chip,
.page-settings .st-rc-status[data-status="confirmed"] .st-rc-chip,
.page-settings .st-rc-status[data-status="imported"] .st-rc-chip,
.page-settings .st-rc-status[data-status="zero"] .st-rc-chip { background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: color-mix(in srgb, var(--st-ok) 80%, var(--text)); }
.page-settings .st-rc-note { margin: 16px 0 0; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-rc-empty { margin: 0; color: var(--st-hint); font-size: 13px; line-height: 18px; }
.page-settings .st-cost-foot { align-self: center; max-width: 640px; margin: 16px 0 0; color: var(--st-hint); font-size: 12.5px; line-height: 17px; text-align: center; }

/* The whole account in one line, under the receipt. */
.page-settings .st-cost-totals { flex: none; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-cost-totals:has(> .st-formula:empty):has(> .st-impact:empty) { display: none; }
.page-settings .st-formula:empty { display: none; }
.page-settings .st-formula-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.page-settings .st-formula-item { display: flex; flex-direction: column; gap: 4px; }
.page-settings .st-formula-item small { color: var(--st-hint); font-size: 12.5px; font-weight: 400; line-height: 17px; }
.page-settings .st-formula-item strong { color: var(--text); font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.page-settings .st-formula-item.is-net strong { color: var(--pos); }
.page-settings .st-formula-item.is-net.is-neg strong { color: var(--neg); }
.page-settings .st-formula-item.is-cost strong { color: var(--neg); }
.page-settings .st-formula-op { padding-bottom: 3px; color: var(--st-hint); font-size: 18px; }
.page-settings .st-formula-note { margin: 0; max-width: 78ch; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-impact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.page-settings .st-impact:empty { display: none; }
.page-settings .st-impact-empty { margin: 0; max-width: 72ch; color: var(--text-2); font-size: 13px; line-height: 18px; }
.page-settings .st-impact .cst-sim-note { margin: 0; }
.page-settings .st-provider-rates { flex: none; display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.page-settings .st-provider-rates .st-stage-label strong { color: var(--st-hint); font-weight: 500; }
.page-settings .st-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.page-settings .st-provider-cell { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: 12px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); }
.page-settings .st-provider-cell span { color: var(--st-hint); font-size: 12px; font-weight: 600; }
.page-settings .st-provider-cell strong { color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.page-settings .st-provider-cell small { color: var(--st-hint); font-size: 12px; }
.page-settings .st-provider-rates > .st-hint:empty { display: none; }

/* Your rates: the form (420) and, beside it, the latest trade priced with them. */
.page-settings .st-cost-rates { display: grid; grid-template-columns: minmax(0, 420px) minmax(300px, 1fr); gap: 40px; align-items: start; }
.page-settings .st-cost-form { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.page-settings .st-cost-form > .st-field + .st-rows { margin-top: 0; }
.page-settings .st-cost-form .trading-costs-group { margin: 0; }
.page-settings .st-cost-config { display: flex; flex-direction: column; gap: 28px; }
.page-settings .st-cost-config > .st-group { padding: 0; border: 0; }
.page-settings .st-cost-config > .st-group > .st-card-head { margin-bottom: 12px; }
.page-settings .st-cost-config .st-row--figure { margin-top: 16px; }
.page-settings .st-cost-preview { align-self: start; padding: 28px 30px 24px; }

/* The tools, each on its own view. */
.page-settings .st-cost-view--tool .st-tool { padding: 0; border-top: 0; }
.page-settings .st-cost-view--tool .st-tool-head { margin: -12px 0 20px; }
.page-settings .st-cost-view--tool .st-empty-note { margin-top: 0; max-width: 520px; }
/* Short windows (the stage is 544 high at 1280 × 800): the receipt and its account line fit. */
@media (max-height: 820px) and (min-width: 1181px) {
  .page-settings .st-cost-view > .st-card-head { margin-bottom: 20px; }
  .page-settings .st-receipt-wrap { margin-top: 20px; }
  .page-settings .st-receipt,
  .page-settings .st-cost-preview { padding: 22px 30px 18px; }
  .page-settings .st-rc-head { padding-bottom: 12px; }
  .page-settings .st-rc-line { min-height: 40px; }
  .page-settings .st-rc-status,
  .page-settings .st-rc-note { margin-top: 12px; }
  .page-settings .st-cost-foot { margin-top: 12px; }
  .page-settings .st-cost-totals { margin-top: 16px; padding-top: 16px; }
}
.page-settings .st-tool,
.page-settings .st-tool.settings-symbol-fees,
.page-settings .st-tool.trading-cost-fx,
.page-settings .st-tool.settings-fee-apply-field {
  display: block;
  max-width: none;
  margin: 0;
  padding: 16px 0 18px;
  border: 0;
  border-top: 1px solid var(--st-line);
  border-radius: 0;
  background: none;
}
.page-settings .st-tool.settings-symbol-fees,
.page-settings .st-tool.settings-fee-apply-field { grid-column: 1 / -1; }
.page-settings .st-tool-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.page-settings .st-tool-head strong { color: var(--text); font-size: 13.5px; font-weight: 650; }
.page-settings .st-tool-head small { max-width: 64ch; color: var(--st-hint); font-size: 12.5px; line-height: 1.5; }
.page-settings .st-tool-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-settings .st-tool-form + .st-tool-form { margin-top: 10px; }
.page-settings .st-tool-form .st-input { width: auto; flex: 1 1 120px; min-width: 0; }
.page-settings .st-tool-form .st-input--code { flex: 0 0 84px; }
.page-settings .st-tool-form .st-select { flex: 1 1 150px; }
.page-settings .st-tool-form .st-select--grow { flex: 1 1 260px; }
.page-settings .st-tool-form .st-btn { flex: none; }
.page-settings .st-tool-form--symbol .st-input,
.page-settings .st-tool-form--symbol .st-select { flex: 1 1 110px; }
.page-settings .st-tool-form.settings-symbol-fee-form { display: flex; grid-template-columns: none; }
.page-settings .st-tool-form.trading-cost-fx-form { margin-top: 0; }
.page-settings .trading-cost-fx-form .st-input--num { flex: 0 1 150px; max-width: none; }
.page-settings .trading-cost-fx-form .st-input--code { max-width: 84px; }
.page-settings .st-tool-arrow { color: var(--st-hint); }
.page-settings .st-tool-readout { flex: 1 1 260px; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.page-settings .settings-instrument-readout.is-review { color: var(--st-danger); font-weight: 600; }
.page-settings .st-tool-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.page-settings .st-tool-action { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.page-settings .st-tool-action .st-hint { margin: 0; }
.page-settings .trading-cost-fx-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.page-settings .trading-cost-fx-list:empty { display: none; }
.page-settings .trading-cost-fx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-chip); color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.page-settings .trading-cost-fx-del { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--st-hint); cursor: pointer; }
.page-settings .trading-cost-fx-del:hover { background: var(--st-hover); color: var(--st-danger); }
.page-settings .settings-symbol-fee-table { margin-top: 12px; overflow-x: auto; border: 0; border-radius: 0; background: none; }
.page-settings .settings-symbol-fee-table:empty { display: none; }
.page-settings .settings-symbol-fee-empty { margin: 0; padding: 0; color: var(--st-hint); font-size: 12.5px; font-weight: 400; }
.page-settings .settings-symbol-fee-table-inner { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.page-settings .settings-symbol-fee-table-inner th { padding: 8px 10px; border-bottom: 1px solid var(--st-line-strong); color: var(--st-hint); font-size: 12px; font-weight: 500; text-align: left; }
.page-settings .settings-symbol-fee-table-inner td { padding: 9px 10px; border-bottom: 1px solid var(--st-line); color: var(--text); }
.page-settings .settings-symbol-fee-action { padding: 4px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.page-settings .settings-symbol-fee-action:hover { background: var(--st-hover); color: var(--text); }
.page-settings .settings-symbol-fee-action.is-danger { color: var(--st-danger); }
.page-settings .settings-preset-preview { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--st-line); border-radius: 10px; background: var(--st-well); font-size: 12.5px; }

/* ── Meters (daily loss limit and others) ────────────────────── */
.page-settings .st-meter { padding: 14px 16px; border-radius: 14px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); }
.page-settings .st-meter--plain { padding: 0; border: 0; background: none; box-shadow: none; }
.page-settings .st-meter-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.page-settings .st-meter-value { color: var(--text); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.page-settings .st-meter-label { color: var(--text-2); font-size: 13px; line-height: 18px; }
.page-settings .st-meter-bar { height: 4px; margin-top: 12px; border-radius: 999px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); overflow: hidden; }
.page-settings .st-meter-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--text) 70%, transparent); transition: width 480ms var(--st-ease); }
.page-settings .st-meter .st-hint { margin-top: 8px; }
.page-settings .st-meter .st-hint:empty { display: none; }

/* ── Journal & review ──────────────────────────────────────── */
/* Coverage: ink, not accent — reviewing is not a profit. */
.page-settings .st-coverage { margin-top: 14px; }
.page-settings .st-coverage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--text-2); font-size: 13px; line-height: 18px; }
.page-settings .st-coverage-head strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-settings .st-coverage-pct { color: var(--st-hint); font-variant-numeric: tabular-nums; }
.page-settings .st-coverage-bar { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); overflow: hidden; }
.page-settings .st-coverage-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--text) 70%, transparent); transition: width 480ms var(--st-ease); }
/* What the switch changes: the net P&L with all trades and with the reviewed ones. */
.page-settings .st-scope-pnl { margin-top: 18px; }
.page-settings .st-scope-label { margin: 0 0 6px; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-scope-row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 4px 0 4px 14px; color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-scope-val { font-variant-numeric: tabular-nums; }
.page-settings .st-scope-row.is-on { color: var(--text); font-weight: 600; }
.page-settings .st-scope-row.is-on::before { content: ''; position: absolute; left: 1px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }

/* The stage: the slots on top, the re-entry window below a hairline. */
.page-settings .st-stage--journal > * + * { margin-top: 0; }
.page-settings .st-stage--journal > .st-rule { margin-top: 32px; }
.page-settings .st-stage--journal > .st-jr-reentry { margin-top: 32px; }
.page-settings .st-jr-head { align-items: center; margin-bottom: 20px; }
.page-settings .st-jr-head .st-stage-title { flex: 1 1 auto; min-width: 0; }
.page-settings .st-jr-hint { margin-top: 14px; }

/* Chart screenshots. Five frames run edge to edge (the same 0 before the first as after the
   last); fewer keep that width and stand centred as a group with "Add slot" last. */
.page-settings .st-slots {
  --st-slot-gap: 16px;
  --st-slot-w: calc((100% - 4 * var(--st-slot-gap)) / 5);
  display: grid;
  grid-template-columns: repeat(var(--st-slot-n, 5), var(--st-slot-w));
  justify-content: center;
  gap: var(--st-slot-gap);
}
.page-settings .st-slot-list { display: contents; }
.page-settings .settings-chartslot-row {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.page-settings .settings-chartslot-frame {
  position: relative;
  aspect-ratio: 174 / 116;
  border-radius: 12px;
  background: var(--st-object-bg);
  box-shadow: var(--st-object-shadow);
  transition: transform 160ms var(--st-spring), box-shadow 160ms var(--st-ease);
}
.page-settings .settings-chartslot-art {
  position: absolute;
  inset: 6px;
  overflow: hidden;
  border-radius: 7px;
  background: #0C0F13;
}
:root:not([data-theme="dark"]) .page-settings .settings-chartslot-art { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
:root[data-shade="grey"] .page-settings .settings-chartslot-art { background: #33363C; }
.page-settings .settings-chartslot-art svg { display: block; width: 100%; height: 100%; }
.page-settings .settings-chartslot-art .cs-mid { stroke: color-mix(in srgb, var(--text) 6%, transparent); stroke-width: 1; }
.page-settings .settings-chartslot-art .cs-wick { stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1; }
.page-settings .settings-chartslot-art .cs-up { fill: none; stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1; }
.page-settings .settings-chartslot-art .cs-down { fill: color-mix(in srgb, var(--text) 45%, transparent); }
:root:not([data-theme="dark"]) .page-settings .settings-chartslot-art .cs-wick,
:root:not([data-theme="dark"]) .page-settings .settings-chartslot-art .cs-up { stroke: color-mix(in srgb, var(--text) 55%, transparent); }
:root:not([data-theme="dark"]) .page-settings .settings-chartslot-art .cs-down { fill: color-mix(in srgb, var(--text) 55%, transparent); }
@media (hover: hover) {
  .page-settings .settings-chartslot-row:hover .settings-chartslot-frame { transform: translateY(-2px); }
}
.page-settings .settings-chartslot-rm {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms var(--st-ease);
}
.page-settings .settings-chartslot-rm svg { position: relative; z-index: 3; width: 11px; height: 11px; }
.page-settings .settings-chartslot-rm:disabled { display: none; }
.page-settings .settings-chartslot-row:hover .settings-chartslot-rm,
.page-settings .settings-chartslot-row:focus-within .settings-chartslot-rm,
.page-settings .settings-chartslot-rm:focus-visible { opacity: 1; }
@media (hover: none) { .page-settings .settings-chartslot-rm { opacity: 1; } }
.page-settings .settings-chartslot-rm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-settings .settings-chartslot-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.page-settings .settings-chartslot-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  font-family: var(--font);
  letter-spacing: -0.01em;
  margin-left: -6px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  cursor: text;
}
.page-settings .settings-chartslot-input:hover { background: var(--st-hover); }
.page-settings .settings-chartslot-input:focus { outline: none; background: var(--st-well); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), var(--st-ring); }
.page-settings .settings-chartslot-grip {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--st-hint);
  cursor: grab;
}
.page-settings .settings-chartslot-grip svg { width: 16px; height: 16px; }
.page-settings .settings-chartslot-row:hover .settings-chartslot-grip { color: var(--text); }
.page-settings .settings-chartslot-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); }
/* While sorting: the frame under the pointer floats, the others glide aside. */
.page-settings .st-slot-list.is-sorting .settings-chartslot-row { transition: transform 200ms var(--st-spring); }
.page-settings .st-slot-list.is-sorting .settings-chartslot-row.is-dragging { z-index: 3; cursor: grabbing; transition: none; }
.page-settings .st-slot-list.is-sorting .settings-chartslot-row.is-dragging .settings-chartslot-frame { transform: scale(1.02); box-shadow: var(--st-object-shadow), 0 18px 40px -12px rgba(0, 0, 0, 0.45); }
.page-settings .st-slot-add {
  align-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  aspect-ratio: 174 / 116;
  padding: 0 12px;
  border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.page-settings .st-slot-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.page-settings .st-slot-add:hover:not(:disabled) { color: var(--accent-text, var(--accent)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.page-settings .st-slot-add:disabled { display: none; }
.page-settings .st-slot-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Rapid re-entry: figures left, the histogram with its window handle, the overflow right. */
.page-settings .st-jr-body { display: grid; grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.4fr) 100px; column-gap: 24px; align-items: stretch; }
.page-settings .st-jr-figures { align-self: start; min-width: 0; }
.page-settings .st-jr-count { margin: 0; color: var(--text); font-size: 48px; font-weight: 600; line-height: 52px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.page-settings .st-jr-label { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-jr-figures > .st-rule { margin: 18px 0; }
.page-settings .st-jr-pnl { margin: 0; color: var(--text); font-size: 28px; font-weight: 600; line-height: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.page-settings .st-jr-pnl.is-neg { color: var(--neg); }
.page-settings .st-jr-pnl.is-pos { color: var(--pos); }
.page-settings .st-jr-figures .st-jr-pnl + .st-jr-label { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-jr-hist { position: relative; min-width: 0; height: 212px; border-radius: 12px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); }
.page-settings .st-jr-plot { position: absolute; inset: 14px 16px 6px; }
.page-settings .st-jr-plot svg { display: block; overflow: visible; }
.page-settings .st-jr-plot .st-jr-window { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.page-settings .st-jr-plot .st-jr-edge { stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.5; }
.page-settings .st-jr-plot .st-jr-bar { fill: color-mix(in srgb, var(--st-hint) 45%, transparent); }
.page-settings .st-jr-plot .st-jr-bar.is-in { fill: color-mix(in srgb, var(--text) 88%, transparent); }
.page-settings .st-jr-plot text { fill: var(--st-hint); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.page-settings .st-jr-plot text.is-now { fill: var(--text); font-weight: 600; }
.page-settings .st-jr-overflow { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 2px; padding-bottom: 34px; text-align: right; }
.page-settings .st-jr-overflow strong { color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; }
.page-settings .st-jr-overflow span { max-width: 100px; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-stepper-unit { margin: 0 2px 0 -6px; color: var(--st-hint); font-size: 13px; }

/* ── Tags & lists: the lists on the left, one list's editor on the stage ── */
.page-settings .st-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
  align-content: start;
  padding: 26px 30px 30px;
  border-radius: 16px;
  background: var(--st-object-bg);
  box-shadow: var(--st-object-shadow);
}
.page-settings .st-lists > .st-list-row.st-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page-settings .st-lists > .st-list-row:first-child { grid-column: 1 / -1; padding-bottom: 26px; box-shadow: 0 var(--st-hair-w) 0 var(--st-hair); }
.page-settings .st-list-row { display: flex; flex-direction: column; gap: 14px; }
.page-settings .st-list-row > * + * { margin-top: 0; }
.page-settings .st-list-row .st-card-head { margin-bottom: 0; }
.page-settings .st-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.page-settings .st-chips:empty { display: none; }
.page-settings .settings-setup-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 3px 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--st-chip);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}
.page-settings .settings-setup-chip button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-left: 2px;
  padding: 0 0 1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--st-hint);
  font-size: 15px;
  line-height: 0;
  cursor: pointer;
}
.page-settings .settings-setup-chip button:hover { background: var(--st-hover); color: var(--st-danger); }
.page-settings .settings-setup-chip button:focus-visible { outline: 2px solid var(--pos); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  .page-settings .settings-setup-chip button { opacity: 0.4; transition: opacity 120ms var(--ease-out); }
  .page-settings .settings-setup-chip:hover button,
  .page-settings .settings-setup-chip:focus-within button { opacity: 1; }
}
.page-settings .settings-setups-empty { color: var(--st-hint); font-size: 13px; }
/* Values on the trades that the list does not offer: one click adds them. */
.page-settings .st-tag-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid var(--st-line); }
.page-settings .st-tag-extras-label { width: 100%; margin-bottom: 2px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.page-settings .st-tag-extra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 5px 0 9px;
  border: 1px dashed color-mix(in srgb, var(--pos) 45%, var(--st-line-strong));
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.page-settings .st-tag-extra svg { width: 12px; height: 12px; fill: none; stroke: var(--pos); stroke-width: 2.2; stroke-linecap: round; }
.page-settings .st-tag-extra:hover { border-style: solid; border-color: color-mix(in srgb, var(--pos) 70%, transparent); background: color-mix(in srgb, var(--pos) 7%, transparent); }
.page-settings .st-tag-extra:focus-visible { outline: 2px solid var(--pos); outline-offset: 1px; }
.page-settings .st-add { position: relative; display: flex; align-items: center; width: 100%; max-width: 420px; }
.page-settings .st-add-input {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 13px;
  border: 1px dashed var(--st-field-line-hover);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.page-settings .st-add-input::placeholder { color: var(--st-hint); }
.page-settings .st-add-input:hover { border-style: solid; }
.page-settings .st-add-input:focus {
  outline: none;
  border-style: solid;
  border-color: color-mix(in srgb, var(--pos) 65%, var(--st-field-line));
  background: var(--st-field);
  box-shadow: var(--st-ring);
}
.page-settings .st-add-btn {
  position: absolute;
  right: 5px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--st-hint);
  cursor: pointer;
}
.page-settings .st-add-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.page-settings .st-add-input:placeholder-shown + .st-add-btn { opacity: 0; pointer-events: none; }
.page-settings .st-add-btn:hover { background: var(--st-hover); color: var(--text); }
.page-settings .st-add-btn:focus-visible { outline: 2px solid var(--pos); outline-offset: 0; opacity: 1; }

/* Usage of the open list: ranked bars against the most used option. */
.page-settings .st-insp .st-lists-note { margin: 0; }

.page-settings .st-empty-note { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--st-well); color: var(--text-2); font-size: 13px; line-height: 1.55; }

/* ── Data & sync ───────────────────────────────────────────── */
.page-settings .st-status {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--st-well);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  transition: opacity 110ms var(--ease-out);
}
.page-settings .st-status:empty { display: none; }
.page-settings .settings-import-result {
  margin: 4px 0 4px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--pos) 26%, var(--st-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--pos) 5%, var(--surface));
}
.page-settings .st-sync .st-facts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--st-line); }
.page-settings .st-sync .st-facts dd { font-size: 17px; }
.page-settings .st-storage-status { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.page-settings .st-storage-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-ok) 16%, transparent); }
.page-settings .st-storage-status.is-warn .st-storage-dot { background: #D9922B; box-shadow: 0 0 0 4px color-mix(in srgb, #D9922B 18%, transparent); }
.page-settings .st-storage-status.is-error .st-storage-dot { background: var(--st-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-danger) 16%, transparent); }
.page-settings .st-history { border-top: 0; }
.page-settings .settings-history-row { margin: 0; border: 0; border-bottom: 1px solid var(--st-line); border-radius: 0; background: transparent; }
.page-settings .settings-history-row:hover { background: var(--st-hover); border-color: var(--st-line); }
.page-settings .settings-history-empty { margin: 0; padding: 6px 0 4px; border: 0; background: none; color: var(--st-hint); font-size: 13px; font-weight: 400; }

/* Delete groups: a red title, buttons outlined in red. */
.page-settings .st-danger .st-card-title,
.page-settings .st-danger .st-stage-label { color: var(--st-danger); }
.page-settings .st-sheet-group.st-danger { border-color: color-mix(in srgb, var(--st-danger) 22%, var(--st-sheet-line)); }

/* ── Account & billing ─────────────────────────────────────── */
.page-settings .st-signin { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.page-settings .st-signin .st-field { min-width: 0; }
.page-settings .st-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.page-settings .st-plan-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 4px; }
.page-settings .st-plan-sub { margin: 0; width: 100%; }
.page-settings .st-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-settings .st-plan-actions:not(:has(> :not([hidden]))) { display: none; }
.page-settings .settings-plan-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
}
.page-settings .settings-plan-badge.is-pro { background: color-mix(in srgb, var(--pos) 14%, transparent); color: color-mix(in srgb, var(--pos) 78%, var(--text)); }
.page-settings .settings-plan-badge.is-expired { background: color-mix(in srgb, var(--st-danger) 12%, transparent); color: var(--st-danger); }
.page-settings .settings-plan-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--st-hint); font-size: 13px; line-height: 1.5; }
.page-settings .settings-plan-meta-head { color: var(--text-2); font-weight: 600; }
.page-settings .settings-plan-meta--ending .settings-plan-meta-head { color: var(--st-danger); }
.page-settings .settings-manage-error { margin: 6px 0 0; color: var(--st-danger); font-size: 12.5px; }
.page-settings #settings-manage-sub-btn { position: relative; }
.page-settings .settings-referral { margin: 0; padding: 0; border: 0; }
.page-settings .settings-referral-desc { margin: 0 0 12px; }
.page-settings .settings-referral-row { display: flex; gap: 8px; }
.page-settings .settings-referral-input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 11px; font-family: var(--mono); font-size: 12px; color: var(--text-2); background: var(--st-well); }
.page-settings .settings-referral-copy-done { display: none; }
.page-settings .settings-referral-copy.is-copied .settings-referral-copy-default { display: none; }
.page-settings .settings-referral-copy.is-copied .settings-referral-copy-done { display: inline; }
.page-settings .settings-referral-meta { margin-top: 10px; }
.page-settings .settings-referral-code { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.page-settings .settings-referral-used,
.page-settings .settings-referral-note,
.page-settings .settings-referral-locked { color: var(--st-hint); font-size: 12.5px; }
.page-settings .settings-referral-locked { margin: 0; }

/* The contract: cancel, and directly beneath it — only during the 14 days — withdraw. */
.page-settings .st-contract-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 22px;
  padding: 16px 0;
}
.page-settings .st-contract > .st-card-head + .st-contract-row { padding-top: 4px; }
.page-settings .st-contract-row + .st-withdraw,
.page-settings .st-withdraw .st-contract-row,
.page-settings .st-owner-sample .st-contract-row + .st-contract-row { border-top: 1px solid var(--st-line); }
.page-settings .support-cancel-note { margin-top: 6px; color: var(--text-2); }
.page-settings .support-cancel-note.is-error { color: var(--st-danger); }
.page-settings .st-withdraw-form {
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 2px 0 14px;
  /* On the grey stage: no box of its own — a quiet rule on the left ties it to its row. */
  padding: 4px 0 4px 18px;
  border: 0;
  border-left: 2px solid var(--st-hair);
  border-radius: 0;
  background: none;
}
.page-settings .st-withdraw-form .st-field + .st-field { margin-top: 0; }
.page-settings .st-withdraw-decl { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 600; }
.page-settings .st-withdraw-contract { display: block; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.page-settings .st-withdraw-error { margin: 0; color: var(--st-danger); font-size: 12.5px; }
.page-settings .st-withdraw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-settings .st-withdraw-receipt {
  margin: 4px 0 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--st-well);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.page-settings .st-owner-note { margin: 0; max-width: 70ch; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.page-settings .st-owner-sample {
  position: relative;
  margin-top: 14px;
  padding: 26px 18px 4px;
  border: 1px dashed var(--st-line-strong);
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--text) 2%, transparent) 10px 20px);
}
.page-settings .st-owner-tag {
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--st-sheet);
  box-shadow: inset 0 0 0 1px var(--st-line-strong);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 650;
}
.page-settings .st-owner-sample .st-contract-row { padding: 12px 0; }

/* ── Help & legal ──────────────────────────────────────────── */
.page-settings .st-feedback { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.page-settings .st-feedback .st-field + .st-field { margin-top: 0; }
.page-settings .st-feedback-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-settings .support-send-note { margin: 0; color: var(--text-2); }
.page-settings .support-send-note.is-error { color: var(--st-danger); }
.page-settings .st-keys { display: grid; gap: 9px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--st-line); list-style: none; }
.page-settings .st-keys li { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12.5px; transition: opacity 160ms var(--ease-out); }
.page-settings .st-keys li span { margin-left: 7px; }
.page-settings .st-keys kbd {
  min-width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid var(--st-field-line);
  border-radius: 7px;
  background: var(--st-field);
  box-shadow: inset 0 -2px 0 var(--st-line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
}
.page-settings .st-keys.is-off li[data-global] { opacity: 0.4; }
.page-settings .st-legal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; color: inherit; font-size: inherit; text-align: left; }
.page-settings .st-legal-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--st-field-line);
  border-radius: 12px;
  background: var(--st-field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.page-settings .st-legal-link::after { content: '↗'; color: var(--st-hint); font-weight: 500; }
.page-settings .st-legal-link:hover { border-color: var(--st-field-line-hover); color: var(--pos); }
.page-settings .st-legal-link:focus-visible { outline: 2px solid var(--pos); outline-offset: 2px; }
.page-settings .st-version-row { padding-top: 14px; padding-bottom: 14px; }
.page-settings .st-version { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.page-settings .st-version-copy { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--st-field-line); border-radius: 8px; background: var(--st-field); color: var(--st-hint); cursor: pointer; }
.page-settings .st-version-copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.page-settings .st-version-copy:hover { color: var(--text); border-color: var(--st-field-line-hover); }
.page-settings .st-version-copy.is-copied { color: var(--pos); }
.page-settings .st-version-copy:focus-visible { outline: 2px solid var(--pos); outline-offset: 1px; }

/* ── Search: a spotlight above the page ────────────────────── */
.st-spot {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 15vh 16px 0;
  background: color-mix(in srgb, var(--bg) 22%, transparent);
}
.st-spot.is-open .st-spot-panel { animation: st-spot-in 200ms var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1)) both; }
@keyframes st-spot-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
.st-spot-panel {
  width: min(640px, 100%);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-elevated);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 34px 80px -20px rgba(0, 0, 0, 0.42);
}
.st-spot .st-search { position: relative; }
.st-spot .st-search-ic { position: absolute; left: 18px; top: 26px; width: 20px; height: 20px; translate: 0 -50%; color: var(--st-hint); pointer-events: none; }
.st-spot .st-search-input {
  width: 100%;
  height: 52px;
  padding: 0 48px 0 50px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 450;
  letter-spacing: -0.01em;
}
.st-spot .st-search-input::placeholder { color: var(--st-hint); opacity: 0.9; }
.st-spot .st-search-input::-webkit-search-cancel-button,
.st-spot .st-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.st-spot .st-search-input:focus { outline: none; }
.st-spot .st-search-clear {
  position: absolute;
  right: 12px;
  top: 26px;
  translate: 0 -50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--st-hint);
  cursor: pointer;
}
.st-spot .st-search-clear svg { width: 15px; height: 15px; }
.st-spot .st-search-clear:hover { background: var(--st-hover); color: var(--text); }
.st-spot .st-search-clear:focus-visible { outline: 2px solid var(--pos); outline-offset: 1px; }
.st-spot .st-search-results {
  max-height: min(380px, 52vh);
  overflow-y: auto;
  padding: 6px;
  border-top: 1px solid var(--st-line);
}
.st-spot .settings-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.st-spot .settings-search-result strong { font-size: 14px; font-weight: 600; }
.st-spot .settings-search-result small { font-size: 12px; color: var(--st-hint); }
.st-spot .settings-search-result:hover,
.st-spot .settings-search-result:focus-visible { outline: none; background: color-mix(in srgb, var(--pos) 12%, transparent); }
.st-spot .settings-search-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--st-hint); }

/* ── Toast, landing highlights, entrance ───────────────────── */
.page-settings .st-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 108px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--st-ink);
  color: var(--st-on-ink);
  box-shadow: var(--shadow-3);
  font-size: 13px;
  line-height: 1.45;
  translate: -50% 0;
  animation: st-toast-in 220ms var(--ease-out);
}
@keyframes st-toast-in { from { opacity: 0; translate: -50% 8px; } to { opacity: 1; translate: -50% 0; } }

.page-settings .is-flash-target,
.page-settings .settings-attention-zone { border-radius: 10px; animation: st-flash 1600ms var(--ease-out); }
@keyframes st-flash {
  0%, 30% { background: color-mix(in srgb, var(--pos) 10%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pos) 10%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
/* A sheet lands with a ring, never a background swap (its surface stays put). */
.page-settings .st-sheet-group.is-flash-target,
.page-settings .st-sheet-group.settings-attention-zone { border-radius: 18px; animation: st-flash-card 1600ms var(--ease-out); }
@keyframes st-flash-card {
  0%, 35% { outline: 2px solid color-mix(in srgb, var(--pos) 55%, transparent); outline-offset: 3px; }
  100% { outline: 2px solid transparent; outline-offset: 3px; }
}
.page-settings .st-panel.feedback-flash,
.page-settings .st-panel.settings-section-flash,
.page-settings .st-panel.settings-attention { animation: none; box-shadow: none; }

/* Entrance: driven by restartPageEnter (PAGE_ENTER_SELECTORS). */
.page.is-entering .st-panel.is-active .st-enter {
  animation: page-item-in calc(var(--page-transition-duration, 480ms) * 0.58) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}
:root.reduced-page-motion .page.is-entering .st-panel.is-active .st-enter { animation-duration: 1ms; animation-delay: 0ms; }

/* ════════════════════════════════════════════════════════════════════════════════
   v9 — one stage, no cards inside it
   The stage is the same surface on every category (light grey; in Dark and Grey the
   cards' own surface, so it lifts off the floor like a dashboard card). Its content sits
   directly on it: sections separated by space and one hairline, controls (fields,
   segments, buttons) are the only filled things. Settings set things — no statistics.
   ════════════════════════════════════════════════════════════════════════════════ */

/* Segments on the stage: a track one step darker than the stage, the white thumb on it. */
.page-settings .st-stage .st-seg { background: var(--st-seg-track); box-shadow: none; }
:root:not([data-theme="dark"]) .page-settings .st-stage .st-seg { --st-thumb: #FFFFFF; }

/* Sections */
.page-settings .st-sec { flex: none; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.page-settings .st-stage > .st-sec + .st-sec,
.page-settings .st-stage > .st-sec-row + .st-sec,
.page-settings .st-stage > .st-sec + .st-sec-row { margin-top: 30px; padding-top: 28px; border-top: var(--st-hair-w) solid var(--st-hair); }
/* Signed out the plan card is hidden: the contract is then the stage's first section — no divider
   and no gap above it (it read as an empty stage). */
.page-settings .st-stage > .st-sec[hidden] + .st-sec { margin-top: 0; padding-top: 0; border-top: 0; }
/* Grows into the stage's free height, never shrinks below its content: with min-height 0, a stage
   taller than the window squeezed the import history and its text ran over the next divider. */
.page-settings .st-sec--grow { flex: 1 0 auto; }
.page-settings .st-sec-head { display: flex; align-items: baseline; gap: 10px; min-height: 20px; margin: 0 0 4px; }
.page-settings .st-sec-title { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.01em; }
.page-settings .st-sec-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.page-settings .st-sec-row > .st-sec { min-width: 0; }

/* A preference: what it is on the left (label, one line), its control on the right. */
.page-settings .st-pref {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 32px;
  min-height: 62px;
  padding: 11px 0;
}
.page-settings .st-pref + .st-pref { border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-pref[hidden] + .st-pref { border-top: 0; }
.page-settings .st-pref-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-settings .st-pref-label { color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; }
.page-settings .st-pref-label strong { font-weight: 600; }
.page-settings .st-pref-hint { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-pref > :last-child:not(.st-pref-text) { justify-self: end; }
.page-settings .st-pref .st-seg-opt span { min-width: 58px; padding: 0 14px; }

/* ── General ── */
.page-settings .st-stage--general { padding: 40px 48px; }
.page-settings .st-stage--general .st-sec-head { margin-bottom: 6px; }
.page-settings #st-range .st-seg-opt span { min-width: 46px; padding: 0 10px; }
.page-settings .st-sample { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding-top: 16px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-sample-label { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-sample-value { color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
/* The line wraps between its parts, never inside one ("−$140.00" stays together). */
.page-settings .st-sample-part { white-space: nowrap; }

/* ── Appearance ── */
/* The tiles are buttons with the legacy theme-toggle class (the theme listener's hook); none of
   its pill styling belongs here — it drew a white box behind the chosen tile's name. */
.page-settings .st-themes .theme-seg.st-tile,
.page-settings .st-themes .theme-seg.st-tile.active,
.page-settings .st-themes .theme-seg.st-tile:hover {
  display: flex;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.page-settings .st-themes .theme-seg.st-tile[aria-checked="true"] { color: var(--text); font-weight: 600; }
.page-settings .st-tile-name { display: block; line-height: 18px; }
/* The selection ring is drawn INSIDE the picture (over it): the first tile of every row sits on
   the page container's clipping edge, where an outer ring was cut off ("unfinished boxes"). */
.page-settings .st-tile-pic { border-radius: 10px; box-shadow: none; }
.page-settings .st-tile-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--st-hair);
  pointer-events: none;
  transition: box-shadow 140ms var(--st-ease);
}
@media (hover: hover) {
  .page-settings .st-tile:hover .st-tile-pic { box-shadow: none; }
  .page-settings .st-tile:hover .st-tile-pic::after { box-shadow: inset 0 0 0 1px var(--border-strong); }
}
.page-settings .st-tile.is-active .st-tile-pic,
.page-settings .st-tile[aria-checked="true"] .st-tile-pic,
.page-settings .st-tile:has(input:checked) .st-tile-pic { box-shadow: none; }
.page-settings .st-tile.is-active .st-tile-pic::after,
.page-settings .st-tile[aria-checked="true"] .st-tile-pic::after,
.page-settings .st-tile:has(input:checked) .st-tile-pic::after { box-shadow: inset 0 0 0 2.5px var(--accent), inset 0 0 0 3.5px color-mix(in srgb, var(--bg) 70%, transparent); }
.page-settings .st-density-pic { height: 84px; background: var(--surface); }
.page-settings .st-density-table { top: 0; left: 0; transform-origin: 0 0; }
.page-settings .st-motion-pic { height: 64px; }
.page-settings .st-motion-row { left: 10px; top: 10px; transform: scale(0.32); }

/* The custom dot: empty (a "+" on a colour wheel) until a pair is saved, then the pair itself
   with a thin colour-wheel ring. */
.page-settings .st-swatches { padding: 0 3px; }
.page-settings .st-swatches button.st-swatch-custom::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #FF6B6B, #F2B53A, #53E2A6, #5CC8FF, #8B7CFF, #E0457B, #FF6B6B);
  -webkit-mask: radial-gradient(circle, transparent calc(50% + 0.5px), #000 calc(50% + 1px));
  mask: radial-gradient(circle, transparent calc(50% + 0.5px), #000 calc(50% + 1px));
  opacity: 0.9;
}
.page-settings .st-swatches button.st-swatch-custom.is-empty i { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.page-settings .st-swatches button.st-swatch-custom b { position: absolute; inset: 0; display: none; place-items: center; color: var(--text-2); }
.page-settings .st-swatches button.st-swatch-custom.is-empty b { display: grid; }
.page-settings .st-swatches button.st-swatch-custom b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.page-settings .st-swatches button.st-swatch-custom.is-active::before { inset: -3px; }

/* The colour box */
.page-settings .st-panel.is-active { position: relative; }
.st-ac {
  position: absolute;
  z-index: 30;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--st-pop-bg);
  box-shadow: var(--st-pop-shadow);
}
.st-ac.is-open { animation: st-ac-in 180ms var(--st-ease) both; }
@keyframes st-ac-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
.st-ac-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.st-ac-title { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; }
.st-ac-x { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--st-hint); cursor: pointer; }
.st-ac-x:hover { background: var(--st-hover); color: var(--text); }
.st-ac-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.st-ac-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.st-ac.has-gradient .st-ac-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-ac-target {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--st-chip-bg);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.st-ac-target i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c, #888); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.st-ac-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ac-target:hover { color: var(--text); }
.st-ac-target.is-active { background: transparent; color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--text); }
.st-ac-target:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-ac-sv {
  position: relative;
  height: 148px;
  border-radius: 12px;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #FFF, var(--hue, #F00));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: crosshair;
  touch-action: none;
}
.st-ac-hue {
  position: relative;
  height: 14px;
  margin-top: 12px;
  border-radius: 7px;
  background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: ew-resize;
  touch-action: none;
}
.st-ac-knob {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c, #888);
  box-shadow: 0 0 0 2.5px #FFF, 0 0 0 3.5px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.st-ac-hue .st-ac-knob { top: 50%; }
.st-ac-sv:focus-visible,
.st-ac-hue:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.st-ac-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.st-ac-hex { position: relative; flex: none; display: flex; align-items: center; width: 108px; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); color: var(--st-hint); font-family: var(--mono); font-size: 13px; }
.st-ac-hex input { width: 100%; min-width: 0; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; letter-spacing: 0.04em; text-transform: uppercase; }
.st-ac-hex input:focus { outline: none; }
.st-ac-hex:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), var(--st-ring); }
.st-ac-suggest { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.st-ac-suggest button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); cursor: pointer; }
.st-ac-suggest button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--st-pop-bg), 0 0 0 3.5px var(--text); }
.st-ac-suggest button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-ac-grad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; margin-top: 16px; padding-top: 14px; border-top: var(--st-hair-w) solid var(--st-hair); }
.st-ac-grad .st-hint { margin: 2px 0 0; }
.st-ac-scale { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 10px; margin-top: 14px; overflow: hidden; border-radius: 5px; }
.st-ac-scale i { display: block; }
.st-ac-scale-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--st-hint); font-size: 11.5px; line-height: 15px; }
.st-ac-note { margin: 12px 0 0; color: var(--st-hint); font-size: 12px; line-height: 16px; }
.st-ac-warn { margin: 8px 0 0; color: var(--st-warn); font-size: 12px; font-weight: 600; line-height: 16px; }
.st-ac-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.st-ac .st-btn { height: 36px; }

/* The preview: the stage stays the stage; the app window stands on it, its tabs above it. */
.page-settings .st-stage--preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 28px 28px;
  overflow: hidden;
  background: var(--st-stage-bg);
  box-shadow: var(--st-stage-shadow);
}
.page-settings .st-stage--preview > * + * { margin-top: 0; }
.page-settings .st-stage--preview > .st-pv-bar {
  position: static;
  flex: none;
  align-self: center;
  transform: none;
  background: var(--st-seg-track);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.page-settings .st-stage--preview > .st-pv-frame { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.page-settings .st-stage--preview > .st-pv-frame > .st-pv-fit { border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--st-window-line), 0 24px 48px -26px rgba(15, 17, 21, 0.35), 0 2px 6px rgba(15, 17, 21, 0.06); }
:root[data-theme="dark"] .page-settings .st-stage--preview > .st-pv-frame > .st-pv-fit { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -28px rgba(0, 0, 0, 0.9); }
.page-settings .st-pv-tabs .st-pv-tab.is-active { background: var(--st-ink-btn); color: var(--st-ink-btn-text); }

/* ── Trading accounts ── */
.page-settings .st-cost-list { display: grid; gap: 2px; }
.page-settings .st-cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--st-ease);
}
.page-settings .st-cost-row:hover { background: var(--st-hover); }
.page-settings .st-cost-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-settings .st-cost-row-name { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.page-settings .st-cost-row-state { color: var(--text-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.page-settings .st-cost-row-state[data-tone="ok"] { color: var(--st-ok); }
.page-settings .st-cost-row-state[data-tone="warn"] { color: var(--st-warn); }
.page-settings .st-cost-row-state[data-tone="unknown"] { color: var(--st-hint); font-style: italic; font-weight: 400; }
.page-settings .st-cost-row svg { width: 14px; height: 14px; fill: none; stroke: var(--st-hint); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* The column's selection follows the stage: the account row while the settings show, the cost
   row while its table shows. */
.page-settings #settings-account.is-costs .st-acct-list .account-option.active { background: transparent; }
.page-settings #settings-account.is-costs .st-acct-list .account-option.active:hover { background: var(--st-hover); }
.page-settings #settings-account.is-costs .st-cost-row.is-active { background: color-mix(in srgb, var(--text) 6%, transparent); }
:root:not([data-theme="dark"]) .page-settings #settings-account.is-costs .st-cost-row.is-active { background: #F2F3F5; }
.page-settings #settings-account.is-costs .st-cost-row.is-active .st-cost-row-name { font-weight: 600; }

.page-settings .st-acct-view { display: flex; flex-direction: column; min-width: 0; }
.page-settings .st-acct-view[hidden] { display: none !important; }
.page-settings .st-stage--account > * + * { margin-top: 0; }
.page-settings .st-acct-rules > .st-field + .st-field,
.page-settings .st-acct-rules > .st-field + .st-fields,
.page-settings .st-acct-rules > .st-fields + .st-readout { margin-top: 16px; }
.page-settings .st-acct-rules > .st-fields + .st-readout { display: block; margin-top: 6px; color: var(--st-hint); }
.page-settings .st-acct-rules .st-sr-head { margin: 0; min-height: 0; height: 0; }
.page-settings .st-acct-rules .st-sr-head .st-card-status { position: absolute; top: -26px; right: 0; }
.page-settings .st-acct-rules { position: relative; }
.page-settings .st-acct-bottom { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 414fr); column-gap: 40px; margin-top: 30px; }
.page-settings .st-acct-view--rules > .st-rule { margin-top: 30px; }
.page-settings .st-acct-limit-body { display: block; }
.page-settings .st-acct-limit .st-affix--both { max-width: 320px; }
.page-settings .st-acct-limit-text { margin-top: 8px; }
.page-settings .st-acct-limit-text .st-readout { display: block; color: var(--text-2); }
.page-settings .st-acct-details .st-kv > div { min-height: 36px; }

/* Costs: the account's table */
.page-settings .st-acct-view--costs > .st-cv-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.page-settings .st-acct-view--costs .st-stage-title { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 22px; outline: none; }
.page-settings .st-cv-back { flex: none; }
.page-settings .st-cv-back svg { width: 13px; height: 13px; }
.page-settings .st-cv-lead { margin: 0; max-width: 78ch; color: var(--text-2); font-size: 13.5px; line-height: 19px; }
.page-settings .st-cv-lead:empty { display: none; }
.page-settings .st-cv-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 28px; margin-top: 20px; padding-bottom: 18px; border-bottom: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-cv-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-right: auto; min-width: 0; padding-bottom: 2px; }
.page-settings .st-cv-mode-label { color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; }
.page-settings .st-cv-mode .st-link-btn { font-size: 12.5px; }
.page-settings .st-ct-auto-note { margin-top: 2px; }
.page-settings .st-cv-plan { width: 240px; }
.page-settings .st-cv-ccy { width: 104px; }
.page-settings .st-cv-ccy .st-input--code { max-width: none; }
.page-settings .st-cv-controls .st-field + .st-field { margin-top: 0; }
.page-settings .st-cv-controls .st-field-label { font-size: 12.5px; }
.page-settings .st-cv-controls .st-input,
.page-settings .st-cv-controls .st-select select { height: 36px; font-size: 14px; }

.page-settings .st-ct { margin-top: 4px; container-type: inline-size; }
.page-settings .st-ct[hidden] { display: none !important; }
.page-settings .st-ct-table { --ct-cols: minmax(96px, 0.8fr) minmax(0, 1.55fr) minmax(0, 1.55fr) minmax(96px, 0.7fr) 64px; display: block; }
.page-settings .st-ct-row {
  display: grid;
  grid-template-columns: var(--ct-cols);
  align-items: center;
  gap: 0 14px;
  min-height: 58px;
  padding: 8px 0;
  border-top: var(--st-hair-w) solid var(--st-hair);
}
.page-settings .st-ct-headrow { min-height: 38px; padding: 0; border-top: 0; color: var(--st-hint); font-size: 12.5px; font-weight: 500; line-height: 17px; }
.page-settings .st-ct-sym { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-settings .st-ct-sym strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.page-settings .st-ct-sym .st-ct-ticker { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.02em; }
/* The default row's name is words, not a symbol: it wraps in a narrow column ("All instruments" was
   cut to "All instrume…" at 1280–1366 px; "Todos los instrumentos" needs two lines). */
.page-settings .st-ct-sym strong:not(.st-ct-ticker) { white-space: normal; overflow-wrap: break-word; }
.page-settings .st-ct-sym small { color: var(--st-hint); font-size: 12px; line-height: 16px; }
.page-settings .st-ct-cell { display: grid; grid-template-columns: minmax(84px, 108px) minmax(0, 1fr); gap: 8px; min-width: 0; }
.page-settings .st-ct-amt { position: relative; min-width: 0; }
.page-settings .st-ct-cur { position: absolute; left: 11px; top: 50%; translate: 0 -50%; color: var(--st-hint); font-size: 13.5px; pointer-events: none; }
.page-settings .st-ct-amt .st-input { height: 36px; padding: 0 10px 0 24px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.page-settings .st-ct-amt.is-pct .st-ct-cur { left: auto; right: 10px; }
.page-settings .st-ct-amt.is-pct .st-input { padding: 0 24px 0 10px; }
.page-settings .st-ct-cell.is-off .st-ct-amt { opacity: 0.4; }
.page-settings .st-ct-cell.is-off .st-ct-amt .st-input { box-shadow: inset 0 0 0 1px var(--st-well-edge); }
.page-settings .st-ct-unit select { height: 36px; padding-right: 30px; font-size: 13px; font-weight: 500; }
.page-settings .st-ct-unit svg { right: 10px; }
.page-settings .st-ct-total { justify-self: end; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.page-settings .st-ct-headrow .st-ct-total { color: var(--st-hint); font-size: 12.5px; font-weight: 500; }
.page-settings .st-ct-total.is-open { color: var(--st-hint); font-weight: 400; font-style: italic; }
.page-settings .st-ct-act { display: flex; justify-content: flex-end; gap: 2px; }
.page-settings .st-ct-btn { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--st-hint); cursor: pointer; }
.page-settings .st-ct-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-ct-btn:hover { background: var(--st-hover); color: var(--text); }
.page-settings .st-ct-btn.is-danger:hover { color: var(--st-danger); }
.page-settings .st-ct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-settings .st-ct-row.is-paused .st-ct-sym strong,
.page-settings .st-ct-row.is-paused .st-ct-cell { opacity: 0.55; }
.page-settings .st-ct-addrow { min-height: 56px; }
.page-settings .st-ct-addrow .st-ct-symin { height: 36px; font-family: var(--mono); font-size: 13.5px; text-transform: uppercase; }
.page-settings .st-ct-addrow .st-ct-symin::placeholder { font-family: var(--font); text-transform: none; }
.page-settings .st-ct-addcell { grid-column: 2 / -1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-settings .st-ct-addcell .st-btn { flex: none; height: 34px; }
.page-settings .st-ct-addcell small { overflow: hidden; color: var(--st-hint); font-size: 12.5px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.page-settings .st-ct-traded { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; color: var(--st-hint); font-size: 12.5px; }
.page-settings .st-ct-traded > span { margin-right: 4px; }
.page-settings .st-ct-traded-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 6px; border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent); border-radius: 8px; background: transparent; color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 600; cursor: pointer; }
.page-settings .st-ct-traded-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.page-settings .st-ct-traded-btn:hover { border-style: solid; background: var(--st-hover); }
.page-settings .st-ct-auto { margin-top: 18px; padding-bottom: 18px; border-bottom: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-ct-auto[hidden] { display: none !important; }
.page-settings .st-ct-auto-title { margin: 0 0 10px; color: var(--text); font-size: 14px; font-weight: 600; }
.page-settings .st-ct-auto-title strong { color: var(--st-hint); font-weight: 500; }
.page-settings .st-ct-auto .st-provider-cell { background: transparent; box-shadow: inset 0 0 0 1px var(--st-hair); }
.page-settings .st-cv-existing { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-cv-existing-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-settings .st-cv-existing-text strong { color: var(--text); font-size: 14px; font-weight: 500; }
.page-settings .st-cv-existing-text small { max-width: 64ch; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-cv-existing-actions { display: flex; flex: none; gap: 8px; }
.page-settings .st-cv-adv { margin-top: 18px; padding-top: 4px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-cv-adv > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.page-settings .st-cv-adv > summary::-webkit-details-marker { display: none; }
.page-settings .st-cv-adv > summary small { color: var(--st-hint); font-size: 12.5px; font-weight: 400; }
.page-settings .st-cv-adv > summary svg { width: 14px; height: 14px; margin-left: auto; fill: none; stroke: var(--st-hint); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--st-spring); }
.page-settings .st-cv-adv[open] > summary svg { transform: rotate(90deg); }
.page-settings .st-cv-adv > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.page-settings .st-cv-adv-body { display: grid; gap: 0; padding-bottom: 6px; }
.page-settings .st-cv-adv-body .st-tool { padding: 14px 0 16px; border-top: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-cv-adv-body .st-tool:first-child { border-top: 0; padding-top: 4px; }
.page-settings .st-cv-adv-body .st-empty-note { margin-top: 8px; }
.page-settings #setting-base-currency-value { height: 36px; padding: 0 12px; }
/* A unit reads whole ("% vom Nominal · Seite", "por operación, a mano" need ~185 px): beside the
   amount only where a cell holds both (a table of 1010 px and more); narrower, the unit goes under
   its amount and takes the cell's full width. */
@container (max-width: 1009px) {
  .page-settings .st-ct-cell { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .page-settings .st-ct-row { padding: 10px 0; }
}
@container (max-width: 760px) {
  .page-settings .st-ct-table { --ct-cols: minmax(80px, 0.7fr) minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(76px, 0.6fr) 58px; }
}
/* A phone: each instrument is a small block — its name, total and actions on top, then
   Commission and Fees, each labelled, with its rate and unit side by side. */
@container (max-width: 520px) {
  .page-settings .st-ct-headrow { display: none; }
  .page-settings .st-ct-row[data-ct-rowkey] {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "sym total act" "comm comm comm" "fee fee fee";
    gap: 8px 10px;
    padding: 14px 0;
  }
  .page-settings .st-ct-row[data-ct-rowkey] > .st-ct-sym { grid-area: sym; }
  .page-settings .st-ct-row[data-ct-rowkey] > :nth-child(2) { grid-area: comm; }
  .page-settings .st-ct-row[data-ct-rowkey] > :nth-child(3) { grid-area: fee; }
  .page-settings .st-ct-row[data-ct-rowkey] > .st-ct-total { grid-area: total; }
  .page-settings .st-ct-row[data-ct-rowkey] > .st-ct-act { grid-area: act; }
  .page-settings .st-ct-row:first-of-type[data-ct-rowkey],
  .page-settings .st-ct-headrow + .st-ct-row { border-top: 0; }
  /* Label on its own line, then amount and unit side by side — the unit with two thirds of the
     width, so it reads whole. */
  .page-settings .st-ct-cell { grid-template-columns: minmax(84px, 1fr) minmax(0, 2fr); align-items: center; gap: 6px 8px; }
  .page-settings .st-ct-cell::before { content: attr(data-label); grid-column: 1 / -1; color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
  .page-settings .st-ct-addrow { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  .page-settings .st-ct-addcell { grid-column: auto; flex-wrap: wrap; gap: 8px 12px; }
  .page-settings .st-ct-addcell small { white-space: normal; }
}

/* ── Journal & review: every list on one stage ── */
/* Four columns, two lists each. The top row is what a trade is filed under (screenshots,
   setups, strategies, mistakes), the row below how it went (symbols, plan, entry, emotions);
   each column pairs a long list with a short one so a laptop screen holds all of them.
   Every list keeps its natural height, so nothing is ever clipped; a window too small for
   all of them scrolls the stage. A list is a token field: its chips, the field that adds the
   next one on the same line, then the values your trades carry that the list does not. */
.page-settings .st-stage--journal { padding: 28px 34px; }
.page-settings .st-jl { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-settings .st-jl-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; padding: 2px 22px 6px; }
.page-settings .st-jl-col:first-child { padding-left: 0; }
.page-settings .st-jl-col:last-child { padding-right: 0; }
.page-settings .st-jl-col + .st-jl-col { border-left: var(--st-hair-w) solid var(--st-hair); }
.page-settings .st-jl-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.page-settings .st-jl-cell > * + * { margin-top: 0; }
.page-settings .st-jl-head { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 0 6px; }
.page-settings .st-jl-head .st-list-title { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.page-settings .st-jl-head .st-head-action { font-size: 12.5px; }
/* A list's save line floats above the right end of its head: it never takes room from the
   title (narrow columns would wrap it) or moves the head's action (Sort). */
.page-settings .st-jl-head { position: relative; }
.page-settings .st-jl-head > .st-card-status { position: absolute; right: 0; bottom: calc(100% + 3px); margin: 0; }
.page-settings .st-jl-cell .st-chips { display: contents; }
.page-settings .st-jl-cell > .st-slots,
.page-settings .st-jl-cell > .st-jl-hint { flex: 0 0 100%; }
/* A name longer than the column (a German or Spanish tag, a long custom one) wraps inside its chip
   instead of ending in an ellipsis. A one-line chip keeps its 28px height (3px + the 22px × + 3px). */
.page-settings .st-jl-cell .settings-setup-chip { max-width: 100%; min-width: 0; height: auto; min-height: 28px; padding: 3px 2px 3px 10px; border: 0; border-radius: 8px; background: var(--st-chip-bg); font-size: 12.5px; font-weight: 500; }
.page-settings .st-jl-cell .settings-setup-chip > span:first-child { min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.page-settings .st-jl-cell .settings-setup-chip button { flex: none; width: 22px; height: 22px; font-size: 14px; }
.page-settings .st-jl-cell .settings-setups-empty { flex: 0 0 100%; font-size: 12.5px; }
/* The add field closes the chip line and takes what the line has left. */
.page-settings .st-jl-cell .st-add { order: 1; flex: 1 0 150px; width: auto; max-width: 100%; }
/* "Already in the list" sits under the add field, on a line of its own. */
.page-settings .st-jl-cell .st-add-note { order: 1; flex: 0 0 100%; margin: -6px 0 0; }
.page-settings .st-add-note { color: var(--text-2); }
.page-settings .st-jl-cell .st-add-input { height: 28px; padding: 0 30px 0 10px; border-radius: 8px; background: transparent; font-size: 12.5px; }
.page-settings .st-jl-cell .st-add-input:focus { background: var(--st-well); }
.page-settings .st-jl-cell .st-add-btn { right: 2px; width: 24px; height: 24px; border-radius: 6px; }
/* Values on your trades the list lacks: quiet links under the list, one click adds them. */
.page-settings .st-jl-cell .st-tag-extras { order: 2; flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 6px; padding-top: 0; border-top: 0; }
.page-settings .st-jl-cell .st-tag-extras-label { flex: 0 0 100%; width: auto; margin: 0 0 2px; color: var(--st-hint); font-size: 12px; font-weight: 500; }
.page-settings .st-jl-cell .st-tag-extra {
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 24px;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-text, var(--accent));
  font-size: 12.5px;
  font-weight: 500;
}
.page-settings .st-jl-cell .st-tag-extra > span { min-width: 0; overflow-wrap: break-word; line-height: 1.3; text-align: left; }
.page-settings .st-jl-cell .st-tag-extra svg { flex: none; width: 11px; height: 11px; stroke: currentColor; }
.page-settings .st-jl-cell .st-tag-extra:hover { border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-jl-cell .st-tag-extra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.page-settings .st-jl-hint { margin: 2px 0 0; font-size: 12px; line-height: 16px; }
/* A narrower stage takes the columns two by two, a phone one under the other. */
@container (max-width: 859px) {
  .page-settings .st-jl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-settings .st-jl-col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .page-settings .st-jl-col:nth-child(even) { padding-right: 0; }
  .page-settings .st-jl-col:nth-child(n + 3) { margin-top: 30px; padding-top: 30px; border-top: var(--st-hair-w) solid var(--st-hair); }
}
@container (max-width: 560px) {
  .page-settings .st-jl { grid-template-columns: minmax(0, 1fr); }
  .page-settings .st-jl .st-jl-col { padding-left: 0; padding-right: 0; border-left: 0; }
  .page-settings .st-jl .st-jl-col + .st-jl-col { margin-top: 30px; padding-top: 30px; border-top: var(--st-hair-w) solid var(--st-hair); }
}
/* Short laptop screens (about 900px tall): a tighter rhythm keeps every category on one
   screen — measured at 1440×900, where the 28px rhythm left Journal and Appearance ~30px over. */
@media (min-width: 1181px) and (max-height: 940px) {
  .page-settings .st-insp-body { margin-top: 18px; padding-bottom: 8px; }
  .page-settings .st-insp-body > * + * { margin-top: 22px; }
  .page-settings .st-stage--journal { padding: 22px 30px 14px; }
  .page-settings .st-jl-col { gap: 26px; }
  .page-settings .st-jl-cell { gap: 5px; }
  .page-settings .st-stage--journal > .st-lists-note { padding-top: 12px; }
}
/* Screenshot slots as chips: grip · name · × */
.page-settings .st-jl-cell .st-slots { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; gap: 6px; }
.page-settings .st-jl-cell .st-slot-list { display: contents; }
.page-settings .st-jl-cell .settings-chartslot-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  height: 30px;
  padding: 0 2px 0 0;
  border-radius: 9px;
  background: var(--st-chip-bg);
  cursor: grab;
}
.page-settings .st-jl-cell .settings-chartslot-grip { width: 22px; height: 30px; border-radius: 9px 0 0 9px; color: var(--st-hint); }
.page-settings .st-jl-cell .settings-chartslot-grip svg { width: 12px; height: 12px; }
.page-settings .st-jl-cell .settings-chartslot-input { flex: none; width: 46px; height: 24px; margin: 0; padding: 0 4px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.page-settings .st-jl-cell .settings-chartslot-rm { position: static; width: 22px; height: 22px; opacity: 0.45; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--st-hint); }
.page-settings .st-jl-cell .settings-chartslot-rm::before,
.page-settings .st-jl-cell .settings-chartslot-rm::after { display: none; }
.page-settings .st-jl-cell .settings-chartslot-row:hover .settings-chartslot-rm,
.page-settings .st-jl-cell .settings-chartslot-rm:focus-visible { opacity: 1; }
.page-settings .st-jl-cell .settings-chartslot-rm:hover { color: var(--st-danger); }
.page-settings .st-jl-cell .settings-chartslot-rm svg { width: 10px; height: 10px; }
.page-settings .st-jl-cell .st-slot-add {
  aspect-ratio: auto;
  flex-direction: row;
  gap: 5px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
}
.page-settings .st-jl-cell .st-slot-add svg { width: 12px; height: 12px; }
.page-settings .st-jl-cell .st-slot-list.is-sorting .settings-chartslot-row.is-dragging { box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35); }
/* The lists' one rule sits in the stage's bottom corner (it follows the lists when they scroll). */
.page-settings .st-stage--journal > .st-lists-note { align-self: flex-end; margin: auto 0 0; padding-top: 20px; color: var(--st-hint); font-size: 12px; line-height: 16px; text-align: right; }

/* ── Data & sync ── */
.page-settings .st-actions { display: grid; gap: 4px; }
.page-settings .st-action {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: calc(100% + 20px);
  margin-inline: -10px;
  min-height: 62px;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--st-ease);
}
.page-settings .st-action:hover { background: var(--st-hover); }
.page-settings .st-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-settings .st-action-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--st-well); box-shadow: inset 0 0 0 1px var(--st-well-edge); color: var(--text-2); }
.page-settings .st-action-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-settings .st-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-settings .st-action-text strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; }
.page-settings .st-action-text small { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-action { grid-template-columns: 34px minmax(0, 1fr) 16px; }
.page-settings .st-action-go { display: grid; place-items: center; color: var(--st-hint); }
.page-settings .st-action-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--st-ease); }
.page-settings .st-action:hover .st-action-go { color: var(--text); }
.page-settings .st-action:hover .st-action-go svg { transform: translateX(2px); }
/* The legacy danger-zone box (border, tint, radius) has no place on the stage. */
.page-settings .st-stage .st-sec.settings-danger-zone { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: none; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.page-settings .st-action.is-locked { opacity: 0.6; cursor: not-allowed; }
.page-settings .st-action.is-locked .st-pro-mark { display: inline-flex; }
.page-settings .st-action .st-pro-mark { margin-left: 0; }
/* Short laptop screens (the 1440 × 900 floor): the import history keeps its full height now
   (.st-sec--grow), so the stage's padding gives back the few pixels it used to squeeze out of it. */
@media (min-width: 1181px) and (max-height: 940px) {
  .page-settings .st-stage--data { padding-block: 40px; }
}
.page-settings .st-stage--data .st-storage-status { margin-top: 6px; font-size: 17px; font-weight: 600; }
.page-settings .st-stage--data .st-facts { margin-top: 16px; }
.page-settings .st-stage--data .st-facts dd { font-size: 17px; line-height: 24px; }
/* Where the journal is stored is a phrase, not a figure ("Your LUCRA account + this device"): it
   takes the wider column and wraps rather than ending in "…" (at 1280–1366 px it was cut). */
.page-settings #settings-storage-where { white-space: normal; overflow-wrap: break-word; }
@container (min-width: 521px) {
  .page-settings #settings-storage-facts { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
}
.page-settings .st-stage--data .st-history { margin-top: 4px; }
.page-settings .st-stage--data .settings-history-row { border-bottom-color: var(--st-hair); }
.page-settings .st-stage--data .st-sec .st-pref:first-of-type { border-top: 0; }
.page-settings .st-danger .st-sec-title { color: var(--st-danger); }

/* ── Account & billing ── */
/* The cloud wrapper sits between the column body and its cards, so it has to
   carry the column rhythm itself — otherwise "Invite friends" glues onto the
   sign-out button and reads as part of the sign-in block. */
.page-settings .st-cloud > * + * { margin-top: 36px; }
.page-settings .st-signin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.page-settings .st-signin .st-email { display: block; max-width: 100%; margin-bottom: 12px; font-size: 15px; }
.page-settings .st-signin .st-field-label { font-size: 12.5px; color: var(--st-hint); }
.page-settings .settings-referral-desc { margin: 0 0 14px; color: var(--text-2); }
.page-settings .settings-referral-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 10px; }
.page-settings .settings-referral-code { color: var(--text); font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.page-settings .settings-referral-row { margin-bottom: 4px; }
.page-settings .settings-referral-locked { color: var(--text-2); font-size: 13px; line-height: 18px; }
.page-settings .st-referral-terms { margin-top: 12px; }
.page-settings .st-referral-terms > summary { display: inline-flex; color: var(--st-hint); font-size: 12.5px; font-weight: 500; cursor: pointer; list-style: none; }
.page-settings .st-referral-terms > summary::-webkit-details-marker { display: none; }
.page-settings .st-referral-terms > summary:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-referral-terms > p { margin-top: 6px; }
.page-settings .st-stage--plan { padding: 40px 48px; }
.page-settings .st-plan-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 10px 0 0; }
.page-settings .st-plan .settings-plan-badge,
.page-settings .st-plan .settings-plan-badge.is-pro,
.page-settings .st-plan .settings-plan-badge.is-trial,
.page-settings .st-plan .settings-plan-badge.is-free {
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
}
.page-settings .st-plan .settings-plan-badge.is-expired { height: auto; padding: 0; background: none; color: var(--st-danger); font-size: 26px; line-height: 32px; }
/* Not yet confirmed by the server (checking, or the lookup failed): neutral — never the danger tone. */
.page-settings .st-plan .settings-plan-badge.is-checking,
.page-settings .st-plan .settings-plan-badge.is-unavailable { height: auto; padding: 0; background: none; color: var(--text-2); font-size: 26px; line-height: 32px; }
.page-settings .st-plan .settings-plan-meta { color: var(--text-2); font-size: 14px; line-height: 20px; }
.page-settings .st-plan .st-plan-actions { margin-top: 20px; }
/* The legacy upgrade card stretched full width; here it is one capsule button. */
.page-settings .st-plan .settings-upgrade-btn { width: auto; margin-top: 0; border-radius: 999px; }
.page-settings .st-plan .st-plan-sub { margin-top: 10px; }
.page-settings .st-stage--plan .st-contract-row { padding: 14px 0; }
.page-settings .st-stage--plan .st-contract-row + .st-contract-row,
.page-settings .st-stage--plan .st-contract-row + .st-withdraw { border-top: var(--st-hair-w) solid var(--st-hair); }
/* Account deletion sits on the box's bottom edge, apart from plan and contract. The
   contract keeps a bottom margin so the two never touch when the stage scrolls
   (auto resolves to 0 then; flex margins do not collapse). */
.page-settings .st-stage--plan > .st-contract { margin-bottom: 30px; }
.page-settings .st-stage--plan > .st-sec.settings-gdpr-zone { margin-top: auto; padding-top: 18px; }
.page-settings .st-gdpr-title { display: block; margin: 0; font-size: 14px; font-weight: 500; }
.page-settings .st-owner-sample { background: none; }
.page-settings .st-owner-tag { background: var(--st-stage-bg); }

/* ── Help & legal ── */
.page-settings .st-stage--support { padding: 40px 48px 22px; }
.page-settings .st-stage--support .st-pref { min-height: 54px; }
.page-settings .st-stage--support .st-keys { margin-top: 10px; padding-top: 12px; border-top-color: var(--st-hair); }
.page-settings .st-stage--support .st-keys kbd { background: var(--st-well); border-color: var(--st-well-edge); }
.page-settings .st-keys li .st-key-to { margin: 0 2px; color: var(--st-hint); }
/* Contact is a plain value centred on its row (the legacy chip pinned it to the top). */
.page-settings .st-stage--support .support-contact { align-self: center; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 500; }
/* Frequent questions: each one a row that opens the place where it is done. */
.page-settings .st-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; margin-top: 4px; }
.page-settings .st-faq-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0 -12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--st-ease);
}
.page-settings .st-faq-item:hover { background: var(--st-hover); }
.page-settings .st-faq-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-settings .st-faq-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-settings .st-faq-text strong { color: var(--text); font-size: 14px; font-weight: 500; line-height: 19px; }
.page-settings .st-faq-text small { color: var(--st-hint); font-size: 12.5px; line-height: 17px; }
.page-settings .st-faq-item svg { width: 14px; height: 14px; fill: none; stroke: var(--st-hint); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--st-ease); }
.page-settings .st-faq-item:hover svg { stroke: var(--text); transform: translateX(2px); }
/* The box's bottom line: the legal texts on the left, the version on the right. */
.page-settings .st-stage--support > .st-help-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  margin-top: auto;
  padding-top: 24px;
}
.page-settings .st-help-foot .st-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; min-width: 0; margin: 0; }
.page-settings .st-help-foot .st-legal-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
}
.page-settings .st-help-foot .st-legal-link::after { margin-left: 4px; font-size: 11px; }
.page-settings .st-help-foot .st-legal-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-settings .st-help-foot .st-version { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; color: var(--st-hint); font-size: 12px; }
.page-settings .st-stage--support .st-version-copy { width: 26px; height: 26px; border: 0; background: transparent; }
.page-settings .st-stage--support .st-version-copy:hover { background: var(--st-hover); }
@container (max-width: 860px) {
  .page-settings .st-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Short laptop screens: the same tighter rhythm as Journal & review (after the rules above). */
@media (min-width: 1181px) and (max-height: 940px) {
  .page-settings .st-stage--support { padding: 28px 40px 16px; }
  .page-settings .st-stage--support > * + * { margin-top: 30px; }
  .page-settings .st-faq-item { min-height: 58px; }
}
@container (max-width: 560px) {
  .page-settings .st-faq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Stage width containers ────────────────────────────────── */
.page-settings .st-stage { container-type: inline-size; }
@container (max-width: 720px) {
  .page-settings .st-sheet-row { grid-template-columns: minmax(0, 1fr); }
  .page-settings .st-tool-actions { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 759px) {
  .page-settings .st-cost-rates { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* Trading accounts: from here down the rules column is too narrow for starting balance and
   account type side by side (the type's name would be cut) — each takes its own row. */
@container (max-width: 879px) {
  .page-settings .st-acct-rules .st-fields--2 { grid-template-columns: minmax(0, 1fr); }
}
/* …and from here down the card and the rules (and the loss limit and the details) stack. */
@container (max-width: 600px) {
  .page-settings .st-acct-top,
  .page-settings .st-acct-bottom { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  /* "Trades you already logged": its two actions go under the text (they ran past a phone's edge). */
  .page-settings .st-cv-existing { flex-wrap: wrap; }
  .page-settings .st-cv-existing-actions { flex: 1 1 100%; flex-wrap: wrap; }
}
@container (max-width: 520px) {
  .page-settings .st-fields--2 { grid-template-columns: minmax(0, 1fr); }
  .page-settings .st-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .page-settings .st-facts > div { padding-right: 8px; }
  .page-settings .st-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .page-settings .st-facts > div:nth-child(even) { padding-left: 14px; }
  .page-settings .st-facts dd { font-size: 18px; }
  /* A longer value ("Your LUCRA account + this device") wraps instead of ending in "…": where
     the journal is stored is what this card is for. That place is a phrase, not a figure: it takes
     the whole row, the two counts share the next. */
  .page-settings .st-facts dd { white-space: normal; overflow-wrap: break-word; }
  .page-settings #settings-storage-facts > div:first-child { grid-column: 1 / -1; padding-right: 0; }
  .page-settings #settings-storage-facts > div:nth-child(2) { padding-left: 0; border-left: 0; }
  .page-settings #settings-storage-facts > div:nth-child(3) { padding-left: 14px; border-left: var(--st-hair-w) solid var(--st-hair); }
}
/* Narrow stages (a phone, a narrow window). A row that pairs a label with a choice of several
   options puts the choice under the label, across the row: beside it, the label and its hint were
   squeezed to a word a line and the choice ran past the screen's edge. The options stay equally
   wide (the thumb is 1/n of the track). An action that comes with a description goes under it;
   a switch keeps its place at the end. The legal links and the version stand one under the other. */
@container (max-width: 560px) {
  .page-settings .st-pref:has(> .st-seg),
  .page-settings .st-pref:has(.st-pref-hint):has(> .st-btn) { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 10px; }
  .page-settings .st-stage .st-pref > .st-seg { justify-self: stretch; display: grid; grid-auto-columns: minmax(0, 1fr); }
  .page-settings .st-stage .st-pref > .st-seg .st-seg-opt span { min-width: 0; padding: 0 6px; }
  /* Six periods share the row: a narrower inset keeps "Todo" / "Alle" whole (WebKit, 375px). */
  .page-settings .st-stage #st-range .st-seg-opt span { min-width: 0; padding: 0 4px; }
  .page-settings .st-stage .st-pref:has(.st-pref-hint) > .st-btn { justify-self: start; }
  .page-settings .st-stage--support > .st-help-foot { grid-template-columns: minmax(0, 1fr); }
  .page-settings .st-help-foot .st-version { justify-content: flex-start; }
}
/* Help and Keyboard shortcuts side by side need room for a label and its button each; below that
   they stack, divided like the stage's other sections (side by side, the e-mail address and the
   buttons ran over their labels). */
@container (max-width: 640px) {
  .page-settings .st-sec-row { grid-template-columns: minmax(0, 1fr); }
  .page-settings .st-sec-row > .st-sec + .st-sec { margin-top: 30px; padding-top: 28px; border-top: var(--st-hair-w) solid var(--st-hair); }
}

/* ── Smaller desktop windows: the stage keeps the window's proportions, its padding shrinks. */
@media (max-height: 820px) and (min-width: 1181px) {
  .page-settings .st-stage { padding: 36px; }
}

/* ── Laptop windows (≤ 880 px tall — a maximized 13" MacBook Air is 1470 × 830, a 14" MacBook
   Pro 1512 × 862): one step tighter again, so General, Trading accounts, Data & sync and Help
   fit without scrolling in every language. A shorter window (1366 × 657) scrolls the stage, which
   then fades at the edge that has more. */
@media (min-width: 1181px) and (max-height: 880px) {
  .page-settings :is(.st-stage--account, .st-stage--data, .st-stage--plan) { padding: 32px 36px; }
  .page-settings .st-stage > .st-sec + .st-sec,
  .page-settings .st-stage > .st-sec-row + .st-sec,
  .page-settings .st-stage > .st-sec + .st-sec-row { margin-top: 22px; padding-top: 20px; }
  .page-settings .st-stage--general { padding: 28px 36px; }
  .page-settings .st-stage--general .st-pref { min-height: 54px; padding: 7px 0; }
  .page-settings .st-sample { margin-top: 10px; padding-top: 12px; }
  .page-settings .st-acct-view--rules > .st-rule,
  .page-settings .st-acct-bottom { margin-top: 24px; }
  .page-settings .st-stage--support { padding: 24px 36px 14px; }
  .page-settings .st-stage--support .st-pref { min-height: 48px; }
  .page-settings .st-stage--support .st-keys { gap: 5px; margin-top: 8px; padding-top: 10px; }
  .page-settings .st-faq-item { min-height: 52px; padding-block: 6px; }
  .page-settings .st-stage--support > .st-help-foot { padding-top: 14px; }
}

/* ── Document-scroll layouts (≤1180px and touch) ──────────────
   .main stops being a fixed-height shell here: the column and the stage flow in one
   column (the stage in the window's proportions from its width); the dock stays fixed
   at the window's bottom edge and the page leaves room for it. */
@media (max-width: 1180px), (pointer: coarse) and (hover: none) {
  /* The dock is fixed over the scrolling document and, with its labels, wide enough to
     cover the column. Scrolling an element into view (keyboard focus, in-app landings,
     tests) must clear it, or a control can sit behind the glass and swallow the click.
     The Feedback button stands above the dock here (below), so the clearance includes it. */
  html:has(.page-settings.is-active) { scroll-padding-bottom: 160px; }
  .page-settings :is(button, input, select, textarea, a, [tabindex]) { scroll-margin-bottom: 160px; }
  .page-settings { padding-bottom: 152px; }
  /* The Feedback button (bottom right on every page) lay under the dock's search lens — a tap on
     "Feedback" opened the search (phones, a 768 px tablet). On Settings it stands above the dock:
     both stay visible and each takes its own taps. The toast keeps clear of it. */
  body:has(.page-settings.is-active):not(.auth-locked):not(.auth-booting) .lucra-fab-wrap { bottom: calc(20px + 62px + 12px); }
  .page-settings .st-toast { bottom: 152px; }
  /* The document scrolls here, not the stage: no veils. */
  .page-settings .st-stage:not(.st-stage--preview)::before,
  .page-settings .st-stage:not(.st-stage--preview)::after { display: none; }
  .page-settings .st-shell { flex: 0 0 auto; }
  .page-settings .st-main { flex: 0 0 auto; }
  .page-settings .st-panel.is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 28px;
    padding-inline: 0;
  }
  .page-settings .st-panel > .st-insp,
  .page-settings .st-panel > .st-stage { height: auto; }
  .page-settings .st-insp,
  .page-settings .st-stage { overflow: visible; }
  .page-settings .st-insp-body { overflow: visible; margin-top: 24px; -webkit-mask-image: none; mask-image: none; }
  .page-settings .st-stage { padding: 32px; }
  .page-settings .st-stage--preview { overflow: hidden; padding: 0; }
  /* No height to fill here: the frame takes the window's proportions from its width. */
  .page-settings .st-stage--preview > .st-pv-frame { position: relative; inset: auto; flex: none; }
  /* The preview sits below the column here, and the Appearance subtitle says so. */
  .page-settings .st-sub-wide { display: none; }
  .page-settings .st-sub-narrow { display: inline; }
  .st-dock-item { min-width: 44px; padding: 0 9px; }
  /* Whole names (the desktop's 128px cap): at 86px German and Spanish ended in "…" ("Konto &
     Abrech…", "Datos y sincroniz…") with the window half empty; the widest dock still fits 761px. */
  .st-dock-name { font-size: 10px; }
}

/* ── Phone: the capsule scrolls sideways when the categories need more room ── */
@media (max-width: 760px) {
  .page-settings { padding-bottom: 144px; }
  body:has(.page-settings.is-active):not(.auth-locked):not(.auth-booting) .lucra-fab-wrap { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px + 12px); }
  .page-settings .st-stage { padding: 22px 18px; border-radius: 18px; }
  .page-settings .st-sheet-group { padding: 18px; }
  .st-dock { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 20px); gap: 8px; }
  .st-dock-capsule {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .st-dock-capsule::-webkit-scrollbar { display: none; }
  /* More tabs than width: the row scrolls, and fades at the edge that has more. */
  .st-dock-capsule.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .st-dock-capsule.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px); mask-image: linear-gradient(90deg, transparent, #000 30px); }
  .st-dock-capsule.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
  .st-dock-item { min-width: 40px; padding: 0 8px; }
  /* The capsule scrolls sideways here, so every name is shown whole rather than cut to 74px. */
  .st-dock-name { max-width: none; }
  .st-dock-item::after { top: 0; }
  .page-settings .st-input,
  .page-settings .st-select select { height: 44px; }
  .page-settings .st-btn { height: 42px; font-size: 14px; }
  .page-settings .st-label { font-size: 15px; }
  .page-settings .st-hint { font-size: 13px; }
  .page-settings .st-contract-row { grid-template-columns: minmax(0, 1fr); }
  .page-settings .st-signin { flex-direction: column; align-items: stretch; }
  .page-settings .st-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-settings .st-toast { bottom: 144px; }
  .page-settings .st-gen-name { font-size: clamp(26px, 9vw, 40px); line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
  .st-spot { padding-top: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  .page-settings .st-switch,
  .page-settings .st-switch::before,
  .page-settings .st-seg::before,
  .page-settings .st-cost-adv-toggle svg,
  .page-settings .st-cost-tools > button svg,
  .page-settings .settings-chartslot-row,
  .page-settings .st-meter-bar i,
  .st-dock-item > i,
  .st-dock-item svg,
  .st-dock-orb svg { transition: none; }
  .page-settings .is-flash-target,
  .page-settings .settings-attention-zone,
  .page-settings .st-toast,
  .page-settings .st-panel.is-switching > *,
  .st-spot.is-open .st-spot-panel,
  .st-pv-full.is-open { animation: none; }
}