/* ════════════════════════════════════════════════════════════════
   WhoIsTrading visual system v2 — October 2026.
   Loaded last, so it sets the final look across every page:
   calmer graphite surfaces, one indigo accent, a 15px base type size,
   sentence-case headings, label-over-value metrics, segmented tabs,
   and one header band instead of two stacked bars.
   Presentation only — no layout node is moved and no control removed.
   ════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: var(--font-sans); --mono: var(--font-mono);

  --bg-app: #08090d;
  --bg-panel: #101219;
  --bg-panel-hi: #171a23;
  --bg-input: #0b0d13;
  --bg-overlay: rgba(8, 9, 13, .9);
  --surface-nav: #0b0c11;
  --surface-selected: rgba(108, 129, 255, .14);
  --button-bg: #1b1f2a;
  --button-text: #e9ecf3;

  --border-subtle: rgba(255, 255, 255, .055);
  --border-default: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);

  --text-primary: #eef0f5;
  --text-secondary: #aab1bf;
  --text-tertiary: #7d8596;
  --text-disabled: #555c6b;

  --accent: #6c81ff;
  --accent-strong: #8395ff;
  --accent-ink: #ffffff;
  --state-info: var(--accent);
  --state-bull: #2bd17e;
  --state-bear: #f4566a;
  --state-warn: #f3b03d;
  --state-info-bg: rgba(108, 129, 255, .12);
  --state-bull-bg: rgba(43, 209, 126, .11);
  --state-bear-bg: rgba(244, 86, 106, .11);
  --state-warn-bg: rgba(243, 176, 61, .11);
  --crypto: #f7a531;
  --crypto-bg: rgba(247, 165, 49, .12);
  --stocks: #6c81ff;

  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 10px 30px -18px rgba(0, 0, 0, .7);
  --focus: #9aa8ff;
  --side-w: 248px;

  --text-2xs: .8125rem; --text-xs: .875rem; --text-sm: .9375rem; --text-base: 1rem;
  --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem;

  /* legacy aliases that older rules still read */
  --bg: var(--bg-app); --s0: var(--surface-nav); --s1: var(--bg-panel); --s2: var(--bg-panel-hi); --s3: #1d212c; --s4: var(--button-bg);
  --brd: var(--border-default); --brd2: var(--border-strong);
  --t0: var(--text-primary); --t1: var(--text-secondary); --t2: var(--text-tertiary); --t3: var(--text-tertiary);
  --grn: var(--state-bull); --grnBg: var(--state-bull-bg); --red: var(--state-bear); --redBg: var(--state-bear-bg);
  --blu: var(--accent); --bluBg: var(--state-info-bg); --amb: var(--state-warn); --ambBg: var(--state-warn-bg);
}

:root[data-theme=light] {
  color-scheme: light;
  --bg-app: #f4f5f8; --bg-panel: #ffffff; --bg-panel-hi: #f6f7fa; --bg-input: #ffffff; --bg-overlay: rgba(244, 245, 248, .92);
  --surface-nav: #fbfbfd; --surface-selected: rgba(76, 99, 235, .1); --button-bg: #f0f2f6; --button-text: #1d2433;
  --border-subtle: rgba(16, 24, 40, .06); --border-default: rgba(16, 24, 40, .11); --border-strong: rgba(16, 24, 40, .22);
  --text-primary: #141824; --text-secondary: #474f60; --text-tertiary: #6a7282; --text-disabled: #9aa0ab;
  --accent: #4c63eb; --accent-strong: #3b51d6; --focus: #4c63eb;
  --state-bull: #0b8a4f; --state-bear: #cc2b43; --state-warn: #9a6200;
  --crypto: #b86a00; --crypto-bg: rgba(184, 106, 0, .1); --stocks: #4c63eb;
  --s3: #eef0f4;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -16px rgba(16, 24, 40, .18);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .1); --shadow-lg: 0 18px 48px rgba(16, 24, 40, .16);
}

