/* ============================================================================
   Axiom Omega - dashboard styles
   Design system: Duna-inspired (warm cream surfaces, editorial serif accents,
   deep ink text, terracotta accent, generous whitespace, mostly-flat depth).

   --- 1. THEME & ATMOSPHERE -------------------------------------------------
   Calm, editorial, business-grade. Warm cream backgrounds carry a magazine
   feel; data is delivered with restraint. Density is moderate -- comfortable
   for long sessions, not cramped. Almost no shadows; structure comes from
   hairline borders and surface tone, not depth.

   --- 2. COLOR PALETTE ------------------------------------------------------
   Surface       Cream white       #F6F1E7  page background
   Surface raised Ivory            #FBF7EE  card / hero
   Surface sunk  Parchment         #EFE8D8  hover, secondary chips
   Ink           Espresso          #1B1A17  primary text, headings
   Ink soft      Bark              #3D3A33  body text
   Ink muted     Sand grey         #7A746A  meta, labels
   Hairline      Linen             #E2D9C4  borders, dividers
   Accent        Terracotta        #C84E2C  CTAs, focus, brand mark italic
   Accent soft   Terracotta tint   rgba(200,78,44,0.10)
   Win           Forest            #2F6F4E  longs, profit
   Loss          Brick             #B8423A  shorts, drawdown
   Warn          Amber             #B07300  caution
   Info          Slate blue        #5C7A95  neutral status

   --- 3. TYPOGRAPHY ---------------------------------------------------------
   Display      Instrument Serif (italic for emphasis), 44/48 -56/60, -0.02em
   H1 wordmark  Instrument Serif italic, 22px, paired with Inter caps
   H3 card      Inter 600, 17px, -0.01em
   Kicker       Inter 600, 11px, uppercase, +0.14em tracking, accent
   Eyebrow      Inter 600, 12px, uppercase, +0.16em tracking, muted
   Body         Inter 400, 14px, 1.5
   Caption      Inter 500, 12px, muted
   Numerals     JetBrains Mono 600, tabular, for KPIs / tables / PnL

   --- 4. COMPONENTS ---------------------------------------------------------
   Cards        flat ivory surface, 1px linen border, 14px radius, 20-24px pad
   Pills        999px radius, 1px tinted border, 11px uppercase semantic copy
   Inputs       cream surface, 1px hairline, 8px radius, focus ring = accent soft
   Tables       hairline row dividers, hover = parchment tint, tabular nums
   Buttons      pill, terracotta fill / cream-on-ink hover (not used yet,
                tokens reserved)
   Empty state  italic serif quote-style line in muted ink

   --- 5. LAYOUT -------------------------------------------------------------
   Spacing scale (px): 4, 8, 12, 16, 20, 24, 32, 40, 56
   Page max width: 1320px, centred, 32px gutters (24 on mobile)
   Grid: 12-col implicit; KPI strip = 6 cols, content = 1fr 1fr
   Whitespace: hero + section gaps are intentionally large to feel editorial.

   --- 6. DEPTH & ELEVATION --------------------------------------------------
   No drop shadows on cards. Hierarchy = surface tone + hairlines.
   The only shadow is a soft 1px ambient on the sticky topbar so it visibly
   detaches when content scrolls under it.

   --- 7. DO'S AND DON'TS ----------------------------------------------------
   DO    use the serif italic sparingly -- only as accent within otherwise
         sans-serif copy (1-2 words per heading max).
   DO    keep numbers monospaced and tabular so columns line up.
   DO    use the terracotta accent for state, focus, and the brand mark only.
   DON'T add gradients, glassmorphism, neon glows, or heavy shadows.
   DON'T colour entire cards by sentiment; tint only the value.
   DON'T mix more than two type families in a single block.

   --- 8. RESPONSIVE ---------------------------------------------------------
   >=1100px : full 6-up KPI strip + 2-col grid
   700-1099 : 3-up KPIs, single-col grid
   <700     : 2-up KPIs, stacked topbar, hero scales down
   Touch targets: 40px min on the topbar select / pills
============================================================================ */

