/* Claude Portfolio — dashboard styles. Tokens first; every colour comes from them. */
:root {
  /* Trading-desk palette: near-black, trading green/red, Bloomberg amber. */
  --bg: #06080b;
  --panel: #0c1016;
  --panel-2: #121821;
  --panel-3: #19212c;
  --line: #1a222d;
  --line-2: #273241;
  --text: #edf1f6;
  --text-2: #bcc6d2;
  --muted: #8793a3;
  --dim: #5a6576;
  --accent: #b57bff;   /* the logo's violet (v3.231); was Bloomberg amber #ffb020 */
  --accent-2: #7c3aed;
  --blue: #4da3ff;
  --up: #1fdd8a;
  --down: #ff4d61;
  --warn: #ffb020;
  --info: #4da3ff;
  --up-bg: rgba(31, 221, 138, .12);
  --down-bg: rgba(255, 77, 97, .12);
  --warn-bg: rgba(255, 176, 32, .11);
  --accent-bg: rgba(181, 123, 255, .10);
  --radius: 12px;
  --radius-sm: 7px;
  --sidebar: 224px;
  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(181, 123, 255, .05), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(31, 221, 138, .04), transparent 60%), var(--bg); background-attachment: fixed; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num, td.n, th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); background: #0c0f13; display: flex; flex-direction: column; padding: 18px 12px; gap: 18px; }
.brand { padding: 0 8px; }
.brand b { display: block; font-size: 15px; letter-spacing: .02em; }
.brand span { color: var(--dim); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); cursor: pointer; text-align: left; font-size: 14px; }
.nav button svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav button:hover { background: var(--panel-2); color: var(--text); }
.nav button[aria-current="page"] { background: var(--accent-bg); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav .badge { margin-left: auto; }
.nav .lbl-sm { display: none; }
.side-foot { margin-top: auto; padding: 0 8px; color: var(--dim); font-size: 12px; display: grid; gap: 4px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: rgba(10, 12, 15, .92); backdrop-filter: blur(8px); }
.top h1 { font-size: 16px; margin: 0; font-weight: 600; white-space: nowrap; }
.top .spacer { flex: 1; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); white-space: nowrap; background: none; cursor: pointer; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }
.status.warn i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.status.bad i { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); }
.updated { color: var(--dim); font-size: 12px; white-space: nowrap; }
.content { padding: 20px 24px 60px; display: grid; gap: 16px; max-width: 1560px; width: 100%; grid-auto-rows: max-content; }

/* ── Search ─────────────────────────────────────────────────────────────── */
.search { position: relative; width: min(380px, 40vw); }
.search input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); outline: none; }
.search input:focus { border-color: var(--accent); }
.search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--dim); }
.search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }
kbd { font: 11px var(--mono); color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }
.results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px; max-height: 60vh; overflow: auto; z-index: 40; }
.results .grp { padding: 8px 8px 4px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; }
.results button[aria-selected="true"], .results button:hover { background: var(--panel-3); }
.results .t { font-weight: 600; min-width: 64px; font-family: var(--mono); }
.results .nm { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .empty { padding: 12px 8px; color: var(--muted); }

/* ── Building blocks ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kpi .l { color: var(--muted); font-size: 12px; }
.kpi .v { font: 600 22px/1.2 var(--mono); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { color: var(--dim); font-size: 12px; margin-top: 4px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.card > header { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; }
.card > header h2 { font-size: 14px; margin: 0; font-weight: 600; }
.card > header .sub { color: var(--dim); font-size: 12px; }
.card > header .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card .body { padding: 0 16px 16px; }
.card .body.flush { padding: 0 0 6px; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--text-2); } .muted { color: var(--muted); } .dim { color: var(--dim); }
.warn-t { color: var(--warn); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.badge.up { background: var(--up-bg); border-color: transparent; color: var(--up); }
.badge.down { background: var(--down-bg); border-color: transparent; color: var(--down); }
.badge.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.badge.acc { background: var(--accent-bg); border-color: transparent; color: var(--accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.up { background: var(--up); } .dot.down { background: var(--down); } .dot.warn { background: var(--warn); } .dot.acc { background: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: none; padding: 4px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.btn { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--accent); }
.field { background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 10px; font-size: 13px; }

/* Alerts strip — the first thing on Today */
.alerts { display: grid; gap: 8px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); border: 1px solid; font-size: 13.5px; }
.alert.warn { border-color: rgba(242,184,75,.35); background: var(--warn-bg); }
.alert.bad { border-color: rgba(255,107,107,.35); background: var(--down-bg); }
.alert.ok { border-color: rgba(54,201,138,.25); background: var(--up-bg); }
.alert b { font-weight: 600; }
.alert .dot { margin-top: 6px; flex: none; }

/* Tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }
th .arr { color: var(--accent); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--panel-2); }
.tk { font-weight: 600; font-family: var(--mono); }
.tk-sub { display: block; color: var(--dim); font-size: 12px; font-family: var(--font); font-weight: 400; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stale-v { color: var(--dim); text-decoration: underline dotted var(--warn); text-underline-offset: 3px; }
.bar { height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.wbar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.wbar .bar { width: 64px; }

/* Lists */
.list { display: grid; }
.row { display: flex; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: flex-start; }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t1 { font-weight: 500; }
.row .t2 { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.row .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.empty-state { color: var(--muted); padding: 18px 16px; font-size: 13.5px; }
.empty-state b { color: var(--text-2); font-weight: 500; }

/* Prose from the model — readable, never cramped */
.prose { color: var(--text-2); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.section-t { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 8px; }
.section-t:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.falsify { border-left: 3px solid var(--warn); padding: 8px 12px; background: var(--warn-bg); border-radius: 0 6px 6px 0; font-size: 13.5px; }
.falsify b { color: var(--warn); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 2px; }

/* Charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text { fill: var(--dim); font: 11px var(--mono); }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .nav-l { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .spy-l { fill: none; stroke: #c9a86a; stroke-width: 1.6; stroke-dasharray: 5 4; }
.chart .dd-a { fill: rgba(255,107,107,.18); stroke: var(--down); stroke-width: 1.2; }
.chart .area { fill: url(#navfill); }
.chart .cross { stroke: var(--line-2); stroke-width: 1; }
.chart .pt { stroke: var(--bg); stroke-width: 2; }
.tip { position: absolute; pointer-events: none; background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: nowrap; z-index: 5; }
.tip .d { color: var(--muted); margin-bottom: 4px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding: 0 16px 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--accent); }
.legend i.spy { background: repeating-linear-gradient(90deg, #c9a86a 0 5px, transparent 5px 9px); }
.scatter circle { cursor: pointer; }
.scatter circle:hover { stroke: var(--text); stroke-width: 2; }

/* Tabs inside a view */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Company drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 100vw); background: var(--bg); border-left: 1px solid var(--line-2); z-index: 51; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.5); }
.drawer > header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer > header .tt { font: 700 22px/1.1 var(--mono); }
.drawer > header .nm { color: var(--muted); margin-top: 3px; }
.drawer > header .px { margin-left: auto; text-align: right; }
.drawer > header .px .v { font: 600 20px var(--mono); }
.drawer .scroll { overflow: auto; padding: 16px 20px 40px; display: grid; gap: 16px; }
.close { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; flex: none; }

.skeleton { background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; height: 14px; }
@keyframes sk { to { background-position: -200% 0; } }
.hide { display: none !important; }

/* Offline banner */
.offline { background: var(--down-bg); color: var(--down); padding: 8px 24px; font-size: 13px; border-bottom: 1px solid rgba(255,107,107,.3); }