html { font-size: calc(16px * var(--font-scale, 1)); }
/* Laptop screens get one step larger text: easier to read at arm's length. */
@media (max-width: 1680px) { html { font-size: calc(17px * var(--font-scale, 1)); } }
body {
  font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5;
  background: var(--bg-app); color: var(--text-primary);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(108, 129, 255, .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(127, 135, 155, .28); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(127, 135, 155, .45); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar { width: var(--side-w); background: var(--surface-nav); border-right: 1px solid var(--border-subtle); }
.content { margin-left: var(--side-w); }
.brand { padding: 18px 18px 14px; border-bottom: 0; }
.workspace-brand { font: 650 1.05rem/1.2 var(--font-sans); letter-spacing: -.01em; gap: 11px; }
.workspace-brand img { width: 32px; height: 32px; border-radius: 9px; }
.workspace-brand small { font-size: .8125rem; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0; margin-top: 2px; }
.nav { padding: 4px 12px 12px; }
.workspace-nav-section { margin: 0 0 14px; }
.workspace-nav-section h2 {
  display: flex; align-items: center; gap: 8px;
  font: 600 .75rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 8px 10px 6px;
}
.workspace-nav-section .nav-item, .nav-item {
  min-height: 36px; padding: 7px 10px; margin: 1px 0; gap: 11px;
  border-radius: 9px; border-left: 0; box-shadow: none;
  font: 500 .9375rem/1.35 var(--font-sans); color: var(--text-secondary);
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(127, 135, 155, .08); color: var(--text-primary); }
.nav-item.on, .workspace-nav-section .nav-item.on {
  background: var(--surface-selected); color: var(--text-primary); box-shadow: none; font-weight: 600;
}
.nav-item .icon { width: 20px; color: var(--text-tertiary); }
.nav-item .icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.nav-item.on .icon { color: var(--accent); }
.nav-item .badge {
  margin-left: auto; border-radius: 999px; padding: 1px 8px; font: 600 .75rem/1.6 var(--font-sans);
  background: rgba(127, 135, 155, .14); color: var(--text-secondary);
}
.nav-item .badge.badge-warn { background: var(--state-warn-bg); color: var(--state-warn); }

/* Market sections: a coloured mark tells Stocks and Crypto apart everywhere. */
.workspace-nav-section[data-market] h2::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stocks); }
.workspace-nav-section[data-market=crypto] h2::before { background: var(--crypto); }
.workspace-nav-section[data-market=crypto] .nav-item.on { background: var(--crypto-bg); }
.workspace-nav-section[data-market=crypto] .nav-item.on .icon { color: var(--crypto); }
.nav-item .nav-state { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.nav-item .nav-state[data-on=true] { background: var(--state-bull); box-shadow: 0 0 0 3px var(--state-bull-bg); }

.side-status { padding: 12px 18px 16px; border-top: 1px solid var(--border-subtle); font-size: .8125rem; color: var(--text-tertiary); }
.admin-side-link { margin: 0 12px 8px; border-radius: 9px; }

/* ── Header band: utilities row + market/top bar read as one header ── */
.workspace-utilities, .topbar {
  background: color-mix(in srgb, var(--bg-app) 86%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border: 0; padding-left: 28px; padding-right: 28px;
}
.workspace-utilities { min-height: 48px; padding-top: 8px; padding-bottom: 0; }
.topbar { min-height: 52px; padding-top: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); gap: 10px; }
.topbar .clock { font: 500 .875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-tertiary); letter-spacing: 0; }
.pill, .market-badge, .topbar .market-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-panel);
  font: 500 .875rem/1.2 var(--font-sans); color: var(--text-secondary);
}
.topbar .market-pill small, .exchange-session { font-size: .8125rem; color: var(--text-tertiary); margin-left: 4px; }
.topbar .pill.pill-good, .topbar .pill.pill-warn { border-color: var(--border-default); }
.ck-pill .ck-val { font: 600 .875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.ck-pill .ck-lbl { color: var(--text-tertiary); font-weight: 500; }
#ckKillBtn { border-radius: 999px; }

.workspace-account summary { border-radius: 999px; padding: 4px 12px 4px 5px; border: 1px solid var(--border-default); background: var(--bg-panel); font-size: .9375rem; }
.workspace-account summary:hover { border-color: var(--border-strong); }
.account-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #a26bff); color: #fff; font-size: .875rem; }
.workspace-account-menu { border-radius: 12px; border: 1px solid var(--border-default); background: var(--bg-panel); box-shadow: var(--shadow-lg); padding: 6px; }
.workspace-account-menu .nav-item, .workspace-account-menu .account-menu-item { border-radius: 8px; }
.learn-toolbar .btn, .learn-switch { border-radius: 999px; font-size: .875rem; }

/* ── Page canvas ─────────────────────────────────────────── */
.main-scroll { padding: 24px 28px 48px; }
.main-scroll > .pn { max-width: 1560px; margin-left: auto; margin-right: auto; }
.workspace-heading { align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.workspace-heading h2, .neo-manager-heading h1 { font: 650 1.65rem/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--text-primary); }
.workspace-heading p { font-size: 1rem; color: var(--text-tertiary); margin-top: 4px; }
.workspace-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.workspace-heading-actions .btn { flex: 0 0 auto; }

/* ── Cards ───────────────────────────────────────────────── */
.card, .api-card, .card-glass {
  background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--card-shadow); margin-bottom: 16px;
}
.card-t {
  font: 600 1rem/1.3 var(--font-sans); letter-spacing: -.005em; text-transform: none;
  color: var(--text-primary); margin-bottom: 14px; gap: 10px;
}
.card-t .btn { text-transform: none; letter-spacing: 0; }
.mb { margin-bottom: 16px; }
.g { gap: 14px; }

