/* ===== Tokens ===== */
:root {
  color-scheme: light;   /* native widgets (date/number/select, scrollbars) render light */
  --bg:        oklch(0.985 0.003 90);
  --surface:   #ffffff;
  --surface-2: oklch(0.98 0.003 90);
  --border:    oklch(0.92 0.004 90);
  --border-2:  oklch(0.88 0.004 90);
  --text:      oklch(0.18 0.01 280);
  --text-2:    oklch(0.42 0.008 280);
  /* M11: darkened from L0.58 (4.29:1, fails AA) → L0.50 (6.0:1) on white */
  --muted:     oklch(0.50 0.008 280);
  --muted-line: oklch(0.72 0.02 25);
  /* H7: darkened from L0.62 (3.39:1, fails AA). L0.53 clears AA 4.5:1 not just on
     the white --surface but also on the off-white --bg / --surface-2 where up-values
     render as text on the ticker strip (2nd-pass found L0.55 = ~4.3:1 there). */
  --up:        oklch(0.53 0.17 145);
  /* H7: darkened from L0.60 (4.38:1) → 5.2:1 red on white surface */
  --down:      oklch(0.56 0.21 25);
  --soft-red:  oklch(0.78 0.12 25);
  /* Audit H2: --danger (red, = --down's AA-tuned value) and --warn (amber) were
     referenced by the F12 filing-tape tiers + F13 hot-surge but never defined. */
  --danger:    oklch(0.56 0.21 25);
  --warn:      oklch(0.60 0.14 70);
  /* H7 follow-up: --accent is used as small-text color (links, "Add Panel",
     active-toggle labels, Settings "key set"). L0.62 was 3.39:1 on white (fails
     AA); L0.53 matches --up and clears AA 4.5:1. Dark theme keeps its own L0.72. */
  --accent:    oklch(0.53 0.18 145);

  /* H6: alias tokens referenced across the sheet but never defined. Mapped to
     the closest real token so fills/text resolve in light (this :root) and
     dark ([data-theme="dark"]) themes. Aliasing (not renaming) is safest. */
  --surface-1: var(--surface);
  --card:      var(--surface);
  --bg2:       var(--surface-2);
  --text-1:    var(--text);
  --text1:     var(--text);
  --text2:     var(--text-2);
  --fg:        var(--text);

  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 0.5px 1px rgba(20, 24, 32, 0.04), 0 4px 14px -8px rgba(20, 24, 32, 0.06);

  /* Monospace token: referenced as var(--mono) across JSX inline styles but previously
     undefined (numbers fell back to the OS monospace, clashing with the 'Geist Mono'
     hardcoded in CSS). One source of truth now. */
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  /* Readable text on a filled accent/up/down background (active chips, success/danger
     buttons). Light theme: white still clears AA on the AA-tuned mid-lightness fills. */
  --on-accent: #ffffff;
  /* Softer "up" tint for the secondary bullish rating tier (Buy vs Strong Buy) — tokenised
     so it tracks the theme instead of the hardcoded #86efac it replaced. */
  --up-soft: color-mix(in srgb, var(--up) 60%, var(--surface));

  /* Small-type token used by the status-pill component. (The wider --fs-sm/md/lg +
     --sp-1..4 scale was never adopted anywhere, so it's been removed rather than left
     as a misleading half-built design system — re-add a token only when something uses it.) */
  --fs-xs: 11px;
}

/* Reusable status pill (#62): one tokenised component for the ad-hoc status badges
   scattered across Settings (credentials / borrow / IB / 2FA). */
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-pill--ok  { color: var(--up);   border-color: color-mix(in srgb, var(--up) 40%, var(--border)); }
.status-pill--warn{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.status-pill--err { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--border)); }
.status-pill--info{ color: var(--text-2); border-color: var(--border); }   /* neutral count / info */
.status-pill--info::before { display: none; }   /* a bare count needs no status dot */

/* H5: global keyboard-focus indicator. Every interactive control gets a visible
   focus ring when focused via keyboard. Placed high so later rules can still
   override per-component if needed; the .lp-* rule below is kept intact. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
  color-scheme: dark;   /* native widgets (date/number/select, scrollbars) render dark */
  --bg:        oklch(0.12 0.007 270);
  --surface:   oklch(0.17 0.007 270);
  --surface-2: oklch(0.21 0.007 270);
  --border:    oklch(0.28 0.007 270);
  --border-2:  oklch(0.33 0.007 270);
  --text:      oklch(0.94 0.005 90);
  --text-2:    oklch(0.68 0.006 280);
  /* M11: lightened from L0.50 (3.19:1, fails AA) → L0.62 (5.2:1) on dark surface */
  --muted:     oklch(0.62 0.005 280);
  --muted-line: oklch(0.60 0.05 25);
  --up:        oklch(0.72 0.18 145);
  --down:      oklch(0.70 0.21 25);
  --soft-red:  oklch(0.65 0.12 25);
  /* Audit H2: dark-theme --danger / --warn (track the brighter dark surfaces) */
  --danger:    oklch(0.70 0.21 25);
  --warn:      oklch(0.80 0.15 75);
  --accent:    oklch(0.72 0.18 145);

  /* H6: alias tokens re-mapped for the dark theme so they track dark surfaces/text */
  --surface-1: var(--surface);
  --card:      var(--surface);
  --bg2:       var(--surface-2);
  --text-1:    var(--text);
  --text1:     var(--text);
  --text2:     var(--text-2);
  --fg:        var(--text);

  --shadow-card: 0 0.5px 1px rgba(0,0,0,0.5), 0 4px 14px -8px rgba(0,0,0,0.45);
  --on-accent: #0b0e14;   /* dark text on the brighter dark-theme accent/up/down fills */
}

/* ── Dark: hardcoded light backgrounds that need inversion ── */

/* chips */
[data-theme="dark"] .chip--up { background: oklch(0.26 0.06 145); color: oklch(0.75 0.18 145); }
[data-theme="dark"] .chip--dn { background: oklch(0.26 0.06 25);  color: oklch(0.75 0.18 25); }

/* session badges */
[data-theme="dark"] .session-badge[data-session="pre"] { background: oklch(0.25 0.06 55);  color: oklch(0.78 0.18 55); }
[data-theme="dark"] .session-badge[data-session="ah"]  { background: oklch(0.22 0.04 270); color: oklch(0.70 0.10 270); }

/* analyst badges */
[data-theme="dark"] .av-badge-up   { background: oklch(0.25 0.07 145); color: oklch(0.75 0.18 145); }
[data-theme="dark"] .av-badge-down { background: oklch(0.25 0.07 25);  color: oklch(0.72 0.18 25); }
[data-theme="dark"] .av-badge-init { background: oklch(0.24 0.06 240); color: oklch(0.72 0.16 240); }
[data-theme="dark"] .av-badge-neutral { background: oklch(0.24 0.06 90); color: oklch(0.80 0.14 90); }

/* news / YouTube thumbnails */
[data-theme="dark"] .news-thumb { background: linear-gradient(135deg, oklch(0.22 0.01 270), oklch(0.18 0.01 270)); }
[data-theme="dark"] .yt-thumb-wrap { background: oklch(0.20 0 0); }

/* IB connection dot states */
[data-theme="dark"] .ib-dot         { background: oklch(0.22 0.005 270); color: var(--muted); }
[data-theme="dark"] .ib-dot--on     { background: oklch(0.23 0.07 145); color: oklch(0.75 0.18 145); }
[data-theme="dark"] .ib-dot--wait   { background: oklch(0.24 0.06 70);  color: oklch(0.78 0.18 70); }
[data-theme="dark"] .ib-dot--err    { background: oklch(0.24 0.06 25);  color: oklch(0.75 0.18 25); }

/* IB live badge on ticker strip */
[data-theme="dark"] .ib-live-badge { background: oklch(0.25 0.07 145); color: oklch(0.75 0.18 145); }

/* IB news badge */
[data-theme="dark"] .nv-ib-badge   { background: oklch(0.23 0.07 220); color: oklch(0.75 0.16 220); }
[data-theme="dark"] .nv-card--ib   { border-color: oklch(0.30 0.05 220); background: oklch(0.18 0.01 220); }

/* Options chain: ITM row highlight */
[data-theme="dark"] .opt-row--itm .opt-td       { background: oklch(0.22 0.04 145 / 0.55); }
[data-theme="dark"] .opt-row--itm:hover .opt-td { background: oklch(0.25 0.05 145 / 0.75) !important; }

/* Paired chain: ITM / ATM cell highlights */
[data-theme="dark"] .opt-td--call-itm { background: oklch(0.24 0.05 145 / 0.45) !important; }
[data-theme="dark"] .opt-td--put-itm  { background: oklch(0.24 0.06 25  / 0.40) !important; }
[data-theme="dark"] .opt-td--atm      { background: oklch(0.26 0.08 270 / 0.50) !important; }

/* ATM / ITM pills */
[data-theme="dark"] .opt-atm-pill  { background: oklch(0.30 0.12 270 / 0.45); color: oklch(0.75 0.18 270); }
[data-theme="dark"] .opt-itm-pill  { background: oklch(0.28 0.10 145 / 0.45); color: oklch(0.75 0.18 145); }

/* Greeks toggle button active */
[data-theme="dark"] .opt-greeks-btn--active       { background: oklch(0.26 0.07 145); border-color: oklch(0.45 0.18 145); color: oklch(0.80 0.18 145); }
[data-theme="dark"] .opt-greeks-btn--active:hover { background: oklch(0.30 0.08 145); }

/* IV History period btn active */
[data-theme="dark"] .ivh-period-btn--active { background: oklch(0.25 0.06 280); border-color: oklch(0.45 0.15 280); color: oklch(0.78 0.18 280); }
[data-theme="dark"] .ivh-last-badge strong  { color: oklch(0.78 0.18 280); }

/* IV Surface: cell border */
[data-theme="dark"] .ivs-td { border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .ivs-row--atm .ivs-td { border-top-color: oklch(0.72 0.18 145) !important; border-bottom-color: oklch(0.72 0.18 145) !important; }

/* DOM order book rows */
[data-theme="dark"] .dom-row--ask       { background: oklch(0.20 0.03 25); }
[data-theme="dark"] .dom-row--bid       { background: oklch(0.20 0.03 145); }
[data-theme="dark"] .dom-row--ask:hover { background: oklch(0.24 0.05 25); }
[data-theme="dark"] .dom-row--bid:hover { background: oklch(0.24 0.05 145); }
[data-theme="dark"] .dom-row--last-trade td {
  border-top-color: oklch(0.72 0.18 80) !important;
  border-bottom-color: oklch(0.72 0.18 80) !important;
  background: oklch(0.26 0.08 80 / 0.40) !important;
}
[data-theme="dark"] .dom-row--last-trade:hover td { background: oklch(0.30 0.10 80 / 0.55) !important; }

/* DOM bid/ask bars (volume depth) */
[data-theme="dark"] .dom-bar--ask { background: oklch(0.68 0.20 25 / 0.28); }
[data-theme="dark"] .dom-bar--bid { background: oklch(0.68 0.20 145 / 0.28); }

/* DOM warning badges */
[data-theme="dark"] .dom-badge--warn,
[data-theme="dark"] .dom-badge--err {
  background: oklch(0.22 0.05 25);
  border-color: oklch(0.32 0.08 25);
}
[data-theme="dark"] .dom-err-banner {
  background: oklch(0.20 0.05 25);
  border-color: oklch(0.30 0.08 25);
}

/* T&S rows */
[data-theme="dark"] .tas-row--up    { background: oklch(0.25 0.07 145); }
[data-theme="dark"] .tas-row--dn    { background: oklch(0.24 0.07 25); }
[data-theme="dark"] .tas-row--up td { color: oklch(0.82 0.15 145); }
[data-theme="dark"] .tas-row--dn td { color: oklch(0.82 0.15 25); }
[data-theme="dark"] .tas-td         { border-bottom-color: oklch(0.22 0.005 270); }

/* Auth login screen */
[data-theme="dark"] .auth-screen {
  background: linear-gradient(160deg, var(--bg) 0%, oklch(0.16 0.03 250) 100%);
}
[data-theme="dark"] .auth-error {
  background: oklch(0.20 0.05 25);
  border-color: oklch(0.30 0.08 25);
}

/* Push test results */
[data-theme="dark"] .push-test-result--ok  { background: oklch(0.22 0.06 145); color: oklch(0.75 0.18 145); border-color: oklch(0.30 0.09 145); }
[data-theme="dark"] .push-test-result--err { background: oklch(0.22 0.06 25);  color: oklch(0.75 0.18 25);  border-color: oklch(0.30 0.09 25); }

/* IB error message */
[data-theme="dark"] .ib-err-msg { color: oklch(0.72 0.18 25); }

/* My Assets: short rows */
[data-theme="dark"] .assets-short-badge { background: oklch(0.24 0.05 25); border-color: oklch(0.34 0.08 25); color: var(--down); }
[data-theme="dark"] .assets-row--short td       { background: oklch(0.18 0.02 25); }
[data-theme="dark"] .assets-row--short:hover td { background: oklch(0.22 0.04 25); }

/* Alerts */
[data-theme="dark"] .alerts-count-badge { background: oklch(0.24 0.07 145); border-color: oklch(0.36 0.12 145); }
[data-theme="dark"] .alerts-clear-btn   { background: oklch(0.22 0.05 25); border-color: oklch(0.32 0.08 25); }
[data-theme="dark"] .alerts-clear-btn:hover { background: oklch(0.26 0.07 25); }
[data-theme="dark"] .alerts-use-cur     { background: oklch(0.24 0.07 145); }
[data-theme="dark"] .alerts-use-cur:hover { background: oklch(0.28 0.08 145); }
[data-theme="dark"] .alert-dir-up { background: oklch(0.24 0.07 145); }
[data-theme="dark"] .alert-dir-dn { background: oklch(0.24 0.06 25); }

/* Price alert toast icons/badges */
[data-theme="dark"] .pa-icon-up  { background: oklch(0.24 0.08 145); }
[data-theme="dark"] .pa-icon-dn  { background: oklch(0.24 0.06 25); }
[data-theme="dark"] .pa-badge-up { background: oklch(0.24 0.07 145); }
[data-theme="dark"] .pa-badge-dn { background: oklch(0.24 0.06 25); }

/* Earnings */
[data-theme="dark"] .earn-hero-pill { background: oklch(0.24 0.09 145); border-color: oklch(0.36 0.14 145); }

/* Fundamentals tag */
[data-theme="dark"] .fund-tag {
  background: oklch(0.25 0.08 280 / 0.4);
  color: oklch(0.78 0.18 280);
  border-color: oklch(0.35 0.10 280 / 0.4);
}

/* Auth screen input focus */
[data-theme="dark"] .auth-input:focus { box-shadow: 0 0 0 4px oklch(0.94 0.005 90 / 0.07); }

/* Search dropdown shadow */
[data-theme="dark"] .search-results { box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5); }

/* Skeleton */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%);
}

/* IB mode tab box-shadow */
[data-theme="dark"] .ib-mode-tab--active { box-shadow: 0 1px 3px rgba(0,0,0,0.4); }

/* sett-input focus glow */
[data-theme="dark"] .sett-input:focus { box-shadow: 0 0 0 3px oklch(0.72 0.18 145 / 0.15); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
/* App-wide themed default for un-styled text-like inputs / selects / textareas.
   Everything lives inside :where() so this rule has ZERO specificity — any component
   class (.sett-input, .alerts-input, .tas-input, …) or inline style always wins.
   Only bare controls pick it up (they were rendering browser-default white). */
:where(
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"],
  input[type="email"], input[type="password"], input[type="tel"], input[type="url"],
  input:not([type]), textarea, select
) {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 9px;
  outline: none;
}
:where(input, textarea, select):focus-visible { border-color: var(--accent); }
:where(input, textarea)::placeholder { color: var(--muted); }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }

.num, .mono, .tick-cur, .tick-prev, .tick-delta, .metric-value .num, .compare-price, .detail-val {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.muted { color: var(--muted); }

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: 268px 1fr;
  min-height: 100vh;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}
/* W3.4: collapsed sidebar mode at desktop widths — 56-px icon rail.
   Doubles content width on a 13" laptop. The off-canvas mobile mode at
   ≤880px overrides this (sidebar becomes a full-width drawer regardless). */
.app--sidebar-collapsed { grid-template-columns: 64px 1fr; }

/* Feature-view wrapper (responsive width). The F-series views each used an ad-hoc
   inline max-width (720-1100px) + margin:auto, which left large unused side-gaps on
   wide screens even though the shell already caps content at 1680px. This shared
   wrapper fills the content area up to one sensible cap — matching the ~1200px
   convention used by .ov-wrap / .av-wrap / .markets-view. `.fview--narrow` keeps
   form / compact-matrix views from stretching their inputs uncomfortably wide. */
.fview { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; }
.fview--narrow { max-width: 880px; }
@media (max-width: 480px) { .fview { padding: 12px; } }

/* Edge Board (#20) — cross-sectional alpha desk */
.edge-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.edge-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edge-presets { display: inline-flex; gap: 3px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.edge-preset { font-size: 11px; font-weight: 600; text-transform: capitalize; padding: 4px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.edge-preset.is-on { background: color-mix(in oklch, var(--accent) 18%, var(--surface)); color: var(--accent); }
.edge-preset:hover:not(.is-on) { color: var(--text); }
.edge-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.edge-banner__regime { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edge-banner__label { font-weight: 700; font-size: 13px; }
.edge-banner__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edge-banner__meta { font-size: 11px; color: var(--muted); }
.edge-chip { display: inline-flex; gap: 4px; align-items: baseline; font-size: 11px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.edge-chip__k { color: var(--muted); }
.edge-chip__v { font-family: 'Geist Mono', monospace; font-weight: 600; }
.edge-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); text-transform: capitalize; }
.edge-pill--green { color: var(--up, #10b981); border-color: color-mix(in oklch, var(--up, #10b981) 50%, var(--border)); }
.edge-pill--red { color: var(--down, #ef4444); border-color: color-mix(in oklch, var(--down, #ef4444) 50%, var(--border)); }
.edge-pill--muted { color: var(--muted); }
.edge-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.edge-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'Geist Mono', monospace; white-space: nowrap; }
.edge-th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-weight: 600;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 7px 10px; text-align: left; cursor: pointer; user-select: none; }
.edge-th--num { text-align: right; }
.edge-td { padding: 6px 10px; text-align: left; border-top: 1px solid oklch(from var(--border) l c h / 0.4); }
.edge-td--num { text-align: right; }
.edge-td--sym { font-weight: 700; color: var(--text); }
.edge-row { cursor: pointer; }
.edge-table tbody .edge-row:hover td { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.edge-row--open td { background: color-mix(in oklch, var(--accent) 14%, transparent) !important; }
.edge-detail { padding: 4px 2px; }
.edge-detail__title { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.edge-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .edge-th, .edge-td { padding: 5px 7px; font-size: 11px; } }

/* ===== Sidebar ===== */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  /* The nav list (many grouped tabs + the bottom Account group, which uses
     margin-top:auto) can exceed the viewport height on shorter screens — without
     an internal scroll the bottom tabs become unreachable. Scroll the sidebar's
     own content; overscroll-contain stops it from chaining to the page. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 26px 18px;
  display: flex; flex-direction: column;
  gap: 28px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
/* W3.4: collapsed icon-only sidebar. The chevron in sidebar-collapse rotates
   180° in collapsed state so it visually points to "expand" again. */
.sidebar-head { position: relative; }
.sidebar-collapse {
  display: none;
  position: absolute;
  top: 50%; right: -10px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  align-items: center; justify-content: center;
  z-index: 2;
  transition: transform .14s, background .14s;
}
.sidebar-collapse:hover { background: var(--surface-2); color: var(--text); }
@media (min-width: 881px) {
  .sidebar-collapse { display: inline-flex; }
}
.sidebar--collapsed .sidebar-collapse svg { transform: rotate(180deg); }

.sidebar--collapsed {
  padding: 22px 8px;
  gap: 18px;
}
.sidebar--collapsed .brand { justify-content: center; padding: 0; }
.sidebar--collapsed .nav-item {
  justify-content: center;
  padding: 10px 6px;
}
.sidebar--collapsed .nav-item__label { display: none; }
.sidebar--collapsed .nav-item.is-active::before { left: 2px; }
.sidebar--collapsed .nav-group--bottom { padding-top: 8px; }
/* When collapsed, the active accent rail sits closer to the icon since the
   nav-item is centered rather than left-aligned. */

.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.brand-name { font-weight: 700; letter-spacing: -0.01em; font-size: 18px; }
.brand-tag  { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* QW-2: ambient IB connection state in the sidebar brand block.
   Replaces the marketing tagline. Updates live as ibConnected changes.
   Made tighter on user feedback — was reading as a chunky "tab" on the
   mobile bottom-sheet drawer. */
.brand-status {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px; font-size: 10px; font-weight: 500;
  letter-spacing: 0.02em;
}
.brand-status__dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.brand-status--ok  .brand-status__dot {
  background: var(--up);
  box-shadow: 0 0 0 1.5px oklch(from var(--up) l c h / 0.18);
  animation: brand-pulse 2.2s ease-in-out infinite;
}
.brand-status--off .brand-status__dot {
  background: var(--down);
  opacity: 0.7;
}
.brand-status--ok  .brand-status__label { color: var(--up); }
.brand-status--off .brand-status__label { color: var(--down); opacity: 0.85; }
@keyframes brand-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px oklch(from var(--up) l c h / 0.18); }
  50%      { box-shadow: 0 0 0 3px   oklch(from var(--up) l c h / 0.10); }
}

/* W1.1: 5 nav-groups now stack in the sidebar (Research, Trading, Options & Flow,
   Discovery, Account). Tightened group-gap and inter-group spacing so the full
   list fits on a 768-px tall viewport without scroll. */
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group--bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
/* W1.3: section labels keep eyebrow tracking but drop the uppercase shout.
   The CSS now lowercases incoming text and applies a controlled letter-spacing —
   readable to screen readers, calm to the eye. */
.nav-label {
  font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
  padding: 0 12px; font-weight: 500;
  text-transform: none;
}
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-list li { position: relative; }
/* Favourites: star toggle (hover-reveal on normal rows, always-on when favourited),
   drag grip, and drop-target highlight. */
.nav-fav-star {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; padding: 2px 5px; border-radius: 6px;
  font-size: 14px; line-height: 1; color: var(--muted);
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.nav-list li:hover .nav-fav-star,
.nav-fav-star:focus-visible { opacity: .75; }
.nav-fav-star:hover { opacity: 1; color: var(--warn, #f5a623); background: var(--surface-2); }
.nav-fav-star.is-on { opacity: 1; color: var(--warn, #f5a623); }
.nav-fav-li { border-radius: 10px; }
.nav-fav-li[draggable="true"] { cursor: grab; }
.nav-fav-li.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.nav-fav-grip {
  cursor: grab; color: var(--muted); opacity: .45; margin-right: -4px;
  font-size: 13px; line-height: 1; flex: 0 0 auto;
}
.nav-fav-li:hover .nav-fav-grip { opacity: .8; }
/* keep the label clear of the star button on the right */
.nav-fav-li .nav-item, .nav-list li:hover .nav-item { padding-right: 30px; }
.sidebar--collapsed .nav-fav-star, .sidebar--collapsed .nav-fav-grip { display: none; }
.sidebar--collapsed .nav-fav-li .nav-item, .sidebar--collapsed .nav-list li:hover .nav-item { padding-right: 12px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14px;
  transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
/* W1.4: dropped the box-shadow + border duo; active state now reads as
   surface-shift + text-darken only. Three signals of activeness collapse to
   one calm token. The 2-px inset accent bar on the left subliminally
   reinforces which row is selected without competing with the icon. */
.nav-item.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  position: relative;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 2px; height: 18px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 2px;
}
.nav-item--logout { color: var(--muted); }
.nav-item--logout:hover { color: var(--down); background: var(--surface-2); }

/* ===== Main ===== */
.main {
  padding: 22px 26px 60px 26px;
  display: flex; flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* ===== Topbar ===== */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding-top: 4px;
}
/* Active-ticker pill in the toolbar — at-a-glance "what's live right now". */
.topbar-active-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--mono, monospace);
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.topbar-active-pill:hover { border-color: var(--accent); }
.topbar-active-pill .tap-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex-shrink: 0;
  animation: tap-pulse 2.2s ease-out infinite;
}
.topbar-active-pill .tap-sym { font-weight: 700; font-size: 13px; color: var(--text); letter-spacing: .02em; }
.topbar-active-pill .tap-px  { font-size: 12px; color: var(--text-2); }
.topbar-active-pill .tap-chg { font-size: 12px; font-weight: 600; }
@keyframes tap-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--up) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 0%, transparent); }
}
/* Narrow screens: keep the symbol + dot, drop the price/Δ to save room. */
@media (max-width: 560px) {
  .topbar-active-pill { padding: 0 10px; }
  .topbar-active-pill .tap-px, .topbar-active-pill .tap-chg { display: none; }
}
.search {
  position: relative;
  flex: 1;
  min-width: 0;   /* allow the flex search to shrink below its content (input + ⌘K hint)
                     so the top-bar actions never overflow the viewport on narrow screens */
  display: flex; align-items: center; gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  transition: border-color .14s, box-shadow .14s;
}
.search.is-focused { border-color: var(--text-2); box-shadow: 0 0 0 4px oklch(0.18 0.01 280 / 0.06); color: var(--text); }
.search input {
  /* min-width:0 lets this flex input shrink below its intrinsic text width
     (a text input defaults to ~20ch ≈ 196px). Without it the input refused to
     shrink on narrow screens and its placeholder slid under the top-bar action
     icons. */
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.search kbd {
  font: 12px 'Geist Mono', monospace;
  color: var(--muted);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px -8px rgba(20,24,32,.12);
  padding: 6px;
  z-index: 20;
  max-height: 320px; overflow: auto;
}
.search-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 10px; border-radius: 8px;
  text-align: left;
}
.search-row:hover { background: var(--surface-2); }
.search-row__main { flex: 1; }
.search-row__sym { font-weight: 600; font-size: 13px; }
.search-row__name { font-size: 12px; color: var(--muted); }
.search-row__price { font-family: 'Geist Mono', monospace; font-size: 13px; }
.search-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.iconbtn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2);
  position: relative;
  transition: border-color .14s, color .14s;
}
.iconbtn:hover { color: var(--text); border-color: var(--border-2); }
/* W2.3: bell-wrap is the positioned anchor for the notification popover.
   Sits inside .topbar-actions and contains the iconbtn + an absolutely
   positioned numbered badge. */
.bell-wrap { position: relative; display: inline-flex; }
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Geist Mono", monospace;
  font-size: 10.5px; font-weight: 600;
  background: var(--down);
  color: white;
  border-radius: 999px;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}

.bell-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px -10px rgba(20,24,32,.18);
  z-index: 60;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-theme="dark"] .bell-popover { box-shadow: 0 14px 36px -10px rgba(0,0,0,.6); }
.bell-popover__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.bell-popover__title { font-size: 13px; font-weight: 600; }
.bell-popover__clear {
  font-size: 12px; color: var(--muted);
  padding: 4px 8px; border-radius: 6px;
}
.bell-popover__clear:hover { color: var(--down); background: var(--surface-2); }
.bell-popover__empty {
  padding: 28px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted); text-align: center;
}
.bell-popover__list { overflow-y: auto; padding: 4px; }
.bell-row {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  text-align: left;
}
.bell-row:hover { background: var(--surface-2); }
.bell-row__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2);
}
.bell-row--price .bell-row__icon { color: oklch(0.72 0.18 145); }
.bell-row--news  .bell-row__icon { color: oklch(0.65 0.16 240); }
.bell-row--youtube .bell-row__icon { color: oklch(0.65 0.21 25); }
.bell-row__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-row__title {
  font-size: 13px; line-height: 1.35;
  display: flex; align-items: baseline; gap: 6px;
  color: var(--text);
}
.bell-row__sym {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.bell-row__sub { font-size: 11.5px; }
.bell-row__time {
  font-family: "Geist Mono", monospace;
  font-size: 11px; flex-shrink: 0;
  align-self: flex-start;
  padding-top: 2px;
}

.iconbtn .dot {
  position: absolute; top: 10px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 2px var(--surface);
}
.iconbtn--sm { width: 32px; height: 32px; border-radius: 8px; }

.profile-pic {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, oklch(0.7 0.12 270), oklch(0.55 0.15 145));
  color: white; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}

/* ===== Command palette (W3.1) ===== */
/* Modal anchored toward the top of the viewport, like Linear/Raycast. The
   backdrop dims the page and closes on click; the inner card swallows
   mousedown so internal clicks don't dismiss. */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 24, 32, 0.32);
  /* M18: lifted above the toast stacks (.news-alerts-stack / .price-alerts-stack
     at z-index 9999) so a toast can't paint over the open ⌘K modal. */
  z-index: 10000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: cmdk-in .14s ease-out;
}
[data-theme="dark"] .cmdk-backdrop { background: rgba(0, 0, 0, 0.5); }
@keyframes cmdk-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cmdk {
  width: min(640px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 28px 60px -16px rgba(20,24,32,.3);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  /* M18: keep the panel above the toast layer even if it is ever portaled
     outside the backdrop's stacking context. */
  position: relative;
  z-index: 10001;
}
[data-theme="dark"] .cmdk { box-shadow: 0 28px 60px -16px rgba(0,0,0,.6); }
.cmdk__input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.cmdk__input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 15px;
  color: var(--text);
}
.cmdk__input::placeholder { color: var(--muted); }
.cmdk__esc {
  font: 11px 'Geist Mono', monospace;
  color: var(--muted);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.cmdk__empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.cmdk__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.cmdk__row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  transition: background .12s;
}
.cmdk__row.is-selected { background: var(--surface-2); }
.cmdk__icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
}
.cmdk__row.is-selected .cmdk__icon { background: var(--surface); }
.cmdk__row--ticker .cmdk__icon { background: transparent; padding: 0; }
.cmdk__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cmdk__label { font-size: 13.5px; font-weight: 500; color: var(--text); }
.cmdk__sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cmdk__kind {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
}
.cmdk__row.is-selected .cmdk__kind { background: var(--surface); }
.cmdk__hints {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
.cmdk__hints kbd {
  font: 10.5px 'Geist Mono', monospace;
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-2);
}

/* ===== View breadcrumb (W2.1) ===== */
/* Replaces the TickerStrip on global-scope views. Matches the strip's height
   so toggling between symbol and global views doesn't cause vertical jitter
   in the layout. */
.view-crumb {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 16px;
  min-height: 50px;
}
.view-crumb__icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--text-2);
  flex-shrink: 0;
}
.view-crumb__text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.view-crumb__label { font-size: 14px; font-weight: 500; color: var(--text); }
.view-crumb__hint { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ===== Ticker ===== */
.ticker {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px;
  display: flex; align-items: center;
}
.ticker-track {
  flex: 1;
  display: flex; gap: 0;
  overflow-x: auto;
  /* auto (not smooth) so the per-frame marquee scroll isn't fought by CSS smoothing;
     the edge buttons still animate via their explicit scrollBy({behavior:"smooth"}). */
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ticker-track::-webkit-scrollbar { display: none; }
/* Duplicate marquee copy: contents-only so its children lay out in the track flex row. */
.ticker-dup { display: contents; }
/* W2.2: group labels + divider between Recent and Benchmarks sections. */
.ticker-label {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 0 14px;
  align-self: center;
}
.ticker-divider {
  flex-shrink: 0;
  width: 1px;
  height: 32px;
  background: var(--border-2);
  margin: 0 6px;
}
.tick {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-right: 1px solid var(--border);
  font-size: 13px;
  transition: background .14s;
}
.tick:hover { background: var(--surface-2); }
.tick.is-active { background: var(--surface-2); }
.tick:last-child { border-right: 0; }
.tick-sym { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.tick-prev { color: var(--muted); }
.tick-cur { color: var(--text); }
.tick-delta.is-up { color: var(--up); }
.tick-delta.is-dn { color: var(--down); }

/* QW-9: session-state dot — green/amber/gray per ticker. Sits left of the
   badge so it reads as an attribute of the symbol itself. Live dot gently
   pulses to suggest "data is flowing"; pre/ah pulse slower; closed is
   solid muted. */
.tick-state-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  margin-right: 4px;
}
.tick-state-dot--live { background: var(--up); box-shadow: 0 0 0 2px oklch(from var(--up) l c h / 0.18); animation: tick-pulse 2.2s ease-in-out infinite; }
.tick-state-dot--pre  { background: oklch(0.72 0.16 80); box-shadow: 0 0 0 2px oklch(0.72 0.16 80 / 0.18); animation: tick-pulse 3.4s ease-in-out infinite; }
.tick-state-dot--ah   { background: oklch(0.62 0.14 300); box-shadow: 0 0 0 2px oklch(0.62 0.14 300 / 0.18); animation: tick-pulse 3.4s ease-in-out infinite; }
.tick-state-dot--closed { background: var(--muted); opacity: 0.55; }
@keyframes tick-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.25); opacity: 0.7; }
}
.ticker-edge {
  width: 28px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: 8px;
  flex-shrink: 0;
}
.ticker-edge:hover { background: var(--surface-2); color: var(--text); }
.ticker-edge--l svg { transform: rotate(180deg); }

