/* ==========================================================================
   Terminal — local trading dashboard
   Plain CSS. No framework, no build step.
   ========================================================================== */

/* --- theme tokens -------------------------------------------------------- */
:root {
  --up:        #26a69a;
  --down:      #ef5350;
  --up-soft:   rgba(38, 166, 154, .16);
  --down-soft: rgba(239, 83, 80, .16);
  --accent:    #2962ff;
  --warn:      #f0a30a;

  --r-sm: 4px;  --r-md: 7px;  --r-lg: 11px;
  --topbar-h: 46px;
  --head-h:   40px;
  --tick-h:   30px;
  --gap: 6px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dur: .16s;
}

html[data-theme="dark"] {
  --bg-0: #0b0e11;   /* page */
  --bg-1: #131722;   /* panels */
  --bg-2: #1a1f2e;   /* raised */
  --bg-3: #222839;   /* hover */
  --bg-4: #2f3648;   /* active / border-strong */
  --line: #262b38;
  --tx-0: #e6e9ef;   /* primary */
  --tx-1: #9aa4b5;   /* secondary */
  --tx-2: #667085;   /* muted */
  --grid-line: rgba(255,255,255,.045);
  --shadow: 0 12px 34px rgba(0,0,0,.55);
  --chart-bg: #131722;
}

html[data-theme="light"] {
  --bg-0: #eef0f4;
  --bg-1: #ffffff;
  --bg-2: #f5f7fa;
  --bg-3: #e9edf3;
  --bg-4: #d8dee9;
  --line: #dfe3ea;
  --tx-0: #131722;
  --tx-1: #55606f;
  --tx-2: #8a94a3;
  --grid-line: rgba(0,0,0,.055);
  --shadow: 0 12px 34px rgba(16,24,40,.16);
  --chart-bg: #ffffff;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--tx-0);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
svg { width: 16px; height: 16px; flex: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 10px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .1em; font-size: 12px; }
.brand-mark { width: 22px; height: 22px; }
.brand-mark rect { fill: var(--bg-2); }
.brand-mark path { stroke: var(--up); }
.spacer { flex: 1; }
.topgroup { display: flex; align-items: center; gap: 6px; }
.lbl { font-size: 11px; color: var(--tx-2); text-transform: uppercase; letter-spacing: .07em; }

/* --- main navigation ------------------------------------------------------
   The one control that is never hidden: whatever view you are on, these four
   get you to the others. */
.mainnav { display: flex; align-items: center; gap: 2px; }
.navlink {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px; border-radius: var(--r-md);
  color: var(--tx-1); text-decoration: none;
  font-size: 12.5px; font-weight: 550; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur), color var(--dur);
}
.navlink:hover { background: var(--bg-2); color: var(--tx-0); }
.navlink.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.navlink svg { width: 15px; height: 15px; }
.navlink .badge { position: static; margin-left: 1px; }

/* --- making it all fit ----------------------------------------------------
   The bar carries a lot now: brand, four sections, the chart controls, three
   market lights and five utilities — about 1540px laid out in full. The body
   does not scroll, so anything that does not fit is silently cut off rather
   than reachable. Shed the least load-bearing labels first, widest breakpoint
   to narrowest, and never a whole control. */

/* A saved layout can be called anything; without a cap one long name pushes
   everything else off the bar. */
#layoutName { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* All four sync icons are the same link glyph, so the word is what actually
   tells them apart — drop the decoration, keep the label. */
@media (max-width: 1580px) {
  #syncSymbol svg, #syncTf svg, #syncCross svg, #syncRange svg { display: none; }
}
/* The dot already says open/closed in colour; the word is a repeat. */
@media (max-width: 1470px) {
  .brand span { display: none; }
  .status-box .st-state { display: none; }
}
/* Last resort for the menu: distinct icons plus a tooltip each. */
@media (max-width: 1290px) {
  .navlink span:not(.badge) { display: none; }
  .navlink { padding: 0 9px; }
}
@media (max-width: 1080px) {
  #layoutName { display: none; }
  .status-box .st-label { display: none; }
}
/* On a phone there is nothing left to shed — so let the bar scroll sideways
   rather than clip. The body does not scroll, so without this the last few
   buttons would simply be unreachable. */
@media (max-width: 900px) {
  .topbar { gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar > * { flex: none; }
}

.seg { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; }
.seg button {
  min-width: 30px; height: 24px; border-radius: var(--r-sm);
  color: var(--tx-1); font-weight: 600; font-size: 12px;
  transition: background var(--dur), color var(--dur);
}
.seg button:hover { color: var(--tx-0); background: var(--bg-3); }
.seg button.on { background: var(--accent); color: #fff; }

.tbtn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 8px; border-radius: var(--r-md);
  color: var(--tx-1); border: 1px solid transparent;
  position: relative; white-space: nowrap;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.tbtn span { font-size: 11.5px; font-weight: 500; }
.tbtn:hover { background: var(--bg-2); color: var(--tx-0); }
.tbtn.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.badge {
  position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: var(--down); color: #fff;
  font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
}

/* --- venue status lights ------------------------------------------------- */
.status-group { gap: 5px; }
.status-box {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 9px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); white-space: nowrap; cursor: default;
  transition: border-color var(--dur), background var(--dur);
}
.status-box .st-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tx-2);
}
.status-box .st-state { font-size: 11.5px; font-weight: 600; color: var(--tx-1); }