/* ── Metric tiles: label above a large tabular value ─────── */
.kpi, .metric-mini, button.kpi, .cmd-kpis .kpi {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 6px;
  text-align: left; padding: 14px 16px; min-height: 84px;
  background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow); transition: border-color .15s, transform .15s;
}
button.kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.kpi .val, .mm-val, .cmd-kpis .kpi .val {
  font: 650 1.45rem/1.15 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi .lbl, .mm-lbl { font: 500 .8125rem/1.3 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--text-tertiary); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  min-height: 34px; padding: 7px 14px; border-radius: var(--radius-md);
  font: 600 .875rem/1.2 var(--font-sans); letter-spacing: 0; gap: 6px; justify-content: center;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
.bsm { min-height: 28px; padding: 4px 10px; font-size: .8125rem; border-radius: 7px; }
.bp { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px rgba(108, 129, 255, .8); }
.bp:hover:not(:disabled) { background: var(--accent-strong); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 20px -8px rgba(108, 129, 255, .9); }
.bg { background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border-default); }
.bg:hover:not(:disabled) { background: color-mix(in srgb, var(--button-bg) 80%, #fff 6%); border-color: var(--border-strong); color: var(--text-primary); }
.bd { background: var(--state-bear-bg); color: var(--state-bear); border: 1px solid color-mix(in srgb, var(--state-bear) 35%, transparent); }
.btn:disabled { opacity: .45; }

/* ── Tabs: segmented control ─────────────────────────────── */
.workspace-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 16px;
  background: var(--bg-panel-hi); border: 1px solid var(--border-subtle); border-radius: 10px;
}
.workspace-tabs button {
  min-height: 30px; padding: 5px 14px; border: 0; border-radius: 7px; background: transparent;
  font: 500 .875rem/1.2 var(--font-sans); color: var(--text-secondary);
}
.workspace-tabs button:hover { color: var(--text-primary); }
.workspace-tabs button[aria-selected=true] { background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 1px var(--border-default); font-weight: 600; }
.asset-tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-panel-hi); border: 1px solid var(--border-subtle); border-radius: 10px; }
.asset-tab { flex: 0 0 auto; min-height: 30px; padding: 5px 16px; border-radius: 7px; font: 500 .875rem/1.3 var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.asset-tab.on, .asset-tab.on[data-mode=stocks], .asset-tab.on[data-mode=crypto] { background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px var(--border-default); font-weight: 600; }
.asset-tab.on[data-mode=crypto] .at-icon { color: var(--crypto); }
.asset-tab.on[data-mode=stocks] .at-icon { color: var(--stocks); }

/* ── Forms ───────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  min-height: 36px; padding: 7px 11px; border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-default);
  font: 400 .9375rem/1.3 var(--font-sans);
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 129, 255, .22); }
label, .f-lbl { font-size: .875rem; color: var(--text-secondary); }

/* ── Tables ──────────────────────────────────────────────── */
table { border-collapse: separate; border-spacing: 0; }
th, .tb th {
  font: 500 .8125rem/1.3 var(--font-sans); letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-tertiary); background: transparent; padding: 10px 12px; border-bottom: 1px solid var(--border-default);
}
td, .tb td { font-size: .9375rem; padding: 11px 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: rgba(127, 135, 155, .05); }