/* ===== Content grid ===== */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.content-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.content-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }

/* ===== Stock header ===== */
.stock-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 4px 4px;
}
.stock-header__title { display: flex; align-items: center; gap: 18px; }
.stock-header__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pre-market / after-hours session badges */
.session-badge, .tick-session-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.session-badge[data-session="pre"],
.tick-session-badge[data-session="pre"] {
  background: oklch(0.94 0.07 55); color: oklch(0.45 0.18 55);
}
.session-badge[data-session="ah"],
.tick-session-badge[data-session="ah"] {
  background: oklch(0.93 0.06 280); color: oklch(0.45 0.16 280);
}
/* Futures contract badge */
.session-badge[data-session="futures"],
.tick-session-badge[data-session="futures"] {
  background: oklch(0.92 0.09 195); color: oklch(0.36 0.15 195);
}
/* Futures type tag in search dropdown (FUT / Index / Energy / …) */
.futures-tag {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 5px; border-radius: 3px; line-height: 1;
  margin-left: 5px; vertical-align: middle;
  background: oklch(0.92 0.09 195); color: oklch(0.36 0.15 195);
  font-family: "Geist Mono", monospace; text-transform: uppercase;
}
/* S-2: hero compressed — title was 36 px which crowded the rest of the
   first viewport. The current price is the real signal here; the symbol
   name doesn't need to dominate. 28 px keeps it readable and lifts the
   chart ~10 px higher into view. */
.stock-header__name h1 {
  font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
}
.stock-header__name .muted { font-size: 14px; align-self: flex-end; margin-bottom: 2px; }
.stock-header__sub { font-size: 13px; margin-top: 4px; }
@media (max-width: 640px) {
  .stock-header__name h1 { font-size: 22px; }
}
.stock-social { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.stock-social__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 500; text-decoration: none;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stock-social__pill:hover {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.stock-header__actions { display: flex; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: var(--border-2); background: var(--surface-2); }
/* Primary CTA — uses the brand accent (green) so the label always reads with
   the same contrast in light and dark themes. Previous version mapped to
   var(--text) which is near-white in dark mode and produced white-on-white
   "invisible" buttons on the trade CTA. */
.btn--primary {
  background: var(--accent);
  color: oklch(0.18 0.01 280);
  border-color: var(--accent);
  font-weight: 600;
}
.btn--primary:hover {
  background: oklch(from var(--accent) calc(l - 0.06) c h);
  border-color: oklch(from var(--accent) calc(l - 0.06) c h);
}
/* W1.6: explicit disabled style for the trade CTA when IB is offline or
   the symbol is halted. We use opacity rather than a separate color so
   the disabled state always reads as a deactivated version of whatever
   primary/ghost variant the button started as — no separate dark-mode
   override needed. */
.btn--disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--primary.btn--disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .btn--primary.btn--disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border-2); }
.btn--ghost {
  background: var(--surface);
  color: var(--text-2);
}
.btn--sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.btn--watchlist-active {
  background: var(--surface-2);
  color: var(--up);
  border-color: var(--up);
}
.btn--watchlist-active:hover {
  background: color-mix(in oklch, var(--up) 12%, var(--surface));
  border-color: var(--up);
  color: var(--up);
}
.linkbtn {
  color: var(--up); font-weight: 500; padding: 0;
  border-bottom: 1px solid currentColor;
}

/* ===== Metric cards ===== */
/* W3.3: metrics-wrap is the positioned container so the Customize button
   can sit at the bottom-right. The .metrics grid auto-fits between 1 and
   5 columns based on slot count. */
.metrics-wrap { position: relative; }
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  position: relative;
}
/* Remove button shown only while the picker is open. */
.metric-remove {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.metric-remove:hover { color: var(--down); border-color: var(--down); }
.metric--add {
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: color .14s, border-color .14s;
}
.metric--add:hover { color: var(--text); border-color: var(--text-2); }

.metrics-picker {
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.metrics-picker__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 500;
}
.metrics-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.metrics-picker__select {
  height: 34px; padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.metrics-edit {
  position: absolute;
  top: -28px; right: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.metrics-edit:hover { color: var(--text); background: var(--surface-2); }

/* QW-12: on phones the Customize button used to float on top of the
   primary trade CTA. Reposition under the cards instead — keeps the
   thumb-target away from the Trade button and removes the overlap. */
@media (max-width: 640px) {
  .metrics-edit {
    position: static;
    margin: 6px auto 0;
    display: flex;
    width: max-content;
    background: var(--surface);
    border: 1px solid var(--border);
  }
}

.metric-label { font-size: 13px; color: var(--muted); }
.metric-value {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 10px;
}
.metric-value .num { font-size: 28px; font-weight: 600; color: var(--text); }
.metric-value .unit { font-size: 14px; color: var(--muted); font-family: 'Geist', sans-serif; }

/* ===== Chart ===== */

/* Outer wrapper — flex column, no padding, no overflow constraints */
.chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Toolbar bar — small standalone card above the chart */
.chart-toolbar-bar {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 8px 12px;
}
/* Futures chart proxy: the embedded TradingView widget can't show exchange futures, so the
   chart uses a CFD/spot-index proxy (see FUTURES_TV_PROXY in data.jsx). This chip names it. */
.chart-proxy-note {
  margin-left: auto;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 8px;
  cursor: help;
  white-space: nowrap;
}
/* Fallback shown when a futures product has no free widget proxy (Treasuries, heating oil,
   gasoline) — beats TradingView's bare "only available on TradingView" dialog. */
.chart-noproxy {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  height: 100%; min-height: 360px;
  text-align: center;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.chart-noproxy-title { font-size: 15px; font-weight: 700; color: var(--text); }
.chart-noproxy-sub   { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 520px; }
.chart-noproxy-link {
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; margin-top: 4px;
}
.chart-noproxy-link:hover { background: var(--surface-2); }
.range-segmented {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  background: var(--surface);
}
.range-btn {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 7px;
  color: var(--muted);
  font-weight: 500;
}
.range-btn:hover { color: var(--text); }
.range-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(20,24,32,.06), 0 0 0 1px var(--border);
}
.range-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; }

/* TradingView container — TV manages its own iframe height via config height param */
.tradingview-widget-container {
  width: 100%;
  /* No height, no overflow:hidden — TV creates the iframe at the exact pixel size */
}
.tradingview-widget-container iframe {
  display: block;
  border: 0;
  border-radius: var(--radius-card);
}

/* ===== Section heads ===== */
.section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.section-head h3, .news-head h3, .detail-head h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.section-head p, .news-head p, .detail-head p { font-size: 13px; margin-top: 2px; }
.compare-card-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 18px 20px;
}

/* ===== Compare cards ===== */
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.compare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .14s, transform .14s;
}
.compare-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.compare-head { display: flex; align-items: center; justify-content: space-between; }
.compare-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); }
.chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.chip--up { background: oklch(0.95 0.06 145); color: oklch(0.42 0.14 145); }
.chip--dn { background: oklch(0.95 0.07 25);  color: oklch(0.5 0.16 25); }

/* session-aware change badge — regular daily % (vs prev close) + tagged
   "since close" extended move (PRE-MARKET / AH / OVERNIGHT) when closed */