:root {
  /* --- surfaces ------------------------------------------------------- */
  --bg:           #F6F1E7;
  --bg-raised:    #FBF7EE;
  --bg-sunk:      #EFE8D8;
  --bg-chart:     #FBF7EE;

  /* --- ink ------------------------------------------------------------ */
  --ink:          #1B1A17;
  --ink-soft:     #3D3A33;
  --ink-muted:    #7A746A;

  /* --- structure ----------------------------------------------------- */
  --hairline:     #E2D9C4;
  --hairline-soft:rgba(226, 217, 196, 0.55);

  /* --- accent -------------------------------------------------------- */
  --accent:        #C84E2C;
  --accent-strong: #A93A1C;
  --accent-soft:   rgba(200, 78, 44, 0.10);
  --accent-ring:   rgba(200, 78, 44, 0.22);

  /* --- semantic ------------------------------------------------------ */
  --win:          #2F6F4E;
  --loss:         #B8423A;
  --warn:         #B07300;
  --info:         #5C7A95;

  --win-tint:     rgba(47, 111, 78, 0.12);
  --loss-tint:    rgba(184, 66, 58, 0.12);
  --warn-tint:    rgba(176, 115, 0, 0.14);
  --info-tint:    rgba(92, 122, 149, 0.12);
  --mute-tint:    rgba(122, 116, 106, 0.10);

  /* --- elevation ----------------------------------------------------- */
  --shadow-bar:   0 1px 0 var(--hairline);
  --shadow-pop:   0 6px 18px rgba(27, 26, 23, 0.06);

  /* Dark palette tokens. Activated by setting ``data-theme="dark"`` on
     <html>. Every component already uses the ``var(--*)`` tokens above, so
     the override below is the only place the dark palette is defined. */
  --d-bg:           #0F1115;   /* page background, near-black ink */
  --d-bg-raised:    #161A21;   /* card / hero surface */
  --d-bg-sunk:      #1C2129;   /* hover, secondary chips */
  --d-bg-chart:     #161A21;   /* chart canvas */

  --d-ink:          #ECEAE2;   /* primary text */
  --d-ink-soft:     #C8C4B9;   /* body text */
  --d-ink-muted:    #8A8578;   /* meta, labels */

  --d-hairline:     #2A2F38;
  --d-hairline-soft:rgba(255, 255, 255, 0.06);

  --d-accent:        #E76A4A;   /* brighter terracotta for dark bg */
  --d-accent-strong: #FF8A6B;
  --d-accent-soft:   rgba(231, 106, 74, 0.18);
  --d-accent-ring:   rgba(231, 106, 74, 0.30);

  --d-win:          #4FB37A;
  --d-loss:         #E2645C;
  --d-warn:         #D89A3A;
  --d-info:         #7AA0BD;

  --d-win-tint:     rgba(79, 179, 122, 0.18);
  --d-loss-tint:    rgba(226, 100, 92, 0.18);
  --d-warn-tint:    rgba(216, 154, 58, 0.18);
  --d-info-tint:    rgba(122, 160, 189, 0.16);
  --d-mute-tint:    rgba(138, 133, 120, 0.18);

  --d-shadow-bar:   0 1px 0 var(--d-hairline);
  --d-shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.35);

  /* --- radii / spacing ---------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;

  --container: 1320px;
  --gutter: 32px;

  /* --- type ---------------------------------------------------------- */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Instrument Serif", "Iowan Old Style", "Apple Garamond",
                  "Baskerville", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}
a:hover { border-bottom-color: var(--accent); color: var(--accent); }

p { margin: 0; }

::selection { background: var(--accent-soft); color: var(--ink); }

/* ----------------------------------------------------------------- type */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.display em {
  font-style: italic;
  color: var(--accent);
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-3);
}

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}

.lede {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: var(--s-4) 0 0;
}

.muted { color: var(--ink-muted); font-size: 12px; }

h1, h2, h3 { margin: 0; color: var(--ink); }
h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 241, 231, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-6);
  align-items: center;
}

.brand { display: flex; align-items: center; gap: var(--s-3); }
.wordmark {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.wordmark em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted);
  box-shadow: 0 0 0 0 transparent;
  transition: background 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
}
.dot.ok    { background: var(--win);  box-shadow: 0 0 0 4px var(--win-tint); }
.dot.warn  { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-tint); }
.dot.error { background: var(--loss); box-shadow: 0 0 0 4px var(--loss-tint); }

.topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  min-width: 0;
}
.status-line {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control { display: inline-flex; align-items: center; gap: var(--s-2); }
.control-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.symbol-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 32px 8px 14px;
  cursor: pointer;
  min-height: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.symbol-select:hover {
  border-color: var(--accent);
  background-color: var(--bg-sunk);
}
.symbol-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ----------------------------------------------------------------- kpis */
.kpis {
  display: flex;
  gap: var(--s-6);
  align-items: stretch;
}
.kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 84px;
  padding-left: var(--s-5);
  border-left: 1px solid var(--hairline);
}
.kpi:first-child { padding-left: 0; border-left: 0; }
.kpi label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.kpi span {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.kpi.mode span {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid rgba(200, 78, 44, 0.30);
}

/* ----------------------------------------------------------------- page */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter) var(--s-14);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

/* hero ---------------------------------------------------------- */
.hero {
  padding: var(--s-4) 0 var(--s-2);
  max-width: 760px;
}
.compact-hero { padding-bottom: 0; }
.compact-hero .display { font-size: clamp(30px, 3.6vw, 46px); }

.system-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--info);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}
.system-banner strong { display:block; font-size:16px; color:var(--ink); margin:2px 0; }
.system-banner p { color:var(--ink-soft); font-size:13px; }
.banner-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); font-weight:700; }
.banner-pill { font-family:var(--font-mono); text-transform:uppercase; font-size:11px; padding:7px 10px; border-radius:var(--r-pill); background:var(--info-tint); color:var(--info); white-space:nowrap; }
.system-banner.is-ok { border-left-color:var(--win); }
.system-banner.is-ok .banner-pill { background:var(--win-tint); color:var(--win); }
.system-banner.is-warn { border-left-color:var(--warn); background:linear-gradient(90deg, var(--warn-tint), var(--bg-raised) 42%); }
.system-banner.is-warn .banner-pill { background:var(--warn-tint); color:var(--warn); }
.system-banner.is-error { border-left-color:var(--loss); }
.system-banner.is-error .banner-pill { background:var(--loss-tint); color:var(--loss); }

/* stats row ----------------------------------------------------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-5) var(--s-5);
  border-right: 1px solid var(--hairline);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.stat strong {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* card ---------------------------------------------------------- */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color 150ms ease;
}
.card:hover { border-color: rgba(200, 78, 44, 0.25); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline-soft);
}
.card-header h3 { margin: 0; }

/* charts -------------------------------------------------------- */
.chart-card #chart        { width: 100%; height: 360px; border-radius: var(--r-md); overflow: hidden; }
.chart-card #equity-chart { width: 100%; height: 220px; border-radius: var(--r-md); overflow: hidden; }
.chart-card.is-unavailable #chart {
  height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--hairline);
  background:var(--bg-sunk);
}
.chart-card.is-unavailable #chart::before {
  content:'MT5 feed offline — chart resumes after terminal connects';
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* grid ---------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.span-2 { grid-column: span 2; }

/* tables -------------------------------------------------------- */
.table-wrap {
  margin: 0 calc(-1 * var(--s-6)) calc(-1 * var(--s-6));
  padding: 0 var(--s-6) var(--s-6);
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  white-space: nowrap;
}
th {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.14em;
  background: transparent;
  border-bottom-color: var(--hairline);
  padding-top: 6px;
  padding-bottom: 8px;
}
tbody tr { transition: background 120ms ease; }
tbody tr:hover { background: var(--bg-sunk); }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--ink-soft); }

td.num,
.pnl-pos, .pnl-neg {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* semantics ----------------------------------------------------- */
.side-buy  { color: var(--win);  font-weight: 600; }
.side-sell { color: var(--loss); font-weight: 600; }
.pnl-pos   { color: var(--win);  font-weight: 600; }
.pnl-neg   { color: var(--loss); font-weight: 600; }

/* pills --------------------------------------------------------- */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid transparent;
  font-family: var(--font-sans);
}
.pill.acted   { background: var(--win-tint);  color: var(--win);  border-color: rgba(47, 111, 78, 0.30); }
.pill.skipped { background: var(--mute-tint); color: var(--ink-muted); border-color: var(--hairline); }
.pill.win     { background: var(--win-tint);  color: var(--win);  border-color: rgba(47, 111, 78, 0.30); }
.pill.loss    { background: var(--loss-tint); color: var(--loss); border-color: rgba(184, 66, 58, 0.30); }

/* empty state --------------------------------------------------- */
.empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-muted);
  padding: var(--s-4) 0 var(--s-2);
}