.st-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tx-2);
  transition: background var(--dur);
}
/* trading right now */
.status-box.live { border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.status-box.live .st-dot {
  background: var(--up);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 70%, transparent);
  animation: pulse 2.2s infinite;
}
.status-box.live .st-state { color: var(--up); }
/* extended hours — trading, but not the regular session */
.status-box.ext { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.status-box.ext .st-dot { background: var(--warn); }
.status-box.ext .st-state { color: var(--warn); }
/* feed reconnecting */
.status-box.wait .st-dot { background: var(--warn); animation: blink 1.1s ease-in-out infinite; }
.status-box.wait .st-state { color: var(--warn); }
/* market open but our feed dropped */
.status-box.error { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.status-box.error .st-dot { background: var(--down); animation: blink 1.1s ease-in-out infinite; }
.status-box.error .st-state { color: var(--down); }
/* market shut */
.status-box.closed { opacity: .72; }
.status-box.closed .st-dot { background: var(--tx-2); }
.status-box.closed .st-state { color: var(--tx-2); }

@keyframes blink { 50% { opacity: .28; } }

/* ==========================================================================
   Views  —  the sections the top menu switches between
   ========================================================================== */
.views { height: calc(100dvh - var(--topbar-h)); }
.view  { height: 100%; overflow-y: auto; }
/* Charts manage their own scrolling; the rest are documents. */
.view-charts { overflow: hidden; }

/* The charts view is hidden by being parked, not by display:none.
 *
 * display:none collapses every chart to a zero-width box for as long as it is
 * hidden (measured: 589px -> 0 -> 589). Lightweight Charts does recover when
 * it comes back, but while it is away anything reading chart geometry reads
 * zero, and returning costs a resize and a repaint. Kept laid out and merely
 * invisible, the charts stay measured and stay subscribed, so switching back
 * is instant and nothing in between has to cope with a zero-width chart. */
.view-charts[hidden] {
  display: block !important;
  position: fixed;
  top: var(--topbar-h); left: 0;
  width: 100vw; height: calc(100dvh - var(--topbar-h));
  visibility: hidden; pointer-events: none; z-index: -1;
}

/* ==========================================================================
   Grid  —  the layout engine
   ========================================================================== */
.grid {
  height: 100%;
  display: grid; gap: var(--gap); padding: var(--gap);
  grid-auto-rows: 1fr;
}
.grid[data-count="1"] { grid-template-columns: 1fr;                  grid-template-rows: 1fr; }
.grid[data-count="2"] { grid-template-columns: repeat(2, 1fr);       grid-template-rows: 1fr; }
.grid[data-count="4"] { grid-template-columns: repeat(2, 1fr);       grid-template-rows: repeat(2, 1fr); }
.grid[data-count="6"] { grid-template-columns: repeat(3, 1fr);       grid-template-rows: repeat(2, 1fr); }
.grid[data-count="8"] { grid-template-columns: repeat(4, 1fr);       grid-template-rows: repeat(2, 1fr); }

/* One pane blown up to fill the grid. */
.grid.has-max > .pane { display: none; }
.grid.has-max > .pane.maximized { display: flex; grid-area: 1 / 1 / -1 / -1; }

/* Laptop / tablet: shed columns rather than squashing charts flat. */
@media (max-width: 1500px) {
  .grid[data-count="8"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .grid[data-count="6"],
  .grid[data-count="8"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr !important; grid-auto-rows: minmax(260px, 1fr); overflow-y: auto; }
  .grid[data-count]{ grid-template-rows: none; }
  .topbar { gap: 8px; overflow-x: auto; }
  .topbar .lbl, .tbtn span { display: none; }
  /* keep the dots — they are the whole point — but drop the wording */
  .status-box { padding: 0 7px; gap: 5px; }
  .status-box .st-state { display: none; }
}
@media (max-width: 560px) {
  .status-box .st-label { display: none; }
}

/* ==========================================================================
   Pane
   ========================================================================== */
.pane {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur);
}
.pane.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

/* --- head row ------------------------------------------------------------ */
.pane-head {
  height: var(--head-h); flex: none;
  display: flex; align-items: center; gap: 4px;
  padding: 0 5px 0 6px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.sym-btn {
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 7px; border-radius: var(--r-sm);
  font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
  max-width: 45%;
  transition: background var(--dur);
}
.sym-btn:hover { background: var(--bg-3); }
.sym-btn .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  font-size: 8.5px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 4px; border-radius: 3px; text-transform: uppercase;
  background: var(--bg-3); color: var(--tx-2); flex: none;
}
.chip.crypto { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.chip.stocks { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #7aa2ff; }

.tf-btn {
  height: 24px; padding: 0 7px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600; color: var(--tx-1);
}
.tf-btn:hover { background: var(--bg-3); color: var(--tx-0); }

.pane-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.iconbtn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--tx-1);
  transition: background var(--dur), color var(--dur);
}
.iconbtn:hover { background: var(--bg-3); color: var(--tx-0); }
.iconbtn.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.iconbtn svg { width: 18px; height: 18px; }

/* --- ticker bar  (flashes on every price change) ------------------------- */
.ticker {
  height: var(--tick-h); flex: none;
  display: flex; align-items: center; gap: 9px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  position: relative; overflow: hidden;
  transition: background .45s ease;
}
/* the flash: a tint that snaps on and fades out.
   JS removes + re-adds the class (with a reflow between) to retrigger it,
   so back-to-back ticks each get their own flash instead of one long smear. */
.ticker::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.ticker.flash-up::after   { background: var(--up-soft);   animation: tick-flash .5s ease-out; }
.ticker.flash-down::after { background: var(--down-soft); animation: tick-flash .5s ease-out; }
@keyframes tick-flash { from { opacity: 1; } to { opacity: 0; } }

.tk-price {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  position: relative; z-index: 1;
  transition: color .4s ease;
}
.tk-price.up   { color: var(--up); }
.tk-price.down { color: var(--down); }
.tk-chg { font-size: 11.5px; font-weight: 600; position: relative; z-index: 1; white-space: nowrap; }
.tk-chg.up { color: var(--up); } .tk-chg.down { color: var(--down); }
.tk-meta {
  margin-left: auto; display: flex; gap: 10px; align-items: center;
  font-size: 10.5px; color: var(--tx-2); position: relative; z-index: 1;
  overflow: hidden; white-space: nowrap;
}
.tk-meta b { color: var(--tx-1); font-weight: 600; }
.tk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tx-2); flex: none; }
.tk-dot.live  { background: var(--up);   box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 70%, transparent); animation: pulse 2.2s infinite; }
.tk-dot.wait  { background: var(--warn); }
.tk-dot.dead  { background: var(--down); }
@keyframes pulse { 70% { box-shadow: 0 0 0 5px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }

/* --- chart area ---------------------------------------------------------- */
.chart-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.drawbar {
  width: 40px; flex: none; background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0; overflow-y: auto; scrollbar-width: none;
}
.drawbar::-webkit-scrollbar { display: none; }
.drawbar .iconbtn { width: 32px; height: 32px; }
.drawbar .iconbtn svg { width: 20px; height: 20px; }
.drawbar hr { width: 22px; border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
/* the drawing-colour swatch sits in the same rhythm as the buttons */
.drawbar input[type="color"] { width: 26px; height: 22px; }
/* Stays visible at every chart count — drawing is a primary feature, and 30px
   is a cheap price even in the 8-up layout. */

/* grouped tool button: the caret in the corner opens the family flyout */
.iconbtn.tool-group { position: relative; }
.iconbtn.tool-group .caret {
  position: absolute; right: 1px; bottom: 1px;
  width: 0; height: 0; border-style: solid;
  border-width: 0 0 6px 6px; border-color: transparent transparent var(--tx-2) transparent;
  cursor: pointer;
}
.iconbtn.tool-group:hover .caret { border-bottom-color: var(--tx-0); }
.iconbtn.tool-group.on .caret { border-bottom-color: var(--accent); }
/* enlarge the caret's clickable area without enlarging the triangle */
.iconbtn.tool-group .caret::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; }

.menu-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.menu-item svg { width: 17px; height: 17px; flex: none; }
.tf-grid button.fav { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); }