/* ── Readiness and small details ─────────────────────────── */
.readiness-metric { background: var(--bg-panel-hi); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; }
.readiness-value { font: 600 1rem/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.readiness-caption { color: var(--text-tertiary); font-size: .875rem; }
.asset-badge { border-radius: 999px; font: 600 .75rem/1.5 var(--font-sans); padding: 1px 8px; }
.asset-badge.crypto { background: var(--crypto-bg); color: var(--crypto); }
details > summary { cursor: pointer; }
.pin-box, .legal-consent-box { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* ── Login screen ────────────────────────────────────────── */
#loginOverlay { background: radial-gradient(1200px 600px at 70% -10%, rgba(108, 129, 255, .16), transparent 60%), var(--bg-app); }
#loginOverlay .login-box { border-radius: var(--radius-xl); border: 1px solid var(--border-default); }
#loginOverlay .login-btn { border-radius: var(--radius-md); }

/* ── One type scale on every page ──────────────────────────
   Earlier page sheets pinned many controls at 18px. They now follow the
   shared scale (15px controls, 16px reading text at the default size);
   Settings → Display still scales everything up or down. */
.trading-station :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.btn,.asset-tab) { font-size: 1rem !important; min-height: 36px; }
.trading-station :is(label,.fld label,.exec-sub,.playlist-note,.station-status,.station-neo p),
.trading-station .station-heading p, .trading-station .station-details>summary { font-size: 1rem; }
.trading-station .station-tabs .btn { font-size: .9375rem; min-height: 32px; padding: 5px 14px; }
.trading-station .exec-micro .v, .station-neo strong { font-size: 1rem; }
.bb :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.btn) { font-size: 1rem; min-height: 36px; }
.bb .bb-tab { font-size: .9375rem; min-height: 32px; padding: 5px 12px; }
.bb h4, .bb .bb-style strong, .bb .bb-tile strong { font-size: 1rem; }
#p-charts .chart-strategy-heading>strong, #p-charts .chart-utility-panel h2 { font-size: 1rem; }
#p-charts .chart-rule-text, #p-charts .chart-utility-panel :is(p,label,select,input,button) { font-size: 1rem; }
#neoCustomExecution, #neoCustomExecution .neo-custom-run-status, #neoCustomExecution legend, #neoCustomExecution .neo-custom-run-choice strong,
#neoCustomExecution .neo-custom-run-field, #neoCustomExecution .neo-custom-run-field>input, #neoCustomExecution .neo-custom-run-review .btn, .neo-decision-plan h4 { font-size: 1rem; }
.neo-terminal .neo-workbench-plan h2, .neo-terminal .neo-workbench-execution h2, .neo-terminal .neo-workbench-main .card-t { font-size: 1rem; }
.neo-terminal .neo-workbench-plan .neo-session-grid>label, .neo-terminal .neo-workbench-plan input:not([type=checkbox]), .neo-terminal .neo-workbench-plan select { font-size: 1rem; }

#neoManagerWorkspace .neo-strategy-view-tabs .btn, #neoTrailingStrategies, #neoTrailingStrategies .neo-trailing-field,
#neoTrailingStrategies input, #neoTrailingStrategies select { font-size: 1rem; }
#neoTrailingStrategies .btn, #neoTrailingStrategies .neo-trailing-field>span, #neoTrailingStrategies .neo-trailing-account { font-size: .9375rem; }
#neoTrailingStrategies h3, #neoTrailingStrategies h4 { font-size: 1rem; }

/* Stocks pages are stocks only: crypto runs in its own Crypto Bot workspace. */
#atAssetTabs, #dtAssetTabs { display: none !important; }
.market-scope-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: .875rem; color: var(--text-tertiary); }
.market-scope-note .scope-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--state-info-bg); color: var(--stocks); font-weight: 600; }
.market-scope-note button { background: none; border: 0; padding: 0; color: var(--crypto); font: inherit; font-weight: 600; cursor: pointer; }

/* ── Quiet workspace: explanations show only with Training on ──
   Page subtitles, "how this works" notes and long help sentences stay in the
   page (screen readers and Training still reach them) but are hidden from the
   everyday view. Status lines, reasons a control is disabled, errors and
   warnings remain visible. */
body:not(.training-on) :is(
  .workspace-heading p, .bb-title p, .station-heading p, .neo-manager-heading p,
  .station-capability-note, .station-autosave-note, .playlist-note, .constraint-sub,
  p.readiness-caption, .readiness-note, .profile-help, .ra-caption, .ra-how, .bb-how, .bb-note, .station-how,
  .api-best, .api-detail-note, .set-tile-note, .api-how, .lab-how,
  .neo-daily > p + p, .neo-automation-rules > small, .neo-ticker-agents > small, .terminal-advanced > p,
  .readiness-head .readiness-caption, .dt-config-actions .readiness-caption,
  .cb-intro, .cb-help
) { display: none !important; }
.learn-switch[aria-checked=false] { opacity: .85; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) { :root { --side-w: 228px; } .main-scroll { padding: 20px 20px 40px; } .workspace-utilities, .topbar { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 760px) {
  :root { --side-w: 200px; }
  .main-scroll { padding: 16px 14px 32px; }
  .workspace-utilities, .topbar { padding-left: 14px; padding-right: 14px; }
  .workspace-heading { align-items: flex-start; }
  .workspace-heading h2 { font-size: 1.35rem; }
  .kpi .val, .cmd-kpis .kpi .val { font-size: 1.2rem; }
  .card { padding: 16px; }
  .workspace-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
  .workspace-tabs button { flex: 0 0 auto; }
}
@media (max-width: 520px) { .content { margin-left: 0; } .sidebar { width: 100%; } }