/* news banner (high-impact countdown) ---------------------------- */
.news-banner {
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
  border-bottom: 1px solid rgba(200, 78, 44, 0.30);
}
.news-banner.is-imminent {
  background: rgba(200, 78, 44, 0.16);
}
.news-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--ink);
}
.news-banner-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #FBF7EE;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.news-banner-spacer { flex: 1; }
.news-banner-countdown {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-strong);
}

/* trade plan + bias --------------------------------------------- */
.plan-grid { grid-template-columns: 2fr 1fr; }
.plan-card .card-header h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; }
.plan-headline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.plan-ccy {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--ink);
}
.plan-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.plan-meta {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: var(--s-4);
}
.plan-when {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-strong);
}
.plan-lean {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
}
.plan-lean .hawk { color: var(--win); font-style: normal; font-weight: 600; }
.plan-lean .dove { color: var(--loss); font-style: normal; font-weight: 600; }

.plan-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.plan-scen {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-scen p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.scen-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.plan-scen.scen-up    { border-color: rgba(47, 111, 78, 0.35); background: rgba(47, 111, 78, 0.04); }
.plan-scen.scen-up    .scen-tag { color: var(--win); }
.plan-scen.scen-down  { border-color: rgba(184, 66, 58, 0.35); background: rgba(184, 66, 58, 0.04); }
.plan-scen.scen-down  .scen-tag { color: var(--loss); }
.plan-scen.scen-mixed { border-color: rgba(176, 115, 0, 0.35); background: rgba(176, 115, 0, 0.04); }
.plan-scen.scen-mixed .scen-tag { color: var(--warn); }

.bias-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.bias-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.bias-ccy {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  width: 48px;
}
.bias-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.bias-tag.hawk    { background: var(--win-tint);  color: var(--win); }
.bias-tag.dove    { background: var(--loss-tint); color: var(--loss); }
.bias-tag.neutral { background: var(--mute-tint); color: var(--ink-muted); }
.bias-mixed {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--warn);
  margin-left: auto;
}

/* calendar ------------------------------------------------------ */
.calendar-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.calendar-warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-4);
}
.warn {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  border: 1px solid transparent;
}
.warn-high   { background: var(--loss-tint); color: var(--loss); border-color: rgba(184, 66, 58, 0.35); }
.warn-medium { background: var(--warn-tint); color: var(--warn); border-color: rgba(176, 115, 0, 0.35); }
.warn-info   { background: var(--info-tint); color: var(--info); border-color: rgba(92, 122, 149, 0.30); }

.calendar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-event {
  display: grid;
  grid-template-columns: 150px 90px 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 10px var(--s-4);
  background: var(--bg-raised);
  font-size: 13px;
  transition: background 120ms ease;
}
.cal-event:hover { background: var(--bg-sunk); }
.cal-event.is-past { opacity: 0.78; }
.cal-event.is-mixed { background: rgba(176, 115, 0, 0.06); }
.cal-time { display: flex; flex-direction: column; gap: 2px; }
.cal-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.cal-countdown {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.cal-meta { display: flex; align-items: center; gap: var(--s-2); }
.cal-ccy {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
}
.cal-title {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-numbers {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}
.cal-numbers .muted { font-size: 10px; }
.cal-numbers strong { color: var(--ink); font-weight: 600; }
.cal-outcome { justify-self: end; }

/* impact badges ------------------------------------------------- */
.impact {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
}
.impact-high   { background: var(--loss-tint); color: var(--loss); border-color: rgba(184, 66, 58, 0.30); }
.impact-medium { background: var(--warn-tint); color: var(--warn); border-color: rgba(176, 115, 0, 0.30); }
.impact-low    { background: var(--mute-tint); color: var(--ink-muted); border-color: var(--hairline); }

/* outcome pills (extends .pill) --------------------------------- */
.pill.beat        { background: var(--win-tint);  color: var(--win);  border: 1px solid rgba(47, 111, 78, 0.35); }
.pill.miss        { background: var(--loss-tint); color: var(--loss); border: 1px solid rgba(184, 66, 58, 0.35); }
.pill.inline      { background: var(--mute-tint); color: var(--ink-soft); border: 1px solid var(--hairline); }
.pill.mixed       { background: var(--warn-tint); color: var(--warn); border: 1px solid rgba(176, 115, 0, 0.40); }
.pill.pending     { background: var(--mute-tint); color: var(--ink-muted); border: 1px solid var(--hairline); }
.pill.expect-hawk { background: rgba(47, 111, 78, 0.06); color: var(--win); border: 1px dashed rgba(47, 111, 78, 0.35); }
.pill.expect-dove { background: rgba(184, 66, 58, 0.06); color: var(--loss); border: 1px dashed rgba(184, 66, 58, 0.35); }
.pill.priced-in   { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid rgba(200, 78, 44, 0.40); }

/* chart card --------------------------------------------------- */
.chart-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Compact variant for the chart timeframe picker */
.seg-tf {
  padding: 2px;
}
.seg-tf .seg-btn {
  padding: 4px 9px;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  text-transform: none;
}

/* bot brain ----------------------------------------------------- */
.brain-card .card-header h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
}
.brain-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg);
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.brain-stat {
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--hairline-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brain-stat:last-child { border-right: 0; }
.brain-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.brain-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brain-value.mono {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.brain-stat .muted { font-size: 11px; }

.brain-progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.prog-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--s-3);
  align-items: center;
}
.prog-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.prog-bar {
  height: 6px;
  background: var(--bg-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 200ms ease;
}
.prog-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.brain-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--warn);
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(176, 115, 0, 0.30);
  background: var(--warn-tint);
  border-radius: var(--r-sm);
}