/* countdown to the close of the forming candle */
.tk-cd {
  font-size: 11px; font-weight: 600; color: var(--tx-2);
  padding: 1px 5px; border-radius: 3px; background: var(--bg-3);
  position: relative; z-index: 1; white-space: nowrap;
}
.tk-cd:empty { display: none; }
.tk-cd.soon { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }

/* bar replay controls */
.replay-bar {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 5px 8px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.replay-bar .btn.sm { min-width: 28px; padding: 0 7px; }
.rp-slider { flex: 1; min-width: 60px; accent-color: var(--accent); height: 4px; }
.rp-speed { width: auto; padding: 3px 5px; font-size: 11px; }
.rp-pos { font-size: 10.5px; color: var(--tx-2); white-space: nowrap; }
.pane.tiny .rp-pos, .pane.tiny .rp-speed { display: none; }

.chart-host { position: relative; flex: 1; min-width: 0; }
.chart-host > .tv-chart { position: absolute; inset: 0; }
.draw-layer { position: absolute; inset: 0; z-index: 3; }
.draw-layer.armed { cursor: crosshair; }
.draw-layer.idle  { pointer-events: none; }

.legend {
  position: absolute; top: 5px; left: 9px; z-index: 4;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  pointer-events: none; max-width: calc(100% - 70px);
}
.legend .row { display: flex; gap: 6px; align-items: center; pointer-events: auto; white-space: nowrap; }
.legend .row .nm { color: var(--tx-1); }
.legend .row .vals { color: var(--tx-0); }
.legend .kill { opacity: 0; color: var(--tx-2); cursor: pointer; padding: 0 2px; }
.legend .row:hover .kill { opacity: 1; }
.legend .kill:hover { color: var(--down); }
.legend .sw { width: 7px; height: 7px; border-radius: 2px; flex: none; }

.pane-msg {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 6;
  background: color-mix(in srgb, var(--bg-1) 78%, transparent);
  color: var(--tx-2); font-size: 12px; text-align: center; padding: 12px;
}
.pane-msg.err { color: var(--down); }
.spin {
  width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 8px;
  border: 2px solid var(--bg-4); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Small panes (6/8 up) hide chrome that stops being readable. */
.pane.tiny .tk-meta,
.pane.tiny .legend .vals { display: none; }
.pane.tiny .tk-price { font-size: 13px; }

/* ==========================================================================
   Popover  —  symbol picker, indicator list, menus
   ========================================================================== */
.pop-host { position: fixed; inset: 0; z-index: 60; }
.pop {
  position: absolute; min-width: 190px; max-width: min(440px, 94vw);
  background: var(--bg-1); border: 1px solid var(--bg-4);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: min(560px, 82vh);
  animation: popin .11s ease-out;
}
@keyframes popin { from { opacity: 0; transform: translateY(-4px); } }

.pop-search { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--line); flex: none; }
.pop-search svg { color: var(--tx-2); }
.pop-search input { flex: 1; background: none; border: 0; outline: none; font-size: 13px; }
.pop-search input::placeholder { color: var(--tx-2); }

.pop-tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: none; }
.pop-tabs::-webkit-scrollbar { display: none; }
.pop-tabs button {
  padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  color: var(--tx-1); white-space: nowrap; border: 1px solid transparent;
}
.pop-tabs button:hover { background: var(--bg-2); }
.pop-tabs button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

.pop-list { overflow-y: auto; padding: 4px; flex: 1; min-height: 0; }
.pop-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 8px; border-radius: var(--r-sm); text-align: left;
  transition: background .1s;
}
.pop-item:hover, .pop-item.cursor { background: var(--bg-3); }
.pop-item .sym { font-weight: 700; font-size: 12.5px; min-width: 52px; }
.pop-item .nm { color: var(--tx-1); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pop-item .ex { color: var(--tx-2); font-size: 10px; flex: none; }
.pop-empty { padding: 22px; text-align: center; color: var(--tx-2); font-size: 12px; }
.pop-group { padding: 9px 10px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-2); }