/* ── Phones and small tablets ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 0; border-right: 0; border-top: 1px solid var(--line); z-index: 30; gap: 0; }
  .side .brand, .side-foot { display: none; }
  .nav { flex-direction: row; width: 100%; }
  .nav button { flex: 1; flex-direction: column; gap: 3px; font-size: 10.5px; padding: 8px 2px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; justify-content: center; align-items: center; min-width: 0; }
  .nav button span.lbl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav button .lbl.has-sm { display: none; }
  .nav button .lbl-sm { display: inline; }
  .top .spacer { display: none; }
  .nav button[aria-current="page"] { box-shadow: inset 0 2px 0 var(--accent); }
  .nav .badge { display: none; }
  .top { padding: 10px 16px; gap: 8px; }
  .top h1 { display: none; }
  .search { width: auto; flex: 1; }
  .search kbd, .updated { display: none; }
  .content { padding: 16px 16px 96px; }
  .g2, .g3, .g-main { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card > header { flex-wrap: wrap; row-gap: 8px; }
  .card > header .right { margin-left: 0; flex-basis: 100%; }
  .kpi .v { font-size: 19px; }
  .drawer > header { padding: 14px 16px; }
  .drawer .scroll { padding: 14px 16px 40px; }
  .hide-sm { display: none; }
}

/* ── v3.213 additions ───────────────────────────────────────────────────── */
/* Today headline */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 16px; background: linear-gradient(135deg, #111722, #0f1319 60%); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.hero .l { color: var(--muted); font-size: 12.5px; }
.hero .big { font: 700 40px/1.1 var(--mono); letter-spacing: -.02em; margin-top: 6px; }
.hero-sub { margin-top: 8px; color: var(--text-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.hero-sub .sep { color: var(--dim); }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: center; }
.hstat { border-left: 1px solid var(--line-2); padding-left: 14px; min-width: 0; }
.hstat .v { font-size: 20px; font-weight: 600; margin-top: 4px; white-space: nowrap; }
.hstat .s { color: var(--dim); font-size: 12px; margin-top: 3px; }

/* Cards that fill their row, with a chart that fills the card */
.card.stretch { display: flex; flex-direction: column; }
.chart.grow { flex: 1; min-height: 280px; position: relative; }
.chart.grow > svg { position: absolute; inset: 0 8px; width: calc(100% - 16px); height: 100%; }

.clamp { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.linkbtn { border: 0; background: none; color: var(--accent); padding: 8px 0 0; cursor: pointer; font-size: 13px; }

/* Trend lines */
.spark { display: inline-block; vertical-align: middle; }
.spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .sp-up { stroke: var(--up); }
.spark .sp-down { stroke: var(--down); }

/* Heat tiers */
.badge.hot { background: rgba(245, 140, 60, .16); border-color: transparent; color: #ff9f5a; }

/* Act now shortlist */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.act { text-align: left; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; cursor: pointer; display: grid; gap: 8px; align-content: start; }
.act:hover { border-color: #ff9f5a; }
.act-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.act-top .tk { font-size: 16px; }
.act-px { font-size: 13px; }
.act-nm { color: var(--muted); font-size: 12.5px; margin-top: -6px; }
.act-stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.act-stats b { color: var(--text); font-weight: 600; }
.act-th { color: var(--text-2); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.act-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }

/* Price chart marks */
.chart .avg-l { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 4; }
.chart .tgt-l { stroke: var(--up); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .stp-l { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .lvl-t { fill: var(--muted); font: 11px var(--mono); }
.chart .mk-buy { fill: var(--up); stroke: var(--bg); stroke-width: 1; }
.chart .mk-sell { fill: var(--down); stroke: var(--bg); stroke-width: 1; }
.legend i.avg { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px); }
.legend i.tgt { background: repeating-linear-gradient(90deg, var(--up) 0 2px, transparent 2px 6px); }
.legend i.stp { background: repeating-linear-gradient(90deg, var(--warn) 0 2px, transparent 2px 6px); }
/* Rows never shrink below their content — the tab bar (a sideways scroller) was being squashed to 4px. */
.drawer .scroll { grid-auto-rows: max-content; align-content: start; }
.drawer .tabs { margin: -4px 0 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 16px; }
  .hero .big { font-size: 32px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .hstat .v { font-size: 17px; }
  .chart.grow { min-height: 240px; }
  .act-grid { grid-template-columns: 1fr; }
  /* Text-heavy tables become one card per row on a phone. */
  table.stack thead { display: none; }
  table.stack, table.stack tbody { display: block; }
  table.stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.stack td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0 !important; }
  table.stack td::before { content: attr(data-l); display: block; color: var(--dim); font-size: 11px; font-family: var(--font); }
  table.stack td.wide { grid-column: 1 / -1; }
}


/* ════════════════════════════════════════════════════════════════════════
   v3.214 — trading-desk theme
   ════════════════════════════════════════════════════════════════════════ */
.num, td.n, th.n, .kpi .v, .hero .big, .hstat .v { font-feature-settings: "zero", "tnum"; }

/* Brand + nav */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #b57bff, #6d28d9); display: grid; place-items: center; box-shadow: 0 0 20px rgba(255, 150, 0, .35); flex: none; }
.brand .mark svg { width: 18px; height: 18px; }
.brand b { font-size: 15px; letter-spacing: .01em; }
.brand span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.nav button { font-weight: 500; }
.nav button[aria-current="page"] { background: linear-gradient(90deg, rgba(181, 123, 255, .14), rgba(181, 123, 255, .02)); box-shadow: inset 3px 0 0 var(--accent); color: #fff; }
.nav button[aria-current="page"] svg { color: var(--accent); opacity: 1; }

/* Ticker tape */
.tape { height: 34px; border-bottom: 1px solid var(--line); background: #080b0f; overflow: hidden; position: relative; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tape-track { display: inline-flex; height: 100%; align-items: center; font: 600 12.5px var(--mono); animation: tape 60s linear infinite; will-change: transform; }
.tape-run { display: inline-flex; gap: 22px; padding-right: 22px; align-items: center; }
.tape-item.held .t { color: var(--accent); }
.tape-item.tick { animation: tick 1.2s ease-out; }
@keyframes tick { from { background: rgba(181, 123, 255, .22); } to { background: transparent; } }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item { display: inline-flex; gap: 8px; align-items: baseline; cursor: pointer; }
.tape-item .t { color: #fff; letter-spacing: .04em; }
.tape-item .p { color: var(--text-2); font-weight: 500; }
.tape-sep { color: var(--line-2); }
/* The track holds the list twice; moving by half loops seamlessly with no empty gap. */
@keyframes tape { to { transform: translateX(-50%); } }
/* Reduce motion: no animation, but the strip can be swiped / scrolled by hand. */
@media (prefers-reduced-motion: reduce) { .tape { overflow-x: auto; mask-image: none; } .tape-track { animation: none; padding-left: 16px; } .tape-run[aria-hidden] { display: none; } }

/* Market status */
.mkt { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--mono); letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.mkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.mkt.open { color: var(--up); border-color: rgba(31, 221, 138, .35); }
.mkt.open i { background: var(--up); box-shadow: 0 0 0 0 rgba(31, 221, 138, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(31, 221, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 221, 138, 0); } }

/* Top bar */
.top { background: rgba(6, 8, 11, .88); }
.top h1 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.search input { background: #0a0e13; border-color: var(--line-2); height: 36px; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181, 123, 255, .12); }

/* Cards — sharper, with a hairline highlight on top */
.card, .kpi { background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 40%), var(--panel); border-color: var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .25); }
.card > header h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.card > header .sub { font-size: 12px; }
.kpi .l, .hstat .l, .hero .l { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.kpi .v.up, .hstat .v.up { text-shadow: 0 0 18px rgba(31, 221, 138, .25); }
.kpi .v.down, .hstat .v.down { text-shadow: 0 0 18px rgba(255, 77, 97, .25); }

/* Headline */
.hero { background: radial-gradient(600px 220px at 0% 0%, rgba(181, 123, 255, .10), transparent 70%), linear-gradient(135deg, #0f141c, #0a0d12 70%); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.hero .big { font: 800 52px/1 var(--mono); letter-spacing: -.035em; margin-top: 10px; color: #fff; text-shadow: 0 0 40px rgba(255, 255, 255, .08); }
.hero-sub { margin-top: 12px; font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 13px var(--mono); }
.pill.up { background: var(--up-bg); color: var(--up); }
.pill.down { background: var(--down-bg); color: var(--down); }
.pill.flat { background: var(--panel-3); color: var(--text-2); }
.hstat { border-left-color: var(--line-2); }
.hstat .v { font-size: 22px; font-weight: 700; }

/* Tables */
th { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: rgba(255, 255, 255, .012); }
td { border-bottom-color: rgba(255, 255, 255, .045); }
tbody tr.click:hover td { background: rgba(181, 123, 255, .045); }
.tk { font-size: 14px; letter-spacing: .02em; color: #fff; }
td .cell-pill { display: inline-block; min-width: 64px; text-align: right; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
td .cell-pill.up { background: var(--up-bg); color: var(--up); }
td .cell-pill.down { background: var(--down-bg); color: var(--down); }
td .cell-pill.flat { color: var(--text-2); }
.bar { background: #1a2230; }
.bar > i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* Badges */
.badge { font-weight: 600; letter-spacing: .02em; }
.badge.acc { background: rgba(77, 163, 255, .12); color: var(--blue); }

/* Charts */
.chart .nav-l { stroke: var(--accent); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(181, 123, 255, .35)); }
.chart .spy-l { stroke: #7f8da1; }
.legend i { background: var(--accent); height: 3px; }
.legend i.spy { background: repeating-linear-gradient(90deg, #7f8da1 0 5px, transparent 5px 9px); }

/* Tabs and segmented controls */
.tabs button { font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: #fff; }
.seg button { font: 600 11.5px var(--mono); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #111; }

/* Act now */
.act { background: linear-gradient(180deg, rgba(181, 123, 255, .06), transparent 50%), var(--panel-2); }
.act-top .tk { font-size: 18px; }

@media (max-width: 900px) {
  .hero .big { font-size: 40px; }
  .tape { height: 30px; }
  .mkt { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   v3.216 — research workstation + logos
   ════════════════════════════════════════════════════════════════════════ */
.logo { position: relative; flex: none; display: inline-grid; place-items: center; border-radius: 8px; overflow: hidden; background: hsl(var(--h) 40% 22%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); vertical-align: middle; }
.logo b { font: 700 10.5px var(--mono); color: hsl(var(--h) 80% 82%); letter-spacing: .02em; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.tlc { display: inline-flex; gap: 10px; align-items: center; }
.act-id { display: inline-flex; gap: 10px; align-items: center; }
.drawer > header .logo { margin-right: 4px; }
.cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font: 600 10.5px var(--mono); text-align: center; }

/* Split workstation */
.ws { display: grid; grid-template-columns: minmax(420px, 44%) minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-list { display: flex; flex-direction: column; max-height: calc(100vh - 150px); position: sticky; top: 76px; overflow: hidden; }
.ws-detail { max-height: calc(100vh - 150px); position: sticky; top: 76px; overflow: auto; display: grid; gap: 14px; grid-auto-rows: max-content; padding-right: 2px; }
.rtools { padding: 12px 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; background: var(--panel); }
.rtools-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rtools-row .field:first-child { flex: 1; min-width: 180px; }
.rtools-row.small { font-size: 12px; gap: 6px; }
.rtools-row .spacer { flex: 1; }
.rtools-row label { display: inline-flex; gap: 6px; align-items: center; }
.field.sm { padding: 3px 6px; font-size: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #111; }
.chip.on .cnt { background: rgba(0, 0, 0, .18); color: #111; }
.chip.t-hot.on { background: #ff8a3d; border-color: #ff8a3d; }
.chip.t-warm.on { background: var(--up); border-color: var(--up); }
.chip.t-watch.on { background: var(--blue); border-color: var(--blue); }
.chip.t-review.on { background: var(--down); border-color: var(--down); color: #fff; }
.pill-x { border: 0; background: rgba(181, 123, 255, .12); color: var(--accent); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.rmore { border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px; display: grid; gap: 10px; }
.rmore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rmore-grid label { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted); }
.rmore-grid label.check { display: flex; align-items: center; gap: 6px; }
.rhead, .rrow { display: grid; grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 58px 54px; gap: 10px; align-items: center; }
.rhead { padding: 6px 12px 8px; font: 700 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rscroll { overflow: auto; flex: 1; }
.rgroup + .rgroup { border-top: 1px solid var(--line); }
.rghead { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 10px 12px 6px; background: rgba(255, 255, 255, .015); border: 0; cursor: pointer; text-align: left; position: sticky; top: 0; z-index: 1; backdrop-filter: blur(6px); }
.rghead b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.rghead .caret { color: var(--dim); width: 10px; }
.rgstat { margin-left: auto; color: var(--dim); font: 11px var(--mono); }
.rrow { width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid rgba(255, 255, 255, .035); background: none; cursor: pointer; text-align: left; min-height: 46px; }
.rrow:hover { background: rgba(181, 123, 255, .05); }
.rrow.sel { background: linear-gradient(90deg, rgba(181, 123, 255, .16), rgba(181, 123, 255, .03)); box-shadow: inset 2px 0 0 var(--accent); }
.rtier { width: 4px; height: 26px; border-radius: 2px; background: var(--line-2); }
.rtier.hot { background: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, .6); }
.rtier.warm { background: var(--up); }
.rtier.watch { background: var(--blue); }
.rtier.cooling { background: var(--warn); }
.rtier.review { background: var(--down); }
.rid { display: flex; flex-direction: column; min-width: 0; }
.rid .tk { font-size: 13.5px; }
.rnm { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rflags { display: flex; gap: 4px; }
.rf { font: 700 9.5px var(--mono); letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; background: var(--panel-3); color: var(--muted); }
.rf.held { background: rgba(77, 163, 255, .15); color: var(--blue); }
.rf.red { background: var(--down-bg); color: var(--down); }
.rf.ok { background: var(--up-bg); color: var(--up); }
.rf.new { background: var(--accent); color: #111; }
.rnum { font: 600 12.5px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.rlist { display: grid; }
.rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 58px 54px; }
.rchg { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.rchg:hover { background: rgba(181, 123, 255, .05); }
.rchg .grow { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.pane-head { display: flex; gap: 12px; align-items: center; padding: 4px 2px; }
.pane-head .tt { font: 800 22px/1 var(--mono); }
.pane-head .nm { color: var(--muted); font-size: 13px; margin-top: 3px; }
.pane-head .px { text-align: right; }
.pane-head .px .v { font: 700 18px var(--mono); }
.pane-head .grow { flex: 1; min-width: 0; }
.kbd-hint { font-size: 11.5px; text-align: right; }

@media (max-width: 1100px) {
  .ws { grid-template-columns: 1fr; }
  .ws-list { position: static; max-height: none; }
  .ws-detail { display: none; }
  .rscroll { overflow: visible; }
  .kbd-hint { display: none; }
}
@media (max-width: 600px) {
  .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 40px 52px; }
  .rrow .rflags, .rhead span:nth-child(4), .rrow .rnum:last-child, .rhead span:last-child { display: none; }
}

/* tighter research toolbar */
.rtools .chip { padding: 3px 9px; font-size: 11.5px; }
.rtools .chips { gap: 5px; }
.rtools-row.nowrap { flex-wrap: nowrap; }
.rtools-row.nowrap select { max-width: 150px; }
.rtools-row .muted { white-space: nowrap; }

/* ── v3.218 live stream ─────────────────────────────────────────────────── */
.live { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--dim); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.live.on { color: var(--up); }
.live.on i { background: var(--up); animation: pulse 2s infinite; }
.flash-up { animation: flashUp 1.4s ease-out; border-radius: 4px; }
.flash-down { animation: flashDown 1.4s ease-out; border-radius: 4px; }
@keyframes flashUp { from { background: rgba(31, 221, 138, .35); color: #fff; } to { background: transparent; } }
@keyframes flashDown { from { background: rgba(255, 77, 97, .35); color: #fff; } to { background: transparent; } }
@media (max-width: 900px) { .live { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   v3.219 — design pass: depth, motion, data density
   ════════════════════════════════════════════════════════════════════════ */
/* A faint engineering grid under everything, fading towards the edges. */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 80%); }
.shell { position: relative; z-index: 1; }

/* Glass cards with a glowing hairline on top and a gentle lift on hover. */
.card, .kpi, .hero { position: relative; backdrop-filter: blur(6px); }
.card::before, .kpi::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 30%) top / 100% 1px no-repeat; }
.kpi { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.kpi:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.act { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.act:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(181, 123, 255, .25); }
.hero::after { content: ""; position: absolute; inset: -1px; border-radius: 17px; pointer-events: none; padding: 1px;
  background: linear-gradient(120deg, rgba(181, 123, 255, .55), rgba(181, 123, 255, 0) 35%, rgba(31, 221, 138, 0) 65%, rgba(31, 221, 138, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* Numbers that glow as they move. */
.glow-up { color: var(--up) !important; text-shadow: 0 0 28px rgba(31, 221, 138, .55); transition: color .6s, text-shadow .6s; }
.glow-down { color: var(--down) !important; text-shadow: 0 0 28px rgba(255, 77, 97, .55); transition: color .6s, text-shadow .6s; }

/* Heat-shaded day moves. */
.heat { display: inline-block; min-width: 62px; text-align: right; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.heat.flat { color: var(--text-2); }

/* 52-week range bar. */
.rbar { position: relative; display: inline-block; width: 84px; height: 6px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 77, 97, .45), rgba(255, 176, 32, .35) 50%, rgba(31, 221, 138, .45)); }
.rbar i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(255, 255, 255, .6); }

/* Allocation ring. */
.ring { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ring circle { transition: stroke-dasharray .6s ease; }
.ring-l { fill: var(--muted); font: 600 9px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.ring-v { fill: #fff; font: 800 15px var(--mono); }
.ring-legend { display: grid; gap: 8px; flex: 1; min-width: 180px; }
.ring-legend div { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ring-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Command palette. */
.results { background: rgba(14, 19, 27, .96); backdrop-filter: blur(14px); border-color: var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(181, 123, 255, .08); }
.results .t.cmd { color: var(--accent); min-width: 22px; }
.results button[aria-selected="true"] { background: rgba(181, 123, 255, .10); box-shadow: inset 2px 0 0 var(--accent); }
.palette-hint { padding: 10px 10px 6px; color: var(--dim); font-size: 11.5px; border-top: 1px solid var(--line); margin-top: 6px; }
.search kbd { font-size: 10.5px; }

/* View transition. */
#view.enter > * { animation: rise .28s cubic-bezier(.2, .7, .2, 1) both; }
#view.enter > *:nth-child(2) { animation-delay: .03s; }
#view.enter > *:nth-child(3) { animation-delay: .06s; }
#view.enter > *:nth-child(4) { animation-delay: .09s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.drawer { animation: slidein .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes slidein { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Scrollbars that belong to the theme. */
* { scrollbar-width: thin; scrollbar-color: #26303d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1e2733; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #2c3848; background-clip: content-box; border: 3px solid transparent; }

@media (prefers-reduced-motion: reduce) {
  #view.enter > *, .drawer { animation: none; }
  .kpi:hover, .act:hover { transform: none; }
}

/* Mid-width screens: the holdings table drops shares and average cost (both on the company page). */
@media (max-width: 1550px) { .hide-md { display: none; } }

/* ── v3.220 edge layer ──────────────────────────────────────────────────── */
.feed-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.feed-row:hover { background: rgba(181, 123, 255, .05); }
.feed-row .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.feed-row .t1 { font-size: 13.5px; }
.feed-row .t2 { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.fdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 9px; flex: none; background: var(--dim); }
.fdot.up { background: var(--up); box-shadow: 0 0 8px rgba(31, 221, 138, .6); }
.fdot.down { background: var(--down); box-shadow: 0 0 8px rgba(255, 77, 97, .6); }
.fdot.warn { background: var(--warn); }
.fdot.info { background: var(--blue); }
.fk { font: 700 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; margin: 0 4px; }
.div-h { padding: 10px 16px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.div-h.up { color: var(--up); }
.div-h.down { color: var(--down); }
.rf.smart { background: rgba(181, 123, 255, .14); color: var(--accent); }

/* ── v3.221 opportunity map ─────────────────────────────────────────────── */
.map-pt { cursor: pointer; }
.map-pt:hover circle, .map-pt:hover path { stroke: #fff; stroke-width: 2; }
.map-lbl { fill: #e8edf4; font: 700 10.5px var(--mono); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.chart .ax-t { fill: var(--muted); font: 600 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.chart .quad { stroke: rgba(181, 123, 255, .25); stroke-dasharray: 4 5; }
.chart .quad-t { fill: rgba(181, 123, 255, .55); font: 700 10px var(--font); letter-spacing: .1em; text-transform: uppercase; }

/* ── v3.225 evidence ────────────────────────────────────────────────────── */
.rnum.ev { font-weight: 700; }
.rnum.ev0, .rnum.evx { color: var(--dim); }
.rnum.ev1, .rnum.ev2 { color: var(--text-2); }
.rnum.ev3 { color: #9ee6c2; }
.rnum.ev4, .rnum.ev5 { color: var(--up); }
.act-ev { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── v3.225 stress test ─────────────────────────────────────────────────── */
.kpis.tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
table.stress td { vertical-align: top; }
table.stress .tk-sub { max-width: 420px; white-space: normal; }
.replay { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13px; line-height: 1.7; }

/* ── v3.225 Today brief ─────────────────────────────────────────────────── */
.brief { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.brow { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font-size: 13.5px; line-height: 1.45; }
.brow:first-child { border-top: 0; }
.brow:hover { background: rgba(181, 123, 255, .05); }
.brow .fdot { margin-top: 6px; }
.brow .tk { flex: none; min-width: 48px; }
.btxt { flex: 1; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1200px) { .brief { grid-template-columns: 1fr 1fr; } .brief > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   v3.225 — readability pass
   One typeface (Inter) for words AND numbers, with tabular figures so columns
   still line up. JetBrains Mono is wide: in tight columns it forced numbers to
   crowd and cut off. Mono stays only where a terminal feel costs nothing — the
   ticker tape and keyboard hints. Labels get bigger and calmer (less
   letter-spacing), and the two greys get enough contrast to read at 12px.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --muted: #9aa6b5;
  --dim: #7a8698;
  --num: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html, body { font-optical-sizing: auto; font-feature-settings: "cv11", "ss01", "ss03"; }
.num, td.n, th.n, .rnum, .kpi .v, .hero .big, .hstat .v, .pill, .act-px, .heat, td .cell-pill,
.drawer > header .px .v, .pane-head .px .v, .ring-v, .rgstat, .cnt, .chart .axis text, .chart .lvl-t, .replay .num {
  font-family: var(--num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum", "cv11";
}
/* Tickers: bold sans with a hair of tracking — clearly a symbol, not a wide mono block. */
.tk, .results .t, .act-top .tk, .rid .tk, .drawer > header .tt, .pane-head .tt { font-family: var(--font); font-weight: 700; letter-spacing: .015em; }
.drawer > header .tt, .pane-head .tt { font-size: 24px; letter-spacing: 0; }

/* Labels: readable size, gentle tracking. */
.kpi .l, .hstat .l, .hero .l { font-size: 12px; letter-spacing: .05em; font-weight: 600; }
.card > header h2 { font-size: 12.5px; letter-spacing: .07em; }
.card > header .sub { font-size: 12.5px; color: var(--dim); }
th { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.rhead { font-size: 11px; letter-spacing: .05em; }
.top h1 { letter-spacing: .08em; }
.brand span { letter-spacing: .08em; }
.rnm { font-size: 12px; }
.rf, .fk { font-family: var(--font); font-size: 10.5px; letter-spacing: .03em; }
.seg button { font-family: var(--font); font-size: 12px; }
.mkt, .live { font-family: var(--font); font-size: 11.5px; letter-spacing: .06em; }
.chart .axis text, .chart .lvl-t { font-size: 11.5px; }
.map-lbl { font-family: var(--font); font-size: 11px; }
.section-t { font-size: 12px; letter-spacing: .06em; }
.legend, .kpi .s, .hstat .s { font-size: 12.5px; }

/* Headline numbers shrink with the space instead of being cut off. */
.hero .big { font-size: clamp(34px, 2.6vw + 14px, 52px); font-weight: 800; letter-spacing: -.025em; }
.hero-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.hstat .v { font-size: clamp(17px, .9vw + 9px, 22px); }
.kpi .v { font-size: clamp(18px, 1vw + 9px, 24px); }
.kpi .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tight tables: a little less padding, and long text cells truncate cleanly. */
td { padding: 8px 11px; }
th { padding: 8px 11px; }
td .tk-sub { max-width: 220px; }
.act-nm, .rnm, .feed-row .t2 { text-overflow: ellipsis; }

@media (max-width: 1400px) {
  .content { padding: 18px 18px 60px; gap: 14px; }
  .card > header { padding: 12px 14px 8px; }
  .card .body { padding: 0 14px 14px; }
  td, th { padding: 7px 9px; }
}

/* ── v3.225 news ────────────────────────────────────────────────────────── */
.nrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--line); }
.nrow:first-child { border-top: 0; }
.nrow .grow { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nrow .t1 { font-size: 14px; line-height: 1.45; }
.nrow .t1 a { color: var(--text); }
.nrow .t1 a:hover { color: var(--accent); text-decoration: none; }
.nrow .t2 { color: var(--muted); font-size: 12.5px; }
.nrow .meta { color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.nt { display: inline-flex; gap: 8px; align-items: center; min-width: 92px; border: 0; background: none; cursor: pointer; padding: 0; text-align: left; }
.nt:hover .tk { color: var(--accent); }
.nt-w { font-size: 18px; justify-content: center; }
@media (max-width: 600px) { .nt { min-width: 0; } .nt .tk { display: none; } }

/* v3.226: .card's position:relative (v3.219) overrode the list's sticky, so its top:76px
   became a plain 76px shift down and the list stopped sticking while scrolling. */
.ws-list.card { position: sticky; }
@media (max-width: 1100px) { .ws-list.card { position: static; } }

/* ── v3.227 earnings calendar ───────────────────────────────────────────── */
.erow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 130px 100px 90px; gap: 12px; align-items: center; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.erow:hover { background: rgba(181, 123, 255, .05); }
.edate { display: grid; gap: 1px; font-size: 13.5px; }
.edate .dim { font-size: 12px; }
.etime, .estat { white-space: nowrap; }
.nextrep { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); font-size: 13.5px; }
.nextrep .fdot { margin-top: 0; }
@media (max-width: 900px) {
  .erow { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; column-gap: 8px; }
  .erow .edate { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
  .erow .rnum { display: none; }
}

/* ── v3.228 extended hours ──────────────────────────────────────────────── */
.ext { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; font-family: var(--num); font-variant-numeric: tabular-nums; }
.hero-ext { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }

/* ── v3.230 fit: use wide screens, and tiles in a row share one height ───── */
/* The content stopped at 1560px, leaving a blank band on wide monitors. */
.content { max-width: 2400px; }
/* Brief tiles: one height per row; a long list scrolls inside its tile instead of stretching it. */
.brief { align-items: stretch; }
.brief > .card { display: flex; flex-direction: column; min-height: 0; }
.brief > .card > .list, .brief > .card > .body { flex: 1; }
.brief > .card > .list { max-height: 340px; overflow: auto; }
/* Chart row: the right-hand column's cards fill the chart's height together. */
.g-main > .grid { align-content: stretch !important; grid-auto-rows: auto; }
.g-main > .grid > .card:last-child { display: flex; flex-direction: column; }
.g-main > .grid > .card:last-child > .list, .g-main > .grid > .card:last-child > .body { flex: 1; }
@media (min-width: 1900px) {
  .g-main { grid-template-columns: minmax(0, 2.2fr) minmax(340px, 1fr); }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ── v3.231 brand: the owner's logo, violet accent ─────────────────────── */
.brand .logo-mark { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block; filter: drop-shadow(0 0 10px rgba(168, 85, 247, .55)); }
.brand b { font-size: 15px; }
.nav button[aria-current="page"] { color: #fff; }
.chip.on, .seg button[aria-pressed="true"] { color: #140a24; }
.hero::after { background: linear-gradient(120deg, rgba(181, 123, 255, .6), rgba(181, 123, 255, 0) 35%, rgba(31, 221, 138, 0) 65%, rgba(31, 221, 138, .35)); }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(124, 58, 237, .10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(31, 221, 138, .04), transparent 60%), var(--bg); background-attachment: fixed; }
@media (max-width: 900px) { .brand .logo-mark { width: 32px; height: 32px; } }
/* Exact report dates ("29 Sept ☀") need a little more room than a month label. */
.rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 50px 72px; }
.rrow .rnum:last-child { white-space: nowrap; }
@media (max-width: 600px) { .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 40px 52px; } }

/* ── v3.232 one accent: "Act now" is the accent, not a separate orange ───── */
.badge.hot { background: rgba(181, 123, 255, .16); color: var(--accent); }
.act:hover { border-color: var(--accent); }
.chip.t-hot.on { background: var(--accent); border-color: var(--accent); }
.rtier.hot { background: var(--accent); box-shadow: 0 0 10px rgba(181, 123, 255, .6); }
.acc-t { color: var(--accent); }
/* "NEW since your last visit" is a hint, not an alarm: outlined, not a solid block. */
.rf.new { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(181, 123, 255, .55); }
/* v3.233: every ticker on the tape is white (held names had taken the accent colour). */
.tape-item .t, .tape-item.held .t { color: #fff; }

/* ── v3.234 what's new ──────────────────────────────────────────────────── */
.wn { border: 1px solid rgba(181, 123, 255, .6); background: rgba(181, 123, 255, .14); color: #e9dcff; border-radius: 999px; padding: 5px 12px; font: 700 12px var(--font); letter-spacing: .03em; cursor: pointer; white-space: nowrap; animation: wnPulse 2.4s ease-in-out infinite; }
.wn:hover { background: rgba(181, 123, 255, .24); }
@keyframes wnPulse { 50% { box-shadow: 0 0 0 5px rgba(181, 123, 255, 0), 0 0 18px rgba(181, 123, 255, .45); } }
.wn-foot { padding: 0; text-align: left; font-size: 12px; color: var(--muted); }
.wn-foot:hover { color: var(--accent); }
.wn-panel { position: fixed; z-index: 60; top: 8vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 84vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.wn-panel > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.wn-panel h2 { margin: 2px 0 0; font-size: 20px; }
.wn-kicker { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.wn-body { overflow: auto; padding: 4px 20px 8px; display: grid; gap: 14px; }
.wn-entry { border-top: 1px solid var(--line); padding-top: 12px; }
.wn-entry:first-child { border-top: 0; padding-top: 0; }
.wn-entry h3 { margin: 6px 0 6px; font-size: 15px; }
.wn-entry ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.wn-panel > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.wn-ok { border-color: var(--accent); }
@media (max-width: 900px) { .wn { padding: 4px 9px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .wn { animation: none; } }

/* ── v3.236 company price + chart labels ────────────────────────────────── */
.pxext { font-size: 13px; font-weight: 600; margin-top: 3px; }
.chart .lvl-t { paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }

/* ════════════════════════════════════════════════════════════════════════
   v3.237 — neutral UI, logo violet as a small accent only
   Colour is kept for meaning: green/red = money up/down, amber = warning.
   Violet marks only "where you are / what's selected": the logo, the active
   page and tab, the selected row's edge, focus rings, the NEW pill, Act now.
   Everything else that was violet (titles, links, buttons, chart line,
   glows) is neutral ink.
   ════════════════════════════════════════════════════════════════════════ */
:root { --ink: #e9edf3; --ink-bg: rgba(255, 255, 255, .06); --hover: rgba(255, 255, 255, .035); }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(255, 255, 255, .025), transparent 60%), var(--bg); background-attachment: fixed; }

/* Text: titles, links, sort arrows */
a, .linkbtn { color: var(--text-2); }
a:hover, .linkbtn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.card > header h2 { color: var(--text-2); }
th .arr { color: var(--ink); }
.acc-t { color: var(--ink); font-weight: 700; }

/* Controls: selected chips and segments are ink, not violet */
.chip.on, .seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #0b0e13; }
.chip.on .cnt { background: rgba(0, 0, 0, .12); color: #0b0e13; }
.chip:hover, .btn:hover { border-color: #5b6677; }
.pill-x { background: var(--ink-bg); color: var(--text-2); }
.search input:focus { border-color: #5b6677; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }

/* Navigation: neutral fill, violet marker */
.nav button[aria-current="page"] { background: var(--ink-bg); box-shadow: inset 3px 0 0 var(--accent); color: #fff; }
@media (max-width: 900px) { .nav button[aria-current="page"] { box-shadow: inset 0 2px 0 var(--accent); } }

/* Hover and selection */
tbody tr.click:hover td, .rrow:hover, .rchg:hover, .feed-row:hover, .brow:hover, .erow:hover { background: var(--hover); }
.rrow.sel { background: var(--ink-bg); box-shadow: inset 2px 0 0 var(--accent); }
.results button[aria-selected="true"] { background: var(--ink-bg); box-shadow: inset 2px 0 0 var(--accent); }
.results .t.cmd { color: var(--text-2); }

/* Cards: no violet glow */
.hero { background: radial-gradient(600px 220px at 0% 0%, rgba(255, 255, 255, .04), transparent 70%), linear-gradient(135deg, #0f141c, #0a0d12 70%); }
.hero::after { background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 35%, rgba(31, 221, 138, 0) 65%, rgba(31, 221, 138, .22)); }
.act { background: var(--panel-2); }
.act:hover { border-color: #5b6677; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.rf.smart { background: var(--ink-bg); color: var(--text-2); }
@keyframes tick { from { background: rgba(255, 255, 255, .12); } to { background: transparent; } }

/* Charts: the portfolio line is ink; averages and quadrant guides are quiet */
.chart .nav-l { stroke: var(--ink); filter: none; }
.legend i { background: var(--ink); }
.bar > i { background: linear-gradient(90deg, #6b7686, var(--ink)); }
.chart .avg-l { stroke: #8a95a6; }
.legend i.avg { background: repeating-linear-gradient(90deg, #8a95a6 0 4px, transparent 4px 8px); }
.chart .quad { stroke: rgba(255, 255, 255, .14); }
.chart .quad-t { fill: rgba(255, 255, 255, .38); }

/* ── v3.238 1D intraday chart ───────────────────────────────────────────── */
.chart .ext-sh { fill: rgba(255, 255, 255, .035); }
.chart .prev-l { stroke: #8a95a6; stroke-width: 1; stroke-dasharray: 3 4; }
.card > header .sub .live { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.legend i.prev { background: repeating-linear-gradient(90deg, #8a95a6 0 3px, transparent 3px 7px); }
.legend i.shade { background: rgba(255, 255, 255, .12); height: 9px; }