/* news ---------------------------------------------------------- */
.news-card { padding-bottom: var(--s-5); }
.news-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.seg {
  display: inline-flex;
  background: var(--bg-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active {
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hairline);
}
.seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.news-item {
  border-bottom: 1px solid var(--hairline-soft);
  border-right: 1px solid var(--hairline-soft);
}
.news-item:nth-child(2n) { border-right: 0; }
.news-item:nth-last-child(-n+2) { border-bottom: 0; }
.news-link {
  display: block;
  padding: var(--s-4) var(--s-5);
  color: inherit;
  border-bottom: 0;
  transition: background 150ms ease;
}
.news-link:hover {
  background: var(--bg-sunk);
  color: inherit;
  border-bottom: 0;
}
.news-link:hover .news-title { color: var(--accent); }

.news-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.news-source { color: var(--ink-soft); }
.news-age { margin-left: auto; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: none; }

.news-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.news-tag.tag-forex { background: var(--info-tint);    color: var(--info);    border-color: rgba(92, 122, 149, 0.30); }
.news-tag.tag-gold  { background: var(--warn-tint);    color: var(--warn);    border-color: rgba(176, 115, 0, 0.32); }

.news-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
  transition: color 150ms ease;
}
.news-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* footer -------------------------------------------------------- */
.page-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-8);
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  border-top: 1px solid var(--hairline);
  margin-top: var(--s-4);
}
.page-footer .dot-sep { opacity: 0.6; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .topbar-inner { grid-template-columns: auto 1fr; }
  .kpis {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: var(--s-4);
    border-top: 1px solid var(--hairline-soft);
    padding-top: var(--s-3);
  }
  .kpi { padding-left: 0; border-left: 0; min-width: 0; align-items: flex-start; }
}