/* timeframe grid inside a popover */
.tf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 7px; }
.tf-grid button { padding: 7px 0; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; color: var(--tx-1); background: var(--bg-2); }
.tf-grid button:hover { background: var(--bg-3); color: var(--tx-0); }
.tf-grid button.on { background: var(--accent); color: #fff; }

.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 11px; border-radius: var(--r-sm); font-size: 12.5px; text-align: left;
}
.menu-item:hover { background: var(--bg-3); }
.menu-item .k { margin-left: auto; color: var(--tx-2); font-size: 10.5px; font-family: var(--mono); }
.menu-item.danger { color: var(--down); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-host { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal {
  position: relative; width: min(680px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--bg-4);
  border-radius: 13px; box-shadow: var(--shadow);
  animation: popin .14s ease-out;
}
.modal-head { display: flex; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); flex: none; }
.modal-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.modal-head .iconbtn { margin-left: auto; }
.modal-body { padding: 15px; overflow-y: auto; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.field > label { font-size: 11px; color: var(--tx-1); font-weight: 600; }
.field .hint { font-size: 10.5px; color: var(--tx-2); }
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="password"], input[type="url"], input[type="tel"],
select, textarea {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-0);
  border-radius: var(--r-sm); padding: 7px 9px; outline: none; width: 100%;
  transition: border-color var(--dur);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="color"] { width: 30px; height: 26px; padding: 1px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inline { display: flex; align-items: center; gap: 7px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 31px; padding: 0 13px; border-radius: var(--r-md);
  background: var(--bg-3); color: var(--tx-0); font-weight: 600; font-size: 12.5px;
  border: 1px solid var(--line); transition: background var(--dur), border-color var(--dur);
}
.btn:hover { background: var(--bg-4); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.buy  { background: var(--up);   border-color: var(--up);   color: #fff; }
.btn.sell { background: var(--down); border-color: var(--down); color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.btn.sm { height: 25px; padding: 0 9px; font-size: 11.5px; }
.btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.kv { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv b { font-family: var(--mono); font-weight: 600; }
.pos { color: var(--up); } .neg { color: var(--down); }

/* ==========================================================================
   Drawer (watchlist / alerts)
   ========================================================================== */
.drawer {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(330px, 92vw);
  background: var(--bg-1); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 50;
  box-shadow: var(--shadow); animation: slidein .16s ease-out;
}
@keyframes slidein { from { transform: translateX(14px); opacity: .5; } }
.drawer-head { display: flex; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-head .iconbtn { margin-left: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px; min-height: 0; }
.wl-add { position: relative; margin-bottom: 9px; }
.wl-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px; z-index: 5;
  background: var(--bg-2); border: 1px solid var(--bg-4); border-radius: var(--r-md);
  max-height: 260px; overflow-y: auto; box-shadow: var(--shadow); padding: 3px;
}
.wl-rows { display: flex; flex-direction: column; gap: 1px; }
.wl-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: var(--r-sm); cursor: pointer; font-family: var(--mono);
}
.wl-row:hover { background: var(--bg-2); }
.wl-row .s { font-weight: 700; font-size: 12px; flex: 1; font-family: var(--sans); }
.wl-row .p { font-size: 12px; }
.wl-row .c { font-size: 10.5px; min-width: 56px; text-align: right; }
.wl-row .x { opacity: 0; color: var(--tx-2); }
.wl-row:hover .x { opacity: 1; }

/* ==========================================================================
   Alerts + trade rows
   ========================================================================== */
.alert-row, .trade-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 6px;
}
.alert-row .meta { flex: 1; min-width: 0; }
.alert-row .ttl { font-size: 12.5px; font-weight: 600; }
.alert-row .sub { font-size: 10.5px; color: var(--tx-2); font-family: var(--mono); }
.alert-row.fired { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--bg-2)); }
.tag { font-size: 9.5px; font-weight: 700; padding: 2px 5px; border-radius: 3px; background: var(--bg-4); color: var(--tx-1); text-transform: uppercase; letter-spacing: .05em; }
.tag.up { background: var(--up-soft); color: var(--up); }
.tag.down { background: var(--down-soft); color: var(--down); }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toasts { position: fixed; right: 14px; bottom: 14px; z-index: 100; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.toast {
  display: flex; align-items: center; gap: 9px; min-width: 210px; max-width: 340px;
  padding: 10px 13px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--bg-4);
  box-shadow: var(--shadow); font-size: 12.5px;
  animation: toastin .18s ease-out;
}
@keyframes toastin { from { opacity: 0; transform: translateX(16px); } }
.toast.out { opacity: 0; transform: translateX(16px); transition: all .2s; }
.toast .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent); flex: none; }
.toast.ok   .bar { background: var(--up); }
.toast.err  .bar { background: var(--down); }
.toast.warn .bar { background: var(--warn); }
.toast .body { flex: 1; }
.toast .ttl { font-weight: 650; }
.toast .sub { color: var(--tx-1); font-size: 11px; }

/* --- misc ---------------------------------------------------------------- */
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--tx-2); }
.sec-title { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-2); margin: 15px 0 7px; }
.sec-title:first-child { margin-top: 0; }

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

/* ==========================================================================
   Company panel — news / earnings / filings
   ========================================================================== */
/* Wider than the watchlist: this one holds tables, not a list of tickers. */
.drawer.wide { width: min(480px, 96vw); }

.sp-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sp-title strong { font-size: 14px; letter-spacing: .02em; }
.sp-title span {
  font-size: 11px; color: var(--tx-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sp-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); flex: none; }
.sp-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 8px 12px; font: inherit; font-size: 12px; color: var(--tx-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur), border-color var(--dur);
}
.sp-tab:hover { color: var(--tx-0); }
.sp-tab.on { color: var(--tx-0); border-bottom-color: var(--up); font-weight: 600; }

/* the % badge — same colour language as the tape */
.mv {
  flex: none; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: var(--r-sm); background: var(--bg-3); color: var(--tx-2);
}
.mv.up   { background: var(--up-soft);   color: var(--up); }
.mv.down { background: var(--down-soft); color: var(--down); }

.sp-daysep {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tx-2); padding: 12px 2px 5px; position: sticky; top: -10px;
  background: var(--bg-1); z-index: 1;
}
.sp-daysep:first-child { padding-top: 2px; }