.chg-badge { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.chg-badge .chg { font-variant-numeric: tabular-nums; font-weight: 600; }
.chg-badge .chg--ext { font-weight: 500; font-size: 0.92em; opacity: 0.95; }
.chg-badge .chg__tag {
  font-size: 0.72em; letter-spacing: 0.05em; font-weight: 700; color: var(--muted);
  margin-right: 4px; padding: 1px 5px; border-radius: 4px; vertical-align: middle;
  background: color-mix(in oklab, var(--muted) 18%, transparent);
}
.chg-badge .is-up { color: var(--up); }
.chg-badge .is-dn { color: var(--down); }
.stock-header__px { color: var(--text-2); }

/* Google-Finance-style price hero: static close + regular %, live extended line */
.price-hero { margin-top: 7px; }
.price-hero__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-hero__px { font-size: 32px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.price-hero__unit { font-size: 13px; font-weight: 500; }
.price-hero__meta { font-size: 12px; margin-top: 4px; }
.price-hero__ext { font-size: 13px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.price-hero__extpx { color: var(--text); font-weight: 600; }
.price-hero__ext .is-up { color: var(--up); }
.price-hero__ext .is-dn { color: var(--down); }

/* Themed scrollbars — match the UI instead of the OS default, both themes.
   Firefox: scrollbar-width/-color. Chromium/WebKit: ::-webkit-scrollbar.
   The thumb uses the inset-with-padding trick so it reads as a slim pill. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--text-2); background-clip: padding-box; }
.compare-price { font-size: 20px; font-weight: 600; color: var(--text); }
.compare-price .unit { font-size: 12px; color: var(--muted); font-family: 'Geist', sans-serif; font-weight: 400; }
.compare-spark { display: block; }

/* ===== Detail panel ===== */
.detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
}
.detail-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.detail-rows { display: flex; flex-direction: column; }
.detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.detail-row:last-child { border-bottom: 0; }
/* W1.3: title-case keys need slightly bigger size than the prior uppercase
   labels (uppercase reads dense at 11px; title-case wants 12-13px). The
   color stays --muted so the value remains the dominant signal in the row. */
.detail-key { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; }
.detail-val { color: var(--text); font-size: 13px; }
.detail-val--empty { color: var(--muted); opacity: 0.55; }

/* DOM/T&S microstructure strip — spread, depth, VWAP, blocks, cum Δ.
   Horizontal row of compact tiles sitting under the price header. */
.dom-micro-strip {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dom-micro {
  display: flex; flex-direction: column;
  gap: 2px;
  cursor: help;
}
.dom-micro-label {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dom-micro-value {
  font-size: 15px; font-weight: 600;
  font-family: 'Geist Mono', monospace; letter-spacing: -0.01em;
}
.dom-micro-value.is-up { color: var(--up); }
.dom-micro-value.is-dn { color: var(--down); }
.dom-micro-sub { font-size: 11px; margin-left: 6px; font-weight: 500; }

/* ─── Lane A-E styles ───────────────────────────────────────────────────── */

/* Trade Journal page */
.journal-wrap { padding: 18px; }
.journal-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.journal-head p  { margin: 4px 0 18px; }
.journal-empty   { padding: 40px; text-align: center; font-style: italic; }
.journal-table-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-x: auto; }
.journal-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.journal-table th { text-align: left; font-size: 10.5px; font-weight: 600; padding: 10px 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--border); }
.journal-table th.num { text-align: right; }
.journal-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.journal-table td.num { text-align: right; font-family: 'Geist Mono', monospace; }
.journal-sym { font-weight: 600; }
.journal-side { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.journal-side--buy  { background: oklch(from var(--up)   l c h / 0.18); color: var(--up); }
.journal-side--sell { background: oklch(from var(--down) l c h / 0.18); color: var(--down); }

/* Watchlist heatmap */
.heat-wrap { margin-bottom: 18px; }
.heat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.heat-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
}
.heat-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: transform .12s;
}
.heat-tile:hover { transform: translateY(-1px); }
.heat-tile__sym   { font-weight: 700; font-size: 13px; }
.heat-tile__pct   { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 700; }
.heat-tile__price { font-family: 'Geist Mono', monospace; font-size: 11px; }
.tile--up-strong { background: oklch(from var(--up)   l c h / 0.35); }
.tile--up        { background: oklch(from var(--up)   l c h / 0.22); }
.tile--up-mild   { background: oklch(from var(--up)   l c h / 0.10); }
.tile--dn-mild   { background: oklch(from var(--down) l c h / 0.10); }
.tile--dn        { background: oklch(from var(--down) l c h / 0.22); }
.tile--dn-strong { background: oklch(from var(--down) l c h / 0.35); }

/* Position sizer */
.psize-wrap { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.psize-wrap h3 { margin: 0; font-size: 15px; font-weight: 600; }
.psize-wrap p  { margin: 4px 0 12px; }
.psize-grid { display: flex; gap: 16px; margin-bottom: 12px; }
.psize-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.psize-grid input {
  width: 80px; padding: 6px 10px; font-size: 14px; font-family: 'Geist Mono', monospace;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
.psize-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.psize-tile { padding: 8px 12px; background: oklch(from var(--surface) calc(l + 0.01) c h); border: 1px solid var(--border); border-radius: 6px; }
.psize-tile--primary { border-color: var(--accent); background: oklch(from var(--accent) l c h / 0.10); }
.psize-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.psize-value { display: block; font-size: 18px; font-weight: 700; font-family: 'Geist Mono', monospace; }
.psize-tile--primary .psize-value { color: var(--accent); }

/* Anomaly alerts */
.anomaly-wrap { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.anomaly-wrap h3 { margin: 0; font-size: 15px; font-weight: 600; }
.anomaly-wrap p  { margin: 4px 0 10px; }
.anomaly-list { display: flex; flex-direction: column; gap: 4px; }
.anomaly-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  font-family: 'Geist Mono', monospace; font-size: 13px;
}
.anomaly-row.is-up { background: oklch(from var(--up)   l c h / 0.10); }
.anomaly-row.is-dn { background: oklch(from var(--down) l c h / 0.10); }
.anomaly-sym { font-weight: 700; min-width: 64px; }
.anomaly-pct { flex: 1; }
.anomaly-row.is-up .anomaly-pct { color: var(--up); }
.anomaly-row.is-dn .anomaly-pct { color: var(--down); }
.anomaly-z { font-weight: 700; color: var(--muted); }

/* Correlation matrix */
.corr-wrap { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.corr-wrap h3 { margin: 0; font-size: 15px; font-weight: 600; }
.corr-wrap p  { margin: 4px 0 10px; }
.corr-grid { display: grid; gap: 2px; }
.corr-head { font-size: 11px; font-weight: 600; padding: 4px; text-align: center; color: var(--muted); }
.corr-cell { padding: 6px; text-align: center; font-size: 11px; font-family: 'Geist Mono', monospace; border-radius: 3px; cursor: help; }

/* Breadth strip */
.breadth-strip {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); margin-bottom: 12px;
  font-size: 12px;
}
.breadth-label { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.breadth-item  { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.breadth-name  { color: var(--muted); font-weight: 600; }
.breadth-value { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 13px; }
.breadth-value.is-up { color: var(--up); }
.breadth-value.is-dn { color: var(--down); }

/* ── Markets aggregate view (Discovery → Markets) ─────────────────────────── */
.markets-view { padding: 18px; max-width: 1200px; }
.markets-view__head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.markets-view__head p  { margin: 4px 0 16px; }
.markets-panel { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.markets-panel h3 { margin: 0; font-size: 15px; font-weight: 600; }
.markets-panel p  { margin: 4px 0 10px; }
.markets-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--border); border-radius: 8px; }
.markets-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.markets-kpi { display: flex; gap: 14px; flex-wrap: wrap; }
.markets-kpi__cell { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.markets-kpi__lbl  { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.markets-kpi__val  { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 16px; }
.markets-kpi__val.is-up { color: var(--up); }
.markets-kpi__val.is-dn { color: var(--down); }

.occ-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  gap: 4px;
  align-items: end;
  min-height: 100px;
}
.occ-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: help; }
.occ-bar__fill {
  width: 100%; max-width: 22px;
  background: oklch(from var(--accent) l c h / 0.45);
  border-radius: 2px 2px 0 0;
  transition: background .12s;
}
.occ-bar:hover .occ-bar__fill { background: oklch(from var(--accent) l c h / 0.75); }
.occ-bar.is-last .occ-bar__fill { background: var(--accent); }
.occ-bar__lbl { font-size: 9.5px; color: var(--muted); font-family: 'Geist Mono', monospace; }

.cot-table { display: flex; flex-direction: column; gap: 4px; }
.cot-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 1.4fr;
  gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  background: oklch(from var(--surface) calc(l + 0.01) c h);
  border: 1px solid var(--border);
}
.cot-row--head {
  background: transparent; border-color: transparent; padding: 4px 10px;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cot-cell { font-size: 12.5px; }
.cot-cell.num { text-align: right; font-family: 'Geist Mono', monospace; font-weight: 600; }
.cot-cell--sym { display: flex; flex-direction: column; gap: 2px; }
.cot-sym { font-weight: 700; font-size: 13px; }
.cot-sublbl { font-size: 10.5px; }
.cot-bar { width: 100%; height: 8px; background: oklch(from var(--surface) calc(l - 0.02) c h); border-radius: 4px; overflow: hidden; }
.cot-bar__fill { height: 100%; transition: width .2s; }
.cot-bar__fill.is-up { background: var(--up); }
.cot-bar__fill.is-dn { background: var(--down); }
.cot-cell.is-up { color: var(--up); }
.cot-cell.is-dn { color: var(--down); }

.trends-form { display: flex; gap: 6px; }
.trends-input {
  font-size: 12px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  min-width: 180px;
}
.trends-go {
  font-size: 12px; padding: 5px 12px;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent); color: var(--surface);
  font-weight: 600; cursor: pointer;
}
.trends-go:hover { filter: brightness(1.08); }
.trends-chart { display: flex; flex-direction: column; gap: 6px; }
.trends-svg   { width: 100%; height: 80px; display: block; }
.trends-meta  { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.trends-meta__lbl  { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.trends-meta__val  { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 14px; }
.trends-meta__date { font-size: 11px; font-family: 'Geist Mono', monospace; }

/* ── Launchpad — Bloomberg-style linked multi-panel workspace ──────────────── */
.lp-view { padding: 14px 18px 28px; }
.lp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.lp-toolbar__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.lp-toolbar__sub   { font-size: 12px; font-weight: 400; }
.lp-toolbar__ctrls { display: flex; align-items: center; gap: 10px; }
.lp-cols { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.lp-col-btn, .lp-range, .lp-add, .lp-reset {
  font: inherit; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 7px; padding: 5px 9px; font-size: 12px;
}
.lp-col-btn { width: 28px; padding: 5px 0; text-align: center; font-weight: 600; }
.lp-col-btn.is-on { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.lp-add { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; border-color: var(--accent); color: var(--accent); }
.lp-add:hover { background: oklch(from var(--accent) l c h / 0.10); }
.lp-reset { color: var(--muted); }
.lp-reset:hover { color: var(--down); border-color: oklch(from var(--down) l c h / 0.4); }

.lp-grid { display: grid; gap: 12px; }
.lp-panel {
  display: flex; flex-direction: column;
  min-height: 220px; max-height: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border);     /* coloured by link group */
  border-radius: 10px; overflow: hidden;
}
.lp-panel__head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-bottom: 1px solid var(--border);
  background: oklch(from var(--surface) calc(l + 0.012) c h);
  flex-shrink: 0;
}
.lp-type {
  font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  padding: 4px 6px; max-width: 150px;
}
.lp-sym {
  font: inherit; font-family: 'Geist Mono', monospace; font-weight: 700;
  width: 64px; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  padding: 4px 7px; font-size: 12px;
}
.lp-sym:focus { border-color: var(--accent); outline: none; }
.lp-links { display: inline-flex; gap: 3px; margin-left: auto; }
.lp-link-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border); background: transparent;
  cursor: pointer; font-size: 9px; font-weight: 800; color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
.lp-link-dot:hover { border-color: var(--lp-dot); }
.lp-link-dot.is-on { background: var(--lp-dot); border-color: var(--lp-dot); }
.lp-panel__x, .lp-panel__pop {
  width: 22px; height: 22px; border-radius: 6px;
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-panel__x:hover  { background: var(--surface-2); color: var(--down); }
.lp-panel__pop:hover { background: var(--surface-2); color: var(--accent); }
.lp-panel__pop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Pop-out window chrome */
.lp-pop-head { justify-content: space-between; }
.lp-pop-title { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.lp-pop-badge { font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: oklch(from var(--accent) l c h / 0.14); border-radius: 4px; padding: 2px 6px; }
.lp-panel__body { flex: 1; overflow: auto; padding: 10px 12px; }
/* Fallback for reused panels (breadth/macro/cot) that render null when they have no data */
.lp-panel__body:empty::after { content: "No data available."; display: block; color: var(--muted); font-size: 12px; text-align: center; padding: 24px 0; }
/* Link-group chip in the panel header — makes linkage readable without relying on the top-border colour alone */
.lp-grp-chip { font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 800; color: var(--lp-dot); background: oklch(from var(--lp-dot) l c h / 0.16); border-radius: 4px; padding: 1px 5px; flex: 0 0 auto; line-height: 1.5; }
/* Visible keyboard focus on every interactive Launchpad control (a11y) */
.lp-grip:focus-visible, .lp-panel__x:focus-visible, .lp-link-dot:focus-visible, .lp-col-btn:focus-visible,
.lp-add:focus-visible, .lp-reset:focus-visible, .lp-range:focus-visible, .lp-type:focus-visible,
.lp-sym:focus-visible, .lp-layout-sel:focus-visible, .lp-tm-uni:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.lp-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.lp-emptydesk {
  grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 50px 20px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 10px;
}

/* Quote panel */
.lp-quote__main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-quote__px  { font-family: 'Geist Mono', monospace; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.lp-quote__chg { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; }
.lp-quote__chg.is-up { color: var(--up); }
.lp-quote__chg.is-dn { color: var(--down); }
.lp-quote__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }
.lp-quote__grid > div { display: flex; flex-direction: column; gap: 1px; }
.lp-k { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-v { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; }
.lp-v.is-up { color: var(--up); } .lp-v.is-dn { color: var(--down); }

/* Chart panel */
.lp-chart { display: flex; flex-direction: column; height: 100%; }
.lp-chart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lp-chart__ranges { display: inline-flex; gap: 3px; }
.lp-range { padding: 3px 7px; font-size: 11px; border-radius: 5px; }
.lp-range.is-on { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.lp-chart__last { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 13px; }
.lp-chart__last.is-up { color: var(--up); } .lp-chart__last.is-dn { color: var(--down); }
.lp-chart__svgwrap { flex: 1; min-height: 90px; display: flex; }
.lp-chart__svg { width: 100%; height: 100%; min-height: 90px; }

/* Options summary panel */
.lp-opt__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lp-opt-tile { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; background: oklch(from var(--surface) calc(l + 0.012) c h); border: 1px solid var(--border); border-radius: 7px; }
.lp-opt-tile .lp-v { font-size: 14px; font-weight: 700; }
.lp-opt__src { margin-top: 8px; font-size: 11px; }

/* News panel */
.lp-news { display: flex; flex-direction: column; gap: 8px; }
.lp-news__row { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.lp-news__row:last-child { border-bottom: none; }
a.lp-news__row:hover .lp-news__title { color: var(--accent); }
.lp-news__title { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.lp-news__meta { font-size: 10.5px; }
.lp-news__row--static { cursor: default; }
.lp-news__livebar { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--up); padding-bottom: 4px; }
.lp-news__dot { color: var(--up); font-size: 8px; margin-right: 4px; animation: lp-pulse 1.6s ease-in-out infinite; }
@keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Drag handle + resize handle + dragover highlight */
.lp-grip { width: 20px; height: 22px; border: none; background: transparent; color: var(--muted); cursor: grab; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border-radius: 5px; }
.lp-grip:hover { background: var(--surface-2); color: var(--text); }
.lp-grip:active { cursor: grabbing; }
.lp-panel.is-dragover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.lp-resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: ns-resize; opacity: 0.5; }
.lp-resize::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); border-bottom-right-radius: 2px; }
.lp-resize:hover { opacity: 1; }
.lp-panel { position: relative; }   /* anchor the resize handle */

/* Layout/preset picker */
.lp-layout-sel { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); padding: 5px 8px; max-width: 150px; }

/* Live-feed status chip (DOM / T&S panels) */
.lp-live { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 4px; color: var(--muted); }
.lp-live__dot { font-size: 8px; line-height: 1; }
.lp-live__t { margin-left: auto; font-family: 'Geist Mono', monospace; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.lp-live--live  { color: var(--up); }
.lp-live--live  .lp-live__dot { animation: lp-live-pulse 1.6s ease-in-out infinite; }
.lp-live--slow  { color: oklch(0.66 0.15 75); }
.lp-live--stale,
.lp-live--off   { color: var(--down); }
@keyframes lp-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* DOM ladder */
.lp-dom { display: flex; flex-direction: column; gap: 1px; font-family: 'Geist Mono', monospace; font-size: 11.5px; }
.lp-dom-side { display: flex; flex-direction: column; gap: 1px; }
.lp-dom-asks { margin-bottom: 4px; }
.lp-dom-row { position: relative; display: flex; justify-content: space-between; padding: 2px 7px; border-radius: 3px; overflow: hidden; }
.lp-dom-bar { position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; }
.lp-dom-ask .lp-dom-bar { background: oklch(from var(--down) l c h / 0.16); }
.lp-dom-bid .lp-dom-bar { background: oklch(from var(--up) l c h / 0.16); }
.lp-dom-px, .lp-dom-sz { position: relative; z-index: 1; }
.lp-dom-ask .lp-dom-px { color: var(--down); }
.lp-dom-bid .lp-dom-px { color: var(--up); }
.lp-dom-sz { color: var(--muted); }

/* T&S tape */
.lp-tas { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 11.5px; }
.lp-tas td { padding: 2px 6px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-tas-px { font-weight: 600; }
.lp-tas-px.is-up { color: var(--up); }
.lp-tas-px.is-dn { color: var(--down); }
.lp-tas-sz, .lp-tas td.num { text-align: right; }
.lp-tas-ex { text-align: right; font-size: 10px; }

/* Peer comps (RELS) */
.lp-peers { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lp-peers th { text-align: left; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.lp-peers th.num, .lp-peers td.num { text-align: right; }
.lp-peers td { padding: 3px 6px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); font-family: 'Geist Mono', monospace; }
.lp-peer-sym { font-weight: 700; }
.lp-peers td.is-up { color: var(--up); } .lp-peers td.is-dn { color: var(--down); }
.lp-peer-self { background: oklch(from var(--accent) l c h / 0.10); }
.lp-peer-self .lp-peer-sym { color: var(--accent); }

/* Market treemap */
.lp-treemap { position: relative; width: 100%; overflow: hidden; }
.lp-tm-tile {
  position: absolute; overflow: hidden;
  border: 1px solid var(--bg);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 2px 4px; cursor: default; box-sizing: border-box;
}
.lp-tm-sym { font-weight: 700; font-size: 10.5px; color: #fff; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.35); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lp-tm-pct { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.lp-tm-wrap { display: flex; flex-direction: column; gap: 6px; }
.lp-tm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 1; background: var(--surface); }
.lp-tm-uni { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; padding: 3px 7px; cursor: pointer; }
.lp-tm-count { font-size: 10px; }

/* Correlation matrix */
.lp-corr { display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.lp-corr-tbl { width: 100%; min-width: 280px; border-collapse: separate; border-spacing: 1px; font-family: 'Geist Mono', monospace; font-size: 10.5px; table-layout: fixed; }
.lp-corr-tbl thead th { font-weight: 600; color: var(--muted); padding: 2px 1px; text-align: center; font-size: 9.5px; }
.lp-corr-tbl tbody th { font-weight: 600; text-align: right; padding-right: 5px; color: var(--text); font-size: 9.5px; }
.lp-corr-tbl td { text-align: center; padding: 5px 2px; color: #fff; border-radius: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.lp-corr-cap { font-size: 10px; }

/* Relative Rotation Graph */
.lp-rrg { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.lp-rrg-svg { flex: 1 1 auto; min-height: 130px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.lp-rrg-lbl { font-family: 'Geist Mono', monospace; font-size: 7px; font-weight: 600; }
.lp-rrg-lbl.is-self { font-size: 8.5px; font-weight: 800; }
.lp-rrg-q { font-size: 6px; fill: var(--muted); opacity: 0.7; font-weight: 600; letter-spacing: 0.02em; }
.lp-rrg-cap { font-size: 10px; flex: 0 0 auto; }

/* Dealer gamma (GEX) */
.lp-gex { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.lp-gex__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 0 0 auto; }
.lp-gex__regime { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 4px; }
.lp-gex__regime.is-up { color: var(--up); background: oklch(from var(--up) l c h / 0.14); }
.lp-gex__regime.is-dn { color: var(--down); background: oklch(from var(--down) l c h / 0.14); }
.lp-gex__svg { flex: 1 1 auto; min-height: 150px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.lp-gex__axis { stroke: var(--border); stroke-width: 1; }
.lp-gex__bar.is-up { fill: var(--up); }
.lp-gex__bar.is-dn { fill: var(--down); }
.lp-gex__spot { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: none; opacity: 0.9; }
.lp-gex__flip { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.lp-gex__lbl { font-family: 'Geist Mono', monospace; font-size: 8px; font-weight: 600; fill: var(--muted); }
.lp-gex__foot { font-size: 10px; flex: 0 0 auto; }
/* Dealer-positioning controls: greek / scale / aggregation segmented toggles */
.lp-gex__controls { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.lp-seg-grp { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.lp-seg { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 7px; color: var(--muted); background: var(--surface); border: none; border-left: 1px solid var(--border); cursor: pointer; }
.lp-seg:first-child { border-left: none; }
.lp-seg:hover { color: var(--text-1); }
.lp-seg.is-on { color: var(--bg); background: var(--accent); }
/* DB-4: as-of-date selector (Live vs a stored EOD snapshot, greeks baked in) */
.lp-gex__asof { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.lp-gex__asof:hover { border-color: var(--accent); }
.lp-gex__asof:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Per-expiry net-exposure mini-breakdown */
.lp-gex__exp { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.lp-gex__exprow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 6px; }
.lp-gex__expd { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--muted); }
.lp-gex__expbar { height: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.lp-gex__expfill { display: block; height: 100%; }
.lp-gex__expfill.is-up { background: var(--up); }
.lp-gex__expfill.is-dn { background: var(--down); }
.lp-gex__expv { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; }
.lp-gex__expv.is-up { color: var(--up); }
.lp-gex__expv.is-dn { color: var(--down); }
.lp-gex__flowhint { font-size: 10px; flex: 0 0 auto; padding: 2px 6px; border: 1px dashed var(--border); border-radius: 4px; }

/* Earnings-move analyzer */
.lp-emove { display: flex; flex-direction: column; gap: 8px; }
.lp-emove__hdr { display: flex; align-items: baseline; gap: 8px; }
.lp-emove__date { font-weight: 700; font-size: 12px; }
.lp-emove__dte { font-size: 11px; color: var(--muted); font-family: 'Geist Mono', monospace; }
.lp-emove__move { display: flex; flex-direction: column; align-items: center; padding: 4px 0 2px; }
.lp-emove__big { font-family: 'Geist Mono', monospace; font-size: 30px; font-weight: 800; line-height: 1; color: var(--accent); }
.lp-emove__pct { font-size: 16px; font-weight: 700; }
.lp-emove__sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.lp-emove__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lp-emove__tile { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; }
.lp-emove__tile .lp-v { font-size: 13px; }
.lp-emove__lbl { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.lp-emove-tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 11px; }
.lp-emove-tbl td { padding: 2px 4px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-emove-tbl td.num { text-align: right; font-weight: 600; }
.lp-emove-per { color: var(--muted); }
.lp-emove-surp { color: var(--muted); }
.lp-emove__foot { font-size: 9.5px; flex: 0 0 auto; }

/* Strategy payoff diagram */
.lp-payoff { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.lp-payoff__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; flex: 0 0 auto; }
.lp-payoff__sel { font-size: 11px; font-weight: 600; padding: 2px 4px; border-radius: 5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.lp-payoff__svg { width: 100%; height: 168px; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.lp-payoff__env { fill: oklch(from var(--accent) l c h / 0.07); stroke: none; }
.lp-payoff__zero { stroke: var(--muted); stroke-width: 1; opacity: 0.55; }
.lp-payoff__spot { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.6; }
.lp-payoff__be { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; opacity: 0.55; }
.lp-payoff__expiry { stroke: var(--accent); stroke-width: 1.75; }
.lp-payoff__now { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: 0.85; }
/* Max-pain term-structure panel */
.lp-mpterm { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.lp-mpterm__hdr { display: flex; justify-content: space-between; align-items: baseline; }
.lp-mpterm__svg { width: 100%; height: 150px; display: block; overflow: visible; }
.lp-mpterm__spot { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 2; opacity: 0.6; }
.lp-mpterm__line { stroke: var(--accent); stroke-width: 1.75; }
.lp-mpterm__dot { fill: var(--accent); }
.lp-mpterm__dot.is-up { fill: var(--up); }
.lp-mpterm__dot.is-dn { fill: var(--down); }
.lp-mpterm__yl { fill: var(--muted); font-size: 9px; }
.lp-mpterm__axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); padding: 0 4px; }
.lp-payoff__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; flex: 0 0 auto; }
.lp-payoff__tile { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.lp-payoff__tile .lp-v { font-size: 12px; }
.lp-payoff__foot { font-size: 9.5px; flex: 0 0 auto; }

/* Yield-curve monitor */
.lp-yc { display: flex; flex-direction: column; gap: 6px; }
.lp-yc__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.lp-yc__inv { font-size: 9.5px; font-weight: 800; color: var(--down); background: oklch(from var(--down) l c h / 0.16); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; }
.lp-yc__asof { font-size: 10px; margin-left: auto; }
.lp-yc__svg { width: 100%; height: 128px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.lp-yc__grid { stroke: var(--border); stroke-width: 0.5; opacity: 0.5; }
.lp-yc__ylbl { font-family: 'Geist Mono', monospace; font-size: 7.5px; fill: var(--muted); }
.lp-yc__xlbl { font-family: 'Geist Mono', monospace; font-size: 8px; fill: var(--muted); text-anchor: middle; }
.lp-yc__yest { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.lp-yc__today { stroke: var(--accent); stroke-width: 1.75; }
.lp-yc__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lp-yc__tile { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; }
.lp-yc__tile .lp-v { font-size: 13px; }
.lp-yc__foot { font-size: 9.5px; }

/* Global market monitor */
.lp-gmm { display: flex; flex-direction: column; gap: 8px; }
.lp-gmm__grp { display: flex; flex-direction: column; gap: 1px; }
.lp-gmm__lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.lp-gmm__row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 1px 0; }
.lp-gmm__nm { font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-gmm__px { font-family: 'Geist Mono', monospace; font-size: 11.5px; font-weight: 600; text-align: right; }
.lp-gmm__chg { font-family: 'Geist Mono', monospace; font-size: 11.5px; font-weight: 700; text-align: right; min-width: 56px; }
.lp-gmm__chg.is-up { color: var(--up); } .lp-gmm__chg.is-dn { color: var(--down); }
.lp-gmm__foot { font-size: 9.5px; }

/* Sector / factor rotation heat */
.lp-sect { display: flex; flex-direction: column; gap: 5px; }
.lp-sect__lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-sect__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lp-sect__tile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.lp-sect__tile--empty { color: var(--muted); text-shadow: none; border: 1px solid var(--border); }
.lp-sect__sym { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 800; }
.lp-sect__chg { font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600; }
.lp-sect__foot { font-size: 9.5px; }

/* Macro / recession dashboard */
.lp-md { display: flex; flex-direction: column; gap: 7px; }
.lp-md__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lp-md__regime { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 4px; }
.lp-md__regime.is-up { color: var(--up); background: oklch(from var(--up) l c h / 0.14); }
.lp-md__regime.is-dn { color: var(--down); background: oklch(from var(--down) l c h / 0.14); }
.lp-md__sec { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.lp-md__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lp-md__tile { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; }
.lp-md__tile .lp-v { font-size: 13px; }
.lp-md__levels { display: flex; flex-direction: column; gap: 2px; }
.lp-md__row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; }
.lp-md__k { font-size: 11.5px; color: var(--text); }
.lp-md__v { font-family: 'Geist Mono', monospace; font-size: 11.5px; font-weight: 600; text-align: right; }
.lp-md__c { font-family: 'Geist Mono', monospace; font-size: 11.5px; font-weight: 700; text-align: right; min-width: 56px; }
.lp-md__c.is-up { color: var(--up); } .lp-md__c.is-dn { color: var(--down); }
.lp-md__foot { font-size: 9.5px; }

/* Pro multi-pane chart */
.lp-pc { display: flex; flex-direction: column; gap: 6px; }
.lp-pc__hdr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lp-pc__sel { font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.lp-pc__px { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 800; }
.lp-pc__leg { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); font-family: 'Geist Mono', monospace; }
.lp-pc__leg i { width: 9px; height: 2px; border-radius: 1px; display: inline-block; }
.lp-pc__leg .lp-pc__s20 { background: oklch(0.70 0.15 250); }
.lp-pc__leg .lp-pc__s50 { background: oklch(0.72 0.16 60); }
.lp-pc__rsiv { font-size: 10px; margin-left: auto; }
.lp-pc__svg { width: 100%; height: 256px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.lp-pc__grid { stroke: var(--border); stroke-width: 0.5; opacity: 0.45; }
.lp-pc__ylbl { font-family: 'Geist Mono', monospace; font-size: 7px; fill: var(--muted); }
.lp-pc__pane-lbl { font-size: 7.5px; fill: var(--muted); font-weight: 600; }
.lp-pc__up .lp-pc__body { fill: var(--up); } .lp-pc__up .lp-pc__wick { stroke: var(--up); stroke-width: 0.75; }
.lp-pc__dn .lp-pc__body { fill: var(--down); } .lp-pc__dn .lp-pc__wick { stroke: var(--down); stroke-width: 0.75; }
.lp-pc__s20-l { stroke: oklch(0.70 0.15 250); stroke-width: 1; }
.lp-pc__s50-l { stroke: oklch(0.72 0.16 60); stroke-width: 1; }
.lp-pc__vup { fill: oklch(from var(--up) l c h / 0.5); } .lp-pc__vdn { fill: oklch(from var(--down) l c h / 0.5); }
.lp-pc__rsi-band { stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 2 2; }
.lp-pc__rsi-l { stroke: var(--accent); stroke-width: 1; }
.lp-pc__foot { font-size: 9.5px; }

/* Seasonality */
.lp-seas { display: flex; flex-direction: column; gap: 6px; }
.lp-seas__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lp-seas__svg { width: 100%; height: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.lp-seas__zero { stroke: var(--muted); stroke-width: 1; opacity: 0.5; }
.lp-seas__up { fill: var(--up); } .lp-seas__dn { fill: var(--down); }
.lp-seas__ytd { fill: var(--accent); stroke: var(--surface); stroke-width: 0.5; }
.lp-seas__xlbl { font-family: 'Geist Mono', monospace; font-size: 8px; fill: var(--muted); text-anchor: middle; }
.lp-seas__foot { font-size: 9.5px; }

/* Financials + DCF */
.lp-fin { display: flex; flex-direction: column; gap: 7px; }
.lp-fin__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lp-fin__nm { font-size: 11px; font-weight: 600; color: var(--muted); }
.lp-fin__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lp-fin__kv { display: flex; flex-direction: column; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; }
.lp-fin__k { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.lp-fin__v { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; }
.lp-fin__v.is-up { color: var(--up); } .lp-fin__v.is-dn { color: var(--down); }
.lp-fin__tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 10.5px; }
.lp-fin__tbl th { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; text-align: left; padding: 2px 4px; border-bottom: 1px solid var(--border); }
.lp-fin__tbl th.num, .lp-fin__tbl td.num { text-align: right; }
.lp-fin__tbl td { padding: 2px 4px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-fin__dcf { display: flex; align-items: baseline; gap: 8px; background: color-mix(in oklch, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; }
.lp-fin__dcf-t { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-fin__fv { font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 800; color: var(--accent); }
.lp-fin__up { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; }
.lp-fin__up.is-up { color: var(--up); } .lp-fin__up.is-dn { color: var(--down); }
.lp-fin__nofv { font-size: 12px; }
/* F11: reverse-DCF implied growth + sensitivity table */
.lp-fin__rev { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.lp-fin__rev-sub { font-size: 9.5px; }
.lp-fin__sens { margin-top: 6px; }
.lp-fin__sens-t { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.lp-fin__sens-tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 10px; }
.lp-fin__sens-tbl th { color: var(--muted); font-weight: 600; padding: 2px 4px; text-align: right; }
.lp-fin__sens-tbl td { padding: 3px 4px; text-align: right; border-radius: 3px; }
.lp-fin__sens-tbl td.is-up { color: var(--up); }
.lp-fin__sens-tbl td.is-dn { color: var(--down); }
.lp-fin__sens-tbl td.is-base { outline: 1px solid var(--accent); font-weight: 700; }
.lp-fin__foot { font-size: 9px; }

/* Portfolio risk (PORT) */
.lp-port { display: flex; flex-direction: column; gap: 7px; }
.lp-port__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lp-port__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lp-port__tile { display: flex; flex-direction: column; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; }
.lp-port__tile .lp-v { font-size: 12px; }
.lp-port__tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 11px; }
.lp-port__tbl th { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; text-align: left; padding: 2px 5px; border-bottom: 1px solid var(--border); }
.lp-port__tbl th.num, .lp-port__tbl td.num { text-align: right; }
.lp-port__tbl td { padding: 2px 5px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-port__sym { font-weight: 700; }
.lp-port__foot { font-size: 9px; }

/* News sentiment */
.lp-nsent { display: flex; flex-direction: column; gap: 6px; }
.lp-nsent__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lp-nsent__lbl { font-size: 13px; font-weight: 800; }
.lp-nsent__lbl.is-up { color: var(--up); } .lp-nsent__lbl.is-dn { color: var(--down); }
.lp-nsent__surge { font-size: 10px; font-weight: 700; color: var(--muted); font-family: 'Geist Mono', monospace; margin-left: auto; }
.lp-nsent__surge.is-hot { color: var(--accent); }
.lp-nsent__crowd { font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 800; padding: 0 5px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.lp-nsent__crowd.is-up { color: var(--up); } .lp-nsent__crowd.is-dn { color: var(--down); }
.lp-nsent__bar { position: relative; height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.lp-nsent__fill { position: absolute; top: 0; height: 100%; }
.lp-nsent__mid { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--border); }
.lp-nsent__topics { display: flex; flex-wrap: wrap; gap: 4px; }
.lp-nsent__topic { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.lp-nsent__tdot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.lp-nsent__tn { font-family: 'Geist Mono', monospace; font-size: 9px; opacity: 0.7; }
.lp-nsent__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.lp-nsent__row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.lp-nsent__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.lp-nsent__ttl { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-nsent__age { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--muted); }
.lp-nsent__foot { font-size: 9.5px; }
/* StockTwits launchpad panel */
.lp-st { display: flex; flex-direction: column; gap: 6px; }
.lp-st__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lp-st__lbl { font-size: 13px; font-weight: 800; }
.lp-st__lbl.is-up { color: var(--up); } .lp-st__lbl.is-dn { color: var(--down); }
.lp-st__vol { font-size: 10px; font-family: 'Geist Mono', monospace; color: var(--muted); margin-left: auto; }
.lp-st__bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.lp-st__seg { height: 100%; }
.lp-st__seg.is-up { background: var(--up); } .lp-st__seg.is-neu { background: oklch(from var(--muted) l c h / 0.4); } .lp-st__seg.is-dn { background: var(--down); }
.lp-st__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.lp-st__row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.lp-st__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.lp-st__dot.is-up { background: var(--up); } .lp-st__dot.is-dn { background: var(--down); } .lp-st__dot.is-neu { background: oklch(from var(--muted) l c h / 0.55); }
.lp-st__txt { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-st__age { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--muted); }
.lp-st__foot { font-size: 9.5px; }

/* Filing tape (8-K) */
.lp-ftape { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lp-ftape__hdr { display: flex; align-items: baseline; gap: 8px; }
.lp-ftape__co { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ftape__toggle { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: pointer; margin-left: auto; white-space: nowrap; }
.lp-ftape__toggle.is-on { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); border-color: var(--accent); }
.lp-ftape__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.lp-ftape__row { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 5px; text-decoration: none; color: inherit; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-ftape__row:hover { background: var(--surface-2); }
.lp-ftape__row.is-8k { background: oklch(from var(--accent) l c h / 0.06); }
.lp-ftape__row.is-hi { box-shadow: inset 2px 0 0 var(--danger); }
.lp-ftape__row.is-new { animation: lp-ftape-flash 2.6s ease-out; }
@keyframes lp-ftape-flash { 0% { background: oklch(from var(--up) l c h / 0.32); } 100% { background: transparent; } }
.lp-ftape__badge { font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.lp-ftape__item { font-family: 'Geist Mono', monospace; font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 4px; white-space: nowrap; flex: 0 0 auto; }
.lp-ftape__item.tier-high { background: oklch(from var(--danger) l c h / 0.16); color: var(--danger); }
.lp-ftape__item.tier-med { background: oklch(from var(--warn) l c h / 0.16); color: var(--warn); }
.lp-ftape__item.tier-low { background: var(--surface-2); color: var(--muted); }
.lp-ftape__new { font-family: var(--mono); font-size: 8px; font-weight: 900; letter-spacing: 0.05em; padding: 1px 4px; border-radius: 3px; background: var(--up); color: var(--on-accent); flex: 0 0 auto; }
.lp-ftape__desc { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.lp-ftape__date { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; margin-left: auto; }
.lp-ftape__live { display: inline-flex; align-items: center; gap: 4px; font-family: 'Geist Mono', monospace; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--up); }
.lp-ftape__live-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: lp-ftape-pulse 1.8s ease-in-out infinite; }
@keyframes lp-ftape-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.lp-ftape__foot { font-size: 9.5px; flex: 0 0 auto; }

/* Equity screener (EQS) */
.lp-eqs { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lp-eqs__hdr { display: flex; align-items: baseline; gap: 8px; }
.lp-eqs__sel { font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.lp-eqs__count { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted); margin-left: auto; }
.lp-eqs__filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lp-eqs__f { display: flex; flex-direction: column; gap: 1px; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.lp-eqs__f input { font-family: 'Geist Mono', monospace; font-size: 12px; padding: 2px 5px; border-radius: 5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); width: 100%; }
.lp-eqs__scroll { overflow: auto; min-height: 0; border: 1px solid var(--border); border-radius: 8px; }
.lp-eqs__tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 11.5px; }
.lp-eqs__tbl th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 9.5px; text-transform: uppercase; text-align: left; padding: 4px 7px; z-index: 1; }
.lp-eqs__tbl th.num, .lp-eqs__tbl td.num { text-align: right; }
.lp-eqs__tbl td { padding: 3px 7px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-eqs__sortable { cursor: pointer; user-select: none; }
.lp-eqs__sortable:hover { color: var(--text); }
.lp-eqs__sym { font-weight: 700; color: var(--text); }
.lp-eqs__none { text-align: center; padding: 10px; }
.lp-eqs__foot { font-size: 9.5px; }

/* ── Options Monitor (OMON) view ─────────────────────────────────────────── */
.omon { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.omon-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.omon-title h2 { margin: 0 0 2px; font-size: 18px; }
.omon-title .muted { font-size: 12px; }
.omon-ctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.omon-sel { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.omon-dte { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--muted); }
.omon-toggle { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: pointer; }
.omon-toggle.is-on { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); border-color: var(--accent); }
.omon-src { font-size: 11px; color: var(--muted); }
.omon-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.omon-tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 11.5px; white-space: nowrap; }
.omon-tbl th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 10px; padding: 4px 7px; text-align: center; z-index: 1; }
.omon-tbl td { padding: 3px 7px; text-align: center; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.omon-grp-c { text-align: center !important; color: var(--up) !important; letter-spacing: 0.08em; }
.omon-grp-p { text-align: center !important; color: var(--down) !important; letter-spacing: 0.08em; }
.omon-grp-k { background: var(--surface) !important; }
.omon-k { font-weight: 800; color: var(--text); background: var(--surface-2); position: sticky; left: 0; }
.omon-tbl td.omon-k { background: var(--surface-2); }
.omon-sortable { cursor: pointer; user-select: none; }
.omon-sortable:hover { color: var(--text); }
.omon-atm td { background: color-mix(in oklch, var(--accent) 12%, var(--surface)); }
/* ITM shading: calls green, puts red (slight). On row hover the whole row lifts
   (neutral accent tint) while the ITM side intensifies, so the hover highlight and
   the ITM green/red cues coexist. */
.omon-itm-c { background: color-mix(in oklch, var(--up) 24%, transparent); }
.omon-itm-p { background: color-mix(in oklch, var(--down) 24%, transparent); }
.omon-tbl tbody tr:hover td { background: color-mix(in oklch, var(--accent) 16%, transparent); }
.omon-tbl tbody tr:hover td.omon-itm-c { background: color-mix(in oklch, var(--up) 40%, transparent); }
.omon-tbl tbody tr:hover td.omon-itm-p { background: color-mix(in oklch, var(--down) 40%, transparent); }
.omon-x { text-align: center; color: var(--muted); opacity: 0.5; }
.omon-foot { font-size: 11px; margin: 0; }
/* Options Monitor on phones: hide the Greeks (Δ, Γ) — they need the most width and
   are the least-scanned on a small screen — and tighten the remaining IV/Vol/OI/Last
   columns so the CALLS | Strike | PUTS grid fits without horizontal scroll. */
@media (max-width: 640px) {
  .omon-greek { display: none; }
  .omon-tbl { font-size: 9.5px; }
  .omon-tbl th { font-size: 8.5px; padding: 4px 3px; letter-spacing: 0; }
  .omon-tbl td { padding: 3px 3px; }
  .omon-tbl td.omon-k, .omon-tbl th.omon-k { font-size: 9.5px; }
  .omon-scroll { border-radius: 6px; }
}

/* ── Volatility Cockpit view ─────────────────────────────────────────────── */
.volc { display: flex; flex-direction: column; gap: 14px; }
.volc-head h2 { margin: 0 0 2px; font-size: 18px; }
.volc-head .muted { font-size: 12px; }
.volc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.volc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.volc-card__t { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.volc-big { font-family: 'Geist Mono', monospace; font-size: 30px; font-weight: 800; line-height: 1; }
.volc-unit { font-size: 14px; font-weight: 600; color: var(--muted); }
.volc-bar { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.volc-bar__fill { height: 100%; background: var(--accent); border-radius: 5px; }
.volc-sub { font-size: 11px; color: var(--muted); }
.volc-sub.is-up { color: var(--up); } .volc-sub.is-dn { color: var(--down); }
.volc-na { font-size: 12px; padding: 8px 0; }
.volc-rows { display: flex; flex-direction: column; gap: 4px; }
.volc-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.volc-k { font-size: 11.5px; color: var(--muted); }
.volc-v { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 700; }
.volc-v.is-up { color: var(--up); } .volc-v.is-dn { color: var(--down); }
.volc-vix { display: flex; justify-content: space-between; gap: 6px; }
.volc-vix__col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.volc-vix__px { font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 800; }
.volc-vix__lbl { font-size: 9.5px; color: var(--muted); }
.volc-foot { font-size: 11px; margin: 0; }

/* ── Session replay ──────────────────────────────────────────────────────── */
.replay-wrap { max-width: 1200px; margin: 0 auto; padding: 4px 2px 40px; }
.replay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.replay-title { font-size: 20px; font-weight: 800; margin: 0 0 2px; }
.replay-sub { font-size: 12.5px; margin: 0; }
.replay-controls { display: flex; gap: 8px; flex-shrink: 0; }
.replay-rec {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 13px; cursor: pointer; transition: border-color .15s, background .15s;
}
.replay-rec:hover { border-color: var(--down); }
.replay-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--down); flex-shrink: 0; }
.replay-rec.is-on { border-color: var(--down); background: oklch(from var(--down) l c h / 0.12); }
.replay-rec.is-on .replay-rec-dot { animation: replayPulse 1.1s ease-in-out infinite; }
@keyframes replayPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.replay-clear {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 13px; cursor: pointer;
}
.replay-clear:disabled { opacity: .4; cursor: not-allowed; }
.replay-empty { text-align: center; color: var(--muted); padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.replay-empty p { max-width: 380px; font-size: 13px; line-height: 1.5; margin: 0; }
.replay-transport { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.replay-play {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.replay-play:disabled { opacity: .4; cursor: not-allowed; }
.replay-scrub { flex: 1; accent-color: var(--accent); cursor: pointer; }
.replay-clock { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-2); flex-shrink: 0; }
.replay-frame { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted); flex-shrink: 0; min-width: 56px; text-align: right; }
.replay-spark-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.replay-spark-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.replay-spark-sym { font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.replay-spark-px { font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 800; }
.replay-spark { display: block; width: 100%; height: 90px; }
.replay-board { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.replay-board-head, .replay-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 8px 14px; background: var(--surface); }
.replay-board-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.replay-board-head span:nth-child(2), .replay-board-head span:nth-child(3),
.replay-row-px, .replay-row-chg { text-align: right; font-family: 'Geist Mono', monospace; }
.replay-row { border: none; width: 100%; cursor: pointer; text-align: left; transition: background .12s; }
.replay-row:hover { background: var(--surface-2); }
.replay-row.is-focus { background: oklch(from var(--accent) l c h / 0.1); }
.replay-row-sym { font-weight: 700; font-size: 12.5px; }
.replay-row-px { font-size: 12.5px; color: var(--text); }
.replay-row-chg { font-size: 12px; font-weight: 700; }
.replay-row-chg.is-up { color: var(--up); }
.replay-row-chg.is-dn { color: var(--down); }

/* ── Replay: source toggle, recorded controls, stats, tape ── */
.replay-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.replay-mode-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; background: transparent; color: var(--text-2); }
.replay-mode-btn.is-active { background: var(--accent); color: var(--on-accent); }
.replay-rec-controls { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.replay-field { display: flex; flex-direction: column; gap: 4px; }
.replay-field-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.replay-input {
  font-family: 'Geist Mono', monospace; font-size: 13px; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.replay-speed { flex-shrink: 0; }
.replay-progress-meta { display: flex; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted); margin: -8px 0 16px; }
.replay-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.replay-stat { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; background: var(--surface); }
.replay-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.replay-stat-val { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 800; color: var(--text); }
.replay-stat-val.is-up { color: var(--up); }
.replay-stat-val.is-dn { color: var(--down); }
.replay-tape { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 460px; overflow-y: auto; }
.replay-tape-head, .replay-tape-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.8fr; gap: 8px; align-items: center; padding: 5px 14px; background: var(--surface); }
.replay-tape-head { position: sticky; top: 0; z-index: 1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.replay-tape-head span:not(:first-child) { text-align: right; }
.replay-tape-row { font-family: 'Geist Mono', monospace; font-size: 12px; }
.replay-tape-row .rt-px, .replay-tape-row .rt-sz, .replay-tape-row .rt-ex { text-align: right; }
.replay-tape-row .rt-time { color: var(--muted); }
.replay-tape-row .rt-ex { color: var(--muted); font-size: 10.5px; }
.replay-tape-row.is-buy .rt-px { color: var(--up); }
.replay-tape-row.is-sell .rt-px { color: var(--down); }
.replay-tape-empty { padding: 22px 14px; background: var(--surface); font-size: 12.5px; text-align: center; }
.replay-chart { display: block; width: 100%; }
.replay-spark-tf { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.replay-spark-sym { display: inline-flex; align-items: center; gap: 8px; }
.replay-tf-toggle { display: inline-flex; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.replay-tf-btn { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--muted); background: var(--surface); border: none; padding: 2px 7px; cursor: pointer; transition: background .12s, color .12s; }
.replay-tf-btn:hover { color: var(--text); }
.replay-tf-btn.is-active { background: var(--accent, #4a8cff); color: var(--on-accent, #fff); }
.replay-vwap-tag { font-size: 11px; font-weight: 700; color: var(--warn, #f5a623); margin-right: 12px; font-family: 'Geist Mono', monospace; }

@media (prefers-reduced-motion: reduce) {
  .replay-rec.is-on .replay-rec-dot { animation: none; }
}
@media (max-width: 600px) {
  .replay-transport { flex-wrap: wrap; row-gap: 8px; }
  .replay-scrub { order: 3; flex-basis: 100%; min-width: 0; }
  .replay-frame { min-width: auto; }
  .replay-spark { height: 70px; }
}

/* Vol surface (OVDV-style IV heatmap) */
.lp-volsurf { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.lp-volsurf__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 0 0 auto; }
.lp-volsurf__scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
.lp-volsurf-tbl { width: 100%; border-collapse: separate; border-spacing: 1px; font-family: 'Geist Mono', monospace; font-size: 10.5px; table-layout: fixed; }
.lp-volsurf-tbl thead th { font-weight: 600; color: var(--muted); padding: 2px 1px; text-align: center; font-size: 9.5px; position: sticky; top: 0; background: var(--surface); }
.lp-volsurf-tbl tbody th { font-weight: 600; text-align: right; padding-right: 5px; color: var(--text); font-size: 9.5px; white-space: nowrap; }
.lp-volsurf-tbl tbody th.is-atm { color: var(--accent); }
.lp-volsurf-tbl td { text-align: center; padding: 4px 2px; color: #fff; border-radius: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.45); min-width: 26px; }
.lp-volsurf-tbl td.is-empty { color: var(--muted); text-shadow: none; }
.lp-volsurf__foot { font-size: 10px; flex: 0 0 auto; }
.lp-volsurf__asof { flex: 0 0 auto; }

/* DB-13: Vol History panel (front ATM IV + skew over stored EOD dates) */
.lp-volhist { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.lp-volhist__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 0 0 auto; }
.lp-volhist__svg { width: 100%; flex: 1 1 auto; min-height: 0; }
.lp-volhist__atm { fill: none; stroke: var(--warn); stroke-width: 1.5; }
.lp-volhist__skew { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.lp-volhist__lbl { font-family: 'Geist Mono', monospace; font-size: 9px; fill: var(--muted); }
.lp-volhist__foot { font-size: 10px; flex: 0 0 auto; }
.lp-volhist .is-amber { color: var(--warn); }
.lp-volhist .is-blue { color: var(--accent); }

/* F9: Dividend center */
.dvd { padding: 16px; max-width: 1200px; }
.dvd-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.dvd-head h2 { font-size: 20px; font-weight: 600; margin: 0; }
.dvd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.dvd-stat { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.dvd-stat-label { font-size: 11px; color: var(--muted); }
.dvd-stat-val { font-size: 17px; font-weight: 600; color: var(--text); }
.dvd-stat-val.earn-pos { color: var(--up, #16a34a); }
.dvd-stat-val.earn-neg { color: var(--down, #dc2626); }
.dvd-hist { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.dvd-hist-head { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.dvd-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; overflow-x: auto; }
.dvd-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 30px; flex: 1 1 0; height: 100%; }
.dvd-bar-fillwrap { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.dvd-bar { width: 100%; max-width: 26px; margin: 0 auto; background: var(--accent); border-radius: 3px 3px 0 0; }
.dvd-bar-val { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--text); }
.dvd-bar-yr { font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--muted); }
.dvd-foot { font-size: 11px; margin-top: 12px; }

/* DB-5: shared vol-surface grid (VolSurfaceGrid) — options page + launchpad panel */
.vsg { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.vsg__empty { padding: 16px; text-align: center; }
.vsg__hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 0 0 auto; }
.vsg-k { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.vsg-v { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text); }
.vsg__scroll { overflow: auto; min-height: 0; }
.vsg-tbl { width: 100%; border-collapse: separate; border-spacing: 1px; font-family: 'Geist Mono', monospace; font-size: 10.5px; }
.vsg-tbl thead th { font-weight: 600; color: var(--muted); padding: 2px 3px; text-align: center; font-size: 9.5px; position: sticky; top: 0; background: var(--surface); }
.vsg-tbl thead th.vsg-th--label { text-align: left; }
.vsg-tbl tbody th { font-weight: 600; text-align: right; padding-right: 6px; color: var(--text); font-size: 9.5px; white-space: nowrap; }
.vsg-tbl tbody th.is-atm { color: var(--accent); }
.vsg-td { text-align: center; padding: 4px 6px; border-radius: 2px; min-width: 44px; }
.vsg__foot { font-size: 10px; flex: 0 0 auto; }
/* DB-5: vol-surface "as-of" date selector (options page) */
.ivs-asof { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ivs-asof-sel { font-family: 'Geist Mono', monospace; font-size: 11px; padding: 3px 6px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.ivs-asof-sel:hover { border-color: var(--accent); }
.ivs-asof-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Term structure */
.lp-term { display: flex; flex-direction: column; gap: 6px; }
.lp-term-tag { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-term-svg { width: 100%; height: 64px; }
.lp-term-tbl { width: 100%; border-collapse: collapse; font-family: 'Geist Mono', monospace; font-size: 11.5px; }
.lp-term-tbl td { padding: 2px 6px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); }
.lp-term-tbl td.num { text-align: right; font-weight: 600; }

/* Unusual options flow */
.lp-flow { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lp-flow th { text-align: left; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.lp-flow th.num, .lp-flow td.num { text-align: right; }
.lp-flow td { padding: 3px 6px; border-bottom: 1px solid oklch(from var(--border) l c h / 0.4); font-family: 'Geist Mono', monospace; }
.lp-flow-side { display: inline-block; width: 16px; text-align: center; border-radius: 3px; font-weight: 800; font-size: 10px; }
.lp-flow-side.is-up { background: oklch(from var(--up) l c h / 0.18); color: var(--up); }
.lp-flow-side.is-dn { background: oklch(from var(--down) l c h / 0.18); color: var(--down); }
.lp-flow-hot { color: var(--down); font-weight: 700; }

/* Economic calendar */
.lp-econ { display: flex; flex-direction: column; gap: 10px; }
.lp-econ-day { display: flex; flex-direction: column; gap: 3px; }
.lp-econ-dayhdr { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.lp-econ-row { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 7px; font-size: 11.5px; padding: 2px 0; }
.lp-econ-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lp-imp-high { background: var(--down); }
.lp-imp-medium { background: oklch(0.72 0.16 70); }
.lp-imp-low { background: var(--muted); }
.lp-econ-time { font-family: 'Geist Mono', monospace; font-size: 10.5px; }
.lp-econ-ccy { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 10.5px; }
.lp-econ-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-econ-vals { font-family: 'Geist Mono', monospace; font-size: 10px; text-align: right; }

@media (max-width: 880px) {
  .lp-view { padding: 12px; }
  .lp-grid { grid-template-columns: 1fr !important; }   /* always single column on mobile */
  .lp-panel { max-height: 380px; }
  .lp-type { max-width: 120px; }
  .lp-toolbar__ctrls { flex-wrap: wrap; gap: 8px; }
  .lp-resize { display: none; }   /* no precise resize on touch */

  /* M14: launchpad header controls (link-dot 18px, grip 20px, panel ✕ 22px) are
     sub-40px tap targets on touch. Expand the clickable area to ≥36px with a
     centered transparent ::after overlay — the visible glyph size is unchanged. */
  .lp-link-dot, .lp-grip, .lp-panel__x { position: relative; }
  .lp-link-dot::after, .lp-grip::after, .lp-panel__x::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 40px; min-height: 40px;
    width: 100%; height: 100%;
  }
}

@media (max-width: 720px) {
  .markets-view { padding: 12px; }
  .markets-head { flex-direction: column; gap: 8px; }
  .markets-kpi { gap: 10px; }
  .markets-kpi__cell { min-width: 56px; }
  .markets-kpi__val { font-size: 14px; }
  .occ-bars { grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); min-height: 80px; }
  .occ-bar__lbl { font-size: 8.5px; }
  .cot-row { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 6px; }
  .cot-row--head { display: none; }
  .cot-cell.cot-bar-cell { grid-column: 1 / -1; }
  .cot-cell.num:nth-of-type(4) { display: none; }

  /* Lane A-E panels on phones */
  .breadth-strip { flex-wrap: wrap; gap: 10px; padding: 8px 10px; }
  .heat-grid     { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 3px; }
  .heat-tile     { padding: 7px 6px; }
  .heat-tile__sym { font-size: 12px; }
  .heat-tile__pct { font-size: 12px; }
  .heat-tile__price { font-size: 10px; }
  .anomaly-row { font-size: 12.5px; padding: 6px 8px; }
  .anomaly-sym { min-width: 52px; }
  .psize-grid  { flex-direction: column; gap: 8px; }
  .psize-result { grid-template-columns: repeat(2, 1fr); }
  .corr-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .corr-grid   { min-width: 480px; }   /* lets the matrix scroll horizontally */
  .insider-summary { gap: 8px; }
  .insider-chip    { flex: 1 1 calc(50% - 8px); min-width: 0; padding: 7px 9px; }
  .insider-chip-value { font-size: 16px; }
  .insider-table { font-size: 11.5px; }
  .insider-table th, .insider-table td { padding: 6px 7px; }
  .journal-table { font-size: 11.5px; }
  .journal-table th, .journal-table td { padding: 7px 8px; }
  .markets-empty { padding: 14px; font-size: 12.5px; }
  .trends-form   { width: 100%; }
  .trends-input  { flex: 1; min-width: 0; }
}

/* Earnings reaction */
.earn-react { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; }
.earn-react h3 { margin: 0; font-size: 15px; font-weight: 600; }
.earn-react p  { margin: 4px 0 10px; }
.earn-react-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.earn-react-tile { padding: 8px 12px; background: oklch(from var(--surface) calc(l + 0.01) c h); border: 1px solid var(--border); border-radius: 6px; }
.earn-react-period { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.earn-react-surprise, .earn-react-move { font-size: 12.5px; font-family: 'Geist Mono', monospace; font-weight: 600; }
.earn-react-surprise.is-up, .earn-react-move.is-up { color: var(--up); }
.earn-react-surprise.is-dn, .earn-react-move.is-dn { color: var(--down); }

/* Pre-trade checklist banner — sits above the order ticket.
   One row of color-coded chips summarising halt / session / move / insider
   bias / spread. Designed to be glanceable in <2 sec. */
.pre-trade {
  display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pre-trade-label {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pre-trade-items { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.pre-trade-chip {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 5px;
  font-family: 'Geist Mono', monospace;
  border: 0;
}
.pre-trade-chip--ok   { background: oklch(from var(--up)   l c h / 0.18); color: var(--up); }
.pre-trade-chip--warn { background: oklch(from var(--down) l c h / 0.18); color: var(--down); }
.pre-trade-chip--info { background: var(--surface-2); color: var(--text-2); }
/* Clickable chips jump to the source tab (onNav). Button reset + affordances. */
.pre-trade-chip.is-link {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px;
  transition: filter .12s ease, transform .06s ease;
}
.pre-trade-chip.is-link:hover { filter: brightness(1.14); }
.pre-trade-chip.is-link:active { transform: translateY(1px); }
.pre-trade-chip.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pre-trade-chip__go { opacity: 0.5; font-weight: 700; }

/* Macro mini-strip — Treasury yields + DXY/WTI/VIX. Sits at the top of the
   dashboard. Five tiles in a row; one tooltip per metric. */
.macro-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.macro-card { display: flex; flex-direction: column; gap: 2px; cursor: help; }
.macro-card-label {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.macro-card-value {
  font-size: 17px; font-weight: 700; font-family: 'Geist Mono', monospace;
  letter-spacing: -0.01em; line-height: 1.1;
}
.macro-card-value.is-up { color: var(--up); }
.macro-card-value.is-dn { color: var(--down); }
.macro-card-sub { font-size: 11px; color: var(--muted); font-family: 'Geist Mono', monospace; }

/* Insider activity panel — SEC Form 4 transactions on Ownership view. */
.insider-panel {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.insider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.insider-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.insider-summary { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.insider-chip {
  flex: 1 1 130px; min-width: 130px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: oklch(from var(--surface) calc(l + 0.01) c h);
}
.insider-chip--buy  { border-color: oklch(from var(--up) l c h / 0.4); }
.insider-chip--sell { border-color: oklch(from var(--down) l c h / 0.4); }
.insider-chip-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.insider-chip-value { display: block; font-size: 18px; font-weight: 700; font-family: 'Geist Mono', monospace; margin-top: 2px; }
.insider-chip-sub { display: block; font-size: 11px; color: var(--muted); font-family: 'Geist Mono', monospace; }
.insider-chip--buy  .insider-chip-value { color: var(--up); }
.insider-chip--sell .insider-chip-value { color: var(--down); }
.insider-table-wrap { overflow-x: auto; }
.insider-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.insider-table th {
  text-align: left; font-weight: 600;
  padding: 8px 10px; color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.insider-table th.num { text-align: right; }
.insider-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.insider-table td.num { text-align: right; font-family: 'Geist Mono', monospace; }
.insider-name { font-weight: 500; }
.insider-role { font-size: 11px; }
.insider-side {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.insider-side--buy  { background: oklch(from var(--up)   l c h / 0.18); color: var(--up); }
.insider-side--sell { background: oklch(from var(--down) l c h / 0.18); color: var(--down); }
.insider-empty { padding: 16px; text-align: center; font-style: italic; }

/* 13F QoQ delta grid (L5) — two-column buyers / sellers under the chip strip. */
.qoq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.qoq-col  { display: flex; flex-direction: column; gap: 4px; }
.qoq-col__head {
  font-size: 11px; font-weight: 700; padding: 6px 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 6px; color: var(--surface);
}
.qoq-col__head--up { background: var(--up); }
.qoq-col__head--dn { background: var(--down); }
.qoq-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  background: oklch(from var(--surface) calc(l + 0.01) c h);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.qoq-row.is-up { border-color: oklch(from var(--up)   l c h / 0.35); }
.qoq-row.is-dn { border-color: oklch(from var(--down) l c h / 0.35); }
.qoq-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qoq-row__pct  { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 12px; }
.qoq-row__sh   { font-family: 'Geist Mono', monospace; font-size: 11px; }
.qoq-row.is-up .qoq-row__pct { color: var(--up); }
.qoq-row.is-dn .qoq-row__pct { color: var(--down); }
.qoq-empty { padding: 10px 8px; font-style: italic; font-size: 12px; }
@media (max-width: 720px) {
  .qoq-grid { grid-template-columns: 1fr; }
}

/* Portfolio analytics card on MyAssets — portfolio beta, options net Δ,
   win rate, sector concentration. Sits above the account summary block. */
.port-analytics {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.port-analytics-head {
  font-size: 11px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.port-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.port-an-tile {
  padding: 10px 12px;
  background: oklch(from var(--surface) calc(l + 0.01) c h);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: help;
}
/* F10: portfolio risk — scenario sliders + scenario P&L */
.port-risk .port-an-value.is-up { color: var(--up, #16a34a); }
.port-risk .port-an-value.is-dn { color: var(--down, #dc2626); }
.port-scenario { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.port-scenario-controls { display: flex; flex-wrap: wrap; gap: 16px; flex: 1 1 auto; }
.port-risk-slider { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.port-risk-slider-label { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.port-risk-slider-label b { color: var(--text); font-family: 'Geist Mono', monospace; }
.port-risk-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.port-scenario-pnl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 120px; }
.port-scenario-pnl-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.port-scenario-pnl-val { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 700; }
.port-scenario-pnl.is-up .port-scenario-pnl-val { color: var(--up, #16a34a); }
.port-scenario-pnl.is-dn .port-scenario-pnl-val { color: var(--down, #dc2626); }
.port-risk-foot { font-size: 10.5px; margin-top: 8px; }
.port-an-label {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.port-an-value {
  font-size: 20px; font-weight: 700;
  font-family: 'Geist Mono', monospace; letter-spacing: -0.015em;
  line-height: 1.1;
}
.port-an-value.is-up { color: var(--up); }
.port-an-value.is-dn { color: var(--down); }
.port-an-side { font-size: 11px; font-family: inherit; color: var(--muted); font-weight: 500; }
.port-an-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

.port-an-sectors { grid-column: 1 / -1; }
.port-sector-bars {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.port-sector-bar { display: flex; flex-direction: column; gap: 2px; }
.port-sector-bar-track {
  height: 6px;
  background: oklch(from var(--surface-2) l c h / 0.5);
  border-radius: 3px;
  overflow: hidden;
}
.port-sector-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.port-sector-bar-label {
  display: flex; justify-content: space-between;
  font-size: 11px; font-family: 'Geist Mono', monospace;
}

/* Fundamental Quality Scorecard — Piotroski / Altman / FCF / Net cash.
   Sits between the 3-card grid and the history bar charts on Fundamentals. */
.fund-quality-card {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fund-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.fund-q-tile {
  padding: 10px 12px;
  background: oklch(from var(--surface) calc(l + 0.01) c h);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: help;
}
.fund-q-label {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.fund-q-value {
  font-size: 20px; font-weight: 700;
  font-family: 'Geist Mono', monospace;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.fund-q-value.is-up { color: var(--up); }
.fund-q-value.is-dn { color: var(--down); }
.fund-q-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Options analytics strip — pure-compute metrics from the chain.
   Max pain, implied move, GEX, P/C premium, 25Δ skew, term structure.
   One row of small cards under the volume stats. */
.opt-analytics-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: oklch(from var(--surface) calc(l + 0.005) c h);
}
.opt-anal-card {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: help;
}
.opt-anal-label {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.opt-anal-value {
  font-size: 18px; font-weight: 600;
  font-family: 'Geist Mono', monospace;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
}
.opt-anal-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  font-family: 'Geist Mono', monospace;
}

/* QW-10: shared skeleton-head pattern used across loading panels
   (FundamentalsView, EarningsView, Options chain pre-snapshot). Title +
   subtitle explain what's loading so the user can wait calmly. */
.fund-skeleton-head, .earn-skeleton-head {
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.fund-skeleton-title, .earn-skeleton-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.fund-skeleton-sub, .earn-skeleton-sub {
  font-size: 13px; color: var(--muted); margin-top: 4px;
}
.fund-skeleton-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.fund-skeleton-row:last-child { border-bottom: none; }

/* S-6: subtle hint that the label has a definition tooltip on hover. The
   dashed underline is a long-standing affordance for "you can ask what
   this means" — used by Wikipedia, financial sites, dictionary apps. */
.def-label {
  text-decoration: underline dotted oklch(from var(--muted) l c h / 0.45);
  text-underline-offset: 3px;
  cursor: help;
}

/* S-7: ambient session tint. Painted via data-session on the .app root so
   every symbol view picks it up without per-component plumbing. The shift
   is tiny (l ±0.01, c +0.01-0.02) — enough that the trader's peripheral
   vision registers "this is pre-market data" without distracting from the
   actual values. Neutral state stays untouched. */
.app[data-session="pre"]    { --session-tint: oklch(0.72 0.16 80  / 0.04); }
.app[data-session="ah"]     { --session-tint: oklch(0.62 0.14 300 / 0.05); }
.app[data-session="closed"] { --session-tint: oklch(0.60 0.02 280 / 0.05); }
.app[data-session="live"]   { --session-tint: transparent; }
.app[data-session]          { background-image: linear-gradient(180deg, var(--session-tint, transparent) 0%, transparent 320px); }

/* QW-5 + QW-10: shared skeleton bar used in DetailPanel and elsewhere
   wherever a row's value is still loading. Pulse animation gives a "data
   incoming" signal so the user doesn't read the row as broken. */
.skeleton-bar {
  display: inline-block;
  width: 70px; height: 12px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    oklch(from var(--surface-2) l c h / 0.6) 0%,
    oklch(from var(--surface-2) calc(l + 0.04) c h) 50%,
    oklch(from var(--surface-2) l c h / 0.6) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.detail-row--loading .detail-val { display: flex; }
.detail-row--loading .skeleton-bar { width: 90px; }

/* ===== News ===== */
.news-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
}
.news-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-item {
  display: flex; gap: 12px;
  padding: 12px 8px;
  border-radius: 10px;
  transition: background .14s;
  cursor: pointer;
}
.news-item:hover { background: var(--surface-2); }
.news-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, oklch(0.95 0.005 90), oklch(0.92 0.01 80));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.news-thumb__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}

/* W1.5: empty state replaces the static demo-news fallback. Calm vertical
   stack with an outline icon at the top — visually distinct from a loading
   card so the user knows the feed is genuinely empty rather than slow. */
.news-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 28px 18px 10px;
  gap: 8px;
  color: var(--muted);
}
.news-empty__title {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.news-empty__sub {
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 280px;
}
.news-thumb__inner > div:first-child { position: absolute; bottom: 6px; right: 6px; }
.news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.news-src { color: var(--text-2); font-weight: 600; }
.news-tag { color: var(--up); font-weight: 500; }
.news-dot { color: var(--muted); }
.news-title {
  font-size: 13px; line-height: 1.35; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

/* ===== Empty placeholder ===== */
.empty-view {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
}
.empty-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 40px 48px;
  text-align: center;
  max-width: 460px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--text-2);
}
.empty-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.empty-card p { font-size: 14px; line-height: 1.5; }

/* ===== ErrorBoundary fallback ===== */
.err-boundary {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; padding: 24px;
}
.err-boundary--full { min-height: 100vh; }
.err-boundary-card {
  background: var(--surface);
  border: 1px solid var(--down, #e5484d);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  text-align: center;
  max-width: 460px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-2);
}
.err-boundary-card strong { color: var(--text-1); font-size: 15px; font-weight: 600; }
.err-boundary-msg {
  font-size: 12.5px; line-height: 1.45; color: var(--text-3, var(--text-2));
  font-family: var(--font-mono, monospace);
  max-width: 100%; overflow-wrap: anywhere;
}

/* ===== SEC Filings ===== */
.filings-view { display: flex; flex-direction: column; gap: 18px; }
.filings-header { display: flex; flex-direction: column; gap: 14px; }
.filings-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0;
  height: 30px; padding: 0 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  transition: background .12s, color .12s, border-color .12s;
}
.filter-chip:hover { border-color: var(--border-2); color: var(--text); }
.filter-chip.is-active {
  background: var(--text); color: white; border-color: var(--text);
}
.filings-list { display: flex; flex-direction: column; gap: 6px; }
.filing-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .14s, background .14s;
}
.filing-item:hover { border-color: var(--border-2); background: var(--surface-2); }
.filing-item--skeleton { pointer-events: none; }
.filing-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.filing-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filing-summary { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.filing-meta { display: flex; align-items: center; flex-wrap: wrap; }
.filing-date { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted); }
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Loading spinner ===== */
.search-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border-2);
  border-top-color: var(--text-2);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== StockTwits Crowd View ===== */
.stv-wrap { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; }
.stv-head { display: flex; align-items: flex-start; justify-content: space-between; }
.stv-title { font-size: 18px; font-weight: 700; }
.stv-sub { font-size: 13px; margin-top: 3px; }
/* Trending on StockTwits */
.stv-trend { display: flex; flex-direction: column; gap: 8px; }
.stv-trend-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.stv-trend-head .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.stv-trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.stv-trend-card { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, var(--surface)); text-decoration: none; color: var(--text); }
.stv-trend-card:hover { border-color: var(--accent, var(--text-2)); }
.stv-trend-top { display: flex; align-items: center; justify-content: space-between; }
.stv-trend-sym { font-weight: 700; font-family: var(--mono, ui-monospace, monospace); }
.stv-trend-pct { font-size: 11px; font-weight: 600; }
.stv-trend-pct.is-up { color: var(--up); } .stv-trend-pct.is-dn { color: var(--down); } .stv-trend-pct.is-neu { color: var(--text-2); }
.stv-trend-meta { font-size: 11px; }
.stv-trend-msg { font-size: 12px; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stv-gauge { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.stv-gauge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stv-label { font-size: 14px; font-weight: 700; }
.stv-label.is-up { color: var(--up); } .stv-label.is-dn { color: var(--down); } .stv-label.is-neu { color: var(--muted); }
.stv-pct { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; }
.stv-pct.is-up { color: var(--up); } .stv-pct.is-dn { color: var(--down); } .stv-pct.is-neu { color: var(--muted); }
.stv-counts { display: inline-flex; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; }
.stv-counts .is-up { color: var(--up); } .stv-counts .is-dn { color: var(--down); } .stv-counts .muted { color: var(--muted); }
.stv-vol { font-size: 11px; margin-left: auto; }
.stv-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.stv-seg { height: 100%; }
.stv-seg.is-up { background: var(--up); } .stv-seg.is-neu { background: oklch(from var(--muted) l c h / 0.4); } .stv-seg.is-dn { background: var(--down); }
.stv-influencers { font-size: 11px; }
.stv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.stv-list { display: flex; flex-direction: column; gap: 8px; }
.stv-msg { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); text-decoration: none; color: inherit; }
.stv-msg:hover { border-color: var(--border-2); background: var(--surface-2); }
.stv-msg--skeleton { pointer-events: none; }
.stv-msg-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.stv-user { font-weight: 700; color: var(--text); }
.stv-fol { font-size: 10.5px; }
.stv-tag { font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 10px; flex: 0 0 auto; }
.stv-tag.is-up { background: oklch(from var(--up) l c h / 0.15); color: var(--up); }
.stv-tag.is-dn { background: oklch(from var(--down) l c h / 0.15); color: var(--down); }
.stv-time { margin-left: auto; }
.stv-msg-body { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.stv-msg-foot { font-size: 10.5px; }

/* ===== Reddit View ===== */
.rv-wrap {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rv-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.rv-sub   { font-size: 13px; margin-top: 4px; }
.rv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-list { display: flex; flex-direction: column; gap: 8px; }
.rv-post {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .13s, background .13s;
}
.rv-post:hover { border-color: var(--border-2); background: var(--surface-2); }
.rv-post--skeleton { pointer-events: none; }
.rv-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 36px;
  padding-top: 3px;
  color: oklch(0.52 0.18 25);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.rv-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rv-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.rv-sub-tag {
  font-size: 11px;
  font-weight: 700;
  color: oklch(0.50 0.20 25);
  background: oklch(0.96 0.06 25);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.rv-flair {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.rv-post-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--text);
}
.rv-post-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-post-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.rv-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ===== News / Media View ===== */
.nv-wrap {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: calc(100vh - 160px);
}
.nv-section { display: flex; flex-direction: column; gap: 16px; }
.nv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.nv-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.nv-sub   { font-size: 13px; margin-top: 3px; }

/* Article grid */
.nv-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
/* Bloomberg-terminal-style dense news feed (text-first, no thumbnails) */
.nv-feed {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.nv-feed-row {
  display: grid;
  grid-template-columns: 4px 52px minmax(80px, 130px) 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.nv-feed-row:last-child { border-bottom: none; }
.nv-feed-row:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.nv-feed-senti { width: 4px; align-self: stretch; background: var(--muted); border-radius: 0; }
.nv-feed-senti.is-up  { background: var(--up); }
.nv-feed-senti.is-dn  { background: var(--down); }
.nv-feed-senti.is-neu { background: oklch(from var(--muted) l c h / 0.45); }
.nv-feed-time {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; color: var(--text-2);
  text-align: right; white-space: nowrap;
}
.nv-feed-src {
  font-size: 11px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.nv-feed-title {
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nv-feed-row:hover .nv-feed-title { white-space: normal; }
@media (max-width: 640px) {
  .nv-feed-row { grid-template-columns: 4px 44px 1fr; }
  .nv-feed-src { display: none; }
}
.nv-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.nv-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-card);
}
.nv-card-thumb {
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-2);
  flex-shrink: 0;
}
.nv-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nv-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.nv-card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}

/* ── F13: news sentiment gauge + headline ticker + theme chips ── */
.nv-senti { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.nv-senti__gauge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nv-senti__label { font-size: 13px; font-weight: 700; }
.nv-senti__label.is-up { color: var(--up); } .nv-senti__label.is-dn { color: var(--down); } .nv-senti__label.is-neu { color: var(--muted); }
.nv-senti__score { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; }
.nv-senti__score.is-up { color: var(--up); } .nv-senti__score.is-dn { color: var(--down); } .nv-senti__score.is-neu { color: var(--muted); }
.nv-senti__bar { display: flex; height: 7px; flex: 1 1 140px; min-width: 120px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.nv-senti__seg { height: 100%; }
.nv-senti__seg.is-pos { background: var(--up); }
.nv-senti__seg.is-neu { background: oklch(from var(--muted) l c h / 0.4); }
.nv-senti__seg.is-neg { background: var(--down); }
.nv-senti__counts { display: inline-flex; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; }
.nv-senti__counts .is-up { color: var(--up); } .nv-senti__counts .is-dn { color: var(--down); } .nv-senti__counts .muted { color: var(--muted); }
.nv-senti__surge { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.nv-senti__surge.is-hot { background: oklch(from var(--warn) l c h / 0.18); color: var(--warn); }
.nv-senti__crowd { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.nv-senti__crowd.is-up { color: var(--up); background: oklch(from var(--up) l c h / 0.12); }
.nv-senti__crowd.is-dn { color: var(--down); background: oklch(from var(--down) l c h / 0.12); }
.nv-senti__crowd .muted { color: var(--muted); }

.nv-ticker { overflow: hidden; border-top: 1px solid var(--border); padding-top: 7px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nv-ticker__track { display: inline-flex; white-space: nowrap; animation: nv-ticker-scroll 90s linear infinite; }
.nv-ticker:hover .nv-ticker__track { animation-play-state: paused; }
.nv-ticker__seq { display: inline-flex; }
.nv-ticker__item { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; text-decoration: none; color: var(--text); font-size: 12px; border-right: 1px solid var(--border); }
.nv-ticker__item:hover .nv-ticker__txt { text-decoration: underline; }
.nv-ticker__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.nv-ticker__dot.is-up { background: var(--up); } .nv-ticker__dot.is-dn { background: var(--down); } .nv-ticker__dot.is-neu { background: oklch(from var(--muted) l c h / 0.6); }
.nv-ticker__txt { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.nv-ticker__src { font-size: 10.5px; color: var(--muted); }
@keyframes nv-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.nv-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-topic { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); cursor: pointer; }
.nv-topic:hover { border-color: var(--accent); }
.nv-topic.is-active { background: color-mix(in oklch, var(--accent) 16%, var(--surface)); color: var(--accent); border-color: var(--accent); }
.nv-topic__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.nv-topic__dot.is-up { background: var(--up); } .nv-topic__dot.is-dn { background: var(--down); } .nv-topic__dot.is-neu { background: oklch(from var(--muted) l c h / 0.6); }
.nv-topic__n { font-family: 'Geist Mono', monospace; font-size: 10px; opacity: 0.7; }

.nv-card-senti { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.nv-card-senti.is-up { background: var(--up); } .nv-card-senti.is-dn { background: var(--down); } .nv-card-senti.is-neu { background: oklch(from var(--muted) l c h / 0.5); }

@media (prefers-reduced-motion: reduce) {
  .nv-ticker { overflow-x: auto; }
  .nv-ticker__track { animation: none; }
  .nv-ticker__seq:nth-child(2) { display: none; }
}

/* X notice */
.nv-xnotice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.nv-xnotice code {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  background: var(--border);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Tweet list */
.nv-tweet-list { display: flex; flex-direction: column; gap: 10px; }
.nv-tweet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nv-tweet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nv-tweet-author { display: flex; align-items: center; gap: 10px; }
.nv-tweet-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.nv-tweet-avatar--fallback {
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.nv-tweet-name   { font-size: 13px; font-weight: 600; }
.nv-tweet-handle { font-size: 12px; color: var(--muted); }
.nv-tweet-time   { font-size: 11px; white-space: nowrap; }
.nv-tweet-text   { font-size: 13px; line-height: 1.55; color: var(--text); }
.nv-tweet-metrics { font-size: 12px; color: var(--muted); }

/* ===== Stock Dashboard ===== */
.dashboard-view {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dashboard-header h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* W3.2: "Since you were here" hero. Sits above the dash-table and shows up
   to 3 biggest moves on the user's watchlist. Hidden when nothing's moved
   ≥0.5% so the dashboard doesn't claim there's news when there isn't. */
.dash-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.dash-hero__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  color: var(--text-2);
}
.dash-hero__title { font-size: 13px; font-weight: 600; color: var(--text); }
.dash-hero__sub { font-size: 12px; }
.dash-hero__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 880px) { .dash-hero__grid { grid-template-columns: 1fr; } }
.dash-hero__card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  transition: background .14s, border-color .14s;
}
.dash-hero__card:hover { background: oklch(0.95 0.005 90); border-color: var(--border-2); }
[data-theme="dark"] .dash-hero__card:hover { background: oklch(0.23 0.007 270); }
.dash-hero__body { flex: 1; min-width: 0; }
.dash-hero__sym { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.dash-hero__name {
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-hero__delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: "Geist Mono", monospace;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 999px;
}
.dash-hero__delta.is-up { color: var(--up); background: oklch(0.95 0.06 145); }
.dash-hero__delta.is-dn { color: var(--down); background: oklch(0.95 0.06 25); }
[data-theme="dark"] .dash-hero__delta.is-up { background: oklch(0.26 0.06 145); }
[data-theme="dark"] .dash-hero__delta.is-dn { background: oklch(0.26 0.06 25); }

.dash-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.dash-row {
  display: grid;
  grid-template-columns: 210px 110px 116px 106px 150px 88px 88px 96px auto;
  align-items: center;
  padding: 13px 20px;
  gap: 0 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.dash-row:last-child { border-bottom: none; }
.dash-row:not(.dash-row--head):hover { background: var(--surface-2); }
.dash-row--head {
  cursor: default;
  background: var(--surface-2);
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.dash-row--head .dc {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dc { display: flex; align-items: center; }
.dc--sym  { gap: 10px; }
.dc--act  { gap: 6px; justify-content: flex-end; }
.dc--ext-na { color: var(--muted); font-size: 13px; }
.chip--sm { font-size: 10px; padding: 2px 6px; gap: 3px; }
.ds-sym {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ds-name {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.ds-price {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.ds-meta {
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.dash-remove {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.dash-remove:hover {
  background: oklch(0.95 0.06 25);
  color: var(--down);
}

/* ===== YouTube View ===== */
.yt-wrap {
  padding: 28px 32px;
  max-width: 1200px;
}
.yt-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.yt-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.yt-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.yt-section-label {
  display: flex; align-items: center;
  font-size: 15px; font-weight: 600; color: var(--text1); letter-spacing: -0.01em;
}
.yt-section-count {
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 20px;
}
.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.yt-card {
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.yt-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.yt-card:hover .yt-play-overlay {
  opacity: 1;
}
.yt-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: oklch(0.92 0 0);
  overflow: hidden;
}
.yt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-thumb--fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.yt-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.yt-card--skeleton .yt-thumb {
  background: var(--skeleton-base, oklch(0.92 0 0));
  animation: shimmer 1.4s infinite linear;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, oklch(0.92 0 0) 25%, oklch(0.96 0 0) 50%, oklch(0.92 0 0) 75%);
}
.yt-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.yt-video-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--text);
}
.yt-channel {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-date {
  font-size: 11px;
  margin: 0;
}

/* ===== Analyst View ===== */
.av-wrap { padding: 24px 32px 48px; max-width: 1200px; }
.av-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.av-title { font-size: 22px; font-weight: 700; }
.av-sub { font-size: 13px; margin-top: 4px; }

.av-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.av-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-card);
}
.av-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.av-card-value { font-size: 22px; font-weight: 700; font-family: 'Geist Mono', monospace; }
.av-card-sub   { font-size: 12px; color: var(--muted); font-family: 'Geist Mono', monospace; }

.av-section { margin-bottom: 28px; }
.av-section-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }

/* Trend bars */
.av-trend-list { display: flex; flex-direction: column; gap: 10px; }
.av-trend-row  { display: flex; align-items: center; gap: 12px; }
.av-trend-period { width: 110px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.av-trend-bar  { flex: 1; height: 14px; border-radius: 7px; overflow: hidden; display: flex; background: var(--border); }
.av-bar-seg    { height: 100%; transition: width .3s ease; }
/* L13: token-driven so the trend bars track the up/down/muted palette in both
   themes. Strong buy/sell use the full --up/--down; buy/sell are lighter mixes
   to keep the two-tier read; hold maps to --muted (neutral). */
.av-seg-sbuy   { background: var(--up); }
.av-seg-buy    { background: color-mix(in oklch, var(--up) 55%, var(--surface)); }
.av-seg-hold   { background: var(--muted); }
.av-seg-sell   { background: color-mix(in oklch, var(--down) 55%, var(--surface)); }
.av-seg-ssell  { background: var(--down); }
.av-trend-counts { font-size: 12px; font-family: 'Geist Mono', monospace; width: 110px; flex-shrink: 0; }

.av-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.av-legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.av-legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Table */
.av-table-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.av-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.av-filter-btn {
  font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: 20px; border: 1px solid var(--border);
  color: var(--muted); transition: border-color .15s ease, color .15s ease; cursor: pointer;
}
.av-filter-btn:hover  { border-color: var(--accent); color: var(--accent); }
.av-filter-active { background: var(--accent); color: var(--on-accent) !important; border-color: var(--accent) !important; }
.av-search {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); font-size: 12px; outline: none; width: 140px;
  transition: border-color .15s;
}
.av-search:focus { border-color: var(--accent); }

.av-table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--border); }
.av-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.av-table thead { background: var(--surface-2); }
.av-table th {
  padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.av-row { border-bottom: 1px solid var(--border); transition: background .12s; }
.av-row:last-child { border-bottom: 0; }
.av-row:hover { background: var(--surface-2); }
.av-table td { padding: 10px 14px; vertical-align: middle; }
.av-date   { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.av-firm   { font-weight: 600; white-space: nowrap; }
.av-firm-wrap { display: flex; flex-direction: column; gap: 2px; }
.av-analyst { white-space: nowrap; }
.av-analyst-name { font-size: 12px; color: var(--fg); font-style: italic; }
.av-pt     { font-family: 'Geist Mono', monospace; white-space: nowrap; }
.av-source { font-size: 11px; color: var(--muted); }
.av-source-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap; letter-spacing: 0.02em;
}
.av-empty  { text-align: center; padding: 32px; color: var(--muted); }
.av-count  { font-size: 12px; color: var(--muted); margin-top: 8px; }
.av-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; flex-wrap: wrap; gap: 8px;
}
.av-source-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.av-skeleton-row td { padding: 12px 14px; }

/* Action badges */
.av-badge {
  display: inline-block; padding: 3px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.av-badge-up     { background: #dcfce7; color: #15803d; }
.av-badge-down   { background: #fee2e2; color: #b91c1c; }
.av-badge-init   { background: #dbeafe; color: #1d4ed8; }
.av-badge-reit   { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.av-badge-neutral{ background: #fef9c3; color: #a16207; }

/* ===== Ownership View ===== */
.ov-wrap { padding: 24px 32px 48px; max-width: 1200px; }
.ov-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.ov-title  { font-size: 22px; font-weight: 700; }
.ov-sub    { font-size: 13px; margin-top: 4px; }

.ov-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.ov-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-card);
}
.ov-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ov-card-value { font-size: 22px; font-weight: 700; font-family: 'Geist Mono', monospace; }
.ov-card-sub   { font-size: 12px; color: var(--muted); }

.ov-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-card);
}
.ov-breakdown-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.ov-bar {
  height: 16px; border-radius: 8px; overflow: hidden;
  display: flex; background: var(--border);
  margin-bottom: 12px;
}
.ov-bar-seg { height: 100%; transition: width .4s ease; }
.ov-legend { display: flex; gap: 20px; flex-wrap: wrap; }
.ov-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ov-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.ov-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.ov-tab {
  font-size: 13px; font-weight: 500; padding: 8px 16px;
  border-radius: 8px 8px 0 0; border: 1px solid transparent;
  color: var(--muted); transition: border-color .15s, color .15s, background .15s;
  margin-bottom: -1px;
}
.ov-tab:hover { color: var(--text); background: var(--surface-2); }
.ov-tab--active {
  color: var(--text); background: var(--surface);
  border-color: var(--border) var(--border) var(--surface);
}

.ov-table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--border); }
.ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-table thead { background: var(--surface-2); }
.ov-table th {
  padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ov-row { border-bottom: 1px solid var(--border); transition: background .12s; }
.ov-row:last-child { border-bottom: 0; }
.ov-row:hover { background: var(--surface-2); }
.ov-table td { padding: 10px 14px; vertical-align: middle; }
.ov-rank   { font-family: 'Geist Mono', monospace; color: var(--muted); font-size: 12px; width: 32px; }
.ov-name   { font-weight: 600; }
.ov-role   { color: var(--text-2); font-size: 12px; }
.ov-num    { font-family: 'Geist Mono', monospace; white-space: nowrap; }
.ov-date   { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ov-empty  { text-align: center; padding: 32px; color: var(--muted); }
.ov-skel-row td { padding: 12px 14px; }

/* ===== Hamburger button (visible on mobile only) ===== */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.hamburger:hover span { background: var(--text); }

/* ===== Sidebar mobile drawer ===== */
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.sidebar-close {
  display: none;
  width: 44px; height: 44px;        /* WCAG ≥44px touch target */
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;       /* fast-tap, no 300 ms delay on iOS */
  -webkit-tap-highlight-color: transparent;
  z-index: 2;                       /* float above adjacent flex items */
}
.sidebar-close:hover { background: var(--surface-2); color: var(--text); }
.sidebar-close:active { transform: scale(0.94); }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 90;
  animation: backdrop-in .18s ease-out;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== Responsive ===== */
/* Tablet (≤1280px): collapse the right rail under content */
@media (max-width: 1280px) {
  .content-grid { grid-template-columns: 1fr; }
  .content-side { position: static; }
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small tablet (≤1024px): tighter spacing, smaller chart */
@media (max-width: 1024px) {
  .main { padding: 16px 18px 60px 18px; gap: 14px; }
  .metrics { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stock-header__title { gap: 14px; }
  .stock-header__name h1 { font-size: 22px; }
}

/* Mobile (≤880px): full mobile mode — sidebar becomes off-canvas drawer */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; max-width: 100vw; }

  /* Overflow guard: cap the content column to the viewport and let flex/grid
     children shrink (min-width:auto would otherwise let the top-bar search +
     actions, or a wide panel, spill past the right edge — leaving a dead
     horizontal-scroll gap). The ⌘K hint is useless on touch, so hide it. */
  .main { min-width: 0; max-width: 100vw; overflow-x: clip; }
  .search { min-width: 0; }
  .search kbd { display: none; }

  .hamburger { display: inline-flex; }
  .sidebar-close { display: inline-flex; }

  /* S-5: mobile sidebar is now an iOS/Android-style bottom-sheet drawer.
     Slides up from the bottom edge with rounded top corners and a drag
     handle. Easier to reach one-handed than a left-side drawer, and the
     pattern matches what mobile users expect from native apps.

     2026-05 user-report fix: the closed sidebar was peeking above the
     bottom edge when the mobile browser's URL bar collapsed during a
     scroll-down.  Cause:  transform: translateY(105%) moves the element
     only 105% of its OWN height (~92vh).  position:fixed + bottom:0 pins
     to the "small viewport" (URL-bar-visible height) on iOS Safari and
     Chrome-iOS — when the URL bar collapses, the actual visible area
     extends BELOW the small viewport, exposing the sidebar's top edge.
     Fix uses translate3d(0, 100vh, 0) so the closed sheet is shoved a
     full viewport height down regardless of URL-bar state, plus
     visibility:hidden after the close transition so it can't intercept
     taps even if a subpixel of it sneaks into the visual viewport. */
  .sidebar {
    position: fixed; left: 0; right: 0;
    bottom: 0;
    width: 100%; max-width: none;
    height: auto;                          /* unset the desktop 100vh */
    max-height: 88vh; min-height: 70vh;
    z-index: 100;
    transform: translate3d(0, 100vh, 0);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.4,.0,.2,1),
                visibility 0s linear .26s;  /* hide after slide finishes */
    box-shadow: 0 -8px 32px rgba(20,24,32,.28);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px 18px;
    gap: 16px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background: var(--bg);
  }
  .sidebar.sidebar--open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform .26s cubic-bezier(.4,.0,.2,1),
                visibility 0s linear 0s;    /* visible immediately on open */
  }
  /* Drag-handle indicator at the top of the sheet */
  .sidebar::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--muted); opacity: 0.3;
    margin: 10px auto 14px;
  }
  .sidebar-backdrop { display: block; }

  .topbar { gap: 10px; padding-top: 2px; }
  .search { height: 42px; padding: 0 12px; }
  .search input { font-size: 14px; }
  .search kbd { display: none; }
  .topbar-actions { gap: 8px; }
  .iconbtn { width: 42px; height: 42px; }
  .profile-pic { width: 42px; height: 42px; font-size: 13px; }

  .ticker { padding: 6px 4px; border-radius: 12px; }
  .tick { padding: 8px 12px; gap: 8px; font-size: 12px; }
  .tick-sym { font-size: 13px; }

  .main { padding: 12px 14px 60px 14px; gap: 12px; }

  .stock-header {
    flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 0;
  }
  .stock-header__title { gap: 12px; width: 100%; }
  .stock-header__name h1 { font-size: 20px; line-height: 1.2; }
  .stock-header__name { gap: 8px; }
  .stock-header__actions { width: 100%; gap: 8px; }
  .stock-header__actions .btn { flex: 1; justify-content: center; }

  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { padding: 12px 14px; }
  .metric-value .num { font-size: 22px; }

  .compare-grid { grid-template-columns: 1fr; }
  .content-grid { gap: 12px; }
}

/* Default: hide mobile-only assets card list — declared HERE (before the ≤640px
   block) so the media-query override below wins in the cascade. Placing this rule
   AFTER the media query would give it higher cascade priority (same specificity,
   later position) and permanently hide the cards even on mobile. */
.assets-cards { display: none; flex-direction: column; gap: 10px; }

/* Phone (≤640px): aggressive optimization for portrait phones */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .main { padding: 10px 12px 80px 12px; }

  /* Search: take full width, hide actions */
  /* M12: child combinator hides only DIRECT-child iconbtns (the settings gear)
     while keeping the notification bell — which is nested in .bell-wrap — visible.
     The bell's history popover has no other entry point on mobile. */
  .topbar-actions > .iconbtn { display: none; }
  .profile-pic { display: none; }

  /* Single-column metrics on phones for the big-number look */
  .metrics { grid-template-columns: 1fr; }
  .metric-value .num { font-size: 24px; }

  /* Brand: hide tagline on small drawer */
  .brand-tag { display: none; }

  /* Stock header: smaller logo */
  .stock-header__title { gap: 10px; }

  /* TradingView chart height halved for phone */
  .tradingview-widget-container,
  .tradingview-widget-container iframe { height: 380px !important; }

  /* Settings: full-width inputs */
  .sett-input--lg, .sett-input--md { width: 100% !important; max-width: 100%; }
  .sett-input--sm { width: 110px; }
  .sett-page { padding: 0; }
  .sett-hero { gap: 10px; padding: 4px 0 12px 0; }
  .sett-hero-title { font-size: 20px; }

  /* IB mode tabs: stack labels on tiny screens */
  .ib-mode-tabs { font-size: 11px; }
  .ib-mode-tab { padding: 8px 8px; }
  .ib-info-row { flex-direction: column; gap: 4px; padding: 10px 12px; }
  .ib-info-label { min-width: 0; font-size: 11px; }

  /* Assets table → card layout on phone */
  .assets-table-wrap { border: 0; padding: 0; background: transparent; }
  .assets-table { display: none; }
  .assets-cards { display: flex; }
  .assets-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .assets-summary-card { padding: 12px; }

  /* ── Options chain: no-scroll mobile layout ────────────────────────── */
  /* 1. Lock the wrapper — no overflow in any direction */
  .opt-chain-table-wrap { overflow: hidden !important; }

  /* 2. Kill ALL min-widths that force overflow; all tables use fixed layout.
        Paired tables also have <colgroup> col elements — table-layout:fixed reads
        those widths FIRST (before the colSpan group-header row), so group headers
        and individual column headers both align correctly with the data rows. */
  .opt-table,
  .opt-table--paired,
  .opt-table--active-paired { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }

  /* Chain table: collapse the IV and OI columns on phones. The 5 visible columns'
     widths (Vol / Bid×Ask / Strike, each side) live in ONE place lower in this file
     — the "Options chain: phone refinements" @media block — so the two ≤640 blocks
     can no longer disagree on colgroup widths (they previously did: strike 24% here
     vs the effective 30% there). */
  .opt-col--chain-iv,
  .opt-col--chain-oi   { width: 0 !important; }

  /* Active table: 12 cols, 6 hidden → 6 visible share 100%
     Vol trimmed to 10% each, Strike bumped to 18% */
  .opt-col--act-rank,
  .opt-col--act-expiry,
  .opt-col--act-oi     { width: 0 !important; }
  .opt-col--act-strike { width: 18% !important; }
  .opt-col--act-bidask { width: 22% !important; }
  .opt-col--act-vol    { width: 10% !important; }
  /* 18+22+10+10+22+18 = 100% */

  /* 3. Tighter cells — slightly smaller font throughout */
  .opt-th { padding: 4px 2px !important; font-size: 8px !important; letter-spacing: 0 !important; white-space: nowrap; overflow: hidden; text-align: center !important; }
  .opt-td { padding: 4px 2px !important; font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center !important; }
  .opt-td--bidask { font-size: 8px !important; }
  /* Strike must never be clipped — it is the key reference column */
  .opt-td--strike-center { overflow: visible !important; text-overflow: clip !important; text-align: center !important; }

  /* 4. Remove fixed min-widths on individual columns */
  .opt-th--vol, .opt-th--oi, .opt-th--mono { min-width: 0 !important; }
  .opt-td--oi { min-width: 0 !important; }
  .opt-vol-wrap { min-width: 0 !important; }

  /* 5. Hide volume bars — they add height, not needed on mobile */
  .opt-vol-bar-bg { display: none !important; }

  /* 6. Chain table: collapse IV and OI on each side → 5 visible cols remain.
        MUST use visibility:hidden (not display:none) so cells stay in the DOM
        sequence; table-layout:fixed+colgroup maps each cell to a column slot in
        order — display:none would remove the cell and shift following cells into
        wrong (0-width) slots. padding:0 + overflow:hidden + the col's width:0
        from colgroup collapse the cell to a true zero-width invisible slot. */
  .opt-th--chain-iv, .opt-td--chain-iv,
  .opt-th--chain-oi, .opt-td--chain-oi {
    visibility: hidden !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 7. Active table: collapse rank, expiry, OI → 6 visible cols remain.
        Same reasoning as above — visibility:hidden preserves cell sequence. */
  .opt-th--act-rank,  .opt-td--rank,
  .opt-th--act-expiry, .opt-td--expiry,
  .opt-th--act-oi,    .opt-td--act-oi {
    visibility: hidden !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Group-header colSpan cells must clip — they span hidden 0-width cols too */
  .opt-th--call-group, .opt-th--put-group, .opt-th--strike-group {
    overflow: hidden !important;
  }

  /* 8. ATM / ITM pills: shrink so they don't stretch strike column */
  .opt-atm-pill, .opt-itm-pill { font-size: 8px; padding: 1px 3px; }

  /* ── Dashboard: compact 2-line grid card per stock ─────────────────────────
     Grid columns: [badge+sym+name: 1fr] [price: auto] [change: auto] [remove: auto]
     Row 1: symbol info | price | change chip | (empty — remove col reserved)
     Row 2: day range   | vol   | mkt cap     | remove btn                        */
  .dash-row--head { display: none !important; }
  .dashboard-header { padding: 4px 2px 2px !important; }
  .dashboard-header h2 { font-size: 17px !important; }
  .dash-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto auto !important;
    grid-template-rows: auto auto !important;
    gap: 5px 10px !important;
    padding: 10px 14px !important;
    align-items: center !important;
    width: auto !important;
  }
  /* Row 1 */
  .dc--sym   { grid-column: 1; grid-row: 1; width: auto !important; gap: 8px !important; min-width: 0; overflow: hidden; }
  .dc--price { grid-column: 2; grid-row: 1; width: auto !important; }
  .dc--delta { grid-column: 3; grid-row: 1; width: auto !important; }
  /* Row 2 */
  .dc--range { grid-column: 1; grid-row: 2; width: auto !important; }
  .dc--vol   { grid-column: 2; grid-row: 2; width: auto !important; }
  .dc--cap   { grid-column: 3; grid-row: 2; width: auto !important; }
  .dc--act   { grid-column: 4; grid-row: 2; width: auto !important; justify-content: flex-end !important; }
  /* Hide after-hours and sparkline — not enough room */
  .dc--ext, .dc--spark { display: none !important; }
  /* Row tap = open stock — hide redundant "View" text button */
  .dc--act .btn--ghost { display: none !important; }
  /* Tighter text sizes */
  .ds-sym   { font-size: 13px !important; }
  .ds-price { font-size: 13px !important; }
  .ds-name  { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
  .ds-meta  { font-size: 11px !important; }

  /* News cards: smaller padding */
  .news-card { padding: 12px; }
  .news-thumb { width: 80px; height: 80px; }

  /* YouTube grid: 1 column */
  .yt-grid { grid-template-columns: 1fr !important; }
  .yt-video { padding: 10px; }

  /* Reddit posts: smaller */
  .reddit-post { padding: 12px; }

  /* Ticker: tighter */
  .tick { padding: 7px 9px; }
  .tick-sym { font-size: 12px; }
  .tick-prev { display: none; }

  /* Hide ticker scroll arrows (just swipe) */
  .ticker-edge { display: none; }

  /* News alerts narrower */
  .news-alerts-stack { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); width: calc(100vw - 24px); }

  /* Hide the kbd hint */
  .search kbd { display: none; }
}

/* Tiny phone (≤380px) */
@media (max-width: 380px) {
  .metric-value .num { font-size: 20px; }
  .stock-header__name h1 { font-size: 18px; }
  .stock-header__actions { flex-direction: column; }
  .stock-header__actions .btn { width: 100%; }
  .tick { padding: 6px 8px; }
}

/* Note: .assets-cards { display: none } is declared before the ≤640px media
   block (above) so the mobile override wins. Only the card-item styles live here. */
.assets-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.assets-card--short { border-left: 3px solid var(--soft-red); }
.assets-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.assets-card-sym { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assets-card-sym .assets-sym { font-size: 16px; font-weight: 700; }
.assets-card-pnl {
  text-align: right;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.25;
}
.assets-card-pct { font-size: 11px; opacity: .85; font-weight: 500; }
.assets-card-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.assets-card-rows > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
}
.assets-card-rows span { color: var(--muted); }
.assets-card-rows b {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  color: var(--text);
}

/* ── News Alert Toasts ──────────────────────────────────────────────────────── */
.news-alerts-stack {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 56px);
}

.news-alert-toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 4px 24px -4px rgba(20,24,32,0.14), 0 1px 4px rgba(20,24,32,0.06);
  padding: 13px 13px 11px 13px;
  pointer-events: all;
  animation: toast-slide-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  position: relative;
  overflow: hidden;
}
.news-alert-toast--out {
  animation: toast-slide-out 0.28s cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(28px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-slide-out {
  from { opacity: 1; transform: none; max-height: 120px; }
  to   { opacity: 0; transform: translateX(28px) scale(0.96); max-height: 0; margin: 0; padding: 0; }
}

/* Animated progress bar counts down the 8-second auto-dismiss */
.news-alert-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.35;
  width: 100%;
  transform-origin: left;
  animation: toast-bar 8s linear forwards;
}
@keyframes toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.news-alert-icon-wrap {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: oklch(0.95 0.06 145);
  color: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.news-alert-body {
  flex: 1;
  min-width: 0;
}

.news-alert-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.news-alert-sym {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--accent);
  text-transform: uppercase;
}
.news-alert-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: oklch(0.95 0.06 145);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
}

.news-alert-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 5px;
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news-alert-title:hover { text-decoration: underline; }

.news-alert-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.news-alert-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  margin-top: 1px;
}
.news-alert-close:hover { background: var(--surface-2); color: var(--text); }

/* ── Options Chain ──────────────────────────────────────────────────────────── */
.opt-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 28px 48px;
  max-width: 1300px;
}

/* hero */
.opt-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.opt-hero-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.opt-source-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.opt-source-badge.ib {
  background: rgba(0,180,100,0.15);
  color: #00c46a;
  border: 1px solid rgba(0,180,100,0.3);
}
.opt-source-badge.cache {
  background: rgba(220,170,40,0.15);
  color: #d6a83a;
  border: 1px solid rgba(220,170,40,0.35);
}
/* "Live ↻" action inside the EOD-cache badge — force a fresh pull post-close. */
.opt-eod-live-btn {
  margin-left: 6px;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 3px;
  padding: 0 5px;
  cursor: pointer;
}
.opt-eod-live-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Daily snapshot status badge + refresh button shown next to "Options Chain" title.
 * Always visible when the symbol has any daily-snapshot data (even with IB live). */
.opt-snapshot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 11px;
  color: var(--text-muted, #999);
  font-weight: 500;
}
.opt-snapshot-badge--cache-only .opt-snapshot-label {
  color: #d6a83a;
  font-style: italic;
}
.opt-snapshot-label {
  white-space: nowrap;
}
.opt-snapshot-refresh {
  background: rgba(255,255,255,0.06);
  color: var(--text, #ccc);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.opt-snapshot-refresh:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
.opt-snapshot-refresh:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.opt-snapshot-err {
  color: #ff6b6b;
  font-weight: 700;
  cursor: help;
}
.opt-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.opt-hero-sym {
  font-size: 13px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  color: var(--muted);
  letter-spacing: .05em;
}
.opt-hero-price {
  font-size: 18px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  color: var(--text);
}
.opt-hero-chg {
  font-size: 13px;
  font-family: "Geist Mono", monospace;
  font-weight: 600;
}

/* spinner */
.opt-spinner { display: flex; align-items: center; padding: 4px; }
.opt-spin-ring {
  width: 20px; height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: opt-spin .7s linear infinite;
}
.opt-spin-ring--lg { width: 36px; height: 36px; border-width: 3.5px; }
@keyframes opt-spin { to { transform: rotate(360deg); } }

/* expiry bar */
.opt-expiry-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.opt-expiry-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.opt-expiry-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.opt-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.2;
}
.opt-chip:hover { background: var(--surface-2); border-color: var(--accent); }
.opt-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.opt-chip--active .opt-chip-dte { color: rgba(255,255,255,.75); }
.opt-chip--expired { opacity: .45; }
.opt-chip-dte {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  font-family: "Geist Mono", monospace;
}
/* Per-chip "data pending" spinner. Shown while the server-side cascade is still
   subscribing to that expiry — replaces the per-click fetch with a passive wait. */
.opt-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.opt-chip-spin {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: opt-spin .7s linear infinite;
  vertical-align: middle;
}
.opt-chip--active .opt-chip-spin {
  border-color: rgba(255,255,255,.35);
  border-top-color: #fff;
}

/* volume stats strip */
.opt-stats-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  flex-wrap: wrap;
}
.opt-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  border-right: 1px solid var(--border);
  flex: 1;
  min-width: 110px;
}
.opt-stat:last-child { border-right: none; }
.opt-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.opt-stat-val {
  font-size: 16px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  color: var(--text);
}
/* Sub-label under the per-expiry hero number that shows the whole-chain total
   for context (e.g. "of 404,097 total"). Smaller + muted so it doesn't compete
   with the headline number. */
.opt-stat-sub {
  font-size: 10px;
  font-weight: 500;
  font-family: "Geist Mono", monospace;
  margin-top: 1px;
  letter-spacing: 0.02em;
}

/* section */
.opt-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.opt-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.opt-section-flame { font-size: 20px; line-height: 1; }
.opt-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1px;
}
.opt-section-sub {
  font-size: 12px;
  margin: 0;
}
.opt-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
}
.opt-type-badge--call { background: rgba(16,185,129,.12); color: var(--up); }
.opt-type-badge--put  { background: rgba(239,68,68,.12);  color: var(--down); }
.opt-chain-count { font-size: 12px; }

/* ── collapsible active-contract sections ───────────────────────── */
.opt-section--collapsible { overflow: hidden; }

.opt-section-head--btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  text-align: left;
  color: inherit;
}
.opt-section-head--btn:hover { background: var(--surface-3, var(--surface-2)); }
.opt-section-head-text { flex: 1; min-width: 0; }

.opt-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .18s ease;
}
.opt-chevron--open { transform: rotate(180deg); }

/* rank column */
.opt-td--rank {
  width: 28px;
  min-width: 28px;
  padding: 6px 4px 6px 12px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.opt-th--oi { min-width: 110px; }
.opt-td--oi { min-width: 110px; }
.opt-th--sorted { color: var(--text); font-weight: 800; }

/* compact active table overrides */
.opt-table--active .opt-th { padding: 7px 10px; font-size: 10.5px; }
.opt-table--active .opt-td { padding: 6px 10px; font-size: 12px; }
.opt-table--active .opt-td--rank { padding: 6px 4px 6px 10px; }
.opt-table--active .opt-td--bidask { font-size: 11px; }
.opt-table--active .opt-vol-bar-bg { height: 3px; margin-top: 3px; }
.opt-table--active .opt-vol-val { font-size: 12px; }

/* table */
.opt-chain-table-wrap { overflow-x: auto; }
.opt-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.opt-th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.opt-th--mono { font-family: "Geist Mono", monospace; }
.opt-th--vol  { min-width: 120px; }
.opt-td {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.opt-table tbody tr:last-child .opt-td { border-bottom: none; }
.opt-table tbody tr:hover .opt-td { background: var(--surface-2); }
.opt-td--mono   { font-family: "Geist Mono", monospace; }
.opt-td--bidask { color: var(--muted); font-size: 12px; }
.opt-td--expiry { color: var(--muted); font-size: 12px; }
.opt-td--chg    { font-weight: 600; }
.opt-td--iv     { color: var(--muted); }
.opt-row--itm .opt-td { background: oklch(0.97 0.015 145 / .6); }
.opt-row--itm:hover .opt-td { background: oklch(0.95 0.02 145 / .8) !important; }

/* strike column */
.opt-td--strike {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.opt-strike-val { font-family: "Geist Mono", monospace; font-size: 13px; }
.opt-itm-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(16,185,129,.18);
  color: var(--up);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
}

/* volume bar */
.opt-vol-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 80px;
}
.opt-vol-val { font-family: "Geist Mono", monospace; font-size: 12.5px; font-weight: 600; }
.opt-vol-bar-bg {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.opt-vol-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}
.opt-vol-bar--call { background: var(--up); }
.opt-vol-bar--put  { background: var(--down); }

/* colours */
.opt-up { color: var(--up); }
.opt-dn { color: var(--down); }

/* ── Paired options chain (calls | strike | puts) ───────────────────────── */
/* ── Paired active (OI / Volume) table ──────────────────────────── */
.opt-table--active-paired { min-width: 860px; }
.opt-th--put-first { border-left: 2px solid var(--border) !important; }
.opt-td--put-first { border-left: 2px solid var(--border) !important; }

.opt-table--paired { min-width: 760px; }

/* group header row */
.opt-th--call-group {
  text-align: center;
  background: rgba(16,185,129,.10);
  color: var(--up);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 6px 14px;
}
.opt-th--put-group {
  text-align: center;
  background: rgba(239,68,68,.08);
  color: var(--down);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 6px 14px;
}
.opt-th--strike-group {
  background: var(--surface-2);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  padding: 6px 8px;
  width: 90px;
}

/* sub-header row */
.opt-th--call-side {
  text-align: right;
  background: rgba(16,185,129,.04);
}
.opt-th--put-side {
  text-align: left;
  background: rgba(239,68,68,.04);
}
.opt-th--strike-center {
  text-align: center;
  background: var(--surface-2);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  width: 90px;
}

/* data cells */
.opt-td--call-side { text-align: right; }
.opt-td--put-side  { text-align: left; }
.opt-td--strike-center {
  text-align: center;
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface-2);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  white-space: nowrap;
}

/* ITM / ATM highlights */
.opt-td--call-itm { background: rgba(16,185,129,.09) !important; }
.opt-td--put-itm  { background: rgba(239,68,68,.07)  !important; }
.opt-td--atm      { background: rgba(99,102,241,.14) !important; }

/* ATM pill */
.opt-atm-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(99,102,241,.2);
  color: rgb(99,102,241);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  margin-left: 4px;
  vertical-align: middle;
}

/* empty placeholder */
.opt-empty { color: var(--muted); opacity: .35; }

/* right-aligned volume bar — align-items: flex-end right-aligns the volume number,
   but the bar-bg must always span full cell width, so we override it explicitly */
.opt-vol-wrap--r { align-items: flex-end; }
.opt-vol-wrap--r .opt-vol-bar-bg { width: 100%; }

/* section header badges */
.opt-chain-pair-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.opt-chain-pair-divider { color: var(--muted); opacity: .4; font-weight: 700; }
.opt-chain-view-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--surface-3, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
}
.opt-chain-seg-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.opt-chain-seg-btn:hover { color: var(--text); }
.opt-chain-seg-btn--active {
  background: var(--accent, #6366f1);
  color: #fff;
}

/* loading / empty states */
.opt-loading-state,
.opt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  color: var(--muted);
  text-align: center;
}
.opt-empty-state h3 { margin: 0; color: var(--text); font-size: 17px; }
.opt-empty-state p  { margin: 0; font-size: 13px; }
.opt-retry-btn {
  margin-top: 4px;
  padding: 8px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.opt-retry-btn:hover { opacity: .85; }

/* ── Settings Page ──────────────────────────────────────────────────────────── */
/* ── YouTube alert toasts ─────────────────────────────────────────────────── */
.yt-alerts-stack {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998; /* just below news alerts so they stack above */
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}
/* Offset the YouTube stack so it doesn't collide with news alerts */
.news-alerts-stack ~ .yt-alerts-stack,
.yt-alerts-stack:has(~ .news-alerts-stack) {
  right: 28px;
}
.yt-alert-toast {
  pointer-events: all;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid #ff0000;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.13);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 0 12px;
  min-width: 300px;
  max-width: 360px;
  overflow: hidden;
  animation: toast-slide-in .28s ease;
  position: relative;
}
.yt-alert-toast--out {
  animation: toast-slide-out .28s ease forwards;
}
.yt-alert-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: #ff0000;
  border-radius: 0 0 0 6px;
  width: 100%;
  transform-origin: left;
  animation: toast-bar-shrink 9s linear forwards;
}
@keyframes toast-bar-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.yt-alert-thumb {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
}
.yt-alert-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,0,0,.1);
  color: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.yt-alert-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 14px;
}
.yt-alert-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.yt-alert-sym {
  font-size: 11px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  color: var(--text);
  letter-spacing: .04em;
}
.yt-alert-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(255,0,0,.12);
  color: #ff0000;
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
}
.yt-alert-title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 4px;
}
.yt-alert-title:hover { text-decoration: underline; }
.yt-alert-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-alert-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
}
.yt-alert-close:hover { background: var(--surface-2); color: var(--text); }

.sett-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}

.sett-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.sett-hero-icon {
  width: 48px; height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.sett-hero-title { font-size: 22px; font-weight: 700; margin: 0 0 2px; }
.sett-hero-sub   { font-size: 13px; margin: 0; }

.sett-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ── Table of contents (left rail) + two-column layout ── */
.sett-page--toc { max-width: 1120px; }
.sett-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.sett-toc {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 12px 10px;
}
.sett-toc-head {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 2px 10px 8px;
}
.sett-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sett-toc-link {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  padding: 7px 10px; border-radius: 7px;
  border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.sett-toc-link:hover { background: var(--surface-2, rgba(127,127,127,.08)); color: var(--text); }
.sett-toc-link.is-active {
  color: var(--accent, #4a8cff); font-weight: 600;
  background: var(--surface-2, rgba(127,127,127,.10));
  border-left-color: var(--accent, #4a8cff);
}
/* Narrow screens (phones): drop the rail, settings go full-width single column. */
@media (max-width: 900px) {
  .sett-layout { grid-template-columns: 1fr; }
  .sett-toc { display: none; }
}

/* ── Sections ── */
.sett-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 16px;   /* so click-to-scroll / scrollspy land below any sticky chrome */
}
.sett-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.sett-section-icon {
  width: 30px; height: 30px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.sett-section-title { font-size: 13px; font-weight: 600; color: var(--text); }
.sett-section-desc  { font-size: 12px; color: var(--muted); margin-top: 1px; }
.sett-section-body  { padding: 4px 0; }

/* ── Standard rows ── */
.sett-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.sett-row--last, .sett-row:last-child { border-bottom: 0; }
.sett-row__label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; }
.sett-row__hint  { font-size: 11px; font-weight: 400; color: var(--muted); }
.sett-row__ctrl  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Toggle switch ── */
.sett-toggle {
  width: 38px; height: 22px;
  border-radius: 11px;
  background: var(--border-2);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.sett-toggle--on { background: var(--accent); }
.sett-toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.sett-toggle--on .sett-toggle__thumb { transform: translateX(16px); }

/* ── Inline control group (toggle + select) ── */
.sett-inline { display: flex; align-items: center; gap: 10px; }

/* ── Select ── */
.sett-select {
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 28px 5px 10px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sett-select:hover  { border-color: var(--border-2); }
.sett-select:focus  { outline: none; border-color: var(--accent); }
.sett-select:disabled { opacity: 0.45; cursor: not-allowed; }

/* (Settings status badges migrated to the shared .status-pill component — #62 / second audit.) */

/* ── Push test result feedback ── */
.push-test-result {
  margin: 0 20px 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.push-test-result--ok  { background: rgba(52,199,89,0.1);  color: #34c759; border: 1px solid rgba(52,199,89,0.2); }
.push-test-result--err { background: rgba(255,69,58,0.1);  color: #ff453a; border: 1px solid rgba(255,69,58,0.2); }

/* ── Text inputs ── */
.sett-input {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  width: 100%;
  transition: border-color 0.15s;
}
.sett-input:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.62 0.18 145 / 0.12); }
.sett-input--sym   { width: 80px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; }

/* ── API key rows ── */
.sett-key-row {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.sett-key-row:last-child { border-bottom: 0; }
.sett-key-meta    { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sett-key-label   { font-size: 13px; font-weight: 600; color: var(--text); }
.sett-key-hint    { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; }
.sett-key-status  { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sett-key-status--set { color: var(--accent); }
.sett-key-input-row { display: flex; gap: 8px; align-items: center; }
.sett-key-wrap    { position: relative; flex: 1; min-width: 0; }
.sett-key-wrap .sett-input { padding-right: 36px; font-family: "Geist Mono", monospace; font-size: 12px; }
.sett-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--muted); padding: 2px; line-height: 1;
  transition: color 0.15s;
}
.sett-eye:hover { color: var(--text); }

.sett-link { color: var(--accent); text-decoration: none; }
.sett-link:hover { text-decoration: underline; }

/* ── Change-password form ── */
.sett-pw { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.sett-pw-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.sett-pw-row > span { font-weight: 600; }
.sett-pw-row input { font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-input, 7px);
  background: var(--surface); color: var(--text); font-family: inherit; }
.sett-pw-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sett-pw-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.sett-pw-msg { font-size: 12.5px; }
.sett-pw-msg.is-ok { color: var(--up); }
.sett-pw-msg.is-err { color: var(--down); }

/* ── StockTwits cookie card ── */
.stc-status { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--border); }
.stc-status.is-ok { background: color-mix(in srgb, var(--up) 8%, transparent); border-color: color-mix(in srgb, var(--up) 35%, var(--border)); }
.stc-status.is-stale { background: color-mix(in srgb, var(--down) 8%, transparent); border-color: color-mix(in srgb, var(--down) 35%, var(--border)); }
.stc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.stc-status.is-ok .stc-dot { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent); }
.stc-status.is-stale .stc-dot { background: var(--down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 22%, transparent); }
.stc-status-text { display: flex; flex-direction: column; line-height: 1.35; }
.stc-status-text strong { font-size: 13px; }
.stc-status-text .muted { font-size: 12px; }
.stc-alert { background: color-mix(in srgb, var(--down) 10%, transparent); border: 1px solid color-mix(in srgb, var(--down) 40%, var(--border)); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.stc-alert code { font-size: 11.5px; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.stc-steps { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
.stc-steps code { font-size: 11.5px; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.stc-input { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--mono, monospace); font-size: 11.5px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); margin-bottom: 10px; }
.stc-input:focus { outline: none; border-color: var(--accent); }

/* ── Ticker Comparison view ── */
.tc-wrap { padding: 18px 22px 40px; max-width: 1280px; margin: 0 auto; }
.tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tc-title { font-size: 19px; margin: 0; }
.tc-sub { font-size: 12.5px; margin: 2px 0 0; }
.tc-toolbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 8px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 7px; background: var(--surface, #141414); }
.tc-chip-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.tc-chip-x:hover { color: var(--down); }
.tc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; margin-right: 5px; }
.tc-add-in { width: 88px; font-size: 12.5px; padding: 4px 8px; border: 1px dashed var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }
.tc-add-in:focus { outline: none; border-color: var(--accent); border-style: solid; }
.tc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-menu { position: relative; }
.tc-dd { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 130px; max-height: 280px; overflow: auto; background: var(--surface, #161616); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 4px; }
.tc-dd--wide { min-width: 230px; }
.tc-dd-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font-size: 12.5px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.tc-dd-item:hover { background: var(--surface-2, #222); }
.tc-dd-empty { padding: 6px 8px; font-size: 12px; }
.tc-bench { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.tc-ranges { display: flex; align-items: center; gap: 5px; margin: 8px 0 4px; flex-wrap: wrap; }
.tc-range { font-size: 12px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface, #141414); color: var(--muted); cursor: pointer; }
.tc-range.is-active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tc-range-note { font-size: 11.5px; margin-left: 6px; }
.tc-card { background: var(--surface, #131313); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 14px; min-width: 0; max-width: 100%; }
/* min-width:0 lets the card shrink below its content inside grid/flex tracks, so wide
   tables/heatmaps scroll inside .tc-scroll instead of overflowing the screen on mobile. */
.tc-card-h { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.tc-warn { font-size: 12px; line-height: 1.45; margin-bottom: 8px; padding: 7px 10px; border-radius: 6px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.tc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .tc-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tc-wrap { padding: 14px 12px 32px; } .tc-card { padding: 10px 11px; } }
.tc-chart { position: relative; width: 100%; }
.tc-chart-empty { padding: 40px 10px; text-align: center; font-size: 12.5px; }
.tc-grid { stroke: var(--border); stroke-width: 1; opacity: .35; }
.tc-zero { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.tc-axis { fill: var(--muted); font-size: 10px; }
.tc-cursor { stroke: var(--muted); stroke-width: 1; opacity: .5; stroke-dasharray: 3 3; }
.tc-tip { position: absolute; top: 8px; pointer-events: none; background: var(--surface, #1a1a1a); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.45); min-width: 132px; }
.tc-tip-date { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.tc-tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.tc-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tc-tip-sym { flex: 1; font-weight: 600; }
.tc-tip-val { font-variant-numeric: tabular-nums; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tc-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.tc-table th.tc-num, .tc-table td.tc-num { text-align: right; font-variant-numeric: tabular-nums; }
.tc-table th.tc-sorted { color: var(--text); }
.tc-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tc-table tr:last-child td { border-bottom: 0; }

/* ── Recharts chart kit (src/charts.jsx) ──────────────────────────────────────── */
.rc-frame { position: relative; }
.rc-frame .recharts-surface { overflow: visible; }
/* shared tooltip */
.rc-tip { background: var(--surface, #11151c); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); min-width: 120px; pointer-events: none; }
.rc-tip-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.rc-tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.55; }
.rc-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.rc-tip-name { flex: 1; color: var(--text-2); margin-right: 8px; }
.rc-tip-val { font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--mono, ui-monospace, monospace); }
/* axis/legend polish */
.recharts-cartesian-axis-tick-value { font-variant-numeric: tabular-nums; }
.recharts-legend-item-text { color: var(--text-2) !important; font-size: 11.5px; }
.recharts-default-legend { font-size: 11.5px; }
.recharts-tooltip-cursor { stroke: var(--muted); stroke-opacity: .45; }
.recharts-reference-line line { stroke-opacity: .7; }
/* sparkline + empty states */
.rc-spark { display: block; }
.rc-spark--empty { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted) 12%, transparent), transparent); border-radius: 4px; }
.rc-nodata { display: flex; align-items: center; justify-content: center; min-height: 80px; color: var(--muted);
  font-size: 12px; border: 1px dashed var(--border); border-radius: 8px; }

/* ── TickerTile (src/TickerTile.jsx) — high-density financial tile ─────────────── */
.dash-layout-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.dash-layout-btn { font-size: 12px; font-weight: 600; padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.dash-layout-btn.is-active { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.compare-spark-flat { height: 100%; border-bottom: 1.5px dashed var(--muted); opacity: .5; }
.ticker-tile { position: relative; overflow: hidden; padding: 12px 13px 11px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); cursor: pointer; isolation: isolate;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
.ticker-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.ticker-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* background sparkline */
.ticker-tile .tt-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; opacity: .16; z-index: 0; pointer-events: none; }
.ticker-tile.is-up  .tt-spark { opacity: .18; }
.ticker-tile > .tt-head, .ticker-tile > .tt-price, .ticker-tile > .tt-meta, .ticker-tile > .tt-range { position: relative; z-index: 1; }
/* header */
.tt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tt-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tt-sym { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.tt-name { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.tt-chg { margin-left: auto; font-family: var(--mono, ui-monospace, monospace); font-weight: 600; font-size: 12px;
  padding: 2px 7px; border-radius: 999px; }
.ticker-tile.is-up .tt-chg { color: var(--up);   background: color-mix(in srgb, var(--up) 14%, transparent); }
.ticker-tile.is-dn .tt-chg { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
/* price */
.tt-price { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin-bottom: 2px; }
.tt-meta { font-size: 11px; color: var(--muted); margin-bottom: 9px; }
.tt-meta .tt-vol b { color: var(--text-2); font-weight: 600; font-family: var(--mono, ui-monospace, monospace); }
/* 52-week range slider */
.tt-range { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-range-track { position: relative; flex: 1; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--down) 45%, var(--surface-2)), var(--surface-2) 45%, color-mix(in srgb, var(--up) 45%, var(--surface-2))); }
.tt-range-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: transparent; }
.tt-range-marker { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--text-1); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
/* price-update flash */
@keyframes tt-flash-up { 0% { background: color-mix(in srgb, var(--up) 26%, var(--surface)); } 100% { background: var(--surface); } }
@keyframes tt-flash-dn { 0% { background: color-mix(in srgb, var(--down) 26%, var(--surface)); } 100% { background: var(--surface); } }
.ticker-tile.tt-flash-up { animation: tt-flash-up .65s ease-out; }
.ticker-tile.tt-flash-dn { animation: tt-flash-dn .65s ease-out; }
@media (prefers-reduced-motion: reduce) { .ticker-tile.tt-flash-up, .ticker-tile.tt-flash-dn { animation: none; } }
/* drag-to-reorder affordances */
.ticker-tile[draggable="true"] { cursor: grab; }
.ticker-tile[draggable="true"]:active { cursor: grabbing; }
.ticker-tile.tt-dragging { opacity: .45; transform: scale(.98); }
.ticker-tile.tt-dragover { border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.ticker-tile.tt-dragover::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .ticker-tile.tt-dragging { transform: none; } }
.tc-up { color: var(--up); }
.tc-down { color: var(--down); }
.tc-corr { display: grid; gap: 2px; font-size: 11.5px; }
.tc-corr-h { color: var(--muted); font-weight: 600; text-align: center; padding: 3px; display: flex; align-items: center; justify-content: center; }
.tc-corr-rowh { justify-content: flex-end; padding-right: 6px; }
.tc-corr-c { text-align: center; padding: 6px 3px; border-radius: 4px; font-variant-numeric: tabular-nums; color: var(--text); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.tc-table tr.tc-lowcov td:not(:first-child) { opacity: 0.5; }   /* low-sample stats greyed */
.tc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* tables/heatmap scroll on narrow screens */
.tc-corr-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tc-corr-ramp { display: inline-block; width: 120px; height: 9px; border-radius: 5px; border: 1px solid var(--border); }

/* ── Button variants for save states ── */
.btn--success { background: var(--up); color: var(--on-accent); border-color: transparent; }
.btn--danger  { background: var(--down); color: var(--on-accent); border-color: transparent; }

/* ── Interactive Brokers Gateway ──────────────────────────────────────────── */
/* Connection status dot */
.ib-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px 3px 6px;
  border-radius: 99px;
  background: oklch(0.94 0.003 90);
  color: var(--muted);
}
.ib-dot__pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: oklch(0.70 0 0);
  flex-shrink: 0;
}
.ib-dot--on  { background: oklch(0.93 0.07 145); color: oklch(0.40 0.18 145); }
.ib-dot--on  .ib-dot__pip { background: oklch(0.52 0.20 145); animation: ib-pulse 1.8s ease-in-out infinite; }
.ib-dot--wait { background: oklch(0.95 0.06 70); color: oklch(0.44 0.16 70); }
.ib-dot--wait .ib-dot__pip { background: oklch(0.55 0.18 70); animation: ib-blink 0.9s step-end infinite; }
.ib-dot--err  { background: oklch(0.94 0.06 25); color: oklch(0.50 0.18 25); }
.ib-dot--err  .ib-dot__pip { background: oklch(0.58 0.22 25); }
.ib-dot--off  .ib-dot__pip { background: oklch(0.70 0 0); }

@keyframes ib-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@keyframes ib-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Small meta text next to status dot */
.ib-meta {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Error message line */
.ib-err-msg {
  font-size: 11px;
  color: oklch(0.50 0.18 25);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Save confirmation message */
.ib-save-msg {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

/* Input size variants */
.sett-input--lg { width: 280px; }
.sett-input--md { width: 180px; }
.sett-input--sm { width: 90px; }

/* IB info box — port/version reference table */
.ib-info-box {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}
.ib-info-row {
  display: flex;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.ib-info-row:last-child { border-bottom: 0; }
.ib-info-row:nth-child(even) { background: var(--surface-2); }
.ib-info-label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  min-width: 90px;
}
.ib-info-val {
  color: var(--muted);
  line-height: 1.5;
}
.ib-info-val em {
  font-style: normal;
  font-weight: 600;
  color: var(--text-2);
}
.ib-info-val code {
  font-family: monospace;
  font-size: 11px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-2);
}

/* API mode tab selector */
.ib-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 3px;
}
.ib-mode-tab {
  flex: 1;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ib-mode-tab:hover { background: var(--surface-3, var(--border)); color: var(--text); }
.ib-mode-tab--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Live IB badge on ticker strip price */
.ib-live-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: oklch(0.93 0.07 145);
  color: oklch(0.40 0.18 145);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 14px;
}

/* IB source badge on news articles */
.nv-ib-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: oklch(0.93 0.07 220);
  color: oklch(0.40 0.18 220);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 5px;
  line-height: 14px;
  flex-shrink: 0;
}

/* IB-sourced news card gets a subtle blue tint */
.nv-card--ib {
  border-color: oklch(0.88 0.04 220);
  background: oklch(0.985 0.012 220);
}

/* ── My Assets ──────────────────────────────────────────────────────────────── */
.assets-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}
.assets-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.assets-hero-icon {
  width: 48px; height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.assets-hero-title { font-size: 22px; font-weight: 700; margin: 0 0 2px; }
.assets-hero-sub   { font-size: 13px; margin: 0; }
.assets-hero-status { margin-left: auto; }

.assets-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  color: var(--text-2);
  text-align: center;
}
.assets-empty p { margin: 0; font-size: 14px; }

.assets-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.assets-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.assets-summary-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.assets-summary-value {
  font-size: 22px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  letter-spacing: -0.02em;
}
.assets-pnl-pct {
  font-size: 13px;
  font-weight: 500;
}

.assets-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  overflow-x: auto;
}
.assets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.assets-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.assets-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.assets-table th.num-col,
.assets-table td.num-col {
  text-align: right;
}
.assets-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.assets-table tbody tr:last-child { border-bottom: none; }
.assets-table tbody tr:hover { background: var(--surface-2); }
.assets-table td {
  padding: 12px 14px;
  white-space: nowrap;
  font-family: "Geist Mono", monospace;
  font-size: 12.5px;
}
.assets-sym-cell { font-family: inherit; }
.assets-sym {
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.assets-type-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.assets-acct {
  font-size: 11px;
  color: var(--text-2);
  font-family: "Geist Mono", monospace;
}
.assets-opt-label {
  font-size: 10px;
  color: var(--text-2);
  font-family: "Geist Mono", monospace;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.assets-short-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 3px;
  background: oklch(0.95 0.04 25);
  color: var(--down);
  border: 1px solid oklch(0.88 0.06 25);
  vertical-align: middle;
}
.assets-row--short td { background: oklch(0.995 0.008 25); }
.assets-row--short:hover td { background: oklch(0.985 0.015 25); }
.assets-refreshing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  padding: 10px 2px 0;
}
.is-up { color: var(--up); }
.is-dn { color: var(--down); }

/* ── Cross-account portfolio (imported IBKR Open-Positions snapshots) ───────── */
.assets-sym-tk { display: block; font-weight: 700; }
.assets-sym-name { display: block; font-weight: 400; font-size: 11px; color: var(--text-2);
  font-family: "Geist Mono", monospace; margin-top: 1px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex-ccy { margin-left: 5px; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.flex-pos-table td.num-col { font-variant-numeric: tabular-nums; }

.flex-accts { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.flex-accts-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.flex-accts-head svg { color: var(--accent); }
.flex-acct-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.flex-acct-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; background: none; border: 0; cursor: pointer; text-align: left; flex-wrap: wrap; }
.flex-acct-bar:hover { background: var(--surface-2); }
.flex-acct-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.flex-acct-name { font-weight: 700; font-size: 14px; }
.flex-acct-num { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--text-2); }
.flex-acct-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.flex-acct-stat { font-size: 12.5px; font-family: "Geist Mono", monospace; }
.flex-acct-stat .muted { font-family: inherit; margin-right: 5px; }
.flex-acct-npv b { font-size: 14px; }
.flex-acct-body { padding: 0 12px 12px; }
.flex-acct-asof { font-size: 11px; color: var(--text-2); padding: 2px 4px 10px; }

.portfolio-page { display: flex; flex-direction: column; gap: 18px; }
.port-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(150deg, var(--surface) 0%, var(--surface-2) 100%); flex-wrap: wrap; }
.port-hero-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.port-hero-npv { font-size: 38px; font-weight: 800; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.port-hero-sub { font-size: 13px; color: var(--text-2); margin-top: 6px; font-family: "Geist Mono", monospace; }
/* NAV / equity curve */
.port-nav-curve { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 8px; background: var(--surface); margin-bottom: 14px; }
.port-nav-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.port-nav-title { font-size: 13px; font-weight: 700; }
.port-nav-delta { font-size: 13px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.port-nav-delta.is-up { color: var(--up); }
.port-nav-delta.is-dn { color: var(--down); }
.port-nav-periods { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.port-nav-period { background: none; border: none; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; border-radius: 6px; }
.port-nav-period:hover { color: var(--text); }
.port-nav-period.is-active { background: var(--accent); color: var(--on-accent); }
.port-nav-period:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* stale cash/margin warnings */
.port-stale-banner { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
  font-size: 12.5px; line-height: 1.45; border-radius: 10px; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border)); }
.port-stale-banner b { color: var(--text); }
.flex-stale-badge { margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px;
  border-radius: 6px; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); white-space: nowrap; vertical-align: middle; cursor: help; }
.flex-stale-text { color: var(--warn); }
.flex-fx-note { color: var(--accent); }
.flex-stale-note { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 8px; padding: 7px 10px; }
.flex-stale-note b { color: var(--text); }
.port-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.port-acct-tile { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.port-acct-tile-name { font-weight: 700; font-size: 14px; }
.port-acct-tile-num { font-size: 10.5px; color: var(--text-2); font-family: "Geist Mono", monospace; margin-top: 2px; }
.port-acct-tile-npv { font-size: 22px; font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; }
.port-acct-tile-sub { font-size: 11px; color: var(--text-2); margin-top: 4px; font-family: "Geist Mono", monospace; }
.port-holdings-head { font-size: 13px; font-weight: 700; margin-top: 4px; }
.port-disclaimer { font-size: 11px; color: var(--muted); padding-top: 4px; }
.assets-empty--sm { padding: 24px 16px; }

/* My Assets: Positions / By-tax-term mode toggle + holdings-by-term tables */
.assets-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-bottom: 14px; }
.assets-mode { font-size: 12.5px; font-weight: 600; padding: 7px 16px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.assets-mode + .assets-mode { border-left: 1px solid var(--border); }
.assets-mode.is-active { background: var(--accent); color: var(--on-accent); }
.assets-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hbt { display: flex; flex-direction: column; gap: 18px; }
.hbt-group { display: flex; flex-direction: column; gap: 8px; }
.hbt-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hbt-head h3 { margin: 0; font-size: 15px; }
.hbt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hbt-dot.is-up { background: var(--up); } .hbt-dot.is-dn { background: var(--down); }
.hbt-sub { font-size: 12px; }
.hbt-tot { margin-left: auto; font-size: 12.5px; font-family: "Geist Mono", monospace; color: var(--text-2); }
/* Term view: prominent average-cost-per-share column */
.hbt-avg-col, th.hbt-avg-col { color: var(--text); }
.hbt-avg-col b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hbt-avg-unit { font-size: 10px; color: var(--muted); margin-left: 1px; }

/* My Assets toolbar: mode tabs (left) + hide-values eye toggle (right) */
.assets-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.assets-toolbar .assets-modes { margin-bottom: 0; }
.assets-eye { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.assets-eye:hover { border-color: var(--border-2); color: var(--text); }
.assets-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.assets-eye.is-hidden { background: var(--accent-weak, oklch(0.95 0.03 250)); border-color: var(--accent); color: var(--accent); }
.assets-eye svg { flex: none; }
.port-hero-actions { display: inline-flex; align-items: center; gap: 8px; }

/* PIN-to-reveal overlay */
.pin-overlay { position: fixed; inset: 0; z-index: 1200; background: oklch(0.2 0 0 / 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); }
.pin-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px;
  width: 300px; max-width: 100%; box-shadow: 0 18px 50px oklch(0.2 0 0 / 0.25); display: flex; flex-direction: column; gap: 12px; }
.pin-modal-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.pin-input { font-size: 22px; letter-spacing: 0.5em; text-align: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-family: "Geist Mono", monospace; }
.pin-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pin-err { font-size: 12px; color: var(--down); text-align: center; }
.pin-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Authentication / login screen ─────────────────────────────────────────── */
.auth-screen {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, var(--bg) 0%, oklch(0.97 0.01 240) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  z-index: 1000;
}

/* ── Splash / connecting variant ────────────────────────────────────────────── */
.auth-screen--splash {
  background: radial-gradient(ellipse at 50% 38%,
    oklch(0.20 0.05 265) 0%,
    oklch(0.13 0.02 260) 55%,
    oklch(0.10 0.01 260) 100%);
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  user-select: none;
}

.splash-logo-wrap {
  margin-bottom: 22px;
  filter: drop-shadow(0 0 28px oklch(0.60 0.20 265 / 0.55));
  animation: splash-breathe 2.8s ease-in-out infinite;
}
@keyframes splash-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 28px oklch(0.60 0.20 265 / 0.55)); }
  50%       { transform: scale(0.96); filter: drop-shadow(0 0 40px oklch(0.60 0.20 265 / 0.75)); }
}

.splash-wordmark {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fff;
  margin-bottom: 5px;
}

.splash-tagline {
  font-size: 11px;
  color: oklch(0.70 0.04 265);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 44px;
}

.splash-loader {
  display: flex;
  gap: 9px;
  margin-bottom: 16px;
}

.splash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: splash-bounce 1.5s ease-in-out infinite;
}
.splash-dot:nth-child(1) { animation-delay: 0s; }
.splash-dot:nth-child(2) { animation-delay: 0.22s; }
.splash-dot:nth-child(3) { animation-delay: 0.44s; }
@keyframes splash-bounce {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.65); }
  40%           { opacity: 1;    transform: scale(1.2); }
}

.splash-status {
  font-size: 12px;
  color: oklch(0.60 0.02 265);
  letter-spacing: 0.06em;
  margin: 0;
}

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px -16px rgba(10,14,26,0.28),
              0 1px 0 rgba(255,255,255,0.06) inset;
}
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.auth-brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.auth-brand-tag  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.auth-info {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; margin-top: -2px; }
.auth-remember input { width: 15px; height: 15px; }
.tfa-setup { margin-top: 10px; }
.tfa-qr-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tfa-qr { width: 168px; height: 168px; border-radius: 10px; background: #fff; padding: 8px; box-sizing: content-box; flex: 0 0 auto; image-rendering: pixelated; }
.tfa-qr-row .stc-steps { flex: 1; min-width: 200px; padding-left: 18px; }
.tfa-manual-label { font-size: 11.5px; margin-bottom: 5px; }
.auth-label { font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: 0.01em; }
.auth-input {
  height: 42px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  outline: 0;
  transition: border-color .14s, box-shadow .14s;
}
.auth-input:focus { border-color: var(--text-2); box-shadow: 0 0 0 4px oklch(0.18 0.01 280 / 0.06); }
.auth-input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.auth-error {
  font-size: 13px;
  color: var(--down);
  background: oklch(0.97 0.04 25);
  border: 1px solid oklch(0.92 0.06 25);
  border-radius: 8px;
  padding: 9px 12px;
}
.auth-submit {
  margin-top: 4px;
  height: 42px;
  font-size: 14px; font-weight: 500;
  border-radius: 10px;
  width: 100%;
  justify-content: center;
}
.auth-footer { margin-top: 18px; font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
.auth-loading { font-size: 14px; color: var(--muted); }

@media (max-width: 480px) {
  .auth-card { padding: 24px 18px; max-width: 100%; border-radius: 12px; }
  .auth-logo { gap: 10px; }
}

/* ===== DOM & Time and Sales ===== */
.dom-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 24px;
  gap: 16px;
}
.dom-header {
  display: flex;
  align-items: center;
  /* M17: allow extra status badges to wrap instead of overflowing on narrow widths */
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dom-sym {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dom-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dom-px {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.dom-delta {
  font-size: 13px;
  font-weight: 500;
}
.dom-up { color: var(--up); }
.dom-dn { color: var(--down); }
.dom-state-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: center;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.dom-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-left: auto;
}
.dom-badge--warn {
  background: oklch(0.97 0.04 25);
  border-color: oklch(0.88 0.07 25);
  color: var(--down);
}
.dom-badge--err {
  background: oklch(0.97 0.04 25);
  border-color: oklch(0.88 0.07 25);
  color: var(--down);
  cursor: help;
}
.dom-err-banner {
  font-size: 11px;
  color: var(--down);
  background: oklch(0.97 0.04 25);
  border: 1px solid oklch(0.88 0.07 25);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  word-break: break-word;
}

/* Two-column layout: book on left, T&S on right */
.dom-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
  align-items: start;
}

.dom-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ── Order Book: price ladder (no scroll) ── */
.dom-book-wrap {
  display: flex;
  flex-direction: column;
}
.dom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.dom-th {
  padding: 8px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
}
/* Exchange column: outermost on each side */
.dom-th-bid-exch {
  text-align: right;
  width: 52px;
  padding-right: 6px;
}
.dom-th-ask-exch {
  text-align: left;
  width: 52px;
  padding-left: 6px;
}
/* Bid size header: right-aligned (bar extends left from price) */
.dom-th-bid-sz {
  text-align: right;
  width: 130px;
  padding-right: 10px;
}
/* Price header: centered */
.dom-th-price {
  text-align: center;
  width: 110px;
}
/* Ask size header: left-aligned (bar extends right from price) */
.dom-th-ask-sz {
  text-align: left;
  width: 130px;
  padding-left: 10px;
}

.dom-td {
  padding: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.dom-td-price {
  text-align: center;
  padding: 0 6px;
  width: 110px;
}
.dom-td-bid-sz  { width: 130px; }
.dom-td-ask-sz  { width: 130px; }
.dom-td-bid-exch {
  width: 52px;
  text-align: right;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--up);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dom-td-ask-exch {
  width: 52px;
  text-align: left;
  padding-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--down);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Size cell: relative container for bar + number overlay */
.dom-sz-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ask: bar from left edge */
  min-height: 28px;
  overflow: hidden;
}
/* Bid cell: number and bar anchored to right (adjacent to price column) */
.dom-sz-cell--bid {
  justify-content: flex-end;
}

/* Bars fill the background of the size cell */
.dom-bar {
  position: absolute;
  top: 0;
  height: 100%;
  transition: width 0.15s ease;
  pointer-events: none;
}
/* Ask bar grows from the left edge (price-side) outward right */
.dom-bar--ask {
  left: 0;
  background: oklch(0.78 0.15 25 / 0.30);
}
/* Bid bar grows from the right edge (price-side) outward left */
.dom-bar--bid {
  right: 0;
  background: oklch(0.65 0.18 145 / 0.30);
}

/* Size number rendered on top of bar */
.dom-sz-num {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dom-ask-sz { color: var(--down); }
.dom-bid-sz { color: var(--up); }
.dom-ask-px { color: var(--down); font-weight: 600; }
.dom-bid-px { color: var(--up);   font-weight: 600; }

.dom-row--ask { background: oklch(0.995 0.008 25); }
.dom-row--bid { background: oklch(0.995 0.012 145); }
.dom-row--ask:hover { background: oklch(0.98 0.018 25); }
.dom-row--bid:hover { background: oklch(0.98 0.025 145); }

/* Last-trade highlight: strong yellow-gold outline on the book row where the last print occurred */
.dom-row--last-trade td {
  border-top: 2px solid oklch(0.82 0.18 80) !important;
  border-bottom: 2px solid oklch(0.82 0.18 80) !important;
  background: oklch(0.97 0.06 80 / 0.35) !important;
}
.dom-row--last-trade:hover td {
  background: oklch(0.94 0.08 80 / 0.5) !important;
}

.dom-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Time & Sales ── */
.tas-wrap {
  display: flex;
  flex-direction: column;
}
.tas-scroll {
  overflow-y: auto;
  max-height: 680px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tas-th {
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tas-th:first-child { text-align: left; }
.tas-td {
  padding: 4px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid oklch(0.96 0.003 90);
}
.tas-td-time { text-align: left; color: var(--muted); font-size: 12px; }
.tas-td-exch { color: var(--muted); font-size: 12px; }

/* Whole-row colouring — up=green, dn=red, neutral=white */
.tas-row         { background: var(--surface); }
.tas-row--up     { background: oklch(0.91 0.08 145); }
.tas-row--dn     { background: oklch(0.91 0.08 25);  }
.tas-row--up td  { color: oklch(0.28 0.12 145); }
.tas-row--dn td  { color: oklch(0.28 0.12 25);  }
.tas-row:hover   { filter: brightness(0.95); }

/* Quote rows (BidAsk fallback when trade-tick license is unavailable):
   mute background so they read as ambient market state vs executed prints. */
.tas-row--quote  { background: oklch(from var(--surface) calc(l + 0.02) c h); opacity: 0.92; }
.tas-row--quote td { font-style: normal; }
.tas-row--mid    { opacity: 0.7; }

/* Type column: tiny single-letter badge — T (trade) / Q (quote) / M (mid) */
.tas-td-type {
  width: 22px; text-align: center;
  font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: 0;
}
.tas-row tas-td-type { color: var(--ink); }
.tas-row--quote .tas-td-type { color: oklch(0.55 0.10 240); }   /* cool blue for quotes */
.tas-row--mid   .tas-td-type { color: var(--muted); }

/* Bid/Ask pair rendering inside the Price column of quote rows */
.tas-bid { color: var(--up); }
.tas-ask { color: var(--down); }
.tas-sep { color: var(--muted); opacity: 0.6; padding: 0 2px; }

/* Price cell gets bold + slightly darker tint for emphasis */
.tas-up { font-weight: 700; }
.tas-dn { font-weight: 700; }

/* ── Bid/Ask Volume Histogram ── */
.tas-hist-wrap {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px 8px;
}

/* Vertical bar chart */
.tas-hist-chart {
  display: flex;
  height: 80px;
  gap: 2px;
  align-items: stretch;
}
.tas-hist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Top half: ask bars anchor to bottom (grow upward) */
.tas-hist-ask-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Thin zero line between halves */
.tas-hist-zero-line {
  height: 1px;
  flex-shrink: 0;
  background: var(--border);
}
/* Bottom half: bid bars anchor to top (grow downward) */
.tas-hist-bid-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tas-hist-bar-ask {
  width: 100%;
  min-height: 2px;
  background: var(--up);
  opacity: 0.75;
  border-radius: 2px 2px 0 0;
  transition: height 0.2s ease;
}
.tas-hist-bar-bid {
  width: 100%;
  min-height: 2px;
  background: var(--down);
  opacity: 0.75;
  border-radius: 0 0 2px 2px;
  transition: height 0.2s ease;
}

/* Footer: sell label | split bar | buy label */
.tas-hist-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tas-hist-lbl-sell {
  font-size: 11px;
  font-weight: 600;
  color: var(--down);
  white-space: nowrap;
  min-width: 52px;
}
.tas-hist-lbl-buy {
  font-size: 11px;
  font-weight: 600;
  color: var(--up);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}
.tas-hist-split {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
}
.tas-hist-split-bid {
  height: 100%;
  background: var(--down);
  opacity: 0.75;
  transition: width 0.3s ease;
}
.tas-hist-split-ask {
  height: 100%;
  background: var(--up);
  opacity: 0.75;
  transition: width 0.3s ease;
}

/* Delta row */
.tas-hist-delta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
}
.tas-hist-delta-pos {
  font-size: 12px;
  font-weight: 700;
  color: var(--up);
}
.tas-hist-delta-neg {
  font-size: 12px;
  font-weight: 700;
  color: var(--down);
}
.tas-hist-window {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .dom-layout { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALAXY S21 ULTRA — MOBILE POLISH (412 × 915 CSS pixels)
   Targets ≤880px, ≤640px, and a new ≤420px breakpoint.
   All rules are additive — they layer on top of existing responsive CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ≤880px: drawer & search fixes ───────────────────────────────────────── */
@media (max-width: 880px) {
  /* Sidebar drawer: cap at 80vw so content stays visible behind it */
  .sidebar { width: 260px; max-width: 80vw; }

  /* Search dropdown: never overflow the viewport bottom */
  .search-results { max-height: min(320px, calc(100vh - 120px)); }

  /* Stock-header logo: slightly smaller icon */
  .stock-logo { width: 36px; height: 36px; font-size: 15px; }

  /* Chart: scale height with viewport so it doesn't dominate tall phones */
  .tradingview-widget-container,
  .tradingview-widget-container iframe { height: min(460px, 48vh) !important; }
}

/* ── ≤640px: phone-wide tuning (applies to Galaxy S21 Ultra) ─────────────── */
@media (max-width: 640px) {

  /* ── Chart ── */
  .tradingview-widget-container,
  .tradingview-widget-container iframe { height: min(360px, 42vh) !important; }

  /* ── Metrics: 2-column on phone (large numbers, tighter) ── */
  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { padding: 12px 14px; }
  .metric-label { font-size: 12px; }
  .metric-value .num { font-size: 22px; }

  /* ── Range buttons: smaller pills ── */
  .range-btn { padding: 5px 10px; font-size: 12px; }

  /* ── DOM: strip outer padding to max out book width on 412px ── */
  .dom-wrap { padding: 8px 4px 16px; gap: 8px; }
  .dom-header { padding-bottom: 8px; gap: 8px; }
  .dom-sym  { font-size: 18px; }
  .dom-px   { font-size: 16px; }
  .dom-section-label { font-size: 10px; letter-spacing: 0.04em; margin-bottom: 4px; }
  .dom-layout { gap: 8px; }
  .dom-book-wrap { padding: 0; }

  /* ── DOM table: shrink columns to fit 412px ──
     Column totals: 36+92+80+92+36 = 336px — fits with 4px side padding */
  .dom-table { font-size: 12px; }
  .dom-th-bid-exch, .dom-td-bid-exch { width: 36px; padding-right: 4px; }
  .dom-th-ask-exch, .dom-td-ask-exch { width: 36px; padding-left:  4px; }
  .dom-th-bid-sz,   .dom-td-bid-sz   { width: 92px; }
  .dom-th-ask-sz,   .dom-td-ask-sz   { width: 92px; }
  .dom-th-price,    .dom-td-price     { width: 80px; }
  .dom-sz-num { font-size: 12px; padding: 0 6px; }

  /* ── T&S: compact + use more screen height ── */
  .tas-scroll { max-height: calc(100vh - 250px); border-radius: 8px; }
  .tas-table { font-size: 12px; }
  .tas-th { padding: 5px 6px; font-size: 10px; }
  .tas-td { padding: 3px 6px; }
  .tas-td-time { font-size: 11px; }
  .tas-td-exch { font-size: 11px; }

  /* ── Histogram: shorter on phone ── */
  .tas-hist-chart { height: 56px; }
  .tas-hist-wrap { padding: 6px 8px 4px; margin-top: 6px; }
  .tas-hist-lbl-sell, .tas-hist-lbl-buy { font-size: 10px; min-width: 44px; }
  .tas-hist-window { font-size: 10px; }

  /* ── SEC Filings view ── */
  .filings-view { gap: 12px; }
  .filings-header { gap: 10px; }
  .filing-item { padding: 10px 12px; gap: 10px; border-radius: 10px; }
  .filing-title { font-size: 12px; }
  .filing-date  { font-size: 10px; }
  .filter-chip  { height: 28px; padding: 0 10px; font-size: 11px; }

  /* ── News / Media view ── */
  .nv-wrap { padding: 16px 14px 48px; }
  .nv-card { border-radius: 10px; }
  .nv-card-thumb { height: 120px; }

  /* ── Reddit view ── */
  .rv-wrap { padding: 16px 14px 48px; gap: 12px; }
  .rv-post { padding: 12px 12px; gap: 10px; border-radius: 10px; }
  .rv-title { font-size: 18px; }
  .rv-post-title { font-size: 13px; }
  .rv-score { min-width: 30px; font-size: 10px; }

  /* ── YouTube view ── */
  .yt-wrap { padding: 16px 14px 48px; max-width: 100%; }
  .yt-header { margin-bottom: 16px; }
  .yt-title { font-size: 16px; }
  .yt-grid { gap: 12px; grid-template-columns: 1fr; }
  .yt-info { padding: 10px 12px 12px; }
  .yt-video-title { font-size: 13px; }

  /* ── Analyst view ── */
  .av-wrap { padding: 6px 4px 24px; max-width: 100%; }
  .av-header { flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .av-title { font-size: 18px; }
  .av-summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .av-card { padding: 8px 10px; }
  .av-card-value { font-size: 18px; }
  .av-table-wrap { font-size: 12px; }
  .av-table th, .av-table td { padding: 5px 6px; font-size: 11px; }
  .av-trend-period { width: 70px; font-size: 11px; }
  .av-trend-counts { width: 70px; font-size: 11px; }
  .av-section-title { font-size: 13px; margin-bottom: 6px; }
  .av-section { margin-bottom: 14px; }

  /* ── Ownership view ── */
  .ov-wrap { padding: 6px 4px 24px; max-width: 100%; }
  .ov-header { flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .ov-table-wrap { font-size: 12px; }
  .ov-table th, .ov-table td { padding: 5px 6px; font-size: 11px; }
  .ov-breakdown { gap: 8px; margin-bottom: 12px; }
  .ov-tabs { gap: 4px; margin-bottom: 8px; }
  .ov-tab { padding: 4px 10px; font-size: 11px; }

  /* ── Options view ── */
  .opt-page { padding: 6px 4px 24px; gap: 12px; }
  .opt-table-wrap { border-radius: 10px; }
  /* Horizontal scroll indicator — add subtle fade-right to hint scrollability */
  .opt-table-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
    border-radius: 0 10px 10px 0;
  }
  .opt-table-wrap { position: relative; }
  .opt-section-head {
    padding: 10px 10px 8px;
    flex-wrap: wrap;
    gap: 8px 6px;
  }
  .opt-chain-pair-badges {
    flex: 0 0 100%;   /* force badges onto their own line */
    order: 1;
  }
  .opt-chain-view-seg {
    order: 2;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .opt-expiry-bar { gap: 4px; padding: 0 2px; }
  .opt-chip { padding: 3px 8px; font-size: 11px; }
  .opt-stat { padding: 6px 8px; }
  .opt-stat-label { font-size: 10px; }
  .opt-stat-val { font-size: 13px; }

  /* ── My Assets view ── */
  .assets-page { padding: 16px 0 80px; }
  .assets-hero { gap: 12px; margin-bottom: 18px; }
  .assets-hero-title { font-size: 18px; }
  .assets-hero-sub { font-size: 12px; }
  .assets-summary { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .assets-summary-card { padding: 12px 14px; border-radius: 10px; }
  .assets-summary-label { font-size: 10px; }
  .assets-summary-value { font-size: 18px; }
  .assets-pnl-pct { font-size: 11px; }
  .assets-empty { padding: 48px 20px; }
  .assets-card { border-radius: 10px; padding: 12px 12px; }
  .assets-card-sym .assets-sym { font-size: 15px; }
  .assets-card-rows { font-size: 11px; gap: 5px 10px; }

  /* ── Settings view ── */
  .sett-page { padding: 0; max-width: 100%; }
  .sett-hero { gap: 8px; padding: 4px 0 10px; }
  .sett-hero-title { font-size: 18px; }
  .sett-section { border-radius: 10px; }
  .sett-row { padding: 12px 14px; gap: 10px; }
  .sett-input--lg, .sett-input--md { width: 100%; }

  /* ── Empty / error cards ── */
  .empty-card { padding: 28px 20px; }
  .empty-card h2 { font-size: 18px; }
  .empty-card p  { font-size: 13px; }

  /* ── Safe-area bottom padding for notched/gesture devices ── */
  .main { padding-bottom: max(80px, env(safe-area-inset-bottom, 80px)); }
}

/* ── ≤420px: Galaxy S21 Ultra fine-tuning ────────────────────────────────── */
@media (max-width: 420px) {

  /* Stock header actions: stack the buttons full-width */
  .stock-header__actions { flex-direction: column; }
  .stock-header__actions .btn { width: 100%; justify-content: center; }

  /* Metric numbers: slightly smaller to fit 2-column cleanly */
  .metric-value .num { font-size: 20px; }
  .metric-label { font-size: 11px; }

  /* ── DOM: hide exchange columns entirely so price ladder fits 412px comfortably
     Remaining columns: 110 + 82 + 110 = 302px — wide open breathing room */
  .dom-th-bid-exch, .dom-td-bid-exch,
  .dom-th-ask-exch, .dom-td-ask-exch { display: none; }
  .dom-th-bid-sz,   .dom-td-bid-sz   { width: 110px; }
  .dom-th-ask-sz,   .dom-td-ask-sz   { width: 110px; }
  .dom-th-price,    .dom-td-price     { width: 82px; }

  /* ── T&S: hide exchange column to free up width ── */
  .tas-th.tas-th-exch, .tas-td.tas-td-exch { display: none; }

  /* ── SEC Filings: filter chips wrap tightly ── */
  .filings-filters { gap: 4px; }
  .filter-chip { height: 26px; padding: 0 8px; font-size: 10px; }

  /* ── Analyst: summary grid stays 2×2 but smaller numbers ── */
  .av-card-value { font-size: 16px; }
  .av-card-label { font-size: 10px; }
  .av-card-sub   { font-size: 10px; }

  /* ── Assets: summary stays 2×2 ── */
  .assets-summary-value { font-size: 16px; }
  .assets-summary-label { font-size: 10px; }

  /* ── YouTube grid: single column with smaller cards ── */
  .yt-grid { grid-template-columns: 1fr; }

  /* ── Reddit: tighter score column ── */
  .rv-score { min-width: 26px; }

  /* ── News toast: full-width at very narrow viewport ── */
  .news-alerts-stack { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); width: calc(100vw - 16px); }

  /* ── Ticker strip: tightest possible ── */
  .tick { padding: 6px 8px; gap: 6px; }
  .tick-sym { font-size: 11px; }

  /* ── Chart range buttons: even tighter ── */
  .range-btn { padding: 5px 8px; font-size: 11px; }

  /* ── Filing badges: smaller ── */
  .filing-item { padding: 8px 10px; gap: 8px; }
  .filing-title { font-size: 11px; }

  /* ── IB settings: full-width mode labels ── */
  .ib-mode-tab { padding: 8px 6px; font-size: 10px; }

  /* ── Dashboard: drop Mkt Cap col on very narrow phones, range gets more room */
  .dc--cap { display: none !important; }
  .ds-name { max-width: 100px; }
}

/* ===================================================================
   PRICE ALERTS — AlertsView + PriceAlertToast
   =================================================================== */

/* ── Page wrapper ── */
.alerts-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Page header ── */
.alerts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.alerts-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.alerts-sub   { font-size: 13px; margin: 0; }
.alerts-count-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  background: oklch(0.95 0.06 145);
  color: var(--accent);
  border: 1px solid oklch(0.88 0.1 145);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  margin-top: 4px;
}

/* ── Add-alert form card ── */
.alerts-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-card);
}
.alerts-form-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 16px;
}
.alerts-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 14px;
}
.alerts-field { display: flex; flex-direction: column; gap: 5px; }
.alerts-field--note { grid-column: 1 / -1; }
.alerts-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alerts-use-cur {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: oklch(0.95 0.06 145);
  border: none;
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  letter-spacing: .02em;
}
.alerts-use-cur:hover { background: oklch(0.9 0.09 145); }
.alerts-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.alerts-input:focus { border-color: var(--accent); }

/* T&S Tape view inputs — themed to match the app (bare <input> otherwise falls back
   to the browser's white default, which clashes with the dark surface). color-scheme
   makes the native date/number widgets render in the active theme. */
.tas-input {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s;
}
.tas-input::placeholder { color: var(--muted); }
.tas-input:focus { border-color: var(--accent); }
[data-theme="dark"] .tas-input { color-scheme: dark; }
.alerts-input--sym { text-transform: uppercase; font-weight: 600; letter-spacing: .05em; }
.alerts-select { appearance: none; cursor: pointer; }

/* Smart-alert condition-type selector */
.alerts-kind-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.alerts-kind-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.alerts-kind-chip:hover { color: var(--text); border-color: var(--accent); }
.alerts-kind-chip.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
/* numeric input with trailing unit */
.alerts-num-wrap { position: relative; display: flex; align-items: center; }
.alerts-num-wrap .alerts-input { padding-right: 30px; }
.alerts-num-unit {
  position: absolute;
  right: 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
.alerts-err {
  font-size: 12px;
  color: var(--down);
  margin-bottom: 10px;
}
.alerts-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.alerts-add-btn:hover { opacity: .88; }

/* ── Section header ── */
.alerts-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.alerts-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.alerts-section-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.alerts-clear-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--down);
  padding: 2px 8px;
  border-radius: 5px;
  background: oklch(0.96 0.04 25);
  border: 1px solid oklch(0.9 0.06 25);
  cursor: pointer;
  letter-spacing: .02em;
  text-transform: none;
}
.alerts-clear-btn:hover { background: oklch(0.92 0.07 25); }

/* ── Empty state ── */
.alerts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* ── Alert rows ── */
.alerts-list { display: flex; flex-direction: column; }
.alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.alert-row:last-child { border-bottom: none; }
.alert-row:hover { background: var(--surface-2); }
.alert-row--triggered { opacity: .6; }
.alert-row--triggered:hover { opacity: .8; }

.alert-row-dir {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.alert-dir-up { background: oklch(0.94 0.07 145); color: var(--up); }
.alert-dir-dn { background: oklch(0.94 0.06 25);  color: var(--down); }

.alert-row-body { flex: 1; min-width: 0; }
.alert-row-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.alert-row-sym {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
}
.alert-row-verb { font-size: 12px; color: var(--muted); }
.alert-row-cond {
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Geist Mono', monospace;
  color: var(--text);
}
.alert-row-price {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Geist Mono', monospace;
  color: var(--text);
}
.alert-row-note  { font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 1px; }
.alert-row-meta  { font-size: 11px;   color: var(--muted); margin-top: 2px; }
.alert-row-cur   { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }

.alert-row-bar-wrap {
  display: inline-block;
  width: 80px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  vertical-align: middle;
  margin-left: 8px;
  overflow: hidden;
}
.alert-row-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s ease;
}

.alert-row-del {
  flex-shrink: 0;
  color: var(--muted);
  padding: 4px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.alert-row:hover .alert-row-del { opacity: 1; }
.alert-row-del:hover { background: var(--surface-2); color: var(--down); }

/* ── Price Alert Toast stack ── */
.price-alerts-stack {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 56px);
}

/* Stack offset with news/youtube toasts */
.news-alerts-stack ~ .price-alerts-stack,
.yt-alerts-stack ~ .price-alerts-stack,
.price-alerts-stack:has(~ .news-alerts-stack),
.price-alerts-stack:has(~ .yt-alerts-stack) {
  right: 28px;
  bottom: 28px;
}

.price-alert-toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px -4px rgba(20,24,32,.18), 0 1px 4px rgba(20,24,32,.07);
  padding: 13px 13px 11px 13px;
  pointer-events: all;
  animation: toast-slide-in .28s cubic-bezier(.22,1,.36,1) both;
  position: relative;
  overflow: hidden;
}
.price-alert-toast--out  { animation: toast-slide-out .28s cubic-bezier(.55,0,1,.45) both; }
.price-alert-toast--up   { border-left: 3px solid var(--up); }
.price-alert-toast--dn   { border-left: 3px solid var(--down); }

.pa-toast-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  margin-top: 1px;
}
.pa-icon-up { background: oklch(0.94 0.09 145); color: var(--up); }
.pa-icon-dn { background: oklch(0.94 0.07 25);  color: var(--down); }

.pa-toast-body { flex: 1; min-width: 0; }
.pa-toast-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pa-toast-sym {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--accent);
  text-transform: uppercase;
}
.pa-toast-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 5px;
}
.pa-badge-up { background: oklch(0.94 0.07 145); color: var(--up); }
.pa-badge-dn { background: oklch(0.94 0.06 25);  color: var(--down); }

.pa-toast-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.pa-toast-triggered {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Geist Mono', monospace;
  color: var(--text);
}
.pa-toast-sub { font-size: 11.5px; color: var(--muted); }
.pa-toast-note { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 2px; }

.pa-toast-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--accent);
  opacity: .35;
  width: 100%;
  transform-origin: left;
  animation: toast-bar 10s linear forwards;
}

.pa-toast-close {
  flex-shrink: 0;
  color: var(--muted);
  padding: 3px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.pa-toast-close:hover { background: var(--surface-2); color: var(--text); }

@media (max-width: 600px) {
  .alerts-wrap { padding: 20px 16px 48px; }
  .price-alerts-stack { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
}
/* Collapse the alert form to one column at the app's 640px phone breakpoint
   (avoids cramped 2-col fields in the 601–640px band). */
@media (max-width: 640px) {
  .alerts-form-grid { grid-template-columns: 1fr; }
  .alerts-field--note { grid-column: 1; }
}

/* ===================================================================
   EARNINGS CALENDAR VIEW
   =================================================================== */

.earn-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Header ── */
.earn-header { display: flex; align-items: flex-start; justify-content: space-between; }
.earn-title  { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.earn-sub    { font-size: 13px; margin: 0; }

/* ── Next earnings hero card ── */
.earn-hero-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
}
.earn-hero-left  { min-width: 0; }
.earn-hero-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.earn-hero-date  { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; }
.earn-hero-date2 { font-size: 18px; color: var(--text-2); }
.earn-hero-countdown { margin-top: 8px; }
.earn-hero-pill {
  display: inline-block;
  background: oklch(0.94 0.08 145);
  color: var(--accent);
  border: 1px solid oklch(0.86 0.12 145);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  letter-spacing: .03em;
}
.earn-hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.earn-stat       { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.earn-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.earn-stat-val   { font-size: 16px; font-weight: 700; color: var(--text); }

/* ── Card grid ── */
.earn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.earn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.earn-card--wide { grid-column: 1 / -1; }
.earn-card-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 14px;
}
.earn-card-sub { font-size: 12px; margin: -10px 0 12px; }

/* ── Shared table ── */
.earn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.earn-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.earn-table td {
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.earn-table tr:last-child td { border-bottom: none; }
.earn-table--compact td, .earn-table--compact th { padding: 7px 6px 7px 0; }
.earn-td-period { font-weight: 600; }
.earn-td-sub    { font-size: 10.5px; color: var(--muted); margin-top: 1px; font-weight: 400; }
.earn-td-range  { font-size: 11.5px; color: var(--text-2); }
.earn-muted     { color: var(--muted); font-size: 11.5px; }

/* ── EPS beat/miss bar chart ── */
.earn-bar-chart { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.earn-bar-row   { display: flex; align-items: center; gap: 10px; }
.earn-bar-period { font-size: 11px; font-weight: 600; color: var(--muted); width: 40px; flex-shrink: 0; text-align: right; }
.earn-bar-track  { flex: 1; min-width: 0; }
.earn-bar-labels { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; }
.earn-bar-est    { color: var(--muted); }
.earn-bar-act    { font-weight: 700; }
.earn-bar-vis    { position: relative; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.earn-bar-bg     { position: absolute; inset: 0; background: var(--surface-2); }
.earn-bar-fill   { position: absolute; top: 0; left: 0; height: 100%; border-radius: 99px; transition: width .5s ease; }
.earn-bar-beat   { background: var(--up); }
.earn-bar-miss   { background: var(--down); }
.earn-bar-pct    { font-size: 11px; font-weight: 700; width: 44px; text-align: right; flex-shrink: 0; font-family: 'Geist Mono', monospace; }

/* ── Revenue bar chart ── */
.earn-rev-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-bottom: 4px;
}
.earn-rev-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.earn-rev-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.earn-rev-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  opacity: .75;
  transition: height .5s ease;
  min-height: 4px;
}
.earn-rev-label { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.earn-rev-val   { font-size: 11px; color: var(--text-2); }

/* ── Dividend info grid ── */
.earn-div-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.earn-div-item  { display: flex; flex-direction: column; gap: 3px; }
.earn-div-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.earn-div-val   { font-size: 15px; font-weight: 700; color: var(--text); }

/* ── Helpers ── */
.earn-pos { color: var(--up); }
.earn-neg { color: var(--down); }

/* ── Skeleton / empty ── */
.earn-skeleton { display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; }
.earn-skel-row { height: 60px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; animation: skeleton-pulse 1.5s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.earn-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 60px 24px; color: var(--muted); text-align: center;
}

@media (max-width: 720px) {
  .earn-wrap       { padding: 20px 16px 48px; }
  .earn-grid       { grid-template-columns: 1fr; }
  .earn-card--wide { grid-column: 1; }
  .earn-hero-card  { flex-direction: column; }
  .earn-hero-stats { justify-content: flex-start; }
  .earn-div-grid   { grid-template-columns: 1fr; }
}



/* ===================================================================
   ACCOUNT OVERVIEW — inside MyAssetsView (Feature 3)
   =================================================================== */

.acct-overview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 2px;
}

.acct-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.acct-overview-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.acct-overview-ids {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  letter-spacing: .03em;
}

.acct-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.acct-stat-group {
  padding: 14px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.acct-stat-group:nth-child(3n) { border-right: none; }
.acct-stat-group:nth-child(n+7) { border-bottom: none; }

.acct-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.acct-stat-val {
  font-size: 17px;
  font-weight: 700;
  font-family: 'Geist Mono', monospace;
  color: var(--text);
  letter-spacing: -.01em;
}
.acct-stat-pnl { font-size: 18px; }

/* Pulsing green dot indicating live IB stream */
.acct-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  animation: acct-pulse 2s ease-in-out infinite;
}
@keyframes acct-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

@media (max-width: 640px) {
  .acct-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-stat-group:nth-child(3n)  { border-right: 1px solid var(--border); }
  .acct-stat-group:nth-child(2n)  { border-right: none; }
  .acct-stat-group:nth-child(n+7) { border-bottom: 1px solid var(--border); }
  .acct-stat-group:nth-last-child(-n+2) { border-bottom: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Fundamentals Panel
   ═══════════════════════════════════════════════════════════════ */
.fund-wrap {
  padding: 28px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.fund-loading, .fund-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
}
.fund-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.fund-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.fund-sub { margin: 0; font-size: 13px; }
.fund-site-btn { align-self: flex-start; }

/* Cards */
.fund-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
}
.fund-card-head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 14px;
}

/* 3-col top grid */
.fund-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) {
  .fund-top-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .fund-top-grid { grid-template-columns: 1fr; }
  .fund-wrap { padding: 16px; }
}

/* Key-value table */
.fund-kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fund-kv-table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.fund-kv-table tr:last-child td { border-bottom: none; }
.fund-kv-table td:first-child { color: var(--muted); width: 55%; }
.fund-kv-table td:last-child  { text-align: right; font-weight: 500; font-family: 'Geist Mono', monospace; }

/* 4-col chart grid */
.fund-charts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .fund-charts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .fund-charts-grid { grid-template-columns: 1fr; } }

.fund-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

/* Bar chart */
.fund-barchart { display: flex; flex-direction: column; gap: 10px; }
.fund-barchart-title { font-size: 11px; margin-bottom: 4px; }
.fund-barchart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.fund-barchart-year {
  width: 34px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
}
.fund-barchart-track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.fund-barchart-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.fund-barchart-val {
  width: 60px;
  text-align: right;
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  flex-shrink: 0;
}
.fund-nochart { font-size: 13px; padding: 20px 0; text-align: center; }

/* Company profile */
.fund-profile-card {
  margin-bottom: 16px;
}
.fund-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.fund-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: oklch(0.93 0.08 280 / 0.3);
  color: oklch(0.42 0.18 280);
  border: 1px solid oklch(0.85 0.1 280 / 0.4);
}
.fund-tag--dim {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}
.fund-profile-summary {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* History tables */
.fund-hist-card {
  margin-bottom: 16px;
  overflow: hidden;
}
.fund-table-scroll { overflow-x: auto; }
.fund-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
}
.fund-hist-table th {
  text-align: right;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.fund-hist-table th:first-child { text-align: left; }
.fund-hist-table td {
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px;
}
.fund-hist-table tr:last-child td { border-bottom: none; }
.fund-hist-table td.fund-hist-date {
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   Options Greeks columns + controls
   ═══════════════════════════════════════════════════════════════ */
.opt-col--greek   { width: 52px; }
.opt-th--greek    { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.opt-td--greek    { font-size: 11.5px; font-family: 'Geist Mono', monospace; text-align: right; padding: 0 6px; }

.opt-chain-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.opt-greeks-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.opt-greeks-btn:hover           { background: var(--surface-2); }
.opt-greeks-btn--active         { background: oklch(0.94 0.07 145); border-color: oklch(0.75 0.18 145); color: oklch(0.35 0.18 145); }
.opt-greeks-btn--active:hover   { background: oklch(0.88 0.10 145); }

/* ═══════════════════════════════════════════════════════════════
   IV History Chart
   ═══════════════════════════════════════════════════════════════ */
.ivh-section .opt-section-head { align-items: center; gap: 10px; }
.ivh-period-btns {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}
.ivh-period-btn {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.ivh-period-btn:hover           { background: var(--surface-2); }
.ivh-period-btn--active         { background: oklch(0.93 0.05 280); border-color: oklch(0.72 0.15 280); color: oklch(0.38 0.18 280); }

.ivh-body {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}
.ivh-svg-wrap { width: 100%; }
.ivh-svg { width: 100%; max-height: 140px; display: block; overflow: visible; }
.ivh-last-badge {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.ivh-last-badge strong { color: oklch(0.38 0.18 280); font-family: 'Geist Mono', monospace; }
.ivh-range-info { color: var(--muted); }
.ivh-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  color: var(--muted);
  font-size: 13px;
}
.ivh-empty { font-size: 13px; padding: 20px 0; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   Market Scanner
   ═══════════════════════════════════════════════════════════════ */
.scan-wrap {
  padding: 28px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.scan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.scan-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}
.scan-sub { margin: 0; font-size: 13px; }
.scan-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scan-refresh-time { font-size: 12px; }
.scan-refresh-btn  { gap: 5px; }

.scan-loading, .scan-disconnected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  text-align: center;
}

/* 3-col responsive grid */
.scan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .scan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .scan-grid { grid-template-columns: 1fr; } .scan-wrap { padding: 16px; } }

/* Individual scanner card */
.scan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.scan-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.scan-card-emoji  { font-size: 16px; line-height: 1; }
.scan-card-title  { font-size: 13px; font-weight: 700; flex: 1; }
.scan-card-count  { font-size: 11px; }

.scan-pending, .scan-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  font-size: 13px;
}

/* Scanner table */
.scan-table-wrap { overflow-x: auto; }
.scan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.scan-th {
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.scan-th--r { text-align: right; }
.scan-th--rank { width: 28px; text-align: center; }
.scan-row {
  cursor: pointer;
  transition: background .1s;
}
.scan-row:hover { background: var(--surface-2); }
.scan-row:not(:last-child) .scan-td { border-bottom: 1px solid var(--border); }
.scan-td {
  padding: 8px 10px;
  vertical-align: middle;
  line-height: 1.3;
}
.scan-td--rank  { text-align: center; color: var(--muted); font-size: 11px; }
.scan-td--sym   { min-width: 80px; }
.scan-td--price { text-align: right; font-family: 'Geist Mono', monospace; font-weight: 600; }
.scan-td--chg   { text-align: right; font-family: 'Geist Mono', monospace; font-weight: 600; }
.scan-td--vol   { text-align: right; font-family: 'Geist Mono', monospace; }
.scan-sym  { display: block; font-weight: 700; font-size: 13px; }
.scan-exch { display: block; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════
   IV Surface Heatmap
   ═══════════════════════════════════════════════════════════════ */
.ivs-body {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}
.ivs-load-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 0;
  text-align: center;
}
.ivs-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0;
  color: var(--muted);
  font-size: 13px;
  justify-content: center;
}
.ivs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--muted);
}
.ivs-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ivs-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ivs-table-wrap { overflow-x: auto; }
.ivs-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 400px;
}
.ivs-th {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  background: var(--surface);
}
.ivs-th--label {
  text-align: left;
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
}
.ivs-td {
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.07);
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  min-width: 58px;
  transition: opacity .15s;
}
.ivs-td:hover { opacity: 0.85; }
/* Cells at the min or max of the observed IV range get a subtle outline so the
   user's eye locks onto the extremes quickly. Hover tooltip clarifies which
   one (min/max). */
.ivs-td--extreme {
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: -2px;
}
[data-theme="dark"] .ivs-td--extreme { outline-color: rgba(255,255,255,0.65); }
.ivs-td--label {
  background: var(--surface) !important;
  color: var(--text-2) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  border: 1px solid var(--border);
}
.ivs-row--atm .ivs-td--label { font-weight: 700; color: var(--text) !important; }
.ivs-row--atm .ivs-td { border-top: 2px solid oklch(0.62 0.18 145) !important; border-bottom: 2px solid oklch(0.62 0.18 145) !important; }
.ivs-loading-more {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 12px;
}
.ivs-load-more { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════
   Short Interest View
   ═══════════════════════════════════════════════════════════════ */
.si-wrap {
  padding: 28px 32px;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.si-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.si-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.si-subtitle {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}
.si-pending-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  padding: 3px 10px;
  border-radius: 20px;
  animation: pulse 1.4s ease-in-out infinite;
}
.si-top-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.si-gauge-card {
  padding: 20px 24px;
  border-radius: 14px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(0,0,0,.06);
}
.si-gauge-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  font-weight: 600;
}
.si-gauge-score {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.si-gauge-status {
  font-size: 15px;
  font-weight: 600;
}
.si-gauge-legend {
  font-size: 10px;
  color: var(--text-2);
  margin-top: 4px;
}
.si-iv-badge {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
  background: rgba(0,0,0,.04);
  padding: 4px 8px;
  border-radius: 6px;
  width: fit-content;
}
.si-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  flex: 1;
  min-width: 280px;
}
.si-stat-cell {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.04);
}
.si-stat-label {
  font-size: 10px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.si-stat-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.si-chart-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.si-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.si-period-count {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 400;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 10px;
}
.si-placeholder {
  color: var(--text-2);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
  background: var(--surface-2);
  border-radius: 10px;
}
.si-chart-scroll {
  overflow-x: auto;
  border-radius: 10px;
  background: var(--surface-2);
  padding: 12px 4px 4px;
}
.si-chart-svg { display: block; }
.si-chart-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
}
/* Multi-ticker short-volume comparison chips + add control */
.si-compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.si-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px;
  background: var(--surface-2, var(--surface));
}
.si-compare-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.si-compare-x {
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.si-compare-x:hover { color: var(--down); }
.si-compare-add-wrap { display: inline-flex; gap: 4px; }
.si-compare-input {
  width: 92px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
}
.si-compare-add {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.si-compare-add:hover { border-color: var(--accent, var(--text-2)); }

/* Auto-shown thematic basket panel on the compare chart */
.si-basket-panel {
  margin: 6px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
}
.si-basket-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-bottom: 8px;
}
.si-basket-sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; margin-left: 6px; }
.si-basket-theme { margin-bottom: 10px; }
.si-basket-theme:last-child { margin-bottom: 0; }
.si-basket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.si-basket-name { font-size: 12px; font-weight: 600; color: var(--text); }
.si-basket-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  background: var(--border);
  color: var(--text-2);
}
.si-basket-addall {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.si-basket-addall:hover:not(:disabled) { color: var(--text); border-color: var(--text-2); }
.si-basket-addall:disabled { opacity: 0.4; cursor: default; }
.si-basket-members { display: flex; flex-wrap: wrap; gap: 6px; }
.si-basket-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.si-basket-chip:hover:not(:disabled) { border-color: var(--accent, var(--text-2)); }
.si-basket-chip.is-on {
  background: color-mix(in oklch, var(--accent, oklch(0.62 0.20 250)) 22%, transparent);
  border-color: var(--accent, oklch(0.62 0.20 250));
  font-weight: 600;
}
.si-basket-chip:disabled { opacity: 0.4; cursor: default; }

/* Pairs / RV "what these mean" legend */
.pairs-legend { font-size: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; background: var(--surface-2, var(--surface)); }
.pairs-legend > summary { cursor: pointer; color: var(--text-2); font-weight: 600; padding: 4px 0; list-style: revert; }
.pairs-legend > summary:hover { color: var(--text); }
.pairs-legend-body { padding: 4px 0 8px; color: var(--text-2); line-height: 1.55; }
.pairs-legend-body p { margin: 0 0 7px; }
.pairs-legend-body b { color: var(--text); font-weight: 600; }
.si-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.si-no-ib {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px dashed color-mix(in oklch, var(--accent) 35%, transparent);
}

/* Tick History View */
.tv-wrap { padding: 28px 32px; max-width: 1100px; display: flex; flex-direction: column; gap: 20px; }
.tv-header { display: flex; align-items: center; gap: 14px; }
.tv-title { font-size: 17px; font-weight: 600; color: var(--text-1); letter-spacing: -0.02em; }
.tv-subtitle { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.tv-pending-badge { margin-left: auto; font-size: 11px; color: var(--accent); padding: 3px 10px; border-radius: 20px; animation: pulse 1.4s ease-in-out infinite; }
.tv-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface-2); padding: 12px 16px; border-radius: 10px; }
.tv-control-group { display: flex; align-items: center; gap: 6px; }
.tv-label { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.tv-type-btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
.tv-type-btn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tv-refresh-btn { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 14px; border-radius: 8px; border: none; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.tv-refresh-btn:disabled { opacity: 0.5; cursor: default; }
.tv-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tv-stat-cell { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.tv-stat-label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.tv-stat-value { font-size: 14px; font-weight: 600; color: var(--text-1); }
.tv-spark-wrap { border-radius: 10px; overflow: hidden; background: var(--surface-2); padding: 8px; }
.tv-spark { display: block; }
.tv-table-scroll { overflow: auto; max-height: 420px; border-radius: 10px; border: 1px solid var(--border); }
.tv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tv-table th { background: var(--surface-2); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-2); font-size: 11px; position: sticky; top: 0; z-index: 1; }
.tv-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.tv-table tr:last-child td { border-bottom: none; }
.tv-row-fresh td { background: color-mix(in oklch, var(--accent) 6%, transparent); }
.tv-ts { color: var(--text-2); font-size: 11px; }
.tv-price { font-weight: 600; }
.tv-bid { color: oklch(0.52 0.18 145); font-weight: 600; }
.tv-ask { color: oklch(0.58 0.22 20); font-weight: 600; }
.tv-exch { color: var(--text-2); font-size: 11px; }
.tv-cond { color: var(--text-2); font-size: 10px; }
.tv-up { color: oklch(0.52 0.18 145); font-weight: 600; }
.tv-dn { color: oklch(0.58 0.22 20); font-weight: 600; }
.tv-no-ib, .ts-no-ib { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); background: var(--surface-2); padding: 14px 18px; border-radius: 10px; }
.tv-placeholder, .ts-placeholder { color: var(--text-2); font-size: 13px; padding: 40px 0; text-align: center; background: var(--surface-2); border-radius: 10px; }
/* Term Structure View */
.ts-wrap { padding: 28px 32px; max-width: 1200px; display: flex; flex-direction: column; gap: 20px; }
.ts-header { display: flex; align-items: center; gap: 14px; }
.ts-title { font-size: 17px; font-weight: 600; color: var(--text-1); letter-spacing: -0.02em; }
.ts-subtitle { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.ts-trend { font-size: 12px; font-weight: 600; }
.ts-trend.contango { color: oklch(0.72 0.22 45); }
.ts-trend.backwardation { color: oklch(0.52 0.18 145); }
.ts-pending-badge { margin-left: auto; font-size: 11px; color: var(--accent); padding: 3px 10px; border-radius: 20px; animation: pulse 1.4s ease-in-out infinite; }
.ts-chart-wrap { background: var(--surface-2); border-radius: 12px; padding: 16px; }
.ts-svg { display: block; }
.ts-table-scroll { overflow-x: auto; }
.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table th { background: var(--surface-2); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-2); font-size: 11px; }
.ts-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ts-table tr:last-child td { border-bottom: none; }

/* ===== Tax Center (IBKR Flex → Australian tax) ===== */
.tax-center { max-width: 1100px; margin: 0 auto; padding: 4px 2px 40px; }
.tax-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tax-head h2 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 8px; }
.tax-flag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.tax-selectors { display: flex; gap: 12px; flex-wrap: wrap; }
.tax-sel { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.tax-sel select, .tax-field select, .tax-field input, .tax-alias { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.tax-disclaimer { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-2); background: color-mix(in oklch, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--warn) 35%, var(--border)); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.tax-disclaimer svg { flex: none; margin-top: 1px; color: var(--warn); }
.tax-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.tax-tab { background: var(--surface); border: 1px solid var(--border); padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; border-radius: 8px;
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.tax-tab:hover { color: var(--text); background: var(--surface-3, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.tax-tab.is-active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.tax-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tax-body { min-height: 200px; }
.tax-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 16px; }
.tax-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tax-card-head h3 { margin: 0; font-size: 15px; }
.tax-muted { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.tax-empty { color: var(--muted); font-size: 13px; padding: 16px; text-align: center; }
.tax-mono, .tax-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; }
.tax-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-right: 5px; }
.tax-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border); }
.tax-pill--ok { color: var(--up); border-color: color-mix(in oklch, var(--up) 40%, var(--border)); background: color-mix(in oklch, var(--up) 10%, var(--surface)); }
.tax-pill--warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); background: color-mix(in oklch, var(--warn) 10%, var(--surface)); }
/* tables */
.tax-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tax-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.tax-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tax-table tr:last-child td { border-bottom: none; }
.tax-table--sm { font-size: 12px; }
.tax-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.tax-alias { width: 130px; }
/* entity form */
.tax-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tax-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.tax-field--wide { grid-column: 1 / -1; }
.tax-field--check { flex-direction: row; align-items: center; gap: 7px; grid-column: 1 / -1; }
.tax-field--check input { width: auto; }
.tax-form-hint { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 12px 0; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; display: grid; gap: 4px; }
.tax-form-hint-tip { margin-top: 4px; padding: 8px 10px; border-left: 2px solid var(--accent); background: color-mix(in oklch, var(--accent) 7%, var(--surface-2)); border-radius: 4px; }
.tax-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* setup steps */
.tax-steps { margin: 6px 0 10px; padding-left: 20px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.tax-steps li { margin-bottom: 6px; }
.tax-pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; overflow-x: auto; margin: 6px 0; }
.tax-runs { margin-top: 10px; font-size: 12px; }
.tax-runs summary { cursor: pointer; color: var(--accent); margin-bottom: 6px; }
.tax-runs-table { margin-top: 8px; }
.tax-runs-table th, .tax-runs-table td { white-space: nowrap; }
.tax-run-label { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--muted); }
.tax-src { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); }
.tax-src--file { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 40%, var(--border)); background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
.tax-src--auto { color: var(--up); border-color: color-mix(in oklch, var(--up) 35%, var(--border)); background: color-mix(in oklch, var(--up) 8%, var(--surface)); }
.tax-src--api { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 35%, var(--border)); background: color-mix(in oklch, var(--warn) 8%, var(--surface)); }
.tax-ingest-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.tax-import-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tax-import-row input[type=file] { font-size: 12px; color: var(--muted); max-width: 100%; }
/* per-account Flex connections */
.tax-conn-table { margin-top: 6px; }
.tax-conn-table td, .tax-conn-table th { vertical-align: middle; }
.tax-conn-table .tax-row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.tax-conn-src { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.tax-conn-form { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: color-mix(in oklch, var(--accent) 4%, var(--surface)); }
.tax-conn-form h4 { margin: 0 0 10px; font-size: 13px; }
.tax-conn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.tax-conn-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.tax-conn-grid label > span { font-weight: 600; }
.tax-conn-grid input[type=text], .tax-conn-grid input[type=password], .tax-conn-grid input:not([type]) {
  font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-input, 7px);
  background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; font-family: inherit; }
.tax-conn-grid input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tax-conn-enable { flex-direction: row !important; align-items: center; gap: 8px !important; grid-column: 1 / -1; font-size: 12.5px !important; color: var(--text-2) !important; }
.tax-conn-enable input { width: auto; }
@media (max-width: 640px) { .tax-conn-grid { grid-template-columns: 1fr; } }
/* Phones: drop the 4-up stat row to 2-up so the cards stay readable, not crushed. */
@media (max-width: 560px) { .tax-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* overview */
/* minmax(0,1fr) lets the stat cells shrink below their content width so a 4-up row
   never blows past the card on narrow screens; it collapses to 2-up on phones. */
.tax-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tax-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; text-align: center; min-width: 0; }
.tax-stat-n { font-size: 24px; font-weight: 700; }
.tax-stat-l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tax-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tax-checklist li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.tax-checklist li svg { color: var(--muted); flex: none; }
.tax-checklist li.is-done { color: var(--text); }
.tax-checklist li.is-done svg { color: var(--up); }
.tax-bullets { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.tax-bullets li { margin-bottom: 5px; }
.tax-pending { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tax-pending svg { color: var(--muted); }
.tax-pending h3 { margin: 4px 0 0; }
.btn--xs { font-size: 11px; padding: 3px 8px; }
/* P3 — data tabs (Profit/Loss, CGT Report, Trades, Deductions) */
.tax-data { display: flex; flex-direction: column; gap: 16px; }
.tax-stat-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.tax-gain { font-variant-numeric: tabular-nums; font-weight: 600; }
.tax-up { color: var(--up); }
.tax-down { color: var(--down); }
.tax-strong { font-weight: 700; }
.tax-table-wrap { overflow-x: auto; }
/* Narrow-screen overflow guard for the whole Tax Center: any wide table (account
   maps, CGT events, ledger journals, connections…) scrolls horizontally WITHIN its
   card instead of bleeding past the card border / forcing a page-level scrollbar.
   display:block makes the <table> a scroll container while its rows keep table
   layout. Scoped to .tax-center so cards elsewhere (e.g. the rental address
   autocomplete popover) keep overflow:visible. */
.tax-center { min-width: 0; }
.tax-center .tax-table { display: block; max-width: 100%; overflow-x: auto; }
.tax-table--num { width: 100%; }
.tax-table--num th, .tax-table--num td { white-space: nowrap; }
.tax-table--num th:not(:first-child), .tax-table--num td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tax-table tbody tr.is-active { background: color-mix(in oklch, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.tax-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tax-table-toolbar h3 { margin: 0; font-size: 14px; }
.tax-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.tax-warn-dot { display: inline-block; margin-left: 5px; min-width: 15px; height: 15px; line-height: 14px; text-align: center; font-size: 10px; font-weight: 700; color: var(--warn); border: 1px solid color-mix(in oklch, var(--warn) 45%, var(--border)); border-radius: 50%; cursor: help; }
.tax-warn { color: var(--warn); }
.tax-warn-card { border-color: color-mix(in oklch, var(--warn) 35%, var(--border)); }
.tax-warn-card h3 { display: flex; align-items: center; gap: 7px; }
.tax-warn-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-2); line-height: 1.55; }
.tax-treat { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: var(--text-2); }
.tax-excluded { font-size: 12px; }
.tax-toggle-row { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.tax-toggle { font-size: 12px; font-weight: 600; padding: 6px 14px; border: none; background: transparent; color: var(--text-2); cursor: pointer; }
.tax-toggle + .tax-toggle { border-left: 1px solid var(--border); }
.tax-toggle.is-active { background: var(--accent); color: var(--on-accent); }
.tax-toggle--sm { border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; font-size: 11px; margin-left: auto; }
.tax-row--paired td { background: color-mix(in oklch, var(--up) 5%, transparent); }
.tax-rate-note { font-size: 12px; margin: -4px 2px 0; }
.tax-card-head .tax-export { margin-left: auto; white-space: nowrap; }
/* Income tab */
.tax-inline-ctrls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.tax-inline-ctrls label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.tax-inline-ctrls select, .tax-inline-ctrls input { font: inherit; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.tax-inline-ctrls input { width: 72px; text-align: right; }
.tax-subhead { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 12px 2px 6px; padding-top: 8px; border-top: 1px solid var(--border); }
/* F-3: live financial statements — a small tag showing which imported source drives each line.
   Scoped to .tax-financials so it does not collide with the pre-existing .tax-src ingest tag. */
.tax-financials .tax-src { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); background: color-mix(in oklch, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); border-radius: 4px; vertical-align: middle; }
.tax-financials .tax-table--sm td { padding-top: 3px; padding-bottom: 3px; }
.tax-pct-input { width: 58px; text-align: right; font: inherit; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.tax-pct-input:disabled { opacity: 0.45; cursor: not-allowed; }
.tax-input--warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.tax-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; vertical-align: middle; }
.tax-strong { font-weight: 700; }
.tax-table tr.is-sel-fy td { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.tax-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 4px 2px 0; }
/* AMMA component editor (expandable row in the dividends table) */
.tax-amma-row td { background: var(--surface-2); padding: 0; }
.tax-amma-editor { padding: 12px 14px; }
.tax-amma-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.tax-amma-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-2); }
.tax-amma-grid input { font: inherit; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-align: right; }
.tax-amma-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tax-amma-actions .tax-muted { margin-right: auto; }
@media (max-width: 640px) { .tax-amma-grid { grid-template-columns: 1fr 1fr; } }
/* Working-papers header + print */
.tax-wp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
@media print {
  .sidebar, .topbar, .tax-tabs, .tax-selectors, .tax-flag, .toast-center, .btn, button, .tax-export-btn { display: none !important; }
  .main, body, .tax-center, .tax-body, .tax-data { display: block !important; background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .tax-card { break-inside: avoid; border: 1px solid #bbb !important; box-shadow: none !important; }
  /* print full tables — undo the on-screen horizontal-scroll containment */
  .tax-center .tax-table { display: table !important; overflow: visible !important; }
  .tax-wp-head { border: none; padding: 0 0 8px; }
  .tax-note, .tax-muted { color: #333 !important; }
}
/* Investor-vs-trader classification bar */
.tax-classbar { position: relative; height: 24px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in oklch, var(--ok, #16a34a) 22%, transparent), color-mix(in oklch, var(--warn, #d97706) 22%, transparent)); border: 1px solid var(--border); overflow: hidden; }
.tax-classbar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-right: 2px solid var(--text); background: color-mix(in oklch, var(--accent) 14%, transparent); transition: width 0.3s; }
.tax-classbar-lbl { position: absolute; top: 3px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.tax-classbar-lbl--l { left: 8px; }
.tax-classbar-lbl--r { right: 8px; }
/* Return-of-capital entry form (CGT tab) */
.tax-roc-form { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; margin-bottom: 4px; }
.tax-roc-form .tax-sel { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-2); }
.tax-roc-form .tax-sel > span { font-size: 11px; color: var(--muted); }
.tax-roc-form select, .tax-roc-form input { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.tax-roc-form input[type="number"] { width: 130px; text-align: right; }
.tax-roc-form > .btn { margin-bottom: 1px; }
@media (max-width: 640px) { .tax-roc-form { gap: 10px; } .tax-roc-form .tax-sel, .tax-roc-form select, .tax-roc-form input { width: 100%; } .tax-roc-form > .btn { width: 100%; } }
@media (max-width: 640px) {
  .tax-form-grid { grid-template-columns: 1fr; }
  .tax-stat-row { grid-template-columns: repeat(2, 1fr); }
}
.ts-row-front td { background: color-mix(in oklch, var(--accent) 6%, transparent); font-weight: 600; }
.ts-expiry { font-family: monospace; display: flex; align-items: center; gap: 6px; }
.ts-front-badge { font-size: 9px; background: var(--accent); color: var(--on-accent); padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.ts-last { font-weight: 600; }
/* Order Entry View */
.oe-wrap { padding: 28px 32px; max-width: 1000px; display: flex; flex-direction: column; gap: 24px; }
.oe-header { display: flex; align-items: center; gap: 14px; }
.oe-title { font-size: 17px; font-weight: 600; color: var(--text-1); letter-spacing: -0.02em; }
.oe-subtitle { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.oe-ticket { background: var(--surface-2); border-radius: 14px; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border); }
.oe-section-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.oe-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.oe-field { display: flex; flex-direction: column; gap: 5px; }
.oe-field label { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.oe-input { font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); width: 100px; }
.oe-select { font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); }
.oe-toggle-group { display: flex; }
.oe-toggle { font-size: 13px; font-weight: 600; padding: 7px 16px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
.oe-toggle:first-child { border-radius: 8px 0 0 8px; border-right: none; }
.oe-toggle:last-child { border-radius: 0 8px 8px 0; }
.oe-buy-active { background: oklch(0.52 0.18 145) !important; color: #fff !important; border-color: transparent !important; }
.oe-sell-active { background: oklch(0.58 0.22 20) !important; color: #fff !important; border-color: transparent !important; }
.oe-buy-text { color: oklch(0.52 0.18 145); font-weight: 600; }
.oe-sell-text { color: oklch(0.58 0.22 20); font-weight: 600; }
.oe-feedback { font-size: 13px; padding: 8px 14px; border-radius: 8px; }
.oe-feedback.ok { background: oklch(0.95 0.05 145); color: oklch(0.42 0.18 145); }
.oe-feedback.error { background: oklch(0.97 0.04 20); color: oklch(0.50 0.22 20); }
.oe-submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.oe-order-preview { font-size: 13px; color: var(--text-2); font-family: monospace; }
.oe-submit-btn { font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: 10px; border: none; cursor: pointer; }
.oe-submit-btn.buy { background: oklch(0.52 0.18 145); color: #fff; }
.oe-submit-btn.sell { background: oklch(0.58 0.22 20); color: #fff; }
.oe-submit-btn:disabled { opacity: 0.5; cursor: default; }
.oe-no-ib { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.oe-blotter { display: flex; flex-direction: column; gap: 10px; }
.oe-no-orders { font-size: 13px; color: var(--text-2); padding: 20px 0; text-align: center; }
.oe-blotter-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.oe-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.oe-table th { background: var(--surface-2); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-2); font-size: 11px; }
.oe-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.oe-table tr:last-child td { border-bottom: none; }
.oe-oid { color: var(--text-2); font-size: 11px; font-family: monospace; }
.oe-sym { font-weight: 600; }
.oe-status-chip { font-size: 11px; font-weight: 600; }
.oe-cancel-btn { font-size: 12px; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: oklch(0.58 0.22 20); cursor: pointer; }
/* Options Strategy Builder */
.strat-wrap { padding: 28px 32px; max-width: 900px; display: flex; flex-direction: column; gap: 20px; }
.strat-header { display: flex; align-items: center; gap: 14px; }
.strat-title { font-size: 17px; font-weight: 600; color: var(--text-1); letter-spacing: -0.02em; }
.strat-subtitle { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.strat-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; background: var(--surface-2); padding: 16px 20px; border-radius: 12px; }
.strat-field { display: flex; flex-direction: column; gap: 5px; }
.strat-field label { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.strat-select { font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); min-width: 160px; }
.strat-input { font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); width: 100px; }
.strat-desc { font-size: 13px; color: var(--text-2); background: var(--surface-2); padding: 12px 16px; border-radius: 10px; border-left: 3px solid var(--accent); }
.strat-legs { display: flex; flex-direction: column; gap: 12px; }
.strat-section-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.strat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.strat-table th { background: var(--surface-2); padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-2); }
.strat-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.strat-table tr:last-child td { border-bottom: none; }
/* ── Options-strategy risk/reward visualizer (payoff + decay curves) ── */
.strat-analysis { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.strat-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.strat-chart-title { font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.strat-payoff-svg { width: 100%; height: 196px; display: block; overflow: visible; }
.strat-decay-svg { width: 100%; height: 92px; display: block; overflow: visible; }
.strat-chart-axis { display: flex; justify-content: space-between; font-size: 10px; margin-top: 4px; }
.strat-chart-foot { font-size: 11px; margin-top: 2px; line-height: 1.4; }
.strat-chart-loading { font-size: 12px; padding: 8px 0; }
.strat-payoff-env { fill: oklch(from var(--accent) l c h / 0.07); stroke: none; }
.strat-zero { stroke: var(--muted); stroke-width: 1; opacity: 0.55; }
.strat-spot { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.7; }
.strat-be { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; opacity: 0.6; }
.strat-expiry { stroke: var(--accent); stroke-width: 2; }
.strat-now { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: 0.85; }
.strat-decay-env { fill: oklch(from var(--down) l c h / 0.08); stroke: none; }
.strat-decay-line { stroke: var(--down); stroke-width: 1.75; }
.strat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.strat-stat { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.strat-stat-k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.strat-stat-v { font-size: 14px; font-weight: 700; font-family: 'Geist Mono', monospace; }
.strat-stat-v.is-up { color: var(--up); }
.strat-stat-v.is-dn { color: var(--down); }
@media (max-width: 880px) { .strat-stats { grid-template-columns: repeat(2, 1fr); } }
/* Launchpad options-summary: max-pain expiry caption */
.lp-opt__exp { font-size: 11px; margin-bottom: 6px; }
.lp-opt__exp b { color: var(--text); font-weight: 600; }
.strat-submit-row { display: flex; align-items: center; gap: 14px; }
.strat-submit-btn { font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: 10px; border: none; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.strat-submit-btn:disabled { opacity: 0.5; cursor: default; }
.strat-no-ib { font-size: 12px; color: var(--text-2); }

/* M15 + M16: phone overrides for the IB tool views (tick history / term
   structure / order entry / strategy builder). Without these the 6-up stats
   grid collapses to ~45px cells and the 28×32 wrapper padding wastes width. */
@media (max-width: 640px) {
  .tv-wrap, .ts-wrap, .oe-wrap, .strat-wrap { padding: 16px 14px; }
  .tv-stats { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   OPPO N6 RESPONSIVE FIXES
   Unfolded ≈900 CSS px (sidebar inline 268 px → ~580 px content)
   Folded   ≈390 CSS px (sidebar drawer  → ~360 px content)
   ============================================================================= */

/* ── Root fix: all direct children of .main must be able to shrink ──────────
   .main is a flex-column container. Without min-width:0, flex children expand
   to their content's min-width (e.g. a wide table), overflowing the viewport.
   width:100% + box-sizing:border-box pins the wrapper to exactly main's width
   (overriding the content-driven expansion from table-layout:auto tables).
   This prevents body-level horizontal scroll on every panel.                   */
.main > * { min-width: 0; width: 100%; box-sizing: border-box; }

/* ── Allow grid/flex items to shrink within their tracks ────────────────────  */
.fund-card { min-width: 0; }
.earn-card { min-width: 0; }
.scan-card { min-width: 0; }
.fund-top-grid > *, .scan-grid > * { min-width: 0; }

/* ── Reduce outer panel padding at ≤1024 px ─────────────────────────────────
   At 881-1024 px the sidebar is inline (~268 px), leaving only ~580 px.
   Default 32 px-per-side wraps waste ~130 px — cut to 18 px.                  */
@media (max-width: 1024px) {
  .fund-wrap   { padding: 16px 18px 32px; }
  .si-wrap     { padding: 16px 18px 32px; }
  .ov-wrap     { padding: 12px 14px 28px; max-width: 100%; }
  .av-wrap     { padding: 12px 14px 36px; }
  .alerts-wrap { padding: 20px 18px 48px; }

  /* Fund KV tables: scroll within card instead of pushing layout wider */
  .fund-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Fundamentals: single-column fund-top-grid while sidebar is visible ─────
   Uses min-width:881px to target only the range where the sidebar is inline.
   At ≤880px the sidebar becomes a drawer, freeing ~268px — 2 cols work fine.   */
@media (min-width: 881px) and (max-width: 1024px) {
  .fund-top-grid { grid-template-columns: 1fr; }
}

/* ── Market Scanner: single column in sidebar-visible zone ──────────────────
   At 2 columns each card is ~260 px — too narrow for VOLUME column.           */
@media (min-width: 881px) and (max-width: 1100px) {
  .scan-grid { grid-template-columns: 1fr; }
  .scan-wrap { padding: 16px 18px 32px; }
  .scan-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Stock Dashboard: hide after-hours & sparkline at ≤1100 px ──────────────
   dc--ext overflows the content area when sidebar is visible at 900 px.
   Already hidden at ≤640 px — extend the hide upward.                         */
@media (max-width: 1100px) {
  .dc--ext   { display: none !important; }
  .dc--spark { display: none !important; }
}

/* ── Short Interest: stack gauge card + stats grid vertically at ≤1024 px ───
   si-gauge-card has min-width:200px and si-stats-grid has min-width:280px;
   together they can squeeze past the available content width and wrap oddly.   */
@media (max-width: 1024px) {
  .si-top-row    { flex-direction: column; }
  .si-gauge-card { width: 100%; box-sizing: border-box; min-width: 0; }
  .si-stats-grid { flex: none; width: 100%; min-width: 0; }
}

/* ── Earnings: horizontally scrollable cards for wide tables ────────────────
   The 5-column Estimate Revisions table overflows a half-width earn-card.
   overflow-x:auto confines the scroll to each card's own box.                 */
@media (max-width: 1100px) {
  .earn-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .earn-wrap { padding: 16px 18px 40px; }
}

/* ── Analyst Ratings: let search input shrink gracefully ────────────────────  */
@media (max-width: 1024px) {
  .av-search  { min-width: 0; width: 110px; }
  .av-filters { row-gap: 6px; }
}

/* ── Ownership: ensure ov-table-wrap can scroll without parent overflow ──────  */
.ov-wrap       { box-sizing: border-box; }
.ov-table-wrap { max-width: 100%; }

/* ── Phone ≤640 px: remove unnecessary padding around tables ────────────────
   Every px matters on a 360 px screen — strip extra horizontal whitespace.    */
@media (max-width: 640px) {
  .fund-wrap     { padding: 10px 10px 28px; }
  .scan-wrap     { padding: 10px 10px 28px; }
  .si-wrap       { padding: 10px 10px 28px; }
  .earn-wrap     { padding: 10px 10px 36px; }
  .av-wrap       { padding: 8px 10px 32px; }
  .alerts-wrap   { padding: 12px 12px 48px; }

  /* Short Interest stats: 2-column grid fits better than 3 at 360 px */
  .si-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Fund chart cards: tighter padding so charts breathe on small screens */
  .fund-chart-card { padding: 12px 14px; }

  /* Earnings hero: slightly smaller date label on narrow phones */
  .earn-hero-date { font-size: 20px; }
}

/* ── Options chain: always fit, no horizontal scroll ────────────────────────
   Previously the tight-fit rules only fired between 881-1100 px, so:
     • Foldable phones at ≤880 px unfolded (~960 px) had no rule, scrolled
     • 1280 px laptops had no rule (paired table forced min-width 760 plus
       cell padding produced ≈1066 px content vs ≈900 px wrap)
   The rule now applies at ≤1280 px (covers laptops, tablets, phones) plus
   an unconditional `min-width: 0` reset so the desktop default (≥1281 px)
   no longer enforces 760-860 px floors that prevent the table from
   shrinking inside narrower content panes (e.g. the Options view inside
   a 1080 px window with the sidebar expanded). Worst case the .wrap
   keeps overflow-x: auto so a malformed cell can still be scrolled to. */
.opt-table,
.opt-table--paired,
.opt-table--active-paired { min-width: 0; }
.opt-table { table-layout: fixed; }

@media (max-width: 1280px) {

  /* ── Options page: remove outer horizontal padding ───────────────────── */
  .opt-page { padding-left: 12px !important; padding-right: 12px !important; }

  /* ── Options chain: no horizontal scroll, fixed-layout tables ─────────── */
  .opt-chain-table-wrap { overflow: hidden !important; }
  .opt-table,
  .opt-table--paired,
  .opt-table--active-paired {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* Paired chain (9 cols): hide IV+OI (rarely populated in live view).
     Remaining 5 cols: vol 18% | bid 23% | strike 18% | bid 23% | vol 18%.
     At ≈555 px container: vol≈100 px  bid≈127 px  strike≈100 px — all fit. */
  .opt-col--chain-iv     { width: 0   !important; }
  .opt-col--chain-oi     { width: 0   !important; }
  .opt-col--chain-vol    { width: 18% !important; }
  .opt-col--chain-bidask { width: 23% !important; }
  .opt-col--chain-strike { width: 18% !important; }

  /* Greek columns (Δ, Θ): hidden by default in this band — they're
     extra metrics that don't fit when bid/strike are competing for room.
     Users who want them can widen the viewport above 1281 px. */
  .opt-col--greek                  { width: 0 !important; }
  .opt-th--greek, .opt-td--greek   {
    padding: 0 !important; overflow: hidden !important;
    font-size: 0 !important; border: none !important;
  }

  /* Collapse hidden IV/OI cells to truly zero width */
  .opt-th--chain-iv, .opt-td--chain-iv,
  .opt-th--chain-oi, .opt-td--chain-oi {
    padding: 0 !important; overflow: hidden !important;
    font-size: 0 !important; border: none !important;
  }
  /* Group-header colSpan cells must clip — they span the collapsed cols too */
  .opt-th--call-group, .opt-th--put-group, .opt-th--strike-group {
    overflow: hidden !important;
  }

  /* Active (sorted) paired table (12 cols): hide rank+OI, size rest evenly.
     Remaining: strike 15% | expiry 10% | bid 21% | vol 15% — mirrored.
     2×(15+10+21+15) = 122%; add 0% rank+OI → scale within 100% automatically. */
  .opt-col--act-rank   { width: 0   !important; }
  .opt-col--act-oi     { width: 0   !important; }
  .opt-col--act-strike { width: 16% !important; }
  .opt-col--act-expiry { width: 10% !important; }
  .opt-col--act-bidask { width: 22% !important; }
  .opt-col--act-vol    { width: 14% !important; }

  /* Collapse hidden act rank/oi cells */
  .opt-th--act-rank,  .opt-td--rank,
  .opt-th--act-oi,    .opt-td--act-oi {
    padding: 0 !important; overflow: hidden !important;
    font-size: 0 !important; border: none !important;
  }

  /* Tighter cell padding — saves ~12 px per column vs the 14 px desktop default */
  .opt-th { padding: 7px 8px !important; font-size: 10.5px !important; }
  .opt-td { padding: 5px 7px !important; font-size: 11.5px !important; }
  .opt-td--bidask { font-size: 10px !important; }
  .opt-th--vol { min-width: 0 !important; }
  .opt-vol-wrap { min-width: 0 !important; }

  /* Volume bar: shrink freely to fill whatever column the layout allows */
  .opt-th--vol  { min-width: 0 !important; }
  .opt-vol-wrap { min-width: 0 !important; }

  /* ── Implied Volatility Surface: allow shrink below default 400 px ─────
     Default .ivs-table sets min-width: 400 px + .ivs-td min-width: 58 px,
     which forces horizontal scroll on phone-class viewports. Drop both
     mins and let the wrap clip; cells shrink proportionally. The table
     stays readable because IVS values are 3-4 chars wide. */
  .ivs-table-wrap { overflow-x: hidden !important; }
  .ivs-table { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }
  .ivs-td, .ivs-th { min-width: 0 !important; padding: 5px 4px !important; font-size: 10px !important; }
  .ivs-td { font-size: 10.5px !important; }
  .opt-vol-val  { font-size: 11px !important; }

  /* ATM / ITM pills: smaller to avoid stretching the strike column */
  .opt-atm-pill, .opt-itm-pill { font-size: 8px !important; padding: 1px 3px !important; }

  /* ── Stock Dashboard: tighter padding + 4-col grid ───────────────────── */
  /*   Columns: [sym: flex] [price: 82px] [change: 96px] [range: 115px] [×: 28px]
       dc--ext is already display:none at ≤1100px → removed from flow, so dc--range
       shifts naturally to column 4 via CSS Grid auto-placement.               */
  .dashboard-view { padding: 12px 12px 20px !important; }
  .dash-row {
    grid-template-columns: minmax(120px, 1fr) 82px 96px 115px 28px !important;
    padding: 10px 12px !important;
    gap: 0 6px !important;
  }
  /* Hide volume, mkt-cap (don't fit); keep dc--act for the remove × button */
  .dc--vol { display: none !important; }
  .dc--cap { display: none !important; }
  /* Remove the "View" text link — icon-only remove button stays (28px col) */
  .dc--act .btn--ghost { display: none !important; }

  /* Slightly tighter text sizes */
  .ds-sym   { font-size: 13px !important; }
  .ds-price { font-size: 13px !important; }
  .ds-name  { font-size: 10px !important; max-width: 130px; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
  .ds-meta  { font-size: 11px !important; }

  /* ── Analyst Ratings: scroll, don't cram ───────────────────────────────
     7 columns (Date | Firm | Analyst | Action | Rating | Price Target |
     Source) cannot fit a phone width without clipping firm names, rating
     transitions ("Buy → Strong Buy") and "$12 → $15" targets — the old
     fixed 5-col cram overflowed messily. Keep every column readable and let
     the wrapper scroll horizontally instead.                                */
  .av-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .av-table { min-width: 680px; table-layout: auto; }
  .av-table th, .av-table td { white-space: nowrap; }
  .av-table th { padding: 7px 10px !important; font-size: 11px !important; }
  .av-table td { padding: 6px 10px !important; font-size: 11.5px !important; }

  /* ── Ownership: 26 px over — fixed layout + explicit col widths ─────────── */
  .ov-table-wrap { overflow: hidden !important; }
  .ov-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* # col squeezed to 5 % (~27 px); saved space redistributed to Institution */
  .ov-table th:nth-child(1), .ov-table td:nth-child(1) { width:  5% !important; } /* #           */
  .ov-table th:nth-child(2), .ov-table td:nth-child(2) { width: 24% !important; } /* Institution */
  .ov-table th:nth-child(3), .ov-table td:nth-child(3) { width: 14% !important; } /* Shares      */
  .ov-table th:nth-child(4), .ov-table td:nth-child(4) { width: 13% !important; } /* % Held      */
  .ov-table th:nth-child(5), .ov-table td:nth-child(5) { width: 15% !important; } /* Value       */
  .ov-table th:nth-child(6), .ov-table td:nth-child(6) { width: 15% !important; } /* Change      */
  .ov-table th:nth-child(7), .ov-table td:nth-child(7) { width: 14% !important; } /* Filed       */

  /* ── Fundamentals: reduce card/wrap padding + fixed layout ──────────────── */
  .fund-wrap { padding-left: 8px !important; padding-right: 8px !important; }
  .fund-card { padding: 14px 12px !important; }
  .fund-table-scroll { overflow: hidden !important; }
  .fund-hist-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* Allow header text to wrap so columns stay narrow */
  .fund-hist-table th {
    padding: 6px 5px !important;
    font-size: 10px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  .fund-hist-table td { padding: 5px 5px !important; font-size: 11px !important; }

  /* ── My Assets: hide Type/Avg Cost/Day P&L/Account, fixed layout ─────────
     Remaining 6 cols: Symbol | Qty | Last Price | Mkt Value | P&L $ | P&L %  */
  .assets-page { padding-left: 10px !important; padding-right: 10px !important; }
  /* Summary bar: let it scroll internally rather than blow out the page */
  .assets-summary { overflow-x: auto !important; }
  .assets-table-wrap { overflow: hidden !important; }
  .assets-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* Collapse Type(2), Avg Cost(4), Day P&L(9), Account(10) to zero width */
  .assets-table th:nth-child(2),  .assets-table td:nth-child(2),
  .assets-table th:nth-child(4),  .assets-table td:nth-child(4),
  .assets-table th:nth-child(9),  .assets-table td:nth-child(9),
  .assets-table th:nth-child(10), .assets-table td:nth-child(10) {
    width: 0 !important; padding: 0 !important;
    overflow: hidden !important; font-size: 0 !important; border: none !important;
  }
  /* Size the 6 visible cols (must sum ≤ 100%) */
  .assets-table th:nth-child(1), .assets-table td:nth-child(1) { width: 22% !important; } /* Symbol */
  .assets-table th:nth-child(3), .assets-table td:nth-child(3) { width: 10% !important; } /* Qty */
  .assets-table th:nth-child(5), .assets-table td:nth-child(5) { width: 16% !important; } /* Last Price */
  .assets-table th:nth-child(6), .assets-table td:nth-child(6) { width: 18% !important; } /* Mkt Value */
  .assets-table th:nth-child(7), .assets-table td:nth-child(7) { width: 18% !important; } /* Unreal. P&L */
  .assets-table th:nth-child(8), .assets-table td:nth-child(8) { width: 16% !important; } /* P&L % */
  .assets-table th { padding: 7px 5px !important; font-size: 10.5px !important; }
  .assets-table td { padding: 6px 5px !important; font-size: 11px !important; }
}

/* ── Options chain: phone refinements (≤640 px) ────────────────────────────
   At ~360-480 px the 23 % Bid×Ask column ends up ~71-99 px wide — not enough
   to fit "$XX.XX × $YY.YY" on one line, so the ask was being clipped and the
   user perceived volume as "stealing space". Two fixes:
     1. Hide the volume bar (when most rows are 0 it's pure visual noise and
        the bar fills the cell at full width even when value="—") — frees the
        volume column to shrink to ~13 %.
     2. Stack Bid above Ask inside the cell (the new fmtBidAsk returns three
        spans: .opt-bid-val, .opt-bidask-sep, .opt-ask-val — hide the
        separator and block-display the values).
   Widths: vol 11 % | bidask 24 % | strike 30 % — because Bid×Ask is STACKED (Bid
   over Ask) it needs little horizontal room, so the old 30 % starved Strike to 14 %
   and clipped it; Strike now gets 30 %. Sums to 2×11+2×24+30=100. */
@media (max-width: 640px) {
  .opt-vol-bar-bg { display: none !important; }

  /* Stack Bid above Ask — readable even when each is 8 chars */
  .opt-td--bidask {
    white-space: normal !important;
    line-height: 1.15 !important;
    font-size: 11px !important;
    padding: 4px 4px !important;
  }
  .opt-td--bidask .opt-bid-val,
  .opt-td--bidask .opt-ask-val { display: block; }
  .opt-td--bidask .opt-bidask-sep { display: none; }

  /* Paired chain: rebalance to give Bid×Ask more room */
  .opt-col--chain-vol    { width: 11% !important; }
  .opt-col--chain-bidask { width: 24% !important; }
  .opt-col--chain-strike { width: 30% !important; }

  /* Active table: same redistribution (cols already exist) */
  .opt-col--act-vol      { width: 11% !important; }
  .opt-col--act-bidask   { width: 26% !important; }
  .opt-col--act-strike   { width: 14% !important; }
  .opt-col--act-expiry   { width: 12% !important; }

  /* Tighter cell padding so the stacked Bid/Ask doesn't blow row height */
  .opt-th { padding: 6px 4px !important; font-size: 10px !important; }
  .opt-td { padding: 4px 4px !important; font-size: 11px !important; }
  .opt-vol-val { font-size: 10.5px !important; }
  .opt-strike-val { font-size: 11px !important; }
}

/* M13: honour the OS "reduce motion" preference. Near-instant durations (not 0)
   keep transition/animation end events firing so JS that waits on them still
   resolves, while killing the looping `infinite` animations (pulse, spinners,
   marquees) and smooth-scroll for users who get motion sickness. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Price-target calculator — themed inputs (match the app, not raw browser inputs). */
.av-calc input[type="number"],
.av-calc input[type="text"],
.ptc-input {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-family: var(--mono);
}
.av-calc input[type="number"]:focus,
.av-calc input[type="text"]:focus,
.ptc-input:focus { outline: none; border-color: var(--accent); }
.av-calc input[type="range"] { accent-color: var(--accent); }
.av-calc input[type="checkbox"] { accent-color: var(--accent); }

/* ── Mobile: reclaim wasted side padding ──────────────────────────────────────
   Every view renders inside .main, which already provides the page gutter
   (~12px on phones). The per-view ROOT wrappers below add their own 14–32px of
   horizontal padding on top of that, so content sat in a narrow column with big
   empty margins on mobile. Zero the wrappers' side padding ≤640px so only .main's
   gutter applies — content uses the full screen width. Inner card padding (cards,
   .*-chart-wrap, tables, etc.) is untouched, so content still has breathing room. */
@media (max-width: 640px) {
  .stv-wrap, .av-wrap, .ov-wrap, .oe-wrap, .strat-wrap, .ts-wrap, .tv-wrap,
  .markets-view, .lp-view, .journal-wrap, .fund-wrap, .scan-wrap, .rv-wrap,
  .fview, .tc-wrap {
    padding-left: 0; padding-right: 0;
  }
  .stv-wrap { padding-top: 14px; }   /* also trim the oversized 28px top */
}