@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-child(-n+3) { border-bottom: 1px solid var(--hairline); }
  .brain-grid { grid-template-columns: repeat(3, 1fr); }
  .brain-stat:nth-child(3n) { border-right: 0; }
  .brain-stat:nth-child(-n+3) { border-bottom: 1px solid var(--hairline-soft); }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-scenarios { grid-template-columns: 1fr; }
  .cal-event { grid-template-columns: 1fr 1fr; gap: 6px; padding: var(--s-3); }
  .cal-title { grid-column: 1 / -1; white-space: normal; }
  .cal-numbers { grid-column: 1 / -1; flex-wrap: wrap; }
  .cal-outcome { justify-self: start; grid-column: 1 / -1; }
  .news-list { grid-template-columns: 1fr; }
  .news-item { border-right: 0; }
  .news-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline-soft); }
  .news-item:last-child { border-bottom: 0; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  .topbar-inner {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .topbar-meta { gap: var(--s-3); flex-wrap: wrap; }
  .topbar-meta .theme-toggle .toggle-label { display: none; }   /* icon-only on phones */
  .topbar-meta .theme-toggle { padding: 6px 9px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: var(--s-4); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+4) { border-bottom: 1px solid var(--hairline); }
  .brain-grid { grid-template-columns: repeat(2, 1fr); }
  .brain-stat:nth-child(2n) { border-right: 0; }
  .brain-stat:nth-child(-n+4) { border-bottom: 1px solid var(--hairline-soft); }
  .prog-row { grid-template-columns: 1fr; gap: 4px; }
  .page { padding-top: var(--s-6); padding-bottom: var(--s-10); gap: var(--s-6); }
  .card { padding: var(--s-4); }
  .table-wrap { margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: 0 var(--s-4) var(--s-4); }
  .display { font-size: 34px; }

  /* News banner gets dense on phones -- keep tag + countdown visible, let the
     title flex-truncate instead of breaking layout. */
  .news-banner-inner { gap: var(--s-2); padding: 8px var(--gutter); font-size: 12px; }
  .news-banner-tag { padding: 2px 8px; font-size: 9px; letter-spacing: 0.10em; }

  /* Compact chart heights -- 360px eats most of the first viewport on a phone. */
  .chart-card #chart        { height: 260px; }
  .chart-card #equity-chart { height: 180px; }

  /* Tighter table cells so wider tables still fit on most phones. */
  th, td { padding: 8px 10px; font-size: 12px; }
  th { font-size: 9px; letter-spacing: 0.10em; }

  /* Compact the system banner -- on narrow screens we want the pill to stay
     above the title rather than wrap awkwardly. */
  .system-banner { flex-direction: column; align-items: flex-start; padding: var(--s-3) var(--s-4); }
  .system-banner .banner-pill { align-self: flex-start; }

  /* Plan scenario cards stack on phones (3 cols is wasteful at 360px). */
  .plan-scenarios { grid-template-columns: 1fr; }

  /* KPIs on the stacked topbar become a 2x2 grid instead of a 4x1 strip. */
  .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .kpi { padding-left: 0; border-left: 0; min-width: 0; align-items: flex-start; }
  .kpi:nth-child(2n+1) { border-right: 1px solid var(--hairline-soft); padding-right: var(--s-3); }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-soft); padding-bottom: var(--s-2); }
  .kpi span { font-size: 14px; }

  /* Calendar rows are still wide at this breakpoint -- the 150/90px columns
     get dropped in favour of a 2-col grid defined in the <900px block, but
     here we tighten cell padding and font sizing. */
  .cal-event { padding: 8px var(--s-3); font-size: 12px; gap: var(--s-2); }
  .cal-title { font-size: 12px; }
  .cal-clock { font-size: 11px; }
  .cal-numbers { font-size: 11px; gap: 4px; }
}

/* Ultra-narrow phones (iPhone SE 1st gen, 320-380px). Tighten page padding,
   hide tertiary table columns, shrink chart heights further. */
@media (max-width: 420px) {
  :root { --gutter: 14px; }
  .topbar-inner { padding: var(--s-3) var(--gutter); }
  .page { padding-top: var(--s-5); gap: var(--s-5); }
  .card { padding: var(--s-3); border-radius: var(--r-md); }
  .card-header { margin-bottom: var(--s-3); padding-bottom: var(--s-3); gap: var(--s-3); }
  .display { font-size: 26px; line-height: 1.15; }
  .lede { font-size: 13px; }
  .compact-hero .display { font-size: 26px; }

  .kpi span { font-size: 13px; }
  .kpi label { font-size: 9px; letter-spacing: 0.10em; }

  .chart-card #chart        { height: 220px; }
  .chart-card #equity-chart { height: 160px; }

  /* Hide a couple of low-signal table columns on tiny screens so the rest
     fits without horizontal scroll. The signals table only shows time/side/
     reason/proba/status -- "proba" is the most skippable. */
  #signals-table th:nth-child(4),
  #signals-table td:nth-child(4) { display: none; }

  th, td { padding: 7px 8px; font-size: 11px; }

  .pill, .impact { font-size: 9px; padding: 2px 7px; letter-spacing: 0.08em; }

  .seg-btn { padding: 5px 9px; font-size: 10px; }
  .seg-tf .seg-btn { padding: 4px 7px; font-size: 9px; }
}