/* ── news rows ───────────────────────────────────────────────────────────── */
.sp-news {
  display: block; padding: 7px 8px; border-radius: var(--r-md);
  text-decoration: none; color: inherit; border: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur);
}
.sp-news:hover { background: var(--bg-2); border-color: var(--line); }
.sp-news .row1 { display: flex; align-items: baseline; gap: 7px; }
.sp-news .time {
  flex: none; width: 44px; font-size: 10.5px; color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
.sp-news .ttl { flex: 1; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.sp-news .row2 { display: flex; gap: 6px; align-items: center; margin: 2px 0 0 51px; }
.sp-news .src { font-size: 10.5px; color: var(--tx-2); }
.sp-news .sum {
  font-size: 11.5px; color: var(--tx-2); margin: 3px 0 0 51px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* a filing is a primary document, not commentary — mark it as such */
.sp-news.filing .ttl { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; }
.sp-news.filing .src { color: var(--warn); }
.sp-news.earnings { background: color-mix(in srgb, var(--warn) 8%, transparent); }

.tag {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 4px; border-radius: var(--r-sm);
}
.tag.earn { background: var(--warn); color: #1a1a1a; }

/* ── filing rows ─────────────────────────────────────────────────────────── */
.sp-filing {
  display: block; padding: 7px 8px; border-radius: var(--r-md);
  text-decoration: none; color: inherit; border: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur);
}
.sp-filing:hover { background: var(--bg-2); border-color: var(--line); }
.sp-filing .row1 { display: flex; align-items: baseline; gap: 8px; }
.sp-filing .form {
  flex: none; min-width: 58px; font-size: 11px; font-weight: 700;
  font-family: var(--mono, ui-monospace, monospace); color: var(--tx-2);
}
.sp-filing .ttl { flex: 1; font-size: 12px; }
.sp-filing .time { flex: none; font-size: 10.5px; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.sp-filing .items { font-size: 11px; color: var(--tx-2); margin: 2px 0 0 66px; line-height: 1.4; }
.sp-filing.material .form { color: var(--tx-0); }
.sp-filing.earnings .form { color: var(--warn); }

/* ── earnings cards + tables ─────────────────────────────────────────────── */
.sp-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 11px 12px; margin-bottom: 12px;
}
.sp-card.next { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.sp-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-2);
}
.sp-card-head .when { color: var(--warn); font-weight: 700; }
.sp-date { font-size: 15px; font-weight: 600; margin-top: 3px; }
.sp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 9px;
}
.sp-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.sp-kv .k { color: var(--tx-2); }
.sp-kv .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.sp-kv .v.up { color: var(--up); }
.sp-kv .v.down { color: var(--down); }

.sp-h { font-size: 12px; font-weight: 700; margin: 16px 0 3px; }
.sp-sub { font-size: 11px; color: var(--tx-2); margin-bottom: 7px; line-height: 1.45; }
.sp-note { font-size: 10.5px; color: var(--tx-2); margin-top: 7px; line-height: 1.45; }
.sp-foot {
  font-size: 10px; color: var(--tx-2); line-height: 1.6;
  margin-top: 18px; padding-top: 9px; border-top: 1px solid var(--line);
}

.sp-tablewrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sp-table th {
  text-align: left; font-weight: 600; color: var(--tx-2); font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.sp-table td {
  padding: 5px 6px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table .num { text-align: right; }
.sp-table .up { color: var(--up); }
.sp-table .down { color: var(--down); }
.sp-table .filed { display: block; font-size: 9.5px; color: var(--tx-2); }

/* analyst rating distribution */
.sp-bar { display: flex; gap: 2px; height: 22px; margin-top: 4px; }
.sp-bar .seg {
  display: grid; place-items: center; min-width: 18px;
  font-size: 10px; font-weight: 700; color: #fff;
  border-radius: var(--r-sm); cursor: default;
}
.sp-bar .sb { background: var(--up); }
.sp-bar .b  { background: color-mix(in srgb, var(--up) 62%, var(--bg-3)); }
.sp-bar .h  { background: var(--bg-4); color: var(--tx-1); }
.sp-bar .s  { background: color-mix(in srgb, var(--down) 62%, var(--bg-3)); }
.sp-bar .ss { background: var(--down); }

/* the earnings-soon flag on the toolbar button */
.badge.earn { background: var(--warn); color: #1a1a1a; }

/* ── alert manager ───────────────────────────────────────────────────────── */
.al-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.al-filters { display: flex; gap: 3px; flex-wrap: wrap; }
.al-filter {
  appearance: none; border: 1px solid var(--line); cursor: pointer; font: inherit;
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  background: var(--bg-2); color: var(--tx-2);
}
.al-filter:hover { color: var(--tx-0); }
.al-filter.on { background: var(--bg-4); color: var(--tx-0); font-weight: 600; }
.al-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.al-rows { display: flex; flex-direction: column; gap: 7px; }
.al-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.al-row.off { opacity: .55; }
.al-row.fired { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.al-main { flex: 1; min-width: 0; }
.al-line1 { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.al-line1 strong { font-size: 13px; }
.al-src { font-size: 10.5px; color: var(--tx-2); }
.al-where {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--r-sm); cursor: help;
}
/* the distinction that matters: does this survive a closed laptop */
.al-where.srv { background: var(--up-soft); color: var(--up); }
.al-where.brw { background: var(--bg-3); color: var(--tx-2); }
.al-cond { font-size: 12.5px; margin-top: 3px; }
.al-note { font-size: 11.5px; color: var(--tx-2); margin-top: 2px; font-style: italic; }
.al-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--tx-2); margin-top: 5px; }
.al-chan { color: var(--tx-1); }
.al-controls { display: flex; gap: 6px; flex: none; }
.al-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; margin-bottom: 12px; }
.al-items .inline { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.al-warn {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); font-size: 11.5px;
  line-height: 1.5; background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
}

/* ── notification channels ───────────────────────────────────────────────── */
.nf-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 14px; margin-bottom: 12px;
}
.nf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.nf-head strong { font-size: 13px; }
.nf-state {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tx-2); padding: 2px 7px; border-radius: 999px; background: var(--bg-3);
}
.nf-state.on { background: var(--up-soft); color: var(--up); }
.nf-actions { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }

/* The one command to run locally to sign the analysis engine in. It is long
   and must stay copyable verbatim, so it scrolls inside its own box rather
   than wrapping mid-flag or widening the modal. */
.ai-cmd-row { display: flex; gap: 7px; align-items: stretch; margin: 9px 0; }
.ai-cmd {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-3); color: var(--tx-0); border: 1px solid var(--line);
}
.ai-cmd-row .btn { flex: none; }

.ai-user {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.ai-user:last-child { border-bottom: 0; }
.ai-user label { margin: 0; }
table.ai-usage { border-collapse: collapse; font-size: 12px; width: 100%; }
table.ai-usage th, table.ai-usage td {
  text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.ai-usage th { color: var(--tx-2); font-size: 10.5px; text-transform: uppercase; }
table.ai-usage td { font-variant-numeric: tabular-nums; }
.ai-recent { max-height: 190px; overflow-y: auto; }

/* ── Analysis view ──────────────────────────────────────────────────────── */
/* Two columns: the toolkit and what it produced. The report side scrolls on
   its own so picking a different tool never moves the text you are reading. */
.an-wrap { display: grid; grid-template-columns: 288px 1fr; height: 100%; overflow: hidden; }
.an-left {
  border-right: 1px solid var(--line); overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; background: var(--bg-1);
}
.an-sec {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tx-2); margin: 12px 0 5px;
}
.an-sec:first-child { margin-top: 0; }

.an-tools { display: flex; flex-direction: column; gap: 2px; }
.an-tool {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--tx-1); font-size: 12.5px; text-align: left;
  cursor: pointer; width: 100%;
}
.an-tool:hover { background: var(--bg-2); color: var(--tx-0); }
.an-tool.on { background: var(--bg-3); border-color: var(--line); color: var(--tx-0); }
.an-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 999px; background: var(--bg-1); color: var(--tx-2);
  flex: none;
}
.an-form .field { margin-bottom: 8px; }
/* The results panel is absolutely positioned, so the wrapper has to be the
   containing block or it would hang off the top of the sidebar. */
.an-sym { position: relative; }
.an-sym .wl-results { left: 0; right: 0; max-height: 260px; }
/* Colour stated outright rather than inherited. Two things were washing it
   out: Chrome autofills anything that looks like a form field (a box labelled
   "Symbol" qualifies) and paints its own text colour, which only
   -webkit-text-fill-color overrides; and .pop-item is a <button>, which does
   not inherit colour reliably across browsers. --tx-0 is near-black in the
   light theme and near-white in the dark one, so this stays readable in both
   rather than being literally black in a dark UI. */
.an-sym input {
  width: 100%;
  color: var(--tx-0);
  -webkit-text-fill-color: var(--tx-0);
  caret-color: var(--tx-0);
  background: var(--bg-2);
}
.an-sym input::placeholder { color: var(--tx-2); -webkit-text-fill-color: var(--tx-2); }
.an-sym input:-webkit-autofill,
.an-sym input:-webkit-autofill:hover,
.an-sym input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tx-0);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
}
.an-sym .pop-item { color: var(--tx-0); background: none; border: 0; cursor: pointer; }
.an-sym .pop-item .sym { color: var(--tx-0); }
.an-sym .pop-item .nm { color: var(--tx-1); }
.an-form textarea {
  width: 100%; resize: vertical; font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
}
.an-note {
  font-size: 11.5px; padding: 7px 9px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn);
}

.an-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.an-admin { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.an-admin .btn { width: 100%; }
.an-item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--tx-1); cursor: pointer;
}
.an-item:hover { background: var(--bg-2); }
.an-item.on { background: var(--bg-3); border-color: var(--line); }
.an-item-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.an-item-title {
  font-size: 12px; color: var(--tx-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-item-sub { font-size: 10.5px; color: var(--tx-2); }
.an-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--tx-2); }
.an-dot.done { background: var(--up); }
.an-dot.failed { background: var(--dn); }
.an-dot.running { background: var(--warn); animation: an-pulse 1.4s ease-in-out infinite; }
@keyframes an-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.an-report { overflow-y: auto; padding: 22px 26px 60px; }
.an-rhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
  padding-bottom: 12px; margin-bottom: 18px;
}
.an-rhead h2 { font-size: 17px; margin: 0 0 3px; }
.an-ractions { display: flex; gap: 6px; flex-wrap: wrap; }
.an-empty { max-width: 46ch; margin: 12vh auto 0; text-align: center; }
.an-empty h2 { font-size: 19px; margin-bottom: 8px; }

.an-running { text-align: center; padding: 12vh 0; color: var(--tx-1); }
.an-spin {
  width: 26px; height: 26px; margin: 0 auto 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent, var(--tx-0));
  animation: an-spin 850ms linear infinite;
}
@keyframes an-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .an-spin { animation-duration: 3s; }
  .an-dot.running { animation: none; }
}

/* Rendered report markdown. Measure capped for reading; tables scroll rather
   than widening the column. */