/* Touch-friendly: make anything tappable at least 40px tall on small screens. */
@media (max-width: 700px) {
  .seg-btn { min-height: 32px; }
  .symbol-select { min-height: 40px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
  .pill { padding: 4px 10px; }
  .theme-toggle { min-height: 40px; padding: 8px 14px; }
}

/* ----------------------------------------------------------------- a11y */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   THEME TOGGLE
   - Default: warm cream (Duna) palette defined in :root above.
   - Dark:    activated by ``data-theme="dark"`` on <html>. Every component
              already reads from the canonical tokens, so this block only has
              to remap them to the dark palette.
   - System:  if the visitor never toggled, follow OS preference.
   ============================================================================ */

/* Theme toggle button (sits in the topbar). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-ring); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.theme-toggle .toggle-icon {
  width: 14px; height: 14px; display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z'/></svg>") no-repeat center / contain;
}
:root[data-theme="dark"] .theme-toggle .toggle-icon {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0-5v2m0 16v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0-5v2m0 16v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>") no-repeat center / contain;
}

/* Dark palette override -- remap the canonical tokens to the ``--d-*`` values. */
:root[data-theme="dark"] {
  --bg:           var(--d-bg);
  --bg-raised:    var(--d-bg-raised);
  --bg-sunk:      var(--d-bg-sunk);
  --bg-chart:     var(--d-bg-chart);

  --ink:          var(--d-ink);
  --ink-soft:     var(--d-ink-soft);
  --ink-muted:    var(--d-ink-muted);

  --hairline:     var(--d-hairline);
  --hairline-soft:var(--d-hairline-soft);

  --accent:       var(--d-accent);
  --accent-strong:var(--d-accent-strong);
  --accent-soft:  var(--d-accent-soft);
  --accent-ring:  var(--d-accent-ring);

  --win:          var(--d-win);
  --loss:         var(--d-loss);
  --warn:         var(--d-warn);
  --info:         var(--d-info);

  --win-tint:     var(--d-win-tint);
  --loss-tint:    var(--d-loss-tint);
  --warn-tint:    var(--d-warn-tint);
  --info-tint:    var(--d-info-tint);
  --mute-tint:    var(--d-mute-tint);

  --shadow-bar:   var(--d-shadow-bar);
  --shadow-pop:   var(--d-shadow-pop);

  color-scheme: dark;
}

/* OS preference fallback for visitors who never toggled. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           var(--d-bg);
    --bg-raised:    var(--d-bg-raised);
    --bg-sunk:      var(--d-bg-sunk);
    --bg-chart:     var(--d-bg-chart);
    --ink:          var(--d-ink);
    --ink-soft:     var(--d-ink-soft);
    --ink-muted:    var(--d-ink-muted);
    --hairline:     var(--d-hairline);
    --hairline-soft:var(--d-hairline-soft);
    --accent:       var(--d-accent);
    --accent-strong:var(--d-accent-strong);
    --accent-soft:  var(--d-accent-soft);
    --accent-ring:  var(--d-accent-ring);
    --win:          var(--d-win);
    --loss:         var(--d-loss);
    --warn:         var(--d-warn);
    --info:         var(--d-info);
    --win-tint:     var(--d-win-tint);
    --loss-tint:    var(--d-loss-tint);
    --warn-tint:    var(--d-warn-tint);
    --info-tint:    var(--d-info-tint);
    --mute-tint:    var(--d-mute-tint);
    --shadow-bar:   var(--d-shadow-bar);
    --shadow-pop:   var(--d-shadow-pop);
    color-scheme: dark;
  }
}

/* Some elements use hard-coded rgba in the original palette; soften them in
   dark mode so they don't punch out as bright halos. */
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .wordmark em { color: var(--accent); }
:root[data-theme="dark"] .topbar {
  /* Was hardcoded `rgba(246, 241, 231, 0.92)` -- the cream translucent strip
     stayed bright in dark mode. Swap to the dark surface with matching alpha. */
  background: rgba(15, 17, 21, 0.88);
  box-shadow: var(--shadow-bar);
}
:root[data-theme="dark"] .news-banner {
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
  border-bottom: 1px solid rgba(231, 106, 74, 0.30);
}
:root[data-theme="dark"] .news-banner.is-imminent {
  background: rgba(231, 106, 74, 0.22);
}

/* Lightweight-charts canvas sits inside a div whose background we already
   override via --bg-chart, but a couple of inline fill colors stay -- this
   rule keeps the placeholder "offline" overlay readable in dark mode. */
:root[data-theme="dark"] .chart-card.is-unavailable #chart::before {
  color: var(--ink-muted);
  background: var(--bg-sunk);
}