.an-md { max-width: 74ch; font-size: 13.5px; line-height: 1.65; color: var(--tx-1); }
.an-md h1 { font-size: 20px; margin: 26px 0 10px; color: var(--tx-0); }
.an-md h2 { font-size: 16px; margin: 24px 0 8px; color: var(--tx-0); }
.an-md h3 { font-size: 13.5px; margin: 18px 0 6px; color: var(--tx-0); }
.an-md h1:first-child, .an-md h2:first-child { margin-top: 0; }
.an-md p { margin: 0 0 10px; }
.an-md ul { margin: 0 0 12px; padding-left: 20px; }
.an-md li { margin-bottom: 4px; }
.an-md strong { color: var(--tx-0); }
.an-md code {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  background: var(--bg-2); padding: 1px 5px; border-radius: 3px;
}
.an-md pre {
  background: var(--bg-2); padding: 11px 13px; border-radius: var(--r-sm);
  overflow-x: auto; margin: 0 0 12px;
}
.an-md pre code { background: none; padding: 0; }
.an-md hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.an-tw { overflow-x: auto; margin: 0 0 14px; }
.an-md table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.an-md th, .an-md td {
  text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.an-md th { color: var(--tx-2); font-weight: 600; font-size: 11px;
            text-transform: uppercase; letter-spacing: .04em; }
.an-md td { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  /* One column on a phone: the tool list sits above the report rather than
     squeezing it into a strip too narrow to read. */
  .an-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .an-left { border-right: 0; border-bottom: 1px solid var(--line); max-height: 46vh; }
  .an-report { padding: 16px 14px 50px; }
  .an-md { font-size: 14px; }
}

/* Print the report alone — the point of "Print / PDF". */
@media print {
  .topbar, .an-left, .an-ractions, .view:not(#viewAnalysis) { display: none !important; }
  .an-wrap { display: block; height: auto; overflow: visible; }
  .an-report { overflow: visible; padding: 0; }
  .an-md { max-width: none; color: #000; }
}
.nf-deep { display: inline-block; text-decoration: none; text-align: center; margin: 8px 0; }
.nf-steps { margin-top: 4px; }
.nf-status {
  margin-top: 9px; font-size: 11.5px; padding: 7px 9px; border-radius: var(--r-sm);
  background: var(--bg-3); color: var(--tx-1);
}
.nf-status.wait { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.nf-status.good { background: var(--up-soft); color: var(--up); }
.nf-status.bad  { background: var(--down-soft); color: var(--down); }
.small { font-size: 11.5px; line-height: 1.55; }

.sp-fin { margin-left: auto; margin-right: 6px; height: 24px; font-size: 11px; }
.drawer-head .sp-fin + .iconbtn { margin-left: 0; }

/* ==========================================================================
   Financials — the full-screen statements view
   ========================================================================== */
.modal.modal-tall { height: min(92vh, 1000px); display: flex; flex-direction: column; }
.modal.modal-tall .modal-body { flex: 1; min-height: 0; padding: 0; display: flex; }

.fin { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.fin-head { flex: none; padding: 0 16px; border-bottom: 1px solid var(--line); }
.fin-title { display: flex; align-items: baseline; gap: 8px; padding: 4px 0 10px; }
.fin-title strong { font-size: 15px; }
.fin-title span { font-size: 12px; color: var(--tx-2); }
.fin-tabs { display: flex; gap: 4px; }
.fin-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px;
  padding: 7px 14px; border-radius: 999px; background: var(--bg-2); color: var(--tx-1);
  margin-bottom: 10px; transition: background var(--dur), color var(--dur);
}
.fin-tab:hover { background: var(--bg-3); }
.fin-tab.on { background: var(--tx-0); color: var(--bg-0); font-weight: 600; }

.fin-body { flex: 1; overflow: auto; padding: 16px; min-height: 0; }
.fin-empty { padding: 40px 10px; text-align: center; color: var(--tx-2); font-size: 12.5px; line-height: 1.6; }
.fin-h { font-size: 14px; font-weight: 700; margin: 22px 0 8px; }
.fin-h:first-child { margin-top: 0; }
.fin-about { font-size: 12.5px; line-height: 1.65; color: var(--tx-1); max-width: 900px; }
.fin-foot {
  font-size: 11px; color: var(--tx-2); line-height: 1.6; max-width: 900px;
  margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--line);
}
.fin-notice {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.fin-notice strong { font-size: 13px; }
.fin-notice span { font-size: 12px; color: var(--tx-2); }

/* key/value cards */
.fin-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 26px;
}
.fin-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-fact .k { font-size: 11px; color: var(--tx-2); }
.fin-fact .v {
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px 32px; }

/* toolbars: statement picker + annual/quarterly */
.fin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fin-seg { display: flex; gap: 3px; }
.fin-seg.right { margin-left: auto; }
.fin-segbtn {
  appearance: none; border: 1px solid var(--line); cursor: pointer; font: inherit;
  font-size: 11.5px; padding: 5px 12px; border-radius: var(--r-md);
  background: var(--bg-2); color: var(--tx-1);
}
.fin-segbtn:hover { background: var(--bg-3); }
.fin-segbtn.on { background: var(--bg-4); color: var(--tx-0); font-weight: 600; }

/* the wide statement tables */
.fin-tablewrap { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); }
.fin-table { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; }
.fin-table th, .fin-table td { padding: 7px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.fin-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-2);
  font-size: 11px; font-weight: 600; color: var(--tx-2); text-align: left;
}
.fin-table th.num, .fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* the metric name stays put while the years scroll under it */
.fin-table .sticky { position: sticky; left: 0; z-index: 1; background: var(--bg-1); text-align: left; }
.fin-table thead .sticky { z-index: 3; background: var(--bg-2); }
.fin-table tbody tr:hover td { background: var(--bg-2); }
.fin-table tbody tr:hover td.sticky { background: var(--bg-3); }
.fin-table tbody tr:last-child td { border-bottom: 0; }
.fin-table .sub { font-size: 10px; color: var(--tx-2); font-weight: 400; }
.fin-table .sub.up { color: var(--up); }
.fin-table .sub.down { color: var(--down); }
.fin-table td.up { color: var(--up); }
.fin-table td.down { color: var(--down); }
.fin-table.kv td:first-child { color: var(--tx-2); }

/* proportion bar + legend (the flat form of TradingView's donuts) */
.fin-prop { margin-bottom: 12px; }
.fin-bar { display: flex; gap: 2px; height: 26px; border-radius: var(--r-sm); overflow: hidden; }
.fin-bar .seg { min-width: 3px; cursor: default; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 11px; color: var(--tx-2); }
.fin-legend .item { display: flex; align-items: center; gap: 5px; }
.fin-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.fin-bar .a, .fin-legend .a { background: var(--warn); }
.fin-bar .b, .fin-legend .b { background: #4a90e2; }
.fin-bar .p0, .fin-legend .p0 { background: #4a90e2; }
.fin-bar .p1, .fin-legend .p1 { background: #26a69a; }
.fin-bar .p2, .fin-legend .p2 { background: #f0a30a; }
.fin-bar .p3, .fin-legend .p3 { background: #a86ee0; }
.fin-bar .p4, .fin-legend .p4 { background: #ecc94b; }
.fin-bar .p5, .fin-legend .p5 { background: #4dd0e1; }
.fin-bar .p6, .fin-legend .p6 { background: #ef5350; }
.fin-bar .p7, .fin-legend .p7 { background: #8d98a8; }

/* ==========================================================================
   Order flow panel — time & sales + depth ladder
   ========================================================================== */
.pane-side {
  width: 190px; flex: none; display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--line); min-height: 0;
}
.pane.tiny .pane-side { width: 150px; }

.side-tabs { display: flex; gap: 2px; padding: 4px 5px; border-bottom: 1px solid var(--line); flex: none; }
.side-tabs button {
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  color: var(--tx-1); border: 1px solid transparent;
}
.side-tabs button:hover { background: var(--bg-2); }
.side-tabs button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.side-tabs .side-close { margin-left: auto; color: var(--tx-2); padding: 3px 6px; }
.side-tabs .side-close:hover { color: var(--down); background: none; }

.side-body { flex: 1; overflow-y: auto; min-height: 0; font-family: var(--mono); font-size: 10.5px; }
.side-body::-webkit-scrollbar { width: 5px; }

/* --- tape ---------------------------------------------------------------- */
.tape-row {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 1.5px 6px; white-space: nowrap;
}
.tape-row .bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: .18; }
.tape-row.buy  .bar { background: var(--up); }
.tape-row.sell .bar { background: var(--down); }
.tape-row .t { color: var(--tx-2); position: relative; }
.tape-row .p { flex: 1; text-align: right; position: relative; font-weight: 600; }
.tape-row .s { min-width: 52px; text-align: right; color: var(--tx-1); position: relative; }
.tape-row.buy  .p { color: var(--up); }
.tape-row.sell .p { color: var(--down); }

/* --- depth ladder -------------------------------------------------------- */
.depth-row {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 1.5px 6px; white-space: nowrap;
}
.depth-row .bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: .2; }
.depth-row.ask .bar { background: var(--down); }
.depth-row.bid .bar { background: var(--up); }
.depth-row .p { flex: 1; text-align: left; position: relative; font-weight: 600; }
.depth-row.ask .p { color: var(--down); }
.depth-row.bid .p { color: var(--up); }
.depth-row .s { min-width: 58px; text-align: right; color: var(--tx-1); position: relative; }

.depth-spread {
  display: flex; justify-content: space-between; padding: 4px 6px; margin: 2px 0;
  background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.depth-imb {
  position: relative; height: 16px; margin: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--down) 45%, transparent); overflow: hidden;
}
.depth-imb .fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--up) 55%, transparent); }
.depth-imb .lbl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; }

/* ==========================================================================
   Login / first-run screen
   ========================================================================== */
.auth-body {
  display: grid; place-items: center; min-height: 100dvh;
  background:
    radial-gradient(1000px 500px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--bg-0);
  overflow: auto; padding: 24px;
}
.auth-card {
  width: min(400px, 100%);
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; padding: 30px 28px;
  box-shadow: var(--shadow);
}
.auth-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: .12em; font-size: 12px;
  color: var(--tx-1); margin-bottom: 22px;
}
.auth-card h1 { margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.auth-sub { margin: 0 0 22px; color: var(--tx-2); font-size: 12.5px; line-height: 1.5; }
.auth-card .field { margin-bottom: 14px; }
.auth-card input { padding: 10px 11px; font-size: 13.5px; }
.auth-submit { width: 100%; height: 38px; margin-top: 6px; font-size: 13.5px; }
.auth-error {
  padding: 9px 11px; margin-bottom: 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--down) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--down) 40%, transparent);
  color: var(--down); font-size: 12.5px;
}
.auth-foot { margin: 18px 0 0; font-size: 11.5px; color: var(--tx-2); line-height: 1.6; }
.auth-foot code {
  font-family: var(--mono); font-size: 11px;
  background: var(--bg-2); padding: 1px 5px; border-radius: 3px;
}

/* Chrome paints autofilled inputs white; keep them on-theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tx-0);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--tx-0);
  transition: background-color 9999s ease-out 0s;
}

/* Inline text button — the sign-in / register toggle on the auth screen. */
.auth-link {
  color: var(--accent); font-size: 11.5px; font-weight: 600;
  padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.auth-link:hover { filter: brightness(1.2); }

/* ==========================================================================
   Full-page views  —  watchlists, news, alerts
   ========================================================================== */
.page { max-width: 1500px; margin: 0 auto; padding: 18px 20px 60px; }
.page-head {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.page-head .sub { font-size: 12px; color: var(--tx-2); }
.page-head .grow { flex: 1; }
.page-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.page-sec { margin-top: 26px; }
.page-sec > h2 {
  margin: 0 0 10px; font-size: 12px; font-weight: 650;
  color: var(--tx-1); text-transform: uppercase; letter-spacing: .07em;
}
.page-sec > h2 a { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.page-empty {
  padding: 40px 20px; text-align: center; color: var(--tx-2); font-size: 12.5px;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}

/* --- list tabs ------------------------------------------------------------ */
.wl-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wl-tab {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-1);
  color: var(--tx-1); font-size: 12.5px; font-weight: 550;
}
.wl-tab:hover { background: var(--bg-2); color: var(--tx-0); }
.wl-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wl-tab .n {
  font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 8px;
  background: var(--bg-3); color: var(--tx-2);
}
.wl-tab.on .n { background: rgba(255,255,255,.22); color: #fff; }
.wl-tab.add { border-style: dashed; color: var(--tx-2); }

/* --- the ticker table ----------------------------------------------------- */
/* Six columns will not fit a phone however hard they are squeezed, so the
   table scrolls inside its own box rather than pushing the page sideways. */
.table-wrap { overflow-x: auto; margin-top: 14px; }
.wl-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 12.5px; }
.wl-table th {
  text-align: left; padding: 7px 10px; font-size: 10.5px; font-weight: 650;
  color: var(--tx-2); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--bg-0); z-index: 1;
}
.wl-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.wl-table tbody tr { cursor: pointer; }
.wl-table tbody tr:hover { background: var(--bg-1); }
.wl-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.wl-table .pos { color: var(--up); }
.wl-table .neg { color: var(--down); }
.wl-sym { display: flex; align-items: center; gap: 8px; }
.wl-sym b { font-size: 13px; font-weight: 650; }
.wl-nm {
  color: var(--tx-2); font-size: 12px;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.venue {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg-3); color: var(--tx-2); text-transform: uppercase;
}
.venue.crypto { background: color-mix(in srgb, #f7931a 20%, transparent); color: #f7931a; }
.venue.tsx    { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.venue.us     { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.wl-when { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.wl-when .d { font-size: 12px; white-space: nowrap; }
.wl-when .r { font-size: 10.5px; color: var(--tx-2); white-space: nowrap; }
.wl-when.soon .d { color: var(--warn); font-weight: 600; }
.wl-when.today .d { color: var(--down); font-weight: 700; }
.wl-rowbtns { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; }
.wl-table tbody tr:hover .wl-rowbtns { opacity: 1; }
.wl-rowbtns .iconbtn { width: 26px; height: 26px; }
.wl-load { color: var(--tx-2); font-size: 11px; font-style: italic; }

/* --- upcoming events strip ------------------------------------------------ */
.ev-list { display: flex; flex-direction: column; gap: 1px; }
.ev-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--bg-1); border: 1px solid var(--line);
  cursor: pointer;
}
.ev-row:hover { background: var(--bg-2); }
.ev-date {
  width: 62px; flex: none; text-align: center; line-height: 1.1;
}
.ev-date .dd { font-size: 16px; font-weight: 700; }
.ev-date .mm {
  font-size: 9.5px; font-weight: 700; color: var(--tx-2);
  text-transform: uppercase; letter-spacing: .07em;
}
.ev-kind {
  width: 5px; align-self: stretch; border-radius: 3px; flex: none;
  background: var(--tx-2);
}
.ev-kind.earnings { background: var(--warn); }
.ev-kind.exdiv, .ev-kind.paydiv, .ev-kind.dividend { background: var(--up); }
.ev-main { flex: 1; min-width: 0; }
.ev-main .t { display: flex; align-items: center; gap: 8px; }
.ev-main .t b { font-size: 13px; }
.ev-main .s { font-size: 11.5px; color: var(--tx-2); margin-top: 1px; }
.ev-rel { font-size: 11.5px; color: var(--tx-2); white-space: nowrap; }
.ev-rel.soon { color: var(--warn); font-weight: 600; }
.ev-past { opacity: .55; }

/* --- combined news feed --------------------------------------------------- */
.nf-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.nf-chip {
  height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-1);
  color: var(--tx-1); font-size: 11.5px; font-weight: 600;
}
.nf-chip:hover { background: var(--bg-2); color: var(--tx-0); }
.nf-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nf-rows { display: flex; flex-direction: column; }
.nf-day {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 2px 6px; margin-top: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--tx-2);
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--bg-0); border-bottom: 1px solid var(--line);
}
.nf-item {
  display: grid; grid-template-columns: 52px 78px 1fr auto;
  align-items: baseline; gap: 10px;
  padding: 9px 6px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.nf-item:hover { background: var(--bg-1); }
.nf-item .time { font-family: var(--mono); font-size: 11px; color: var(--tx-2); }
.nf-item .tick {
  font-size: 11.5px; font-weight: 700; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-item .ttl { font-size: 12.5px; line-height: 1.4; }
.nf-item .src { font-size: 11px; color: var(--tx-2); white-space: nowrap; }
.nf-item.filing .ttl { color: var(--warn); }
.nf-item .mv {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px; background: var(--bg-3);
}
.nf-item .mv.up   { color: var(--up);   background: var(--up-soft); }
.nf-item .mv.down { color: var(--down); background: var(--down-soft); }
.nf-progress {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--tx-2); padding: 10px 2px;
}
.nf-bar { flex: 1; max-width: 220px; height: 3px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.nf-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }

@media (max-width: 800px) {
  .page { padding: 14px 12px 60px; }

  /* Two columns, three visible children — so the headline would auto-place
     into column 1 and wrap at 46px, one word per line. Give it a row of its
     own spanning the full width: time and ticker on top, headline beneath. */
  .nf-item {
    grid-template-columns: 52px 1fr;
    align-items: start;
    row-gap: 3px;
    padding: 11px 4px;
  }
  .nf-item .src, .nf-item .mv { display: none; }
  .nf-item .ttl { grid-column: 1 / -1; line-height: 1.45; }
  .nf-item .tick { justify-self: start; }

  .wl-nm, .wl-table .col-opt { display: none; }
}