*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Shell width. Single source of truth for the header, sub-header, tab nav,
     page and footer containers — change it here, not in five places.
     min() keeps a 2% gutter on every screen while capping line length on
     ultrawide monitors, where full-bleed text becomes hard to read. */
  --shell:min(96vw,1800px);
  --bg:#000000;
  --bg2:#050505;
  --bg3:#1e1e1e;
  --bg4:#252525;
  --bg-card:#050505;
  --card-surface:#1e1e1e;
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.15);
  --coral:#ee654b;
  --coral-dim:rgba(238,101,75,0.15);
  --coral-border:rgba(238,101,75,0.35);
  --green:#22c55e;
  --green-dim:rgba(34,197,94,0.12);
  --red:#ef4444;
  --red-dim:rgba(239,68,68,0.12);
  --amber:#f59e0b;
  --tx1:#ffffff;
  --tx2:#a0a0a0;
  --tx3:#5a5a5a;
  --shield-gradient:linear-gradient(to bottom,rgba(0,0,0,0.97) 0%,rgba(0,0,0,0.92) 30%,rgba(8,2,1,0.65) 58%,rgba(4,1,0,0.20) 78%,transparent 100%);
}

/* ── LIGHT PALETTE — the default ─────────────────────────────────────
   :root above stays the DARK set, so `html` without the class is dark and
   this block is the light override. One place, not three.

   ⚠️ CARDS ARE LIGHTER THAN THE PAGE, not darker. The previous light theme
   had --bg #ffffff with --bg-card #EFEEEB, i.e. grey cards floating on a
   white page — the inverse of every reference design, and the main reason
   light mode never looked like the mockups. The page is a warm off-white and
   surfaces lift OUT of it toward white. */
html.light-mode{
  --bg:#F6F5F1;            /* page — warm, so white cards read as raised */
  --bg2:#FFFFFF;           /* raised surface */
  --bg3:#EFEEE9;           /* recessed: segmented controls, input wells */
  --bg4:#E6E4DE;           /* pressed / hover on a recessed control */
  --bg-card:#FFFFFF;
  --card-surface:#FFFFFF;
  --border:rgba(23,25,28,0.10);
  --border2:rgba(23,25,28,0.18);
  --tx1:#16181D;           /* headings, figures */
  --tx2:#4B5563;           /* body */
  /* Muted was #4B5563 — identical to body text, so nothing ever looked
     secondary. Descriptions and captions need to recede or every card reads
     as equally important. */
  --tx3:#8A8F98;
  --green:#16A34A;         /* darker than the dark-mode green: #22c55e on a
                              light background fails contrast at 12px */
  --green-dim:rgba(22,163,74,0.10);
  --red:#DC2626;
  --red-dim:rgba(220,38,38,0.09);
  --amber:#B45309;
  --coral-dim:rgba(238,101,75,0.10);
  --coral-border:rgba(238,101,75,0.30);
  --shield-gradient:linear-gradient(to bottom,rgba(246,245,241,0.97) 0%,rgba(246,245,241,0.92) 30%,rgba(246,245,241,0.65) 58%,rgba(246,245,241,0.20) 78%,transparent 100%);
  /* A hairline alone is too weak to separate white from off-white; the mock
     uses a soft lift. Dark mode keeps borders only — a shadow on black is
     invisible and just costs paint. */
  --card-shadow:0 1px 2px rgba(23,25,28,.04), 0 1px 8px rgba(23,25,28,.03);
}
:root{ --card-shadow:none }
html.light-mode .card,
html.light-mode .mkt-heatmap-card,
html.light-mode .oi-main-card,
html.light-mode .mks-card,
html.light-mode .mks-tbl-card,
html.light-mode .mkt-side-card{box-shadow:var(--card-shadow)}
html,body{height:100%}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--tx1);overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* ═══ TOP NAVBAR (pill style) ═══════════════════════════════════ */
/* ── Live ticker strip, above the header ──────────────────────────
   Height lives in ONE place (--tick-h) because #topbar and
   #header-shield both have to move down by exactly it. Hard-coding 32px
   in three rules is how these strips end up overlapping the nav on one
   breakpoint. The strip is display:none until data arrives (.on), so a
   failed fetch leaves no dead bar above the header.
   The track holds the item list TWICE and scrolls exactly -50%: at the
   end of the animation copy 2 sits where copy 1 began, so the loop has
   no visible jump. */
:root{--tick-h:32px}
#ng-tick{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  height:var(--tick-h);overflow:hidden;display:none;
  background:#0b0b0b;border-bottom:1px solid rgba(255,255,255,.07)}
/* Light mode toggles `.light-mode` on <html> (see toggleTheme), NOT a
   class on <body>. A `body.light` selector silently never matches, which
   left the strip on its dark background while --tx1 flipped to #1a1a1a —
   dark text on a dark bar, i.e. invisible prices. */
html.light-mode #ng-tick{background:#f4f4f5;border-bottom-color:rgba(0,0,0,.08)}
#ng-tick.on{display:block}
#ng-tick::before,#ng-tick::after{content:'';position:absolute;top:0;bottom:0;
  width:56px;z-index:2;pointer-events:none}
#ng-tick::before{left:0;background:linear-gradient(90deg,#0b0b0b,transparent)}
#ng-tick::after{right:0;background:linear-gradient(270deg,#0b0b0b,transparent)}
html.light-mode #ng-tick::before{background:linear-gradient(90deg,#f4f4f5,transparent)}
html.light-mode #ng-tick::after{background:linear-gradient(270deg,#f4f4f5,transparent)}
#ng-tick-track{display:flex;align-items:center;height:var(--tick-h);
  width:max-content;will-change:transform;animation:ngtick linear infinite}
#ng-tick:hover #ng-tick-track{animation-play-state:paused}
@keyframes ngtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ng-tk{display:inline-flex;align-items:baseline;gap:6px;padding:0 15px;
  white-space:nowrap;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;line-height:var(--tick-h)}
.ng-tk i{font-style:normal;color:var(--tx3,#8a8a8a);font-weight:700;letter-spacing:.03em}
.ng-tk s{text-decoration:none;color:var(--tx1,#e8e8e8);font-weight:700}
.ng-tk u{text-decoration:none;font-weight:700}
.ng-tk u.up{color:#30D158}
.ng-tk u.dn{color:#ff5c5c}
.ng-tk u.fl{color:var(--tx3,#8a8a8a)}
.ng-tk.idx i{color:#ee9a4b}
/* Explicit light-mode colours rather than relying on the --tx* variables
   alone: the strip has its own background, so it needs contrast pinned to
   THAT, not to the page's. #30D158 in particular is legible on black and
   washed out on #f4f4f5. */
html.light-mode .ng-tk i{color:#5b5b5b}
html.light-mode .ng-tk s{color:#111}
html.light-mode .ng-tk u.up{color:#128a3d}
html.light-mode .ng-tk u.dn{color:#c62828}
html.light-mode .ng-tk u.fl{color:#6b6b6b}
html.light-mode .ng-tk.idx i{color:#b96a12}
/* Motion is decorative; prices stay readable when stopped. */
@media(prefers-reduced-motion:reduce){#ng-tick-track{animation:none}}
@media(max-width:640px){:root{--tick-h:28px}.ng-tk{font-size:10.5px;padding:0 11px}}

/* OPAQUE, and it has to be. This was `transparent`, which only worked
   because a 320px blurred #header-shield sat underneath hiding whatever
   scrolled past. That shield was the haze washing out the sub-nav and the
   top of the first card, so it is gone — and the moment it goes, a
   transparent bar leaks content around the floating pill. Opaque background
   plus bottom padding does the same job with no blur and no glow. */
#topbar{
  position:fixed;top:var(--tick-h);left:0;right:0;z-index:1000;
  background:var(--bg);
  padding-top:14px;padding-bottom:10px;
}

#topbar .nav-pill{
  max-width:var(--shell);margin:0 auto;padding:0 20px;
  height:84px;
}
.nav-pill{
  display:flex;align-items:center;
  width:100%;gap:0;
  background:transparent;
  border:none;border-radius:0;padding:0;
}
/* Logo */
.nav-logo{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;flex-shrink:0;margin-right:24px;
}
.nav-logo-text{
  font-family:'Manrope',sans-serif;
  font-size:22px;font-weight:800;
  letter-spacing:0.04em;
}
.logo-neo{color:#EE654B}
.logo-greeks{color:var(--tx1)}
/* light mode overrides */
html.light-mode .logo-greeks{color:#4D5151}
/* Ticker strip */
.ticker-strip{
  display:flex;align-items:center;gap:0;flex:1;
}
.ticker-divider{width:1px;height:18px;background:var(--border);margin:0 14px;flex-shrink:0}
.ticker-active{
  display:flex;align-items:center;gap:8px;
  background:var(--coral);
  border-radius:100px;
  padding:6px 14px;
  cursor:pointer;flex-shrink:0;
}
.ticker-active .t-sym{font-size:11px;font-weight:700;color:rgba(255,255,255,0.75);letter-spacing:.06em}
.ticker-active .t-price{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#fff}
.ticker-active .t-arrow{font-size:13px;color:#fff}
.ticker-plain{
  display:flex;align-items:center;gap:8px;
  padding:6px 4px;cursor:pointer;
}
.ticker-plain .t-sym{font-size:11px;font-weight:600;color:var(--tx2);letter-spacing:.06em}
.ticker-plain .t-price{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--tx1)}
.ticker-plain .t-arrow{font-size:12px}
.t-arrow.up{color:var(--coral)}.t-arrow.dn{color:var(--red)}
/* Nav right */
.nav-right{display:flex;align-items:center;gap:8px;margin-left:16px;flex-shrink:0}
.status-pill{
  display:flex;align-items:center;gap:6px;
  border-radius:100px;padding:7px 16px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  transition:all .3s;
}
.status-pill.live{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:var(--green)}
.status-pill.offline{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:var(--red)}
.status-pill.connecting{background:rgba(238,101,75,.12);border:1px solid rgba(238,101,75,.3);color:var(--coral)}
.status-pill.gate{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.3);color:#94a3b8}
.status-dot{width:6px;height:6px;border-radius:50%}
.status-pill.live .status-dot{background:var(--green);animation:pgn 2s ease-in-out infinite}
.status-pill.offline .status-dot{background:var(--red)}
.status-pill.gate .status-dot{background:#94a3b8}
.status-pill.connecting .status-dot{background:var(--coral);animation:pgn .8s ease-in-out infinite}
@keyframes pgn{0%,100%{opacity:1}50%{opacity:.3}}
#conn-banner{
  display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;
  background:rgba(20,5,3,.95);border:1px solid rgba(239,68,68,.4);border-radius:12px;
  padding:12px 20px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--red);
  gap:10px;align-items:center;backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.6);white-space:nowrap;
}
#conn-banner.show{display:flex;}
#conn-banner .cb-icon{font-size:16px}
#conn-banner .cb-retry{margin-left:8px;color:var(--coral);cursor:pointer;text-decoration:underline;font-size:12px}
#conn-banner .cb-retry:hover{color:#fff}
#clock{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--tx2);display:flex;align-items:center;gap:6px}
#clock svg{width:16px;height:16px;opacity:.5}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(238,101,75,0.12);cursor:pointer;color:#ee654b;
  border:1px solid rgba(238,101,75,0.3);transition:all .15s;
}
.icon-btn:hover{background:rgba(238,101,75,0.22);color:#ee654b}
.icon-btn svg{width:18px;height:18px}

/* ═══ ALERTS DROPDOWN ════════════════════════════════════════════ */
.alerts-wrap{position:relative;}
.alerts-badge{
  position:absolute;top:4px;right:4px;
  width:8px;height:8px;border-radius:50%;
  background:var(--coral);border:2px solid var(--bg0);
  display:none;
}
.alerts-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;width:320px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s,transform .15s;z-index:999;
  overflow:hidden;
}
.alerts-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0);}
.alerts-dd-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
}
.alerts-dd-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);}
.alerts-dd-clear{font-size:11px;color:var(--coral);cursor:pointer;font-family:'IBM Plex Mono',monospace;}
.alerts-dd-body{max-height:320px;overflow-y:auto;}
.alert-dd-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.alert-dd-item:last-child{border-bottom:none;}
.alert-dd-item:hover{background:var(--bg3);}
.alert-dd-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.alert-dd-time{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--tx3);margin-bottom:2px;}
.alert-dd-msg{font-size:12px;color:var(--tx1);line-height:1.4;}
.alerts-empty{
  padding:32px 16px;text-align:center;
  font-size:13px;color:var(--tx3);
}
.alerts-empty-icon{font-size:28px;margin-bottom:8px;}

/* ═══ PROFILE DROPDOWN ═══════════════════════════════════════════ */
.profile-wrap{position:relative;}
.profile-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;min-width:200px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s,transform .15s;z-index:999;
  overflow:hidden;
}
.profile-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0);}
.profile-user{padding:12px 16px;}
.profile-user-name{font-size:13px;font-weight:600;color:var(--tx1);}
.profile-user-email{font-size:11px;color:var(--tx3);margin-top:2px;font-family:'IBM Plex Mono',monospace;}
.pd-plan{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 10px;}
.pd-plan-badge{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--coral);background:var(--coral-dim);border:1px solid var(--coral-border);border-radius:5px;padding:2px 7px;}
.pd-plan-upgrade{font-size:11px;color:var(--tx2);cursor:pointer;transition:color .15s;}
.pd-plan-upgrade:hover{color:var(--coral);}
.pd-divider{height:1px;background:var(--border);margin:0 0 4px;}
.pd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;font-size:13px;color:var(--tx2);
  cursor:pointer;transition:background .12s;
}
.pd-item:hover{background:var(--bg3);color:var(--tx1);}
.pd-item svg{width:15px;height:15px;flex-shrink:0;}
.pd-item.danger{color:#ef4444;}
.pd-item.danger:hover{background:rgba(239,68,68,.08);color:#ef4444;}

/* ═══ TAB NAV (floating pill) ═══════════════════════════════════ */
/* ═══ SYMBOL SELECTOR BAR ════════════════════════════════════ */

/* Opaque, for the same reason #topbar is. THREE fixed bands stack under the
   ticker — topbar, this, and #tab-nav — and all three were transparent,
   relying on the 320px blurred #header-shield behind them to hide whatever
   scrolled past. Making only #topbar opaque when that shield was removed
   fixed one band of three, which is why page content still showed through
   across the symbol pills and the tab row. */
#sym-bar{
  position:fixed;top:98px;left:0;right:0;z-index:995;
  background:var(--bg);
  padding:10px 0;
}
.sym-bar-inner{
  max-width:var(--shell);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
/* nowrap + horizontal-scroll so the chips never wrap to a 2nd row and
   collide with the fixed nav below (the header uses fixed top offsets). */
.sym-bar-left{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.sym-bar-left::-webkit-scrollbar{display:none}
.sym-bar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sym-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 16px;
  border-radius:100px;
  border:1px solid var(--border);
  background:var(--bg-card);
  cursor:pointer;
  transition:all .18s;
  user-select:none;
}
/* Unselected buttons carry no price, so their price/arrow/change spans are
   emptied. A flex `gap` still applies between EMPTY children, which left
   ~27px of phantom trailing space and pushed the label off-centre. Collapse
   them instead — :empty means no JS has to remember to toggle this back. */
.sym-btn .sb-price:empty,
.sym-btn .sb-arrow:empty,
.sym-btn .sb-chg:empty{display:none}
.sym-btn{
  flex-shrink:0;
}
.sym-btn:hover{border-color:var(--border2);background:var(--bg3)}
.sym-btn.active{background:var(--coral);border-color:var(--coral)}
.sb-sym{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:700;letter-spacing:.07em;
  color:var(--tx3);text-transform:uppercase;
}
.sym-btn.active .sb-sym{color:rgba(255,255,255,.8)}
.sb-price{
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;font-weight:600;color:var(--tx1);white-space:nowrap;
}
.sym-btn.active .sb-price{color:#fff}
.sb-arrow{display:none}
.sb-arrow.up{color:#22c55e}.sb-arrow.dn{color:var(--red)}
.sb-chg{font-size:10px;margin-left:4px;font-weight:600;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.sb-chg.up{color:#22c55e}.sb-chg.dn{color:var(--red)}
.sym-btn.active .sb-chg{color:rgba(255,255,255,.92)}
.sym-btn.active .sb-arrow{color:rgba(255,255,255,.9)}

/* Markets tab — Stock Analysis card */
.mkt-stock-picker{position:relative}
.mkt-stock-picker input{
  width:160px;padding:8px 14px;border-radius:100px;
  border:1px solid var(--border);background:var(--bg3);
  color:var(--tx1);font-family:'IBM Plex Mono',monospace;font-size:12px;
  outline:none;transition:all .18s;
}
.mkt-stock-picker input:focus{border-color:var(--coral);width:200px}
.mkt-stock-picker input::placeholder{color:var(--tx3)}
.mkt-stock-results{
  position:absolute;top:calc(100% + 6px);right:0;min-width:200px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:1200;overflow:hidden;display:none;
}
.mkt-stock-results.show{display:block}
.msr-item{padding:9px 16px;font-size:13px;color:var(--tx1);cursor:pointer;font-family:'IBM Plex Mono',monospace}
.msr-item:hover{background:var(--bg3)}
.msr-empty{padding:9px 16px;font-size:12px;color:var(--tx3)}
/* The shared heatmap card has no body padding (the sector heatmap fills edge
   to edge); the stock-analysis body needs its own so the stat tiles clear the
   header and the option chain isn't flush against the card sides. */
#mkt-stock-body{padding:16px 18px 18px}
.mkt-stock-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
/* Chart area — collapses to a slim note when intraday data isn't available,
   so there's no big blank gap above the chain. */
.mkt-chart-note{height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:11px;border:1px dashed var(--border);border-radius:12px;margin:4px 0 6px}
/* Option chain — Sensibull-style, aligned columns, ITM shading, OI magnitude bars */
.mkt-stock-chain-wrap{max-height:440px;overflow-y:auto;border:1px solid var(--border);border-radius:12px}
.mkt-stock-chain-wrap table{width:100%;border-collapse:collapse;table-layout:fixed;
  font-family:'IBM Plex Mono',monospace;font-size:12px}
.mkt-stock-chain-wrap th{color:var(--tx3);font-weight:700;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:9px 12px;position:sticky;top:0;background:var(--bg-card);
  border-bottom:1px solid var(--border);z-index:1}
.mkt-stock-chain-wrap td{padding:7px 12px;border-top:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msc-oi{position:relative}
.msc-oi .msc-bar{position:absolute;top:50%;transform:translateY(-50%);height:62%;border-radius:3px;opacity:.16;pointer-events:none}
.msc-oi .msc-bar.put{right:0;background:var(--red)}
.msc-oi .msc-bar.call{left:0;background:var(--green)}
.msc-oi .msc-txt{position:relative}
.msc-strike{text-align:center;font-weight:800;color:var(--tx1);background:var(--bg3)}
.msc-put-ltp{color:var(--red);text-align:right}
.msc-call-ltp{color:var(--green);text-align:left}
.msc-itm{background:rgba(148,163,184,.07)}
tr.msc-atm td{background:rgba(238,101,75,.12)!important}
tr.msc-atm .msc-strike{background:var(--coral);color:#fff}

/* The last of the three fixed bands. Its 30px bottom padding is part of the
   opaque area on purpose: that gap is what separates the header stack from
   the first card, and leaving it transparent would put a 30px window back
   for content to scroll through. */
#tab-nav{
  padding:10px 0 30px;
  position:fixed;top:154px;left:0;right:0;z-index:990;
  background:var(--bg);
}
.tab-nav-inner{max-width:var(--shell);margin:0 auto;padding:0 20px;}
#ann-bar{width:100%;display:flex;flex-direction:column;gap:8px}
.ann-item{width:100%}
.ann-inner{display:flex;align-items:flex-start;gap:10px;padding:11px 15px;
  border-radius:10px;font-size:13px;line-height:1.5;font-weight:600;
  border:1px solid rgba(238,101,75,.35);background:rgba(238,101,75,.07);color:var(--tx1)}
/* ⚠️ --tx1 is #ffffff and light mode never redefines it — this file overrides
   per-class instead of re-declaring the --tx* variables (see the note above
   the ticker colours). So in light mode the announcement was WHITE text on a
   near-white tinted panel: technically rendered, effectively unreadable.
   Pin it to black here rather than touching --tx1, which every other rule in
   the file already assumes is white. */
html.light-mode .ann-inner{color:#000}
.ann-dot{width:7px;height:7px;border-radius:50%;background:#ee654b;flex:0 0 auto;margin-top:6px}
.ann-item.warn .ann-inner{border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.08)}
.ann-item.warn .ann-dot{background:#f5a623}
.ann-item.alert .ann-inner{border-color:rgba(255,92,92,.5);background:rgba(255,92,92,.09)}
.ann-item.alert .ann-dot{background:#ff5c5c;animation:pgn 1.6s ease-in-out infinite}
#ev-bar{width:100%}
.ev-inner{display:flex;flex-wrap:wrap;gap:8px}
.ev-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border-radius:100px;font-size:12px;font-weight:600;line-height:1;
  border:1px solid var(--border);background:var(--bg-card);color:var(--tx2)}
.ev-chip .ev-when{font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 7px;border-radius:100px;
  background:rgba(255,255,255,.07);color:var(--tx3)}
.ev-chip.today .ev-when{background:rgba(238,101,75,.16);color:#ee654b}
.ev-chip.high{border-color:rgba(238,101,75,.45)}
.ev-chip.high .ev-t{color:var(--tx1)}
.ev-chip .ev-rg{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--tx3)}
/* ── Events: mobile button + modal ────────────────────────────────
   The button is display:none here and switched on inside the ≤768px block,
   so desktop keeps the inline chips untouched. */
#ev-mobile-btn{display:none;align-items:center;gap:9px;width:100%;
  padding:11px 14px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(238,101,75,.35);background:rgba(238,101,75,.07);
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tx1)}
#ev-mobile-btn:active{background:rgba(238,101,75,.14)}
.ev-mb-dot{width:7px;height:7px;border-radius:50%;background:#ee654b;flex:0 0 auto}
.ev-mb-n{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:700;padding:2px 9px;border-radius:100px;
  background:rgba(238,101,75,.18);color:#ee654b;letter-spacing:0}
.ev-modal{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center}
.ev-modal.on{display:flex !important}
.ev-modal-card{width:100%;max-width:560px;max-height:82vh;display:flex;
  flex-direction:column;background:var(--bg2);border:1px solid var(--border);
  border-radius:16px 16px 0 0;overflow:hidden}
@media(min-width:560px){
  .ev-modal{align-items:center}
  .ev-modal-card{border-radius:16px}
}
.ev-modal-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:14px 16px;border-bottom:1px solid var(--border);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx1)}
.ev-modal-x{margin-left:auto;width:30px;height:30px;line-height:1;
  border-radius:50%;border:1px solid var(--border);background:var(--bg3);
  color:var(--tx2);font-size:19px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0}
.ev-modal-x:active{background:var(--bg4);color:var(--tx1)}
/* The list scrolls, the header does not — with 8+ events the close button
   would otherwise scroll out of reach on a short screen. */
.ev-modal-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px 12px 16px}
.ev-row{display:flex;align-items:flex-start;gap:10px;padding:11px 10px;
  border-bottom:1px solid var(--border)}
.ev-row:last-child{border-bottom:none}
.ev-row-when{flex:0 0 auto;font-size:9px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:100px;margin-top:1px;
  background:rgba(255,255,255,.07);color:var(--tx3)}
.ev-row.today .ev-row-when{background:rgba(238,101,75,.16);color:#ee654b}
.ev-row-main{flex:1 1 auto;min-width:0}
.ev-row-t{font-size:13px;line-height:1.45;color:var(--tx1);font-weight:600}
.ev-row.high .ev-row-t{color:#ee654b}
.ev-row-meta{margin-top:3px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;color:var(--tx3)}
.ev-modal-empty{padding:24px 10px;text-align:center;font-size:12px;color:var(--tx3)}
#cas-bar{width:100%;border:1px solid var(--border);border-radius:12px;
  background:var(--bg-card);padding:12px 15px}
.cas-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cas-ttl{font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--tx2)}
.cas-win{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--tx3)}
.cas-state{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px}
.cas-state.building{background:rgba(245,166,35,.16);color:#f5a623}
.cas-state.final{background:rgba(0,200,120,.14);color:#00c878}
/* auto-fit: four across on desktop, two on a tablet, one on a phone, with no
   breakpoint arithmetic to keep in sync. */
.cas-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cas-cell{border:1px solid var(--border);border-radius:10px;padding:9px 12px;
  background:var(--bg3);min-width:0}
.cas-cell.building{border-color:rgba(245,166,35,.4)}
.cas-sym{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--tx3)}
.cas-val{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:17px;font-weight:800;color:var(--tx1);letter-spacing:.01em;
  margin-top:3px;white-space:nowrap}
.cas-sub{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;color:var(--tx3);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cas-note{margin-top:9px;font-size:10px;line-height:1.5;color:var(--tx3)}
.tab-pill{
  display:flex;align-items:center;position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  padding:7px;
  gap:3px;
  /* Clip rather than scroll, at every width. layoutTabs() (see the script
     near switchTab()) measures how many tabs actually fit and hides the
     rest behind #tab-more-wrap instead of letting them spill past the
     pill's edge with no visual cue that more tabs exist — which is what
     the old overflow-x:auto did here (mobile included; a silently-
     scrolling pill hides tabs just as badly on a phone, with even less
     width to hint that swiping would reveal more). */
  overflow:hidden;flex-wrap:nowrap;
}
.tab-pill::-webkit-scrollbar{display:none}
.tab{
  display:flex;align-items:center;justify-content:center;gap:8px;
  /* Natural (ungrown) content width by default - layoutTabs() briefly
     resets every tab to this before measuring, since deciding how many
     fit only gives a stable answer against natural widths. It then sets
     flex:1 0 auto inline on whichever tabs end up visible, so they grow
     to fill the pill's full width exactly like this rule used to (grow
     when there's room, never shrink below the label) - this base value
     is what a tab sits at only for that instant during measurement, and
     as a no-JS fallback. */
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:100px;
  font-size:16px;font-weight:600;color:var(--tx2);
  cursor:pointer;border:none;background:transparent;
  transition:all .18s;white-space:nowrap;
}
.tab:hover{color:var(--tx1);background:var(--bg3)}
.tab.active{background:var(--coral);color:#fff}
.tab svg{width:17px;height:17px;opacity:.7;flex-shrink:0}
.tab.active svg{opacity:1}
.tab-spacer{display:none}

/* ── Overflow ("more") menu — the tabs layoutTabs() couldn't fit ────── */
.tab-more-wrap{position:relative;flex:0 0 auto;display:none}
.tab-more-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border-radius:100px;
  border:1px solid rgba(238,101,75,.35);background:rgba(238,101,75,.12);
  color:var(--coral,#ee654b);cursor:pointer;
  transition:all .18s;
}
.tab-more-btn:hover,.tab-more-btn.on{
  color:#fff;background:var(--coral,#ee654b);border-color:var(--coral,#ee654b);
}
.tab-more-btn svg{width:16px;height:16px;transition:transform .18s}
.tab-more-btn.on svg{transform:rotate(180deg)}
/* Lit when the active tab itself is hidden inside the menu, so a reader
   scanning the pill can still tell where they are. */
.tab-more-btn.has-active{color:var(--coral)}
.tab-more-menu{
  /* position:fixed, not absolute: .tab-pill has overflow:hidden (that's
     the whole point of layoutTabs() - see its CSS comment), and an
     absolutely-positioned descendant of an overflow:hidden ancestor gets
     clipped to that ancestor's box the instant it extends past it, which
     a dropdown opening BELOW the pill always does. It opened, painted
     display:flex, and was invisible the entire time - fixed escapes that
     clipping since it positions against the viewport instead. top/right
     get set in px by toggleTabMore() right before this opens, from the
     button's real on-screen position (its parent no longer determines
     where this sits, so CSS alone can't place it). */
  display:none;position:fixed;z-index:995;
  min-width:200px;padding:6px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  flex-direction:column;gap:2px;
}
.tab-more-menu.on{display:flex}
.tab-more-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:9px;border:none;background:transparent;
  color:var(--tx2);font:inherit;font-size:14px;font-weight:600;
  text-align:left;cursor:pointer;white-space:nowrap;
}
.tab-more-item:hover{color:var(--tx1);background:var(--bg3)}
.tab-more-item.active{color:var(--coral);background:rgba(238,101,75,.1)}
.tab-more-item svg{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.dte-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--coral);
  border-radius:100px;padding:9px 20px;
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;font-weight:700;color:#fff;
  letter-spacing:.04em;flex-shrink:0;
  cursor:default;
}
.dte-pill svg{width:16px;height:16px;opacity:.8}
/* "Check IPO GMP here" — header cross-link, same coral as the DTE pill. */
.ipo-pill{display:inline-flex;align-items:center;gap:7px;background:var(--coral);color:#fff;
  border-radius:100px;padding:8px 16px;font-size:13px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;flex-shrink:0;margin-right:6px;
  box-shadow:0 0 0 1px var(--coral-border);transition:filter .15s,transform .15s}
.ipo-pill:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.ipo-pill svg{width:15px;height:15px}
.ipo-pill-short{display:none}
.ipo-bar{display:none}
@media(max-width:640px){
  /* No room in the phone header: hide the pill, show the bar below it. */
  .ipo-pill{display:none}
  .ipo-bar{display:block;width:max-content;max-width:var(--shell);
    margin:8px 0 2px calc((100% - var(--shell)) / 2);text-align:center;
    background:var(--coral);color:#fff;border-radius:100px;padding:6px 14px;
    font-size:11.5px;font-weight:700;text-decoration:none}
}
.date-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:100px;padding:9px 20px;
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:var(--tx2);
  cursor:pointer;flex-shrink:0;
  position:relative;
}
.date-pill select{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;
  border:none;background:transparent;
}
.sym-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:100px;padding:6px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;color:var(--tx2);
  cursor:pointer;flex-shrink:0;position:relative;
}
.sym-pill select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;border:none;background:transparent;}

/* ═══ PAGE ═══════════════════════════════════════════════════════ */
/* ⚠️ padding-top is MEASURED, not typed. Three fixed bands stack above the
   page (#topbar, #sym-bar, #tab-nav) and their combined height changes with
   any padding tweak to any one of them. This was an inline padding-top:240px
   and it silently went 8px short the moment #topbar gained bottom padding,
   clipping the top of the events strip. --page-top is set from the real
   measured bottom of #tab-nav by _ngSyncHeaderOffset(); the 250px fallback
   is only what applies before that first measurement. */
.page{padding:var(--page-top,262px) 20px 80px;max-width:var(--shell);margin:0 auto;display:flex;flex-direction:column;gap:14px}
.tab-panel{display:none}.tab-panel.active{display:contents}
#p-virtual.tab-panel.active{display:block}

/* ═══ CARDS ══════════════════════════════════════════════════════ */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  position:relative;overflow:hidden;
}

/* ═══ GRIDS ══════════════════════════════════════════════════════ */
.g-2-1{display:grid;grid-template-columns:2fr 1fr;gap:14px}
/* NOTE: `.solo` is vestigial — it is defined here but never applied by any JS.
   The Market Timeline card is now ALWAYS rendered (it shows a placeholder when
   the Intelligence Layer is down) so the single-column collapse never fires.
   Kept only so an older cached bundle that still sets the class degrades sanely. */
#dash-top-grid.solo{grid-template-columns:1fr}

/* ── Dashboard top row: 3 columns on wide screens ─────────────────
   AI Bias (2fr) · Market Timeline (1fr) · Current Market State (1fr).
   The state card used to sit full-width BELOW this grid; pulling it up
   puts it above the fold once the shell is wide enough to afford a
   third track. */
#dash-top-grid{grid-template-columns:2fr 1fr 1fr;align-items:start}
/* The state card is toggled with an inline style by intelInit(). When the
   Intelligence Layer is down it stays display:none — :has() then collapses
   the grid to two tracks so no empty third column is left behind. */
#dash-top-grid:has(#intel-state-card[style*="none"]){grid-template-columns:2fr 1fr}
/* Height is already fixed at 470px for every direct child of this grid — see
   `#dash-top-grid > .card` in the Intelligence Layer block below. Do NOT add a
   competing max-height here; the state card just needs the same internal
   flex/scroll treatment the timeline card already has. */
#intel-state-card{display:flex;flex-direction:column;overflow:hidden}
#intel-state-card .intel-head{flex:0 0 auto}
#intel-state-card .intel-state-row,
#intel-state-card .intel-evidence,
#intel-state-card .intel-note{flex:0 0 auto}
#intel-state-card .intel-evidence{overflow-y:auto;min-height:0;flex:1 1 auto}
/* In a ~380px rail the side-by-side regime/confidence split is too cramped,
   so stack it and left-align the confidence block. */
#dash-top-grid #intel-state-card .intel-state-row{flex-direction:column;gap:10px}
/* The base rules size these for a ROW: .intel-state-main is `flex:1 1 260px`
   and .intel-state-conf grew to fill. Once the row flips to column those
   same values become a 260px MINIMUM HEIGHT plus a greedy grow — which is
   the block of dead space between the description and DEFINITION AGREEMENT.
   In column direction both must size to their content; the card still
   stretches to the grid row, but the slack now collects at the bottom under
   the evidence chips instead of punching a hole through the middle. */
#dash-top-grid #intel-state-card .intel-state-main{flex:0 0 auto;width:100%}
#dash-top-grid #intel-state-card .intel-state-conf{flex:0 0 auto;text-align:left;width:100%}

/* Below 1500px there isn't room for three tracks: fall back to the original
   2-column row and drop the state card to its own full-width row beneath,
   which is exactly where it used to live. */
@media(max-width:1500px){
  #dash-top-grid,
  #dash-top-grid:has(#intel-state-card[style*="none"]){grid-template-columns:2fr 1fr}
  /* Back to its own full-width row, where it lived before — and released from
     the grid's fixed 470px so it sizes to its content again. */
  #dash-top-grid > #intel-state-card{grid-column:1/-1;height:auto;overflow:visible}
  #dash-top-grid #intel-state-card .intel-state-row{flex-direction:row;gap:16px}
  #dash-top-grid #intel-state-card .intel-state-conf{flex:0 0 170px;text-align:right;width:auto}
}
/* The pre-existing 1100px rule targets `.g-2-1` (specificity 0,1,0) which the
   `#dash-top-grid` id selector above (1,0,0) would otherwise beat, leaving the
   dashboard stuck at two columns on tablet and mobile. Restate it by id. */
@media(max-width:1100px){
  #dash-top-grid,
  #dash-top-grid:has(#intel-state-card[style*="none"]){grid-template-columns:1fr}
  #dash-top-grid > .card{height:auto;overflow:visible}
}
/* ═══ MARKETS: CANDLESTICK CHART + DRAWING TOOLS ═════════════════
   The chart itself is TradingView Lightweight Charts (series only — the free
   build has NO drawing tools). Drawings are rendered by us onto an overlay
   canvas that sits on top of the chart and is kept in sync with the chart's
   coordinate system. See _mktChart* in the script block. */
/* ── Range Watch, event calendar and market-context rules ─────────
   ⚠️ Collateral damage when the chart CSS was removed by LINE RANGE:
   these lived interleaved with it, so the cut took them too and Range
   Watch rendered as unstyled stacked text in production. Restored by
   filtering the original block on SELECTOR with a brace-depth walker —
   a naive chunk split orphaned three @media closers and broke every
   rule after it, which is what flattened the screener sub-nav. */
/* ═══ EXPECTED CLOSE ══════════════════════════════════════════════ */
.ec-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ec-title{font-size:15px;font-weight:800;letter-spacing:.2px}
.ec-live{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.09em;color:var(--amber,#f5a623);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);border-radius:100px;padding:3px 10px}
.ec-live i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:ecpulse 1.6s infinite}
@keyframes ecpulse{0%,100%{opacity:1}50%{opacity:.3}}
.ec-body{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.ec-side{background:var(--bg3);border-radius:12px;padding:14px 16px}
.ec-lbl{font-size:9px;font-weight:700;letter-spacing:.07em;color:var(--tx3);text-transform:uppercase}
.ec-tag{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
.ec-val{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;color:var(--tx1);margin-top:6px;line-height:1.1}
.ec-val.ec-frozen{color:var(--tx2)}
.ec-gap{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;margin-top:5px}
.ec-gap.up{color:var(--green)}
.ec-gap.dn{color:var(--red)}
.ec-arrow{font-size:20px;color:var(--tx3)}
.ec-foot{font-size:10px;color:var(--tx3);line-height:1.6;margin-top:12px}
@media(max-width:640px){
  .ec-body{grid-template-columns:1fr}
  .ec-arrow{transform:rotate(90deg);justify-self:center}
}

/* ═══ RANGE WATCH ═════════════════════════════════════════════════ */
.rw-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.rw-title{font-size:15px;font-weight:800;letter-spacing:.2px}
.rw-meta{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3)}
.rw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.rw-cell{background:var(--bg3);border-radius:12px;padding:12px 14px}
.rw-lbl{font-size:9px;font-weight:700;letter-spacing:.07em;color:var(--tx3);text-transform:uppercase}
.rw-tag{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
.rw-val{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:700;color:var(--tx1);margin-top:4px}
.rw-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx2);margin-top:3px}
.rw-branches{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.rw-branch{background:var(--bg3);border-radius:12px;padding:12px 14px}
.rw-branch-title{font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--tx2);margin-bottom:6px}
.rw-branch-body{font-size:11.5px;line-height:1.65;color:var(--tx2)}
.rw-branch-body strong{color:var(--tx1)}
.rw-prov{font-size:9.5px;color:var(--tx3)}
.rw-oi-note{font-size:11px;color:var(--tx2);line-height:1.6;padding:2px 2px 0}
.rw-foot{font-size:9.5px;color:var(--tx3);margin-top:8px}
.rw-lv{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap}
.rw-lv-k{font-size:10px;font-weight:800;color:var(--tx3);width:10px}
.rw-lv-v{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700;color:var(--tx1)}
.rw-st{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3)}
.rw-st.hold{color:var(--tx2)}
.rw-st.up{color:var(--green);font-weight:700}
.rw-st.dn{color:var(--red);font-weight:700}
.rw-cell.brk-up{box-shadow:inset 3px 0 0 var(--green)}
.rw-cell.brk-dn{box-shadow:inset 3px 0 0 var(--red)}
.rw-tl{display:flex;flex-direction:column;gap:4px;margin:-4px 0 12px;font-size:11.5px}
.rw-tl:empty{display:none}
.rw-tl-h{font-size:9px;font-weight:700;letter-spacing:.07em;color:var(--tx3);text-transform:uppercase;margin-bottom:2px}
.rw-ev{display:flex;gap:10px;align-items:baseline;color:var(--tx2);line-height:1.5}
.rw-ev-t{font-family:'IBM Plex Mono',monospace;color:var(--tx3);min-width:40px}
.rw-ev-a.up{color:var(--green);font-weight:700} .rw-ev-a.dn{color:var(--red);font-weight:700}
.rw-ev-n{font-family:'IBM Plex Mono',monospace;color:var(--tx3)}
.rw-rangeline{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11.5px;color:var(--tx2);
  background:var(--bg3);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.rw-rangeline b{color:var(--tx1);font-weight:700}
.rw-or-st{font-weight:700}
.rw-or-st.up{color:var(--green)} .rw-or-st.dn{color:var(--red)}
#rw-break-cell.brk-live .rw-val{color:var(--amber,#f5a623)}
#rw-break-cell.brk-conf .rw-val{color:var(--green)}
#rw-break-cell.brk-unconf .rw-val{color:var(--red)}
@media(max-width:900px){.rw-grid{grid-template-columns:1fr 1fr}.rw-branches{grid-template-columns:1fr}}

/* Market Context line under a stat tile. Deliberately quiet — the number is
   the answer, the context is the reassurance that the answer means something. */
.ctx-line{margin-top:6px;font-size:9px;line-height:1.45;color:var(--tx3);
  font-family:'IBM Plex Mono',monospace}
.ctx-line strong{color:var(--tx2);font-weight:700}
.ctx-line.hi strong{color:var(--amber,#f5a623)}
.ctx-line.lo strong{color:var(--amber,#f5a623)}

/* ═══ MARKETS — EQUITY SCREENER ═══════════════════════════════════
   Replaces the candlestick chart, which was removed along with its drawing
   and indicator layer. The old .mkc-* rules went with it; nothing here
   depends on Lightweight Charts, so the CDN tag is gone too. */
.mks-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mks-seg{display:flex;gap:3px;background:var(--bg3);border-radius:100px;padding:3px}
.mks-seg-b{border:none;background:transparent;cursor:pointer;border-radius:100px;
  padding:7px 18px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;
  color:var(--tx3)}
.mks-seg-b.on{background:var(--coral,#ee654b);color:#fff}
/* flex:1 with min-width:0 — the search must absorb the leftover width without
   forcing the row to wrap on a laptop. */
.mks-search{flex:1 1 260px;min-width:0;max-width:680px;position:relative}
.mks-search-ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--tx3);font-size:15px;pointer-events:none}
.mks-search input{width:100%;box-sizing:border-box;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;padding:10px 34px 10px 14px;
  font-family:'Manrope',sans-serif;font-size:13px;color:var(--tx1);outline:none}
.mks-search input:focus{border-color:var(--coral,#ee654b)}
.mks-screener{margin-left:auto;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;
  border-radius:10px;padding:10px 16px;font-family:'Manrope',sans-serif;
  font-size:12px;font-weight:700;color:var(--tx2);white-space:nowrap}
.mks-screener:hover{color:var(--tx1);border-color:var(--border2)}

.mks-card{padding:16px 18px;margin-bottom:16px}
.mks-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px}
.mks-h-title{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx2)}
.mks-h-ico{width:15px;height:15px;flex:0 0 auto}
.mks-h-hint{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;
  color:#ee654b}
.mks-h-hint b{font-weight:800}
.mks-viewall{border:1px solid var(--border);background:transparent;cursor:pointer;
  border-radius:100px;padding:5px 13px;font-size:11px;font-weight:700;color:var(--tx3)}
.mks-viewall:hover{color:var(--tx1);border-color:var(--border2)}
.mks-combine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:16px;border:1px solid rgba(238,101,75,.35);
  border-radius:12px;background:rgba(238,101,75,.07)}
.mks-combine-lbl{font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#ee654b;flex:0 0 auto}
.mks-combine .mks-viewall{border-color:#ee654b;background:#ee654b;color:#fff;
  font-weight:800;padding:7px 16px}
.mks-combine .mks-viewall:hover{background:#d4573f;border-color:#d4573f;color:#fff}
/* Custom combo, NOT a native <select> — an open <select>'s dropdown is
   rendered by the OS, outside the page's own dark theme, which is why
   the picked-item text went invisible (white text on the OS's own white
   list). This reuses the same panel look as the stock search results
   (.mks-sresults/.mks-sr) so it actually matches the rest of the UI. */
.mks-cmb{position:relative;flex:0 0 auto}
.mks-cmb-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bg-card);
  border:1px solid rgba(238,101,75,.3);border-radius:8px;padding:8px 12px;font-size:12.5px;
  color:var(--tx1);cursor:pointer;max-width:180px;font-family:inherit}
.mks-cmb-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mks-cmb-btn:hover{border-color:#ee654b}
.mks-cmb-chev{width:13px;height:13px;flex:0 0 auto;color:var(--tx3);transition:transform .15s}
.mks-cmb.on .mks-cmb-chev{transform:rotate(180deg)}
.mks-cmb-list{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  min-width:190px;max-height:260px;overflow:auto;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(16,18,24,.28)}
.mks-cmb.on .mks-cmb-list{display:block}
.mks-cmb-item{padding:9px 12px;cursor:pointer;font-size:13px;color:var(--tx1);white-space:nowrap}
.mks-cmb-item:hover,.mks-cmb-item.sel{background:var(--bg)}
@media(max-width:640px){.mks-cmb{flex:1 1 140px}.mks-cmb-btn{max-width:none;width:100%}}
/* auto-fit rather than a hard 6, which would force a horizontal scrollbar on
   a 1280px laptop. 250px is chosen so a 1700px desktop lands on exactly the
   6x2 of the mock — 215px gave 7 columns and a ragged second row — while a
   laptop degrades to a clean 4x3. */
.mks-grid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mks-tile{position:relative;display:flex;flex-direction:column;gap:8px;
  text-align:left;padding:15px 34px 15px 16px;border-radius:12px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-card);font:inherit;color:inherit}
.mks-tile:hover:not(:disabled){border-color:var(--sc)}
/* Disabled means "no data yet", not "broken", so it keeps full contrast —
   greying it out would read as a rendering failure. */
.mks-tile:disabled{cursor:default}
.mks-tile-top{display:flex;align-items:center;gap:8px}
/* --sc is set per tile inline; icon, count and hover border all read from it
   so a scanner's colour is defined in exactly one place. */
.mks-ico{width:19px;height:19px;flex:0 0 auto;color:var(--sc)}
.mks-name{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:var(--tx1)}
.mks-info{width:13px;height:13px;flex:0 0 auto;border:1px solid var(--border2);
  border-radius:50%;font-size:9px;font-style:italic;font-weight:700;line-height:12px;
  text-align:center;color:var(--tx3);cursor:help}
.mks-count{display:flex;align-items:baseline;gap:7px}
/* Sans, not mono. The mock's figures are proportional — JetBrains Mono made
   them read as code rather than as headline numbers. */
.mks-count b{font-family:'Manrope',sans-serif;font-size:27px;font-weight:800;
  line-height:1;color:var(--sc);letter-spacing:-.02em}
.mks-count .mks-stocks{font-size:12px;color:var(--tx3)}
.mks-desc{font-size:12px;line-height:1.45;color:var(--tx3)}
/* Vertically centred, as in the mock — it was pinned to the top corner. */
.mks-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tx3)}

/* ── Options segment panel — option CONTRACTS, not stocks ─────────── */
/* ══ Dealer GEX layout ══════════════════════════════════════════════
   Cards beside the chart on desktop. These were inline style="" on the
   elements, which is why the phone rules below could never take effect -
   an inline style outranks any stylesheet selector, media query or not. */
.gex-layout{display:grid;grid-template-columns:210px 1fr;gap:16px;
  margin-bottom:16px;align-items:start}
#gex-cards{display:flex;flex-direction:column;gap:10px}

.mks-opt-head{display:flex;align-items:center;justify-content:flex-start;
  gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mks-opt-head-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The filters moved INTO the left group beside the title. Nothing now
   sits on the right, so the head no longer spreads its children to the
   card's two edges. */

.mks-opt-title{font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;color:var(--tx1)}
.mks-opt-filters{display:flex;align-items:center;gap:8px}
.mks-opt-filters select,.mks-opt-filters input{background:var(--bg-card);
  border:1px solid var(--border);border-radius:8px;color:var(--tx1);
  font:inherit;font-size:12px;padding:7px 10px}
.mks-opt-filters input{width:180px}
@media(max-width:620px){.mks-opt-filters input{width:140px}}
.mks-opt-meta{font-size:11px;color:var(--tx3);margin-bottom:10px}
.mks-opt-list{display:flex;flex-direction:column;gap:8px}
.mks-opt-row{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr .8fr .8fr 1fr;
  gap:10px;align-items:center;padding:12px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-card)}
.mks-opt-row-id{display:flex;flex-direction:column;gap:2px}
.mks-opt-row-sym{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:var(--tx1)}
.mks-opt-row-k{font-size:11px;color:var(--tx3)}
.mks-opt-tp{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:20px;border-radius:5px;font-size:10px;font-weight:800}
.mks-opt-tp.ce{background:#22c55e22;color:#22c55e}
.mks-opt-tp.pe{background:#ef444422;color:#ef4444}
.mks-opt-col{display:flex;flex-direction:column;gap:1px}
.mks-opt-col b{font-size:13px;color:var(--tx1);font-weight:700}
.mks-opt-col span{font-size:10.5px;color:var(--tx3)}
.mks-opt-sc{font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em}
.mks-opt-empty{padding:24px;text-align:center;color:var(--tx3);font-size:12.5px}
@media (max-width:900px){
  .mks-opt-row{grid-template-columns:1fr 1fr;gap:8px}
}

.mks-tables{display:grid;gap:16px;margin-bottom:16px;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 260px}
.mks-tbl-card{padding:16px 18px;min-width:0}
.mks-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mks-tbl{width:100%;border-collapse:collapse;font-size:12px}
.mks-tbl th{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx3);text-align:left;padding:0 10px 9px 0;white-space:nowrap}
.mks-tbl th.r,.mks-tbl td.r{text-align:right;padding-right:0;padding-left:10px}
/* Text columns. The right-aligned cell before one of these ends flush at its
   own column edge (padding-right:0), so a left-aligned neighbour starting at
   padding-left:0 touches it - "-5.33%2026-06-30" with no gap. 18px of left
   padding is the separation the right-aligned columns get from each other. */
.mks-tbl th.l,.mks-tbl td.l{text-align:left;padding-left:18px;padding-right:10px}
.mks-tbl td.l{white-space:normal}
.mks-tbl td{padding:9px 10px 9px 0;border-top:1px solid var(--border);
  color:var(--tx2);white-space:nowrap}
.mks-sym{font-weight:700;color:var(--tx1)}
.mks-up{color:#16a34a}
.mks-dn{color:#ef4444}
.mks-tbl-foot{padding-top:10px;font-size:11px;color:var(--tx3)}
.mks-empty{padding:26px 0 !important;text-align:center;color:var(--tx3);
  border-top:1px solid var(--border);font-size:12px}

/* ── COMMODITIES ─────────────────────────────────────────────────
   Only the pieces the screener has no equivalent for. Everything shared
   (sub-nav, card chrome, section heads, tables) reuses .mks-*. */
.cmd-ov-grid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cmd-ov{border:1px solid var(--border);border-radius:12px;
  background:var(--bg-card);padding:13px 14px}
.cmd-ov-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.cmd-ov-ico{width:22px;height:22px;flex:0 0 auto;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.cmd-ov-name{font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tx2)}
.cmd-ov-px{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cmd-ov-px b{font-family:'Manrope',sans-serif;font-size:21px;font-weight:800;
  color:var(--tx1);letter-spacing:-.02em;line-height:1}
.cmd-ov-pct{font-size:12px;font-weight:700}
.cmd-ov-unit{font-size:10px;color:var(--tx3);margin-top:3px}
.cmd-ov-rows{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.cmd-ov-r{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;font-size:11px;color:var(--tx3)}
.cmd-ov-r b{font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  font-weight:600;color:var(--tx2)}
.cmd-pill{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:100px;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cmd-pill.up{background:var(--green-dim);color:var(--green)}
.cmd-pill.dn{background:var(--red-dim);color:var(--red)}
.cmd-pill.fl{background:var(--bg3);color:var(--tx3)}

/* Global Updates (commodity tab) */
.gu-meta{font-size:11px;color:var(--tx3);font-family:'IBM Plex Mono',monospace}
.gu-list{display:flex;flex-direction:column}
.gu-item{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 2px;
  border-bottom:1px solid var(--border)}
.gu-item:last-child{border-bottom:0}
.gu-imp{grid-row:span 3;align-self:start;font-size:9px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 8px;border-radius:100px;white-space:nowrap;
  border:1px solid var(--border);color:var(--tx2)}
.gu-imp.high{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent);
  background:color-mix(in srgb,var(--red) 10%,transparent)}
.gu-imp.medium{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);
  background:color-mix(in srgb,var(--amber) 10%,transparent)}
.gu-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gu-chip{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;
  background:var(--bg3);color:var(--tx2);font-family:'IBM Plex Mono',monospace}
.gu-chip.up{color:var(--green)} .gu-chip.down{color:var(--red)} .gu-chip.mixed{color:var(--amber)}
.gu-when{font-size:10px;color:var(--tx3);margin-left:auto;white-space:nowrap}
.gu-title{font-size:13px;font-weight:700;color:var(--tx);line-height:1.4;text-decoration:none}
.gu-title:hover{text-decoration:underline}
.gu-why{font-size:12px;color:var(--tx2);line-height:1.5}
.gu-src{color:var(--tx3);font-weight:600}
.gu-note{font-size:10.5px;color:var(--tx3);margin-top:10px;line-height:1.5}
@media(max-width:600px){
  .gu-item{grid-template-columns:1fr}
  .gu-imp{grid-row:auto;justify-self:start}
  .gu-when{margin-left:0}
}
.cmd-ins-grid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cmd-ins{border:1px solid var(--border);border-radius:12px;
  background:var(--bg-card);padding:13px 14px;min-height:118px}
.cmd-ins-top{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.cmd-ins-ico{width:15px;height:15px;flex:0 0 auto;color:var(--tx3)}
.cmd-ins-t{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx2)}
.cmd-ins-need{font-size:11px;line-height:1.5;color:var(--tx3)}
.cmd-ins-need b{color:var(--tx2);font-weight:700}


.cmd-opp-seg,.cmd-perf-seg{margin-bottom:12px;flex-wrap:wrap}
.cmd-opp-seg .mks-seg-b{font-size:11px;padding:6px 12px}
.cmd-perf-seg .mks-seg-b{font-size:11px;padding:5px 13px}

.cmd-perf-r{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 2px;border-bottom:1px solid var(--border);font-size:12px}
.cmd-perf-r:last-child{border-bottom:none}
.cmd-perf-r .n{font-weight:700;color:var(--tx1)}
@media(max-width:1100px){  }
@media(max-width:768px){
  .cmd-ov-grid,.cmd-ins-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cmd-ov,.cmd-ins{padding:11px 12px}
  .cmd-ov-px b{font-size:18px}
}

.mks-flowrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  align-items:start;margin-bottom:16px}
.mks-flowrow .intel-card,.mks-flowrow .mkt-breadth{margin-bottom:0}
.mks-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:14px 4px 0;border-top:1px solid var(--border);
  font-size:11px;color:var(--tx3);line-height:1.6}
.mks-updated{font-family:'JetBrains Mono',ui-monospace,monospace;white-space:nowrap}

@media(max-width:1100px){
  .mks-tables{grid-template-columns:1fr}
  .mks-flowrow{grid-template-columns:1fr}
}
@media(max-width:768px){
  .mks-bar{gap:8px}
  .mks-search{flex:1 1 100%;order:5}
  .mks-screener{order:6}
  .mks-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .mks-tile{padding:11px 12px}
  .mks-count b{font-size:21px}
  .mks-card,.mks-tbl-card{padding:13px 12px}
}

/* Compact PCR gauge living in the Raw Analytics row — sized like a stat-tile. */
.pcr-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.pcr-tile .gauge-wrap{width:118px;height:70px;margin:6px auto 4px}
.pcr-tile .gauge-num{font-size:23px}
.pcr-tile .sent-pill{margin-top:4px;font-size:9px;padding:2px 8px}
/* Prev/Gap/Open stats, relocated under Day Low & High Range in the Bias card. */
.bias-session-stats{display:flex;gap:22px;margin-top:10px;flex-wrap:wrap}
.bias-session-stats .pcr-stat{text-align:left;flex:0 0 auto}
.g-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.g-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.g-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1100px){.g-2-1{grid-template-columns:1fr}.g-6{grid-template-columns:repeat(3,1fr)}.g-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.g-6{grid-template-columns:repeat(2,1fr)}.g-5{grid-template-columns:repeat(2,1fr)}.g-2{grid-template-columns:1fr}}
/* Progressive index-chip compacting for tablet/narrow-desktop so the 3
   chips + DTE/date stay on one fixed-height row (see nowrap on
   .sym-bar-left). Below 768px the mobile block restacks them into a grid. */
@media(max-width:1024px){
  .sym-btn{padding:8px 12px;gap:6px}
  .sb-price{font-size:14px}
  .sb-sym{font-size:11px}
  .sb-chg{font-size:9px;margin-left:3px}
  .sb-arrow{font-size:13px}
}

/* ═══ MARKET REGIME ══════════════════════════════════════════════ */
.regime-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.regime-tag{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx1);margin-bottom:10px}
.regime-name-row{display:flex;align-items:baseline;gap:14px}
/* Direction sits INLINE after the structure, reading as one phrase:
   "Range-bound – Bearish". Down from 48-78px, where it was the largest thing
   on the page and a descriptive read looked like a call to act. Same value,
   same colour, no longer the headline on its own. */
.regime-name{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--tx1)}
/* #bias-name ONLY. `.regime-name` is also worn by #r-name in the rule-read
   cell below, so a class-level ::before put a stray dash in front of SIDEWAYS
   there too. */
#bias-name:not(:empty)::before{content:'\2013\00a0';color:var(--tx3);font-weight:500}
/* Structure descriptor is now the headline. */
.regime-sub{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--tx1)}
.bias-basis{font-size:11.5px;line-height:1.45;color:var(--tx3);margin-top:6px;max-width:78ch}
.conf-box{
  background:var(--coral);border-radius:12px;padding:10px 16px;
  text-align:right;flex-shrink:0;
}
.conf-lbl{font-size:14px;font-weight:700;color:var(--tx2);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.conf-val{font-family:'IBM Plex Mono',monospace;font-size:27px;font-weight:700;color:var(--tx1)}
.regime-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid var(--border);padding-top:14px}
.meta-lbl{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx1);margin-bottom:8px}
.meta-val{font-family:'IBM Plex Mono',monospace;font-size:27px;font-weight:600;color:var(--tx1)}
.meta-extra{font-size:18px;margin-top:3px}

/* ═══ MARKET STRUCTURE (dashboard hero) ═════════════════════════ */
.bias-card{background:linear-gradient(165deg,var(--bg-card),var(--bg2))}
.bias-structure{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--tx2);margin-top:5px}
.bias-reasons{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.bias-reason-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx2);background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:6px 13px 6px 10px;line-height:1.3}
.bias-reason-chip .tick{color:var(--green);font-weight:800}
.bias-quick{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.bias-quick-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.risk-low{color:var(--green)!important}.risk-medium{color:var(--amber)!important}.risk-high{color:var(--red)!important}
.bias-skel{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.bias-skel .ai-skel-bar:first-child{width:40%;height:20px}
.bias-skel .ai-skel-bar{width:100%}

/* ═══ MEANING TILES (Trend / OI Bias / Institutional / Volatility / Risk / Day Type) ═══ */
.tile-sub{font-size:11px;color:var(--tx3);margin-top:6px;line-height:1.4}
.section-caption{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin:4px 2px -2px}

/* ═══ PCR GAUGE ══════════════════════════════════════════════════ */
.pcr-card{display:flex;flex-direction:column}
.pcr-title{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx1);margin-bottom:10px}
.gauge-wrap{position:relative;width:132px;height:78px;margin:0 auto}
.gauge-wrap svg{width:100%;height:100%}
.gauge-center{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4px;gap:1px}
.gauge-num{font-family:'IBM Plex Mono',monospace;font-size:27px;font-weight:600;color:var(--tx1);line-height:1}
.gauge-sub{font-size:17px;color:var(--tx1)}
.sent-pill{
  align-self:center;margin-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 18px;border-radius:100px;
  background:var(--bg3);border:1px solid var(--border);color:var(--tx2);
}
.sent-pill.bull{background:var(--green-dim);border-color:rgba(34,197,94,.3);color:var(--green)}
.sent-pill.bear{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red)}
.pcr-stats-row{display:flex;justify-content:space-between;width:100%;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.pcr-stat{text-align:center;flex:1}
.pcr-stat-lbl{font-size:9px;color:var(--tx3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.pcr-stat-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;color:var(--tx1)}
.pcr-stat-val.up{color:var(--green)}
.pcr-stat-val.dn{color:var(--red)}

/* ═══ STAT TILES ═════════════════════════════════════════════════ */
.stat-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:16px 18px}
.stat-tile:hover{border-color:var(--border2)}
.stat-lbl{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);margin-bottom:10px}
.stat-val{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:600;color:var(--tx1);line-height:1}
.stat-val.coral{color:var(--coral)}.stat-val.green{color:var(--green)}.stat-val.red{color:var(--red)}
.stat-sub{font-size:11px;color:var(--tx2);margin-top:6px}

/* ═══ WALLS ══════════════════════════════════════════════════════ */
.wall-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.wall-title{font-size:24px;font-weight:700;color:var(--tx1)}
.wall-badge{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:100px}
.wall-badge.puts{background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.wall-badge.calls{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.wall-rows{display:flex;flex-direction:column;gap:14px}
.wall-row{display:flex;flex-direction:column;gap:5px}
.wall-row-top{display:flex;align-items:center;justify-content:space-between}
.wall-strike{font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--tx1)}
.wall-oi{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;color:var(--tx1)}
.wall-bar-wrap{width:100%;background:var(--bg3);border-radius:100px;height:7px;overflow:hidden}
.wall-bar{height:100%;border-radius:100px;transition:width .5s ease}
.wall-bar.pe{background:var(--green)}.wall-bar.ce{background:var(--red)}

/* ═══ CHAIN TABLE ════════════════════════════════════════════════ */
.chain-wrap{overflow-x:auto}
table.chain{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:18px}
table.chain th{padding:9px 12px;text-align:center;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx1);background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap}
table.chain td{padding:9px 12px;text-align:center;border-bottom:1px solid rgba(255,255,255,.04);color:var(--tx2)}
table.chain tr:hover td{background:rgba(255,255,255,.02)}
table.chain .atm-r td{background:rgba(238,101,75,.06)!important;color:var(--tx1)!important}
.ce-c{color:#ef4444}.pe-c{color:#22c55e}.k-c{color:var(--tx1);font-weight:800;font-size:13px}
.mbar{height:4px;border-radius:2px;margin:2px 0 0}
.mbar.ce{background:#ef4444;margin-left:0}.mbar.pe{background:#22c55e;margin-left:auto}

/* ═══ ALERTS ═════════════════════════════════════════════════════ */
.alert-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:12px}
.alert-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.alert-time{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--tx1);margin-bottom:3px}
.alert-msg{font-size:20px;color:var(--tx1);line-height:1.45}
.empty{text-align:center;padding:40px;color:var(--tx2);font-size:20px}

/* ═══ VIRTUAL ════════════════════════════════════════════════════ */
.vt-lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px;display:block}
.vt-inp{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--tx1);font-family:'IBM Plex Mono',monospace;font-size:13px;outline:none;transition:border-color .15s}
.vt-inp:focus{border-color:var(--coral)}
.btn-coral{background:var(--coral);color:#fff;border:none;border-radius:100px;padding:8px 20px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.btn-coral:hover{box-shadow:0 0 18px rgba(238,101,75,.4);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--tx2);border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-ghost:hover{border-color:var(--border2);color:var(--tx1)}
.btn-exit{background:transparent;color:var(--red);border:1px solid var(--red);border-radius:100px;padding:3px 10px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .15s}
.btn-exit:hover{background:var(--red);color:#fff}
table.pos-tbl{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:13px}
table.pos-tbl th{padding:6px 10px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--border);white-space:nowrap}
table.pos-tbl td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--tx2);vertical-align:middle}
table.pos-tbl tr:last-child td{border-bottom:none}

/* Virtual sub-tabs */
.vt-subtab-bar{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:0}
.vt-subtab{text-transform:uppercase;letter-spacing:.06em;background:transparent;border:none;padding:8px 14px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;color:var(--tx3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .18s}
.vt-subtab:hover{color:var(--tx1)}
.vt-subtab.active{color:var(--coral);border-bottom-color:var(--coral)}
.vt-section{display:none}
/* Reports */
.vtr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.vtr-kpi{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.vtr-kpi .k{font-size:10px;font-weight:700;color:var(--tx3);letter-spacing:.07em;text-transform:uppercase}
.vtr-kpi .v{font-size:22px;font-weight:800;margin-top:6px;font-family:'IBM Plex Mono',monospace}
.vtr-kpi .s{font-size:11px;color:var(--tx3);margin-top:2px}
.vtr-bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px}
.vtr-bar{flex:1;min-width:4px;border-radius:2px 2px 0 0;position:relative}
.vtr-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--tx3);margin-top:6px;font-family:'IBM Plex Mono',monospace}
.vt-section.active{display:block}

/* Order form */
.vt-order-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vt-order-grid .full{grid-column:1/-1}
.vt-field{display:flex;flex-direction:column;gap:4px}
.vt-toggle{display:flex;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.vt-toggle button{flex:1;background:transparent;border:none;padding:6px 10px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--tx3);cursor:pointer;transition:all .15s}
.vt-toggle button.active-buy{background:rgba(34,197,94,.15);color:var(--green)}
.vt-toggle button.active-sell{background:rgba(239,68,68,.15);color:var(--red)}
.vt-toggle button.active-ce{background:rgba(28,159,76,.15);color:#1C9F4C}
.vt-toggle button.active-pe{background:rgba(239,68,68,.15);color:var(--red)}
.vt-toggle button.active-fut{background:rgba(238,101,75,.15);color:var(--coral)}

/* PnL summary bar */
.vt-pnl-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.vt-pnl-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.vt-pnl-label{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px}
.vt-pnl-val{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:var(--tx1)}

/* ── Watchlist ─────────────────────────────────────────────── */
.wl-card{padding:0;margin-bottom:12px;overflow:hidden;border:none;box-shadow:none;background:transparent}
.wl-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid var(--border)}
.wl-title{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx1);display:flex;align-items:center;gap:8px}
.wl-title::before{content:'📋';font-size:15px}
.wl-count{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--tx3);background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:2px 10px}
.wl-add-section{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg2)}
.wl-add-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.wl-add-row{display:flex;gap:8px;align-items:center}
.wl-add-row select{background:var(--card-surface);border:1px solid var(--border);border-radius:100px;height:42px;padding:0 18px;font-size:12px;font-family:'Manrope',sans-serif;color:var(--tx1);outline:none;cursor:pointer;transition:border-color .15s;min-width:0}
.wl-add-row select:focus{border-color:var(--coral)}
.wl-sym-select{flex:0 0 165px;font-size:15px !important;font-weight:800 !important}
.wl-strike-select{flex:0 1 25%;font-size:14px !important;font-weight:600 !important}
.wl-add-btn{background:linear-gradient(135deg,var(--coral),#f87171);border:none;border-radius:100px;color:#fff;font-size:15px;font-weight:800;height:42px;padding:0 26px;cursor:pointer;white-space:nowrap;letter-spacing:.03em;transition:opacity .15s;flex-shrink:0}
.wl-add-btn:hover{opacity:.88}
.wl-type-group{display:flex;gap:0;background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:3px;height:42px;box-sizing:border-box;align-items:stretch;flex-shrink:0}
.wl-type-btn{flex:1;background:transparent;border:none;border-radius:100px;padding:0 16px;font-size:13px;font-weight:800;color:var(--tx3);cursor:pointer;transition:all .15s;letter-spacing:.05em}
.wl-type-btn.active{background:var(--coral);color:#fff;box-shadow:0 2px 6px rgba(238,101,75,.35)}
.wl-list{display:flex;flex-direction:column;gap:0;padding:8px 12px 12px}
.wl-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--bg3);transition:background .15s;margin-bottom:4px}
.wl-row:hover{background:var(--bg4)}
.wl-sym{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--tx1)}
.wl-type{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;text-transform:uppercase}
.wl-type.ce{background:rgba(28,159,76,.15);color:#1C9F4C}
.wl-type.pe{background:rgba(239,68,68,.15);color:var(--red)}
.wl-type.fut{background:rgba(238,101,75,.15);color:var(--coral)}
.wl-price{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tx1);text-align:right;min-width:60px}
.wl-chg{font-family:'IBM Plex Mono',monospace;font-size:10px;text-align:right;min-width:48px}
.wl-chg.up{color:var(--green)} .wl-chg.dn{color:var(--red)} .wl-chg.flat{color:var(--tx3)}
.wl-del{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.wl-del:hover{color:var(--red)}
.wl-empty{text-align:center;padding:28px 0 20px;font-size:12px;color:var(--tx3);display:flex;flex-direction:column;align-items:center;gap:6px}
.wl-empty::before{content:'📭';font-size:28px;opacity:.6}

/* Orders badge */
.ord-badge{display:inline-block;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.ord-badge.open{background:rgba(245,158,11,.15);color:var(--amber)}
.ord-badge.completed{background:rgba(34,197,94,.15);color:var(--green)}
.ord-badge.cancelled{background:rgba(90,90,90,.2);color:var(--tx3)}


::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}

/* ═══ OI ANALYSIS TAB ══════════════════════════════════════════ */
#p-oi.tab-panel.active{display:block}

/* ── Trade Setup Card ── */
.ts-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:20px;margin-top:16px}
.ts-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ts-title{font-size:13px;font-weight:800;color:var(--tx1);letter-spacing:.04em}
.ts-powered{font-size:10px;color:var(--tx3);margin-right:auto}
.ts-gen-btn{font-size:11px;font-weight:700;padding:6px 14px;border-radius:8px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;cursor:pointer;transition:opacity .15s}
.ts-gen-btn:hover{opacity:.85}
.ts-gen-btn:disabled{opacity:.5;cursor:wait}
.ts-empty{font-size:12px;color:var(--tx3);text-align:center;padding:20px 0;line-height:1.6}
.ts-body{display:flex;flex-direction:column;gap:12px}

/* Bias banner */
.ts-bias{border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.ts-bias.bull{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25)}
.ts-bias.bear{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25)}
.ts-bias.avoid{background:rgba(156,163,175,.08);border:1px solid rgba(156,163,175,.2)}
.ts-bias.sell{background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.3)}
.ts-bias.wait{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3)}
.ts-bias-icon{font-size:28px;flex-shrink:0}
.ts-bias-label{font-size:16px;font-weight:900;letter-spacing:.05em}
.ts-bias.bull .ts-bias-label{color:#22c55e}
.ts-bias.bear .ts-bias-label{color:#ef4444}
.ts-bias.avoid .ts-bias-label{color:var(--tx3)}
.ts-bias.sell .ts-bias-label{color:#a855f7}
.ts-bias.wait .ts-bias-label{color:#f59e0b}
.ts-bias-reason{font-size:11px;color:var(--tx2);margin-top:3px;line-height:1.4}

/* Levels grid */
.ts-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ts-level{background:var(--bg3);border-radius:9px;padding:10px 12px;text-align:center}
.ts-level-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px}
.ts-level-val{font-size:17px;font-weight:800;font-family:'IBM Plex Mono',monospace}
.ts-level-val.entry{color:var(--tx1)}
.ts-level-val.target{color:#22c55e}
.ts-level-val.sl{color:#ef4444}
.ts-level-sub{font-size:9px;color:var(--tx3);margin-top:2px}

/* Strike pill */
.ts-strike{display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border-radius:9px;padding:10px 14px}
.ts-strike-action{font-size:13px;font-weight:800;color:var(--tx1)}
.ts-strike-action.CE{color:#6366f1}
.ts-strike-action.PE{color:#f59e0b}
.ts-rr{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;background:rgba(99,102,241,.12);color:#818cf8}

/* Invalidation */
.ts-expiry-edge{background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:6px;padding:8px 12px;font-size:11px;color:#c084fc;margin-top:6px}
.ts-invalid{font-size:11px;color:var(--tx2);padding:8px 12px;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.15);border-radius:8px;line-height:1.5}
.ts-invalid-lbl{font-weight:700;color:#ef4444;margin-right:4px}

/* Confidence bar */
.ts-conf{display:flex;align-items:center;gap:8px}
.ts-conf-lbl{font-size:10px;color:var(--tx3);white-space:nowrap}
.ts-conf-bar{flex:1;height:4px;background:var(--bg4);border-radius:2px;overflow:hidden}
.ts-conf-fill{height:100%;border-radius:2px;transition:width .4s}
.ts-conf-val{font-size:10px;font-weight:700;color:var(--tx2);white-space:nowrap}
.ts-meta{font-size:10px;color:var(--tx3);text-align:right}
.ltp-cell{transition:background .4s}
.ltp-flash{animation:ltp-flash-anim .7s ease-out}
@keyframes ltp-flash-anim{0%{background:rgba(251,191,36,.4)}100%{background:transparent}}
.oi-refresh-ts{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3);white-space:nowrap}
.expiry-mode-badge{font-size:9px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase;white-space:nowrap}
.expiry-badge-locked{background:rgba(156,163,175,.15);color:#9ca3af;border:1px solid rgba(156,163,175,.3)}
.expiry-badge-caution{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.35);animation:expiry-pulse 2s infinite}
.expiry-badge-final{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.35);animation:expiry-pulse .8s infinite}
@keyframes expiry-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.oi-refresh-ts.fresh{color:#22c55e}
.oi-refresh-ts.stale{color:#f59e0b}
/* The chain Refresh now reuses .btn-ghost (same as OI Graph / OI Deep Data)
   so all three look identical; this class only adds the click animation. */
.oi-refresh-btn.spinning{animation:spin-once .4s linear}
@keyframes spin-once{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.oi-layout{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:40px;align-items:start}
.oi-main-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.oi-side-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:sticky;top:210px}

/* OI subtab bar */
.oi-subtab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 20px}
.oi-subtab{background:transparent;border:none;padding:14px 18px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .18s;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.oi-subtab:hover{color:var(--tx1)}
.oi-subtab.active{color:var(--coral);border-bottom-color:var(--coral)}
.oi-section{display:none;padding:20px}
/* OI Graph + Deep Data side by side. The graph needs the width (it is a
   strike-ladder histogram), the deep-data pane is a fixed-width column of
   cards, so this is 1fr + a fixed rail rather than a 50/50 split. Below
   1200px the rail drops underneath — two cramped columns are worse than
   one wide one. */
.oi-split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.oi-split-main{min-width:0}
.oi-split-side{min-width:0;border-left:1px solid var(--border);padding-left:18px}
.oi-split-side #dd-summary{grid-template-columns:1fr 1fr !important}
@media(max-width:1200px){
  .oi-split{grid-template-columns:1fr}
  .oi-split-side{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:18px}
}
.oi-section.active{display:block}

/* Option Chain inside OI tab */
/* Option chain (OI Analysis) — same Sensibull-style treatment as the
   Markets tab's stock chain: OI magnitude bars sit BEHIND the number
   instead of as a separate 4px sliver, ITM legs get a subtle wash, and
   the strike is a centred spine. Shared look, two tables. */
.oi-chain-wrap{overflow-x:auto;max-height:600px;overflow-y:auto;border:1px solid var(--border);border-radius:12px}
.oi-chain-wrap table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:12px;table-layout:fixed}
.oi-chain-wrap thead th{background:var(--bg3);padding:9px 12px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);position:sticky;top:0;border-bottom:1px solid var(--border);z-index:1}
.oi-chain-wrap tbody tr{transition:background .12s}
.oi-chain-wrap tbody tr:hover{background:rgba(255,255,255,.03)}
.oi-chain-wrap td{padding:7px 12px;white-space:nowrap;font-weight:600;text-align:center;border-top:1px solid var(--border);overflow:hidden;text-overflow:ellipsis}
/* OI cells: bar behind, text in front */
.oi-chain-wrap td.oc-oi{position:relative}
.oi-chain-wrap td.oc-oi .oc-bar{position:absolute;top:50%;transform:translateY(-50%);height:62%;border-radius:3px;opacity:.16;pointer-events:none}
.oi-chain-wrap td.oc-oi .oc-bar.pe{right:0;background:var(--red)}
.oi-chain-wrap td.oc-oi .oc-bar.ce{left:0;background:var(--green)}
.oi-chain-wrap td.oc-oi .oc-txt{position:relative}
/* In-the-money legs get a wash so the moneyness split is readable at a glance */
.oi-chain-wrap td.oc-itm{background:rgba(148,163,184,.07)}
.oi-chain-wrap td.oc-strike{text-align:center;font-weight:800;color:var(--tx1);background:var(--bg3)}
.oi-chain-wrap td.pe-c{color:var(--red);text-align:right}
.oi-chain-wrap td.ce-c{color:var(--green);text-align:left}
/* Net OI (PE - CE) per strike — sign-coloured, right aligned */
.oi-chain-wrap td.oc-net{text-align:right;font-weight:700}
.oi-chain-wrap tbody tr.atm-r td{background:rgba(238,101,75,.12)!important}
.oi-chain-wrap tbody tr.atm-r td.oc-strike{background:var(--coral);color:#fff}

/* OI Graph — Sensibull-style canvas chart */
.oi-chart-canvas-wrap{width:100%;overflow-x:auto}
.oi-chart-canvas-wrap canvas{display:block;width:100%;border-radius:8px}
.oi-chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.oi-leg{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--tx3);letter-spacing:.03em}
.oi-leg-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}
.oi-leg-hatch{width:12px;height:12px;border-radius:2px;flex-shrink:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(255,255,255,.4) 2px,rgba(255,255,255,.4) 4px)}
.oi-range-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.oi-range-btn{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--tx3);cursor:pointer;transition:all .15s;letter-spacing:.04em}
.oi-range-btn:hover{color:var(--tx1);border-color:var(--tx3)}
.oi-range-btn.active{background:var(--coral);border-color:var(--coral);color:#fff}
.oi-chart-summary{display:flex;flex-wrap:wrap;gap:20px;padding:12px 0 0;border-top:1px solid var(--border);margin-top:12px;font-size:12px;color:var(--tx3)}
.oi-chart-summary strong{font-family:'IBM Plex Mono',monospace}

/* OI Deep Data */
.oi-deep-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oi-deep-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px}
.oi-deep-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.oi-deep-val{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--tx1)}
.oi-deep-sub{font-size:10px;color:var(--tx3);margin-top:3px}
.oi-ratio-bar{height:6px;border-radius:3px;background:var(--bg4);margin-top:8px;overflow:hidden}
.oi-ratio-fill{height:100%;border-radius:3px;background:var(--coral);transition:width .4s}

/* OI Flow */
.oi-flow-list{display:flex;flex-direction:column;gap:8px;max-height:540px;overflow-y:auto}
.oi-flow-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)}
.oi-flow-badge{padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;margin-top:1px}
.oi-flow-badge.bull{background:rgba(28,159,76,.18);color:#1C9F4C}
.oi-flow-badge.bear{background:rgba(239,68,68,.15);color:var(--red)}
.oi-flow-badge.neut{background:rgba(160,160,160,.12);color:var(--tx2)}
.oi-flow-meta{font-size:10px;color:var(--tx3);margin-top:3px;font-family:'IBM Plex Mono',monospace}
.oi-flow-msg{font-size:12px;color:var(--tx1);font-weight:500}

/* Side card — positions */
.oi-side-header{padding:16px 18px 12px;border-bottom:1px solid var(--border)}
.oi-side-title{font-size:13px;font-weight:700;color:var(--tx1);text-transform:uppercase;letter-spacing:.06em}
.oi-side-pnl{margin-top:6px;display:flex;gap:10px}
.oi-pnl-chip{flex:1;background:var(--bg3);border-radius:8px;padding:8px 10px;text-align:center}
.oi-pnl-chip-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.oi-pnl-chip-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;margin-top:3px}
.oi-pos-list{padding:12px;display:flex;flex-direction:column;gap:8px;max-height:480px;overflow-y:auto}
.oi-pos-row{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.oi-pos-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.oi-pos-sym{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:var(--tx1)}
.oi-pos-side{padding:2px 7px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.06em}
.oi-pos-side.buy{background:rgba(28,159,76,.18);color:#1C9F4C}
.oi-pos-side.sell{background:rgba(239,68,68,.15);color:var(--red)}
.oi-pos-meta{font-size:10px;color:var(--tx3);font-family:'IBM Plex Mono',monospace;margin-bottom:6px}
.oi-pos-pnl{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600}
.oi-pos-pnl.pos{color:#1C9F4C}.oi-pos-pnl.neg{color:var(--red)}
.oi-exit-btn{width:100%;margin-top:8px;padding:6px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.06em}
.oi-exit-btn:hover{background:rgba(239,68,68,.12);border-color:var(--red);color:var(--red)}
.oi-no-pos{padding:32px 16px;text-align:center;color:var(--tx3);font-size:12px}


/* ═══ LIVE ALERTS TAB ══════════════════════════════════════════ */
#p-live-alerts.tab-panel.active{display:block}

/* ══════════════════════════════════════════════════════════════════
   INTELLIGENCE LAYER — Market Story / Current State / Timeline
   Reuses the existing --tx/--tx2/--bd/--card variables so it inherits
   both themes with no extra work.
   ══════════════════════════════════════════════════════════════════ */
.intel-card{margin-bottom:12px}
/* Market Timeline card (top-right of the dashboard grid): the grid stretches
   it to match the AI Bias card's height by default, but its own content
   (a long list of timeline entries) would otherwise keep growing and push
   the card taller than the Bias card. Lock it to the stretched height and
   let only the entry list scroll inside. */
/* ⚠️ Scoped to ≥1101px on purpose. The mobile override lives ~550 lines EARLIER
   (`@media(max-width:1100px){#dash-top-grid > .card{height:auto}}`), and an
   identical selector at equal specificity is decided by source order — so an
   unconditional rule here silently beat it and re-imposed 470px on phones,
   which is what truncated "Volatility / Observed Risk Metrics" mid-word on
   iOS. Keep this inside the min-width query; do not un-nest it. */
@media(min-width:1101px){
  #dash-top-grid > .card{height:470px;box-sizing:border-box;overflow:hidden}
}
/* No scrollbar here by request: the card keeps the grid's fixed 470px and the
   content is trimmed to fit instead. What bought the room was removing two
   duplicates rather than shrinking type — the rule-read cell repeated the
   headline's own classification, and the day range had a whole line to
   itself before moving into the slot that freed. */
.intel-daychip{display:inline-block;margin-left:8px;padding:2px 8px;
  border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  vertical-align:middle;opacity:.85}
#intel-timeline-card{display:flex;flex-direction:column;overflow:hidden}
#intel-timeline-card .intel-head{flex:0 0 auto}
#intel-timeline-card #intel-timeline{flex:1 1 auto;overflow:visible;min-height:0}
.intel-head{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:8px;margin-bottom:10px}
.intel-title{font-size:15px;font-weight:800;letter-spacing:.2px}
.intel-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx2)}
.intel-select{background:var(--card);color:var(--tx);border:1px solid var(--bd);
  border-radius:6px;padding:3px 6px;font-size:11px;font-family:inherit}
.intel-toggle{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.intel-toggle input{margin:0;cursor:pointer}

/* Institutional Flows: figures beside their explanation. Collapses to one
   column under 720px — the explanation is prose and unreadable in a narrow
   half, and on a phone it matters more than the two numbers above it. */
.fii-split{display:grid;grid-template-columns:minmax(140px,.55fr) 1.6fr;gap:18px;margin-top:10px;
  align-items:start}
@media(max-width:720px){.fii-split{grid-template-columns:1fr;gap:14px}}
/* The F&O table (per-participant, per-segment rows) is denser than the two
   cash figures the base split was built for — give it more of the width,
   and let its own rows keep the wrap/scroll behaviour they already have. */
.fii-split.fii-split-wide{grid-template-columns:1.3fr 1fr}
@media(max-width:900px){.fii-split.fii-split-wide{grid-template-columns:1fr}}
/* The base #fii-hist scroll cap was sized for the flat daily/monthly lists;
   the F&O split is taller (table + prose side by side), so let it scroll as
   one block instead of clipping the explanation column. */
#fii-hist:has(.fii-split-wide){max-height:460px}
.fii-fig-h{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:8px}
.fii-figs{display:flex;flex-direction:column;gap:10px}
.fii-fig{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fii-fig-l{font-size:13px;opacity:.75}
.fii-fig-v{font-size:19px;font-weight:800}
.fii-expl{border-left:2px solid var(--border);padding-left:16px}
@media(max-width:720px){.fii-expl{border-left:0;border-top:1px solid var(--border);
  padding-left:0;padding-top:12px}}
.fii-ex{margin-bottom:12px}
.fii-ex:last-child{margin-bottom:0}
.fii-ex-t{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:2px}
.fii-ex-h{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:3px}
.fii-ex-b{font-size:12px;color:var(--tx2);line-height:1.6}
.fii-cum{opacity:.72;font-variant-numeric:tabular-nums}
.fii-tabs{display:flex;gap:6px;margin-top:14px}
.fii-tab{background:transparent;border:1px solid var(--border);border-radius:100px;
  padding:5px 12px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.04em;color:var(--tx3);cursor:pointer;transition:all .15s}
.fii-tab:hover{color:var(--tx1);border-color:var(--btn-hover-border,rgba(255,255,255,.2))}
.fii-tab.active{background:#ee654b;border-color:#ee654b;color:#fff}
#fii-hist{margin-top:12px;max-height:300px;overflow-y:auto}
.fii-row{flex-wrap:wrap}
.fii-row{display:flex;align-items:center;gap:10px;font-size:12px;
  padding:6px 0;border-top:1px solid var(--border2)}
.fii-row .fii-d{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--tx3);min-width:86px}
.fii-row .fii-v{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;
  min-width:96px;text-align:right}
.fii-row .fii-lbl{font-size:10px;color:var(--tx3);letter-spacing:.05em}
.fii-up{color:#22c55e}.fii-dn{color:#ef4444}
.fii-sum{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--tx2);
  padding:8px 0 2px;border-bottom:1px solid var(--border2);margin-bottom:4px}
.fii-sum b{font-family:'JetBrains Mono',ui-monospace,monospace}
.fii-legend{margin-top:14px;padding-top:12px;border-top:1px solid var(--border2)}
.fii-leg-row{display:flex;gap:10px;font-size:11.5px;line-height:1.55;margin-bottom:5px}
.fii-leg-row b{color:var(--tx1);min-width:44px;font-weight:700;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
.fii-leg-row span{color:var(--tx3)}
.fii-leg-note{font-size:11px;line-height:1.6;color:var(--tx3);margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--border2)}
.fii-empty{font-size:12px;color:var(--tx3);line-height:1.6;padding:10px 0}
.intel-headline{font-size:17px;font-weight:800;margin-bottom:8px;line-height:1.35}
.intel-story{font-size:13px;line-height:1.7;color:var(--tx);white-space:pre-line}
.intel-note{font-size:11px;color:var(--tx2);margin-top:8px;line-height:1.5;
  font-style:italic}
.intel-disclaimer{font-size:10px;color:var(--tx3,var(--tx2));margin-top:6px;
  padding-top:6px;border-top:1px dashed var(--bd);line-height:1.5}

.intel-state-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.intel-state-main{flex:1 1 260px;min-width:0}
.intel-state-regime{font-size:22px;font-weight:800;line-height:1.2}
.intel-state-sub{font-size:12px;color:var(--tx2);font-weight:600;margin-top:2px}
.intel-state-def{font-size:12px;color:var(--tx2);margin-top:8px;line-height:1.6}
.intel-state-conf{flex:0 0 170px;text-align:right}
.intel-conf-lbl{font-size:10px;color:var(--tx2);text-transform:uppercase;
  letter-spacing:.5px}
.intel-conf-bar{height:8px;border-radius:4px;background:var(--bd);
  overflow:hidden;margin:6px 0 4px}
.intel-conf-bar>div{height:100%;border-radius:4px;transition:width .3s}
.intel-conf-val{font-size:18px;font-weight:800}
.intel-conf-note{font-size:10px;color:var(--tx2);margin-top:2px}

.intel-evidence{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.intel-ev{display:inline-flex;align-items:baseline;gap:5px;font-size:11px;
  padding:3px 8px;border-radius:12px;border:1px solid var(--bd);
  background:color-mix(in srgb,var(--bd) 25%,transparent)}
.intel-ev b{font-weight:700}
.intel-ev span{color:var(--tx2)}

/* --- timeline --- */
.intel-timeline{position:relative;padding-left:22px}
.intel-timeline:before{content:'';position:absolute;left:6px;top:6px;bottom:6px;
  width:2px;background:var(--bd)}
.intel-ti{position:relative;padding:0 0 16px 4px}
.intel-ti:last-child{padding-bottom:0}
.intel-ti:before{content:'';position:absolute;left:-20px;top:5px;width:11px;
  height:11px;border-radius:50%;border:2px solid var(--card);
  background:var(--tx2)}
.intel-ti.high:before{background:#22c55e}
.intel-ti.moderate:before{background:#f59e0b}
.intel-ti.low:before{background:#94a3b8}
.intel-ti.marker:before{background:var(--tx2);width:9px;height:9px;left:-19px}
.intel-ti-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.intel-ti-time{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.intel-ti-title{font-size:13px;font-weight:700}
.intel-ti-badge{font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;
  text-transform:uppercase;letter-spacing:.4px}
.intel-ti-badge.high{background:#22c55e22;color:#22c55e}
.intel-ti-badge.moderate{background:#f59e0b22;color:#f59e0b}
.intel-ti-badge.low{background:#94a3b822;color:#94a3b8}
.intel-ti-states{font-size:10px;color:var(--tx2);margin-top:2px}
.intel-ti-expl{font-size:12px;color:var(--tx);margin-top:5px;line-height:1.6}
.intel-ti-unc{font-size:11px;margin-top:5px;line-height:1.5;color:#f59e0b;
  background:#f59e0b12;border-left:2px solid #f59e0b;padding:5px 8px;
  border-radius:0 4px 4px 0}
.intel-ti-ev{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.intel-ti-det{font-size:10px;color:var(--tx2);margin-top:5px}
.intel-empty{font-size:12px;color:var(--tx2);padding:14px 0;line-height:1.6}

/* Alerts page: timeline view toggle */
.la-viewtoggle{display:inline-flex;border:1px solid var(--bd);border-radius:7px;
  overflow:hidden}
.la-viewtoggle button{background:transparent;color:var(--tx2);border:0;
  font:inherit;font-size:11px;font-weight:700;padding:4px 10px;cursor:pointer}
.la-viewtoggle button.on{background:var(--acc,#3b82f6);color:#fff}
/* (the #p-ai-analysis panel rule was removed with the AI Insights tab) */
.la-layout{max-width:900px;margin:0 auto;padding-bottom:40px}
.la-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.la-title{font-size:13px;font-weight:800;color:var(--tx1);letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.la-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse-dot 1.5s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.la-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tx3)}
.la-clear{font-size:11px;color:var(--coral);cursor:pointer;font-weight:600;padding:6px 12px;border:1px solid rgba(238,101,75,.3);border-radius:6px;background:rgba(238,101,75,.06);transition:all .15s}
.la-clear:hover{background:rgba(238,101,75,.12)}
.la-empty{text-align:center;padding:60px 20px;color:var(--tx3)}
.la-empty-icon{font-size:40px;margin-bottom:12px;opacity:.4}
.la-empty-txt{font-size:13px}
.la-feed{display:flex;flex-direction:column;gap:10px}

/* Market-movement explainer box (dashboard, only on big moves) */
.move-box{background:var(--bg2);border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:14px;padding:14px 18px;margin-bottom:16px}
.move-box.up{border-left-color:var(--green)}
.move-box.dn{border-left-color:var(--red)}
.move-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.move-title{font-size:15px;font-weight:800;color:var(--tx1)}
.move-meta{font-size:11px;color:var(--tx3)}
.move-reasons{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.move-reason{font-size:12.5px;color:var(--tx1);line-height:1.5}
.move-note{font-size:12px;color:var(--tx3)}
.move-news{display:flex;flex-wrap:wrap;gap:8px}
.move-newslink{font-size:11px;color:var(--tx2);background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:4px 11px;text-decoration:none;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.move-newslink:hover{color:var(--tx1);border-color:var(--border2)}

/* Alerts & News two-column layout */
.an-grid{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
@media(max-width:1100px){.an-grid{grid-template-columns:1fr}}
.news-panel{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:210px}
.news-head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:800;font-size:14px;color:var(--tx1)}
.news-head #news-meta{font-size:10px;color:var(--tx3);font-weight:500;margin-left:auto}
.news-list{max-height:660px;overflow-y:auto;padding:8px}
.news-item{display:flex;gap:12px;padding:11px 10px;border-radius:10px;text-decoration:none;color:inherit;transition:background .12s;border-bottom:1px solid var(--border)}
.news-item:last-child{border-bottom:0}
.news-item:hover{background:var(--bg3)}
.news-item .ni-thumb{width:62px;height:62px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg3)}
.news-item .ni-body{min-width:0;flex:1}
.news-item .ni-head{font-size:13px;font-weight:700;color:var(--tx1);line-height:1.35;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-item .ni-sum{font-size:11.5px;color:var(--tx2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-item .ni-time{font-size:10px;color:var(--tx3);margin-top:5px;font-family:'IBM Plex Mono',monospace}

/* Alert card */
.la-card{border-radius:14px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;border:1px solid;position:relative;overflow:hidden;transition:transform .12s}
.la-card:hover{transform:translateY(-1px)}
.la-card.VELOCITY{background:rgba(238,101,75,.06);border-color:rgba(238,101,75,.25)}
.la-card.SQUEEZE{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.25)}
.la-card.LEAN{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.2)}
.la-card.critical .la-card-accent{background:var(--coral)}
.la-card.warning .la-card-accent{background:#f59e0b}
.la-card.info .la-card-accent{background:#6366f1}
.la-card-accent{position:absolute;left:0;top:0;bottom:0;width:3px}

/* Icon circle */
.la-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.la-card.VELOCITY .la-icon{background:rgba(238,101,75,.15)}
.la-card.SQUEEZE .la-icon{background:rgba(245,158,11,.15)}
.la-card.LEAN .la-icon{background:rgba(99,102,241,.15)}
.la-card.WHIPSAW .la-icon{background:rgba(239,68,68,.15)}
.la-card.GAMMA_TRAP .la-icon{background:rgba(245,158,11,.15)}
.la-card.PINNING .la-icon{background:rgba(168,85,247,.15)}

/* Content */
.la-body{flex:1;min-width:0}
.la-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.la-type-badge{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.la-type-badge.VELOCITY{background:rgba(238,101,75,.15);color:var(--coral)}
.la-type-badge.SQUEEZE{background:rgba(245,158,11,.15);color:#f59e0b}
.la-type-badge.LEAN{background:rgba(99,102,241,.15);color:#818cf8}
.la-dir-badge{font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:4px}
.la-dir-badge.BULLISH{background:rgba(34,197,94,.15);color:#22c55e}
.la-dir-badge.BEARISH{background:rgba(239,68,68,.12);color:#ef4444}
.la-dir-badge.NEUTRAL{background:rgba(128,128,128,.12);color:var(--tx3)}
.la-sev-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em}
.la-sev-badge.critical{background:rgba(239,68,68,.12);color:#ef4444}
.la-sev-badge.warning{background:rgba(245,158,11,.1);color:#f59e0b}
.la-sev-badge.info{background:rgba(99,102,241,.1);color:#818cf8}
.la-time{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3);margin-left:auto}
.la-headline{font-size:13px;font-weight:700;color:var(--tx1);margin-bottom:4px;line-height:1.3}
.la-detail{font-size:12px;color:var(--tx2);line-height:1.5}
.la-action{margin-top:8px;font-size:11px;font-weight:700;color:var(--tx3);display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--bg3);border-radius:6px;display:inline-flex}
.la-action.bull{color:#22c55e;background:rgba(34,197,94,.08)}
.la-action.bear{color:#ef4444;background:rgba(239,68,68,.08)}

/* AI badges on alert cards */
.la-ai-block{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:11px;line-height:1.5;border:1px solid}
.la-ai-valid{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.2);color:#a5b4fc}
.la-ai-noise{background:rgba(239,68,68,.04);border-color:rgba(239,68,68,.12);color:#fca5a5;opacity:.7}
.la-ai-pending{margin-top:6px;font-size:10px;color:var(--tx3);font-style:italic}
.la-ai-label{font-weight:800;margin-right:5px;letter-spacing:.04em}
.la-ai-btn{font-size:11px;font-weight:700;padding:6px 12px;border-radius:7px;border:1px solid rgba(99,102,241,.35);background:rgba(99,102,241,.08);color:#818cf8;cursor:pointer;transition:all .15s;letter-spacing:.03em}
.la-ai-btn:hover,.la-ai-btn.active{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.6)}
/* ── AI Analysis Cards ─────────────────────────────────── */
/* Executor full-width top, advisor + OI shifts 2-col below */
.aic-wrap{display:flex;flex-direction:column;gap:16px}
.aic-bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:750px){.aic-bottom-row{grid-template-columns:1fr}}

/* Executor Signal — hero card */
.aic-executor{border:1px solid;border-radius:18px;padding:20px 24px;position:relative;overflow:hidden}
.aic-executor::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 60%);pointer-events:none}
.aic-exe-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.aic-exe-action{display:flex;align-items:center;gap:12px}
.aic-exe-label{font-size:24px;font-weight:900;letter-spacing:.03em;line-height:1}
.aic-exe-strike{font-size:13px;font-weight:700;margin-top:3px}
.aic-exe-meta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.aic-rr-badge,.aic-conf-badge{padding:5px 10px;border-radius:20px;border:1px solid;font-size:11px;font-weight:800;white-space:nowrap}
.aic-exe-reason{font-size:13px;color:var(--tx2);font-weight:600;margin-bottom:14px;line-height:1.4}
.aic-exe-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.aic-exe-level{background:var(--card-surface)!important;border-radius:10px;padding:10px 14px;border:1px solid var(--border)}
.aic-exe-lbl{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--tx3);margin-bottom:4px}
.aic-exe-val{font-size:17px;font-weight:900}
.aic-exe-val.entry{color:#f59e0b}
.aic-exe-val.target{color:#22c55e}
.aic-exe-val.sl{color:#ef4444}
.aic-exe-sub{font-size:10px;color:var(--tx3);margin-top:2px}
.aic-exe-footer{font-size:10px;color:var(--tx3);letter-spacing:.04em;border-top:1px solid var(--border);padding-top:10px;margin-top:4px}
.aic-wait-msg{font-size:14px;color:var(--tx2);text-align:center;padding:16px 0;font-weight:600}

/* Advisor card */
.aic-advisor-card,.aic-shifts-card{background:var(--card-surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px}
.aic-card-title{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
.aic-regime-pill{display:inline-block;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:900;letter-spacing:.05em;margin-bottom:12px}
.aic-adv-item{margin-bottom:8px;line-height:1.4}
.aic-adv-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);display:block;margin-bottom:2px}
.aic-adv-val{font-size:12px;font-weight:600;color:var(--tx1)}
.aic-divergence{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:8px;padding:8px 12px;font-size:11px;color:#f59e0b;font-weight:700;margin:8px 0}
.aic-adv-targets{display:flex;align-items:center;gap:10px;margin-top:12px;justify-content:center}
.aic-adv-tgt{font-size:16px;font-weight:900;padding:6px 14px;border-radius:8px}
.aic-adv-tgt.bull{color:#22c55e;background:rgba(34,197,94,.1)}
.aic-adv-tgt.bear{color:#ef4444;background:rgba(239,68,68,.1)}
.aic-adv-tgt-lbl{font-size:10px;color:var(--tx3);font-weight:700;text-align:center}

/* OI Shifts table */
.ois-table{width:100%;border-collapse:collapse;font-size:12px}
.ois-table th{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--tx3);text-transform:uppercase;padding:4px 6px;text-align:left;border-bottom:1px solid var(--border)}
.ois-row td{padding:7px 6px;border-bottom:1px solid var(--border)}
.ois-strike{font-size:13px;font-weight:800;color:var(--tx1)}
.ois-ltp{color:var(--tx3)}
.aic-no-shifts{font-size:12px;color:var(--tx3);text-align:center;padding:20px 0}
.aic-invalidation{font-size:10px;color:var(--tx3);background:var(--bg3);border-radius:6px;padding:6px 10px;margin-top:8px;border:1px solid var(--border)}
.aic-refresh-note{text-align:center;font-size:10px;color:var(--tx3);padding-top:6px;letter-spacing:.03em}
.aic-strategy-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);background:var(--card-surface);border:1px solid var(--border);border-radius:6px;padding:3px 10px;margin-bottom:10px}
.aic-prob-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.aic-prob-chip{background:color-mix(in srgb,var(--pc) 12%,var(--card-surface));border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);border-radius:8px;padding:7px 12px;display:flex;flex-direction:column;align-items:center;min-width:70px;flex:1}
.aic-prob-val{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:900;color:var(--pc)}
.aic-prob-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-top:2px;text-align:center}
/* Confidence gate bar */
.aic-gate-row{margin:10px 0 8px}
.aic-gate-bar{position:relative;height:28px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center}
.aic-gate-fill{position:absolute;left:0;top:0;height:100%;transition:width .6s ease}
.aic-gate-label{position:relative;z-index:1;font-size:11px;font-weight:800;letter-spacing:.05em;padding:0 10px;color:var(--tx1)}
/* Writer pressure */
.aic-wp-row{margin:10px 0 8px;padding:10px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)}
.aic-wp-label{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:8px}
.aic-wp-bars{display:flex;flex-direction:column;gap:6px}
.aic-wp-bar-label{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--tx3);letter-spacing:.05em;margin-bottom:2px}
.aic-wp-track{height:8px;background:var(--border);border-radius:4px;overflow:hidden;flex:1}
.aic-wp-fill{height:100%;border-radius:4px;transition:width .5s ease}
.aic-wp-pct{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--tx2);min-width:26px;text-align:right}
.aic-wp-bars>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aic-wp-bars>div>div:first-child{width:72px;flex-shrink:0}


.ai-loading{display:flex;align-items:center;gap:12px;padding:40px;color:var(--tx3);font-size:14px;justify-content:center}
.ai-spinner{width:22px;height:22px;border:2px solid rgba(99,102,241,.2);border-top-color:#6366f1;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.ai-error{padding:20px;color:#ef4444;font-size:13px;text-align:center}
.aic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:700px){.aic-grid{grid-template-columns:1fr}}
.aic-card{background:var(--card-surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;position:relative;overflow:hidden}
.aic-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.04) 0%,transparent 60%);pointer-events:none}
.aic-hero{grid-column:1/-1}
.aic-card-title{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:14px}
/* Hero */
.aic-hero-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.aic-bias-icon{font-size:36px;line-height:1}
.aic-bias-label{font-size:26px;font-weight:900;letter-spacing:.02em;line-height:1}
.aic-strength-badge{font-size:11px;font-weight:700;margin-top:2px}
.aic-pcr-pill{margin-left:auto;padding:6px 14px;border-radius:20px;font-size:11px;font-weight:800;white-space:nowrap}
.aic-reason{font-size:14px;color:var(--tx1);font-weight:600;line-height:1.5;margin-bottom:8px}
.aic-momentum{font-size:12px;font-weight:700;letter-spacing:.04em}
/* Levels */
.aic-levels{display:flex;flex-direction:column;gap:8px}
.aic-level-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px}
.aic-level-row.bull{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2)}
.aic-level-row.bear{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2)}
.aic-level-row.atm{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.18)}
.aic-level-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);width:70px;flex-shrink:0}
.aic-level-row.bull .aic-level-tag{color:#22c55e}
.aic-level-row.bear .aic-level-tag{color:#ef4444}
.aic-level-row.atm .aic-level-tag{color:#f59e0b}
.aic-level-strike{font-size:18px;font-weight:900;color:var(--tx1);flex:1}
.aic-level-oi{font-size:11px;color:var(--tx3)}
/* Breakout */
.aic-breakout{display:flex;flex-direction:column;gap:6px}
.aic-bo-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03)}
.aic-bo-dir{font-size:11px;font-weight:900;width:52px;flex-shrink:0;padding:4px 8px;border-radius:6px;text-align:center}
.aic-bo-dir.bull{background:rgba(34,197,94,.15);color:#22c55e}
.aic-bo-dir.bear{background:rgba(239,68,68,.15);color:#ef4444}
.aic-bo-strike{font-size:20px;font-weight:900;color:var(--tx1);min-width:60px}
.aic-bo-desc{font-size:11px;color:var(--tx3);line-height:1.3}
.aic-bo-div{height:1px;background:rgba(255,255,255,.06);margin:2px 0}
/* Watch */
.aic-watch-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.aic-watch-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;color:var(--tx1);line-height:1.4}
.aic-watch-dot{width:7px;height:7px;border-radius:50%;background:#6366f1;flex-shrink:0;margin-top:5px;box-shadow:0 0 6px #6366f1}
.aic-risk{font-size:12px;color:#f59e0b;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:8px 12px;margin-top:4px}
.aic-footer{text-align:center;font-size:10px;color:var(--tx3);padding-top:4px;letter-spacing:.04em}
/* AI tab layout */
.ai-tab-layout{width:100%;padding:8px 0}
.ai-tab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.ai-tab-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;color:var(--tx1)}
.ai-tab-meta{font-size:11px;color:var(--tx3)}
.ai-tab-body{min-height:200px;font-size:13px;line-height:1.7;color:var(--tx1)}
.ai-tab-body ul{margin:8px 0 8px 18px;padding:0}
.ai-tab-body li{margin-bottom:4px}
.ai-tab-empty{color:var(--tx3);text-align:center;padding:40px 0;font-size:14px}
.ai-tab-skeleton{padding:16px 0;display:flex;flex-direction:column;gap:10px}
.ai-skel-bar{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:ai-skel-shimmer 1.5s infinite}
@keyframes ai-skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.la-ai-panel{background:var(--bg2);border:1px solid rgba(99,102,241,.25);border-radius:14px;margin-top:20px;overflow:hidden}
.la-ai-panel-header{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid rgba(99,102,241,.15);font-size:12px;font-weight:800;color:#818cf8;letter-spacing:.05em;text-transform:uppercase;background:rgba(99,102,241,.06)}
/* light mode overrides — triggered by html.light-mode class set in JS */
html.light-mode .aic-card,
html.light-mode .aic-advisor-card,
html.light-mode .aic-shifts-card{background:#ffffff !important;border-color:rgba(0,0,0,0.1) !important;box-shadow:0 1px 6px rgba(0,0,0,0.07)}
html.light-mode .aic-card::before{opacity:0}
html.light-mode .aic-card-title,
html.light-mode .aic-adv-lbl{color:#374151 !important}
html.light-mode .aic-adv-val{color:#111827 !important}
html.light-mode .ois-strike{color:#111827 !important}
html.light-mode .ois-ltp{color:#4B5563 !important}
html.light-mode .ois-table th{color:#4B5563 !important}
html.light-mode .ois-row td{border-bottom-color:rgba(0,0,0,0.07) !important}
html.light-mode .aic-exe-footer,
html.light-mode .aic-exe-sub{color:#4B5563 !important}
html.light-mode .aic-strategy-tag{color:#374151 !important;border-color:rgba(0,0,0,0.15) !important}
html.light-mode .aic-wait-msg{color:#4B5563 !important}
html.light-mode .aic-no-shifts{color:#4B5563 !important}
html.light-mode .la-ai-panel{background:#f3f4f6 !important;border-color:rgba(99,102,241,.3) !important}
html.light-mode .la-ai-panel-header{background:rgba(99,102,241,.09) !important;color:#4f46e5 !important}
html.light-mode .la-ai-refresh-btn{color:#4f46e5 !important;border-color:rgba(99,102,241,.35) !important}
html.light-mode .aic-wp-row{background:#f3f4f6 !important;border-color:rgba(0,0,0,0.09) !important}
html.light-mode .aic-gate-bar{background:#e5e7eb !important;border-color:rgba(0,0,0,0.1) !important}
.la-ai-panel-meta{font-size:10px;font-weight:400;color:var(--tx3);text-transform:none;letter-spacing:0;margin-left:auto}
.la-ai-refresh-btn{font-size:10px;padding:3px 9px;border-radius:5px;border:1px solid rgba(99,102,241,.25);background:transparent;color:#818cf8;cursor:pointer;transition:all .12s}
.la-ai-refresh-btn:hover{background:rgba(99,102,241,.12)}
.la-ai-panel-body{padding:18px;font-size:12.5px;color:var(--tx2);line-height:1.7;white-space:pre-wrap;font-family:inherit}

/* ═══ SCANNER TAB ═══════════════════════════════════════════════ */
.scanner-layout{padding-bottom:40px;display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.scanner-main{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.scanner-side{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:sticky;top:210px}

/* Header bar */
.scanner-header{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.scanner-title{font-size:13px;font-weight:800;color:var(--tx1);letter-spacing:.06em;text-transform:uppercase}
.scanner-sub{font-size:11px;color:var(--tx3);margin-top:2px}
.scanner-filters{display:flex;align-items:center;gap:8px}
.scan-filter-btn{padding:5px 14px;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--tx2);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.05em;font-family:'Manrope',sans-serif}
.scan-filter-btn:hover{border-color:var(--border2);color:var(--tx1)}
.scan-filter-btn.active{background:var(--coral);border-color:var(--coral);color:#fff}
.scanner-refresh{display:flex;align-items:center;gap:8px}
#scan-last-updated{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3)}

/* Signal cards */
.scanner-list{padding:16px;display:flex;flex-direction:column;gap:12px}
.signal-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .15s}
.signal-card:hover{border-color:var(--border2)}
.signal-card-top{padding:14px 16px 10px;display:flex;align-items:flex-start;gap:12px}
.signal-conviction{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;margin-top:1px}
.signal-conviction.HIGH    {background:rgba(0,255,136,.12);color:#00ff88;border:1px solid rgba(0,255,136,.25)}
.signal-conviction.MODERATE{background:rgba(63,185,80,.12);color:#3fb950;border:1px solid rgba(63,185,80,.25)}
.signal-conviction.EARLY   {background:rgba(248,178,26,.12);color:#f8b21a;border:1px solid rgba(248,178,26,.25)}
.signal-body{flex:1;min-width:0}
.signal-title{font-size:14px;font-weight:700;color:var(--tx1);margin-bottom:4px}
.signal-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tx3);display:flex;gap:12px;flex-wrap:wrap}
.signal-dir{font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px}
.signal-dir.BULLISH{background:rgba(28,159,76,.15);color:#1C9F4C}
.signal-dir.BEARISH{background:rgba(239,68,68,.12);color:var(--red)}
.signal-score-row{padding:0 16px 12px;display:flex;align-items:center;gap:8px}
.score-track{flex:1;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}
.score-fill{height:100%;border-radius:3px;transition:width .4s}
.score-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tx2);flex-shrink:0}
.signal-breakdown{padding:0 16px 12px;display:flex;gap:6px;flex-wrap:wrap}
.score-chip{padding:3px 8px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.score-chip.hit {background:rgba(28,159,76,.15);color:#1C9F4C}
.score-chip.miss{background:rgba(255,255,255,.05);color:var(--tx3)}
.signal-reasons{padding:0 16px 12px;display:flex;flex-direction:column;gap:4px}
.signal-reason{font-size:11px;color:var(--tx2);line-height:1.5;padding:2px 0;border-left:2px solid var(--border);padding-left:8px}
.signal-entry{padding:10px 16px 14px;background:rgba(238,101,75,.06);border-top:1px solid rgba(238,101,75,.15);font-size:11px;color:var(--tx2);line-height:1.6}
.signal-entry strong{color:var(--coral)}
.signal-card-btns{padding:0 16px 14px;display:flex;gap:8px}
.scan-buy-btn{padding:7px 18px;border-radius:8px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Manrope',sans-serif;letter-spacing:.04em}
.scan-buy-btn.ce{background:rgba(28,159,76,.18);color:#1C9F4C;border:1px solid rgba(28,159,76,.3)}
.scan-buy-btn.ce:hover{background:rgba(28,159,76,.3)}
.scan-buy-btn.pe{background:rgba(239,68,68,.14);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.scan-buy-btn.pe:hover{background:rgba(239,68,68,.25)}

/* Side panel */
.scanner-side-header{padding:16px 18px 12px;border-bottom:1px solid var(--border)}
.scanner-side-title{font-size:12px;font-weight:700;color:var(--tx1);text-transform:uppercase;letter-spacing:.07em}
.scanner-legend{padding:14px 16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--border)}
.leg-row{display:flex;align-items:flex-start;gap:10px}
.leg-badge{padding:3px 8px;border-radius:4px;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;flex-shrink:0;margin-top:1px}
.leg-text{font-size:11px;color:var(--tx3);line-height:1.5}
.scanner-how{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.how-row{display:flex;align-items:flex-start;gap:10px}
.how-num{width:20px;height:20px;border-radius:50%;background:var(--coral-dim);border:1px solid var(--coral-border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--coral);flex-shrink:0}
.how-text{font-size:11px;color:var(--tx3);line-height:1.5;padding-top:1px}

/* ═══ MARKETS TAB ════════════════════════════════════════════════ */
#p-markets.tab-panel.active{display:block}
.mkt-layout{padding-bottom:40px;display:flex;flex-direction:column;gap:16px}

/* Index row */
.mkt-indices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mkt-idx-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.mkt-idx-name{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.mkt-idx-val{font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:600;color:var(--tx1);margin-top:4px}
.mkt-idx-chg{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;margin-top:2px}
.mkt-idx-chg.up{color:#1C9F4C}.mkt-idx-chg.dn{color:var(--red)}.mkt-idx-chg.flat{color:var(--tx3)}

/* Breadth bar */
.mkt-breadth{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px 24px}
.mkt-breadth-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
.breadth-bar-wrap{height:12px;border-radius:6px;overflow:hidden;display:flex;gap:2px;margin-bottom:12px}
.breadth-adv{background:#1C9F4C;border-radius:6px 0 0 6px;transition:width .5s ease;min-width:4px}
.breadth-unch{display:none}
.breadth-dec{background:#ef4444;border-radius:0 6px 6px 0;transition:width .5s ease;min-width:4px}
.breadth-labels{display:flex;justify-content:space-between}

.breadth-mood{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.07em;transition:all .3s}
.breadth-mood.bull{background:rgba(28,159,76,.15);color:#1C9F4C}
.breadth-mood.str-bull{background:rgba(28,159,76,.25);color:#16a34a}
.breadth-mood.bear{background:rgba(239,68,68,.12);color:#ef4444}
.breadth-mood.str-bear{background:rgba(239,68,68,.22);color:#b91c1c}
.breadth-mood.side{background:rgba(245,158,11,.12);color:#f59e0b}
.breadth-mood.mild-bull{background:rgba(101,163,13,.12);color:#84cc16}
.breadth-mood.mild-bear{background:rgba(239,68,68,.08);color:#f87171}
.breadth-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.breadth-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;display:flex;align-items:center;gap:5px}

/* Two-col layout for heatmap + side */
.mkt-main-row{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}

/* Heatmap */
.mkt-heatmap-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.mkt-card-header{padding:14px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mkt-card-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx1)}
.mkt-card-sub{font-size:10px;color:var(--tx3)}
.heatmap-grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.hm-cell{border-radius:10px;padding:14px 14px 12px;cursor:default;transition:opacity .15s;display:flex;flex-direction:column;gap:2px}
.hm-cell:hover{opacity:.85}
.hm-sym{font-size:13px;font-weight:800;color:#fff;letter-spacing:.02em}
.hm-pct{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:rgba(255,255,255,.92);margin-top:4px}
.hm-val{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.55);margin-top:1px}
.mcx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:16px}
.mcx-tile{border-radius:10px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px;transition:opacity .15s}
.mcx-tile:hover{opacity:.85}
.mcx-name{font-size:11px;font-weight:800;color:rgba(255,255,255,.95);letter-spacing:.04em}
.mcx-price{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;color:rgba(255,255,255,.92);margin-top:4px}
.mcx-unit{font-size:9px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.mcx-pct{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:rgba(255,255,255,.9);margin-top:3px}


/* Gainers / Losers / MCX side */
.mkt-side{display:flex;flex-direction:column;gap:12px}
.mkt-side-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.mkt-gl-list{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.mkt-gl-row{display:flex;align-items:center;justify-content:space-between;padding:7px 6px;border-radius:6px;transition:background .12s}
.mkt-gl-row:hover{background:var(--bg3)}
.mkt-gl-sym{font-size:12px;font-weight:700;color:var(--tx1)}
.mkt-gl-sec{font-size:9px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}
.mkt-gl-pct{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700}
.mkt-gl-pct.up{color:#1C9F4C}.mkt-gl-pct.dn{color:var(--red)}


/* ═══ FOOTER ════════════════════════════════════════════════════ */
#ng-footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border);
  background:var(--bg2);
  padding:36px 0 24px;
  margin-top:40px;
}
.footer-inner{max-width:var(--shell);margin:0 auto;padding:0 20px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-brand{}
.footer-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-logo-text{font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;color:var(--tx1);letter-spacing:.04em}
.footer-logo-text span{color:var(--coral)}
.footer-tagline{font-size:12px;color:var(--tx3);line-height:1.6;max-width:260px}
.footer-col-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:12px;color:var(--tx2);text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--coral)}
.footer-divider{height:1px;background:var(--border);margin-bottom:20px}
.footer-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-disclaimer{font-size:10px;color:var(--tx3);line-height:1.7;max-width:700px}
.footer-disclaimer strong{color:var(--tx2)}
.footer-copy{font-size:11px;color:var(--tx3);white-space:nowrap;margin-top:2px}
.footer-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;border:1px solid var(--border);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);margin-bottom:10px}
.footer-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--coral)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}

/* ═══ MOBILE (≤768px) — header un-fixed, single-column, scrollable tabs ═══ */
@media(max-width:768px){
  /* 0. No horizontal scroll, ever; kill the fixed glow shield (header is
        static on mobile so the gradient would smear over content) */
  html,body{overflow-x:hidden;max-width:100vw}
  #header-shield{display:none}
  .tab-panel table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* 1. Un-fix the whole header stack so it flows and never overlaps */
  /* Header stack un-fixes on mobile, so the strip must leave the fixed
     layer too — otherwise the sticky topbar scrolls up underneath a bar
     still pinned to the viewport. Both flow, stacked, strip on top. */
  #ng-tick{position:sticky;top:0;z-index:1200}
  /* ⚠️ Both of these are sticky. Giving them the SAME `top` does not stack
     them — it pins both to the same line, and the topbar (z-index 1000)
     then renders UNDER the strip (1200), which is why the logo/LIVE/clock
     row came out sliced off at the top on iOS. The topbar must stick BELOW
     the strip's own height.
     `.on` is added by the ticker poll once data arrives; without it the
     strip is display:none and occupies no space, so the offset has to
     collapse back to 0 or a dead --tick-h band opens above the header. */
  /* padding-bottom, not just top. The bar is sticky and opaque, so without
     it the nav pill's bottom edge IS the bar's edge and scrolling content
     slides flush against the logo — no gap at all. The padding extends the
     opaque area below the pill, so there is always a band of background
     between the header and whatever is passing under it. */
  #topbar{position:sticky;top:0;padding-top:8px;padding-bottom:10px;
    background:var(--bg)}
  #ng-tick.on ~ #topbar{top:var(--tick-h)}
  html.light-mode #topbar{background:#fff}
  #topbar .nav-pill{height:56px;padding:0 12px}
  .nav-logo{margin-right:8px;min-width:0}
  .nav-logo-text{font-size:17px}
  .nav-logo img,.nav-logo svg{height:28px !important;width:auto}
  .ticker-strip{display:none}

  /* The nav row totalled ~475px of content against a 366px box, and
     .nav-right is flex-shrink:0, so the overflow all landed on its tail:
     the theme toggle was sliced in half and the PROFILE BUTTON — the only
     route to account, broker setup and sign-out — was pushed entirely off
     screen and unreachable. Budget the row so it fits:
       clock  ~130px  removed outright (requested; the phone shows the time)
       icons   -12px  42 -> 36
       gaps    -10px  8 -> 6, and nav-right margin-left 16 -> 8
       status  -15px  tighter padding and type
     which lands around 290px and leaves real slack. */
  #clock{display:none}
  .nav-right{gap:6px;margin-left:8px}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:16px;height:16px}
  .status-pill{padding:6px 11px;font-size:11px;gap:5px}

  #sym-bar{position:static;padding:8px 0 4px}
  .sym-bar-inner{flex-direction:column;align-items:stretch;gap:8px;padding:0 12px}
  /* 2x2, not 3-across. There are exactly four indices, so three columns
     left BANKEX orphaned on its own row at a third of the width. */
  .sym-bar-left{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;overflow-x:visible}
  /* Only the SELECTED chip carries a price — the other three have their
     price/arrow/change spans emptied, and `:empty{display:none}` collapses
     them. So the active chip is three lines tall and the rest are one,
     which is the uneven, ragged look. Reserve the full three-line height on
     every chip and centre the content, so they stay a matched set whichever
     one is selected. */
  .sym-btn{padding:8px 4px;gap:2px;flex-direction:column;align-items:center;
    justify-content:center;border-radius:14px;min-height:62px}
  .sb-sym{font-size:10px}
  .sym-btn .sb-price{font-size:14px}
  .sb-arrow{display:none}   /* redundant on mobile — the change text is signed + colored */
  .sb-chg{font-size:10px;margin-left:0;text-align:center}
  .sym-bar-right{justify-content:space-between;gap:8px}
  .dte-pill{padding:7px 14px;font-size:12px;flex:0 0 auto}
  .date-pill{padding:7px 14px;font-size:12px;flex:1;justify-content:center}

  #tab-nav{position:static;padding:4px 0 8px}
  .tab-nav-inner{padding:0 12px}
  /* Same fit-then-overflow behaviour as desktop (see layoutTabs()), just
     smaller — no separate scroll mode here any more. A silently-scrolling
     pill on a phone is worse, not better: there is even less width to
     hint that more tabs exist off to the side. */
  .tab-pill{overflow:hidden;border-radius:18px;padding:5px}
  .tab-pill::-webkit-scrollbar{display:none}
  .tab{padding:8px 14px;font-size:13px;gap:6px;flex-shrink:0}
  .tab svg{width:14px;height:14px}
  .tab-spacer{display:none}
  .tab-more-btn{width:32px;height:32px}

  /* 2. Page: kill the fixed-header offset (inline style needs !important) */
  .page{padding:8px 12px 60px !important;gap:12px}

  /* 3. Layouts collapse to one column */
  .oi-layout,.scanner-layout,.mkt-main-row{grid-template-columns:1fr}
  /* GEX tab on phones: one column, and the CHART GOES FIRST. A 210px card
     column beside a chart that is meant to be taller than before leaves the
     chart ~250px to draw 20+ strikes in, which is unreadable.

     The cards are first in the DOM because that is the desktop reading
     order (left column, then chart). Reordering with `order` rather than
     moving the markup keeps one DOM for both layouts - and the cards are
     a summary OF the chart, so on a phone they belong under it.

     Cards become a wrapping row with a sane min width, so five of them
     land two-up on a phone instead of five full-width slabs pushing the
     chart off-screen. */
  .gex-layout{grid-template-columns:1fr}
  .gex-chart-col{order:1}
  #gex-cards{order:2;flex-direction:row;flex-wrap:wrap}
  #gex-cards > *{flex:1 1 140px;min-width:140px}
  .regime-meta{grid-template-columns:1fr 1fr;gap:12px}
  .g-6{grid-template-columns:repeat(2,1fr)}
  .g-5{grid-template-columns:repeat(2,1fr)}
  #dd-summary{grid-template-columns:1fr 1fr !important}
  #dd-tables{grid-template-columns:1fr !important}
  #p-virtual>div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .aic-exe-levels,.ts-levels{grid-template-columns:repeat(3,1fr);gap:6px}
  .vt-pnl-bar{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .heatmap-grid,.mcx-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));padding:10px}
  .mkt-indices{grid-template-columns:1fr;gap:8px}

  /* 4. Cards + tables: contain and scroll instead of overflowing */
  .card{padding:14px 12px;border-radius:14px}
  .card table{display:block;overflow-x:auto;white-space:nowrap;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .tab-panel{min-width:0}
  .tab-panel *{max-width:100%}

  /* 5. Typography scale-down */
  .regime-name{font-size:clamp(30px,9vw,42px)}
  .regime-sub{font-size:15px}
  .regime-name-row{flex-wrap:wrap;gap:8px}
  .regime-top{margin-bottom:16px}
  body{font-size:14px}

  /* Events collapse to one button. Eight stacked chips pushed Market
     Structure most of a screen down; the list moves into a modal. */
  .ev-inner{display:none}
  #ev-mobile-btn{display:flex}

  /* 6. Virtual Trades — the add-instrument row was UNUSABLE, not just ugly.
     It is a nowrap flex row whose children total ~165 + 150 + strike + 100px
     against a ~366px viewport, and because html/body are overflow-x:hidden
     the excess is CLIPPED rather than scrollable — so "FUT" and the Add
     button were unreachable, with no way to scroll to them. Wrap it into
     three full-width rows instead. */
  .wl-add-row{flex-wrap:wrap}
  .wl-sym-select{flex:1 1 100%}
  .wl-type-group{flex:1 1 100%;width:100%}
  .wl-type-btn{flex:1 1 0;padding:0;min-width:0}
  .wl-strike-select{flex:1 1 0;min-width:0}
  .wl-add-btn{flex:0 0 auto;padding:0 22px}

  /* "Futures & Options" wraps to two lines and shoves the bar taller than
     its siblings. Let the bar scroll sideways like the main tab pill does
     rather than squeezing the labels. */
  .vt-subtab-bar{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vt-subtab-bar::-webkit-scrollbar{display:none}
  .vt-subtab{flex:0 0 auto;white-space:nowrap;padding:8px 12px;font-size:12px}

  /* Place Order above the watchlist. On desktop this is a 360px right rail
     so the DOM has it second; once the grid collapses to one column that
     same order puts the ticket below the entire tab section — a long scroll
     past the watchlist, positions and orders tables to reach the one control
     you came to use. `order` reorders the grid items without touching the
     markup, so the desktop rail stays exactly where it is. */
  #vt-place-order{order:-1}
}

/* ═══ HEADER GLOW SHIELD — REMOVED ══════════════════════════════
   Was a 320px fixed band under the navbar: a gradient, a 12px
   backdrop-filter blur, a mask, and a coral radial glow on top. Its job was
   to fade out content scrolling behind a TRANSPARENT #topbar.

   It also blurred and washed out everything in that 320px — which on the
   redesigned Markets tab is the whole sub-nav and the top of the scanner
   grid, and the reference design has no such haze at all. #topbar is now
   opaque instead, which handles the same problem without touching anything
   below it. The element is kept in the markup but inert, so the ~8 rules
   elsewhere that reference it as a sibling selector do not need rewriting. */
#header-shield{display:none}

/* ══ Strategy Builder + Simulator (OI Analysis > Strategy Builder) ══
   Palette comes entirely from the terminal's existing tokens, so the
   panel follows the light/dark toggle without a second theme to keep
   in sync. Prefixed sb- throughout - see the sb* block in
   terminal-app.js for why the name is kept apart from strategy.py. */
.sb-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sb-title{font-size:12px;font-weight:700;color:var(--tx3);letter-spacing:.08em;
  text-transform:uppercase}
.sb-head-r{display:flex;gap:8px;flex-wrap:wrap}
.sb-sub{font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:8px}

/* Simulator time bar */
.sb-sim-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:10px;border:1px solid var(--border);
  border-radius:10px;background:var(--bg3)}
.sb-sim-bar select{background:var(--bg-card);color:var(--tx1);
  border:1px solid var(--border);border-radius:7px;padding:6px 9px;
  font-size:12px;font-family:inherit}
.sb-sim-steps{display:flex;gap:4px;flex-wrap:wrap}
.sb-sim-steps button{background:var(--bg-card);color:var(--tx2);cursor:pointer;
  border:1px solid var(--border);border-radius:7px;padding:6px 10px;
  font:700 11px/1 'IBM Plex Mono',monospace}
.sb-sim-steps button:hover{border-color:var(--accent,#ee654b);color:var(--tx1)}
.sb-sim-at{margin-left:auto;font:600 11px/1.4 'IBM Plex Mono',monospace;
  color:var(--tx3)}
.sb-note{font-size:12px;color:var(--accent,#ee654b);margin-bottom:10px}

/* Two columns on desktop, stacked on narrow screens. The chart column is
   given the larger share: the payoff is the thing being read, the leg
   table is the thing being edited, and editing tolerates less room. */
.sb-grid{display:grid;gap:16px;grid-template-columns:minmax(280px,380px) 1fr;
  align-items:start}
@media(max-width:900px){.sb-grid{grid-template-columns:1fr}}

.sb-cat-bar{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.sb-cat{border:1px solid var(--border);background:transparent;color:var(--tx3);
  cursor:pointer;border-radius:100px;padding:5px 13px;font-size:11px;font-weight:700}
.sb-cat.on{background:var(--accent,#ee654b);border-color:var(--accent,#ee654b);color:#fff}
.sb-presets{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sb-preset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  border:1px solid var(--border);background:var(--bg-card);border-radius:9px;
  padding:9px 11px;cursor:pointer;text-align:left}
.sb-preset:hover{border-color:var(--accent,#ee654b)}
.sb-preset.on{border-color:var(--accent,#ee654b);background:rgba(238,101,75,.08)}
.sb-preset-n{font-size:12px;font-weight:700;color:var(--tx1)}
.sb-preset-l{font-size:10px;color:var(--tx3)}

.sb-legs-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.sb-legs{width:100%;border-collapse:collapse;font-size:12px;min-width:420px}
.sb-legs th{text-align:left;padding:8px 9px;font-size:10px;font-weight:700;
  color:var(--tx3);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--border)}
.sb-legs td{padding:6px 9px;border-bottom:1px solid var(--border)}
.sb-legs tr:last-child td{border-bottom:none}
.sb-legs select,.sb-legs input{background:var(--bg3);color:var(--tx1);
  border:1px solid var(--border);border-radius:6px;padding:5px 6px;
  font-size:12px;font-family:inherit;width:100%}
/* Each control sized to its own content rather than one shared max-width:
   a five-digit strike and a one-digit lot count do not want the same box,
   and a shared cap truncated "23400" to "23" in the strike column. */
.sb-legs td:nth-child(1){min-width:74px}
.sb-legs td:nth-child(2){min-width:64px}
.sb-legs td:nth-child(3){min-width:88px}
.sb-legs td:nth-child(4){min-width:58px}
.sb-legs td:nth-child(5){min-width:78px}
.sb-ltp{font-family:'IBM Plex Mono',monospace;color:var(--tx2)}
.sb-x{background:transparent;border:none;color:var(--tx3);cursor:pointer;
  font-size:17px;line-height:1;padding:0 4px}
.sb-x:hover{color:#f85149}
.sb-empty{padding:18px;text-align:center;color:var(--tx3);font-size:12px}

.sb-chart{width:100%;overflow-x:auto}
.sb-svg{width:100%;height:auto;display:block}
.sb-empty-chart{padding:60px 18px;text-align:center;color:var(--tx3);font-size:12.5px;
  border:1px dashed var(--border);border-radius:10px}
/* sb-gl, not sb-grid: .sb-grid is the two-column LAYOUT class above, and
   display:grid landing on an SVG <line> is not a style anyone intended. */
.sb-gl{stroke:var(--border);stroke-width:1}
.sb-ax{fill:var(--tx3);font-size:9px;font-family:'IBM Plex Mono',monospace}
.sb-zero{stroke:var(--tx3);stroke-width:1;stroke-dasharray:3 3}
.sb-exp{fill:none;stroke:var(--accent,#ee654b);stroke-width:2.2}
.sb-now{fill:none;stroke:#58a6ff;stroke-width:1.6;stroke-dasharray:5 4}
.sb-spot{stroke:var(--tx2);stroke-width:1;stroke-dasharray:2 4}
.sb-be{stroke:#f8b21a;stroke-width:1;stroke-dasharray:2 3}
.sb-fill-p{fill:rgba(34,197,94,.16)}
.sb-fill-l{fill:rgba(248,81,73,.14)}

.sb-legend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 12px;
  font-size:10.5px;color:var(--tx3)}
.sb-legend i{display:inline-block;width:14px;height:2px;margin-right:5px;
  vertical-align:middle}
.sb-k-exp{background:var(--accent,#ee654b)}
.sb-k-now{background:#58a6ff}
.sb-k-spot{background:var(--tx2)}
.sb-k-be{background:#f8b21a}

.sb-stats{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.sb-stat{border:1px solid var(--border);border-radius:9px;padding:9px 11px;
  background:var(--bg-card);display:flex;flex-direction:column;gap:3px}
.sb-stat-l{font-size:9.5px;font-weight:700;color:var(--tx3);letter-spacing:.06em;
  text-transform:uppercase}
.sb-stat-v{font:700 13px/1.3 'IBM Plex Mono',monospace;color:var(--tx1)}
.sb-stat-v.up{color:#3fb950}
.sb-stat-v.dn{color:#f85149}
.sb-disc{margin-top:12px;font-size:11px;line-height:1.6;color:var(--tx3)}


/* ═══ LAYOUT (2026-10): Range Watch top-right, timeline on Market Analysis ═══ */
/* Two tracks now: Market Structure | Range Watch, Range Watch taking the
   width the Timeline + Current Market State shared. Range Watch hides itself
   with no chain; the row then collapses to one track. */
#dash-top-grid,
#dash-top-grid:has(#intel-state-card[style*="none"]){grid-template-columns:1fr 1fr}
#dash-top-grid:has(> #rw-card[style*="none"]){grid-template-columns:1fr}
@media(max-width:1100px){
  #dash-top-grid,#dash-top-grid:has(#intel-state-card[style*="none"]){grid-template-columns:1fr}
}
/* Range Watch keeps the row's height but is never clipped: the disclosure
   below can open, and then the card simply grows. */
#dash-top-grid > #rw-card{height:auto;overflow:visible;margin:0}
@media(min-width:1101px){ #dash-top-grid > #rw-card{min-height:470px} }
#dw-grid #rw-card .rw-head{margin-bottom:10px}
#dw-grid #rw-card .rw-meta{font-size:9.5px}
#dw-grid #rw-card .rw-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
#dw-grid #rw-card .rw-cell{padding:9px 12px}
#dw-grid #rw-card .rw-lv{margin-top:4px}
#dw-grid #rw-card .rw-lv-v{font-size:15px}
#dw-grid #rw-card .rw-val{font-size:15px}
#dw-grid #rw-card .rw-tl{margin:0 0 10px}
#dw-grid #rw-card .rw-rangeline{margin-bottom:10px;padding:8px 12px}
#dw-grid #rw-card .rw-or-why{display:none}
#dw-grid #rw-card .rw-tl{gap:2px;font-size:11px}
#dw-grid #rw-card .rw-rangeline{font-size:11px;gap:4px 16px}
.rw-more{border-top:1px solid var(--border);padding-top:8px}
.rw-more summary{cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3);list-style:none}
.rw-more summary::-webkit-details-marker{display:none}
.rw-more summary::after{content:' ▾'}
.rw-more[open] summary::after{content:' ▴'}
.rw-more[open] .rw-branches{margin-top:10px}
.rw-tl-more{background:none;border:0;padding:0;color:var(--coral);font-size:11px;
  font-weight:700;cursor:pointer;text-align:left}

/* Current Market State, now a full-width row under the top grid. */
#p-dashboard > #intel-state-card{margin-top:14px;height:auto;overflow:visible}
#dw-grid .dw > #intel-state-card{height:auto;overflow:visible}
#dw-grid .dw > #intel-state-card .intel-evidence{overflow:visible}
#p-dashboard > #intel-state-card .intel-evidence{overflow:visible}

/* Market Timeline milestone strip (Market Analysis tab): fixed 100px. */
#intel-timeline-card{margin:0 0 16px;overflow:visible}
.tl-strip{position:relative;height:100px;overflow:hidden}
.tl-line{position:absolute;left:0;right:0;top:46px;height:8px;border-radius:8px;display:flex;overflow:hidden}
.tl-seg{flex:1 1 0;height:100%}
.tl-node{position:absolute;top:40px;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:var(--bg-card);border:5px solid currentColor;box-sizing:border-box}
.tl-lab{position:absolute;transform:translateX(-50%);text-align:center;font-size:11px;line-height:1.25;
  color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-lab.up{top:2px} .tl-lab.dn{top:66px}
.tl-lab b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3);font-weight:600}
.tl-lab.dn b{order:2}
.tl-more{position:absolute;left:0;top:66px;font-size:10px;color:var(--tx3)}
.tl-expand{margin-left:10px;background:var(--bg3);border:1px solid var(--border);color:var(--tx1);
  width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
  transition:transform .2s}
.tl-expand[aria-expanded="true"]{transform:rotate(180deg)}
#intel-timeline-card #intel-timeline:not([hidden]){margin-top:14px;border-top:1px solid var(--border);padding-top:14px}

/* ═══ CUSTOMISABLE DASHBOARD (terminal-dash.js) ═══════════════════ */
.dw-bar{display:none;align-items:center;gap:8px;margin-bottom:-4px}
#p-dashboard.active .dw-bar{display:flex}
.dw-bar-t{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3);margin-right:auto}
.dw-bar-btn{background:transparent;border:1px solid var(--border2);color:var(--tx2);border-radius:999px;
  padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.dw-bar-btn:hover{border-color:var(--coral-border);color:var(--coral)}
.dw-grid{display:flex;flex-direction:column;gap:14px}
.dw-grid:empty{display:none}
/* A band: every run of half-width cards. Two columns that stack on their
   own, so one tall card can sit beside two shorter ones. */
.dw-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.dw-col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:900px){ .dw-band{grid-template-columns:minmax(0,1fr)} }
.dw{min-width:0;display:flex;flex-direction:column;gap:14px;border-radius:20px;position:relative;
  transition:box-shadow .3s}
.dw.dw-off{display:none}
/* Built-in cards that hide themselves (auction-only, alerts, Range Watch
   before the chain) must not leave an empty slot behind. */
.dw:not([data-custom]):not(:has(> :not(.section-caption):not(.dw-tools):not([style*="none"]))){display:none}
.dw.dw-flash{box-shadow:0 0 0 2px var(--coral)}
/* Half of a 6-tile row. */
.g-6.dw-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){ .g-6.dw-g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Range Watch now lives in the dashboard grid rather than the old top row. */
#dw-grid #rw-card{height:auto;overflow:visible;margin:0}

/* Edit mode */
.dw-bar .dw-e{display:none}
body.dw-editing .dw-bar .dw-e{display:inline-flex}
body.dw-editing .dw-bar .dw-v{display:none}
.dw-bar .dw-bar-t.dw-e{font-family:inherit;letter-spacing:0;text-transform:none;font-weight:600;font-size:12px}
.dw-done{background:var(--coral)!important;color:#fff!important;border-color:var(--coral)!important}
body.dw-editing .dw{outline:1.5px dashed var(--coral-border);outline-offset:3px}
/* Cards that are hidden until they have data still need to be movable:
   show them as a labelled placeholder while editing. */
body.dw-editing .dw:not([data-custom]):not(.dw-off):not(:has(> :not(.section-caption):not(.dw-tools):not([style*="none"]))){
  display:flex;min-height:64px;border-radius:14px;background:var(--bg3)}
.dw-tools{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;background:var(--bg3);
  border:1px solid var(--border2);font-size:12px;margin-bottom:-6px}
.dw-t-grip{cursor:grab;font-size:16px;line-height:1;padding:2px 6px;border-radius:6px;color:var(--coral);
  user-select:none;-webkit-user-select:none}
.dw-t-grip:active{cursor:grabbing}
.dw-t-name{font-weight:700;color:var(--tx1);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-t-name small{font-weight:500;color:var(--tx3);margin-left:4px}
.dw-tools button{background:none;border:1px solid var(--border2);color:var(--tx2);border-radius:6px;font-size:11px;
  font-weight:700;padding:3px 7px;cursor:pointer;font-family:inherit}
.dw-tools button:hover{border-color:var(--coral);color:var(--coral)}
.dw.dw-dragging{opacity:.35}
.dw.dw-ins-before{box-shadow:0 -4px 0 0 var(--coral)}
.dw.dw-ins-after{box-shadow:0 4px 0 0 var(--coral)}
.dw-drop{border:1.5px dashed var(--border2);border-radius:12px;padding:14px;text-align:center;font-size:12px;
  color:var(--tx3);font-weight:600}
.dw-drop.over{border-color:var(--coral);color:var(--coral);background:var(--coral-dim)}

.dwc{padding:18px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
.dwc-head{display:flex;align-items:center;gap:10px}
.dwc-title{font-weight:800;font-size:14px;color:var(--tx1)}
.dwc-meta{font-size:11px;color:var(--tx3);font-family:'IBM Plex Mono',monospace;margin-right:auto}
.dwc-x{background:none;border:0;color:var(--tx3);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.dwc-x:hover{color:var(--red)}
.dwc-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.dwc-empty{color:var(--tx3);font-size:13px;padding:18px 0;text-align:center}
.dwc-note{font-size:11px;color:var(--tx3)}
.dwc-tbl{width:100%;border-collapse:collapse;font-size:12px}
.dwc-tbl th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);font-weight:700;
  text-align:left;padding:0 6px 6px 0;border-bottom:1px solid var(--border)}
.dwc-tbl td{padding:7px 6px 7px 0;border-bottom:1px solid var(--border);color:var(--tx2);
  font-family:'IBM Plex Mono',monospace}
.dwc-tbl .r,.dwc-tbl th.r{text-align:right}
.dwc-tbl td.up{color:var(--green)} .dwc-tbl td.dn{color:var(--red)}
.dwc-sym{color:var(--tx1)!important;font-weight:700;font-family:inherit!important}
.dwc-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:1px 5px;
  border-radius:4px;border:1px solid var(--border2);color:var(--tx3);vertical-align:middle}
.dwc-tag.on{color:var(--green);border-color:var(--green)}
.dwc-foot{display:flex;gap:14px}
.dwc-link{background:none;border:0;padding:0;color:var(--coral);font-size:12px;font-weight:700;
  cursor:pointer;text-decoration:none;font-family:inherit}
.dwc-link:hover{text-decoration:underline}

.dws-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dws-pick label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--tx3);font-weight:700;
  flex:1 1 140px}
.dws-pick select{background:var(--bg3);color:var(--tx1);border:1px solid var(--border2);border-radius:8px;
  padding:7px 8px;font-size:13px;font-family:inherit}

.dwo-read{font-size:13px;line-height:1.55;color:var(--tx2);padding:10px 12px;border-radius:10px;
  border-left:3px solid var(--amber);background:var(--bg3)}
.dwo-read b{color:var(--tx1)}
.dwo-read.up{border-left-color:var(--green)} .dwo-read.dn{border-left-color:var(--red)}
.dwo-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dwo-sum div{display:flex;flex-direction:column;gap:2px}
.dwo-sum span{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.dwo-sum b{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--tx1)}
.dwo-sum b.up,.dwo-grid b.up{color:var(--green)} .dwo-sum b.dn,.dwo-grid b.dn{color:var(--red)}
@media (max-width:600px){ .dwo-sum{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dwo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12px}
.dwo-list b{font-family:'IBM Plex Mono',monospace;color:var(--tx1);margin-right:4px}
.dwo-list span{color:var(--tx3)}
.dwo-learn{font-size:12px;color:var(--tx2)}
.dwo-learn summary{cursor:pointer;color:var(--coral);font-weight:700}
.dwo-learn p{margin:8px 0 0;color:var(--tx3);line-height:1.5}
.dwo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dwo-grid div{display:flex;flex-direction:column;gap:2px;background:var(--bg3);border-radius:8px;padding:8px 10px}
.dwo-grid span{color:var(--tx3);font-size:11px;line-height:1.4}

.dwg-item{display:flex;flex-direction:column;gap:4px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.dwg-item:last-child{border-bottom:0;padding-bottom:0}

.dwn-ta{width:100%;min-height:130px;box-sizing:border-box;resize:vertical;background:var(--bg3);color:var(--tx1);
  border:1px solid var(--border2);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;font-family:inherit}

/* Customise sheet: right-hand drawer on desktop, bottom sheet on phones. */
.dw-panel{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.45);display:none}
.dw-panel.on{display:block}
.dw-sheet{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg2);
  border-left:1px solid var(--border2);display:flex;flex-direction:column}
.dw-sheet-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.dw-tabs{display:flex;gap:4px;margin-right:auto;background:var(--bg3);border-radius:999px;padding:3px}
.dw-tabs button{background:none;border:0;color:var(--tx2);font-weight:700;font-size:12px;padding:6px 14px;
  border-radius:999px;cursor:pointer;font-family:inherit}
.dw-tabs button.on{background:var(--coral);color:#fff}
.dw-close{background:none;border:0;color:var(--tx2);font-size:24px;cursor:pointer;line-height:1}
.dw-sheet-body{overflow-y:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px}
.dw-hint{font-size:12px;color:var(--tx3);line-height:1.5}
.dw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dw-row{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;padding:8px 8px 8px 6px}
.dw-row.off{opacity:.55}
.dw-row.drag{opacity:.4}
.dw-row.over{border-color:var(--coral)}
.dw-grip{color:var(--tx3);cursor:grab;padding:0 4px;font-size:13px}
.dw-chk{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;cursor:pointer;font-size:13px;color:var(--tx1);font-weight:600}
.dw-chk input{accent-color:var(--coral);margin-top:2px}
.dw-chk small{display:block;font-size:10px;color:var(--tx3);font-weight:500}
.dw-sz,.dw-ar{background:none;border:1px solid var(--border2);color:var(--tx2);border-radius:6px;
  font-size:11px;font-weight:700;padding:4px 7px;cursor:pointer;font-family:inherit}
.dw-sz{min-width:42px}
.dw-ar:disabled{opacity:.3;cursor:default}
.dw-del:hover{color:var(--red);border-color:var(--red)}
.dw-foot{display:flex;justify-content:flex-end}
.dw-reset{background:none;border:0;color:var(--tx3);font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}
.dw-cat{display:flex;flex-direction:column;gap:8px}
.dw-cat-i{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px}
.dw-cat-i div{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.dw-cat-i b{font-size:13px;color:var(--tx1)}
.dw-cat-i span{font-size:12px;color:var(--tx3);line-height:1.4}
@media (max-width:600px){
  .dw-sheet{top:auto;left:0;width:100%;max-height:85vh;border-left:0;border-top:1px solid var(--border2);
    border-radius:18px 18px 0 0}
}

/* OI Deep Data widget */
.dwd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dwd-box{border:1px solid var(--border2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.dwd-box span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dwd-box b{font-family:'IBM Plex Mono',monospace;font-size:22px}
.dwd-box small{font-size:11px;color:var(--tx3)}
.dwd-box.up{border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.dwd-box.up span,.dwd-box.up b{color:var(--green)}
.dwd-box.dn{border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.dwd-box.dn span,.dwd-box.dn b{color:var(--red)}
.dwd-tbl{background:var(--bg3);border-radius:12px;padding:10px 12px;font-size:12px}
.dwd-tt{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.dwd-tbl.up .dwd-tt,.dwd-tbl.up b{color:var(--green)}
.dwd-tbl.dn .dwd-tt,.dwd-tbl.dn b{color:var(--red)}
.dwd-r{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;padding:3px 0;color:var(--tx1)}
/* OI Chart widget */
.dwo-leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11px;color:var(--tx2)}
.dwo-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:-6px}
.dwo-svg{width:100%;height:auto;display:block}
.dwo-ax{font-size:13px;fill:var(--tx3);font-family:'IBM Plex Mono',monospace}
/* Gamma widget */
.dwg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.dwg-chart{min-width:0;overflow:hidden}
/* Market-wide undervalued options in a widget */
.dwu-list{max-height:none}
/* Index switch with nothing cached yet: dim instead of showing the
   previous index's numbers under the new name. */
#dw-grid .card,#dw-grid .stat-tile,#dw-grid .mkt-heatmap-card{transition:opacity .15s}
body.ng-sym-switching #dw-grid .card,body.ng-sym-switching #dw-grid .stat-tile{opacity:.45}

/* Equal-height columns in a band: the last card of each column stretches. */
.dw-band{align-items:stretch}
.dw.dw-fill{flex:1 1 auto}
.dw.dw-fill > :last-child{flex:1 1 auto}
@media (max-width:900px){ .dw.dw-fill, .dw.dw-fill > :last-child{flex:0 0 auto} }
/* Pointer drag */
.dw-t-grip{touch-action:none}
body.dw-dragmode, body.dw-dragmode *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.dw-ghost{position:fixed;left:0;top:0;z-index:4000;pointer-events:none;background:var(--coral);color:#fff;
  font-size:12px;font-weight:800;padding:7px 12px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:nowrap}

/* Gamma widget sized like the Market Structure card: one compact row of
   figures above a 290px chart (the Gamma tab's cards are larger). */
.dwg-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dwg-cards > div{padding:7px 8px!important;border-radius:8px!important;min-width:0}
.dwg-cards > div > div:first-child{font-size:8.5px!important;letter-spacing:.03em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwg-cards > div > div:last-child{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){ .dwg-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.dwg-chart canvas{display:block;max-width:100%}

/* Big cards at half width: denser tiles so they stay near the Market
   Structure card's size. */
#dw-grid .dw.half .heatmap-grid,#dw-grid .dw.half .mcx-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));padding:10px;gap:6px}
.dwo-ax{font-size:22px}

/* One-time dashboard tutorial */
.dw-tour{position:fixed;inset:0;z-index:3500;background:rgba(0,0,0,.55);display:flex;align-items:center;
  justify-content:center;padding:16px;overflow-y:auto}
.dw-tour-card{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:18px;
  width:min(860px,100%);padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);margin:auto}
.dw-tour-x{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--tx2);font-size:26px;cursor:pointer;line-height:1}
.dw-tour-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--coral);padding:3px 9px;border-radius:999px}
.dw-tour-card h2{margin:8px 0 4px;font-size:22px;color:var(--tx1)}
.dw-tour-sub{margin:0 0 14px;color:var(--tx2);font-size:14px;line-height:1.5}
.dw-tour-gif{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#181413}
.dw-tour-gif img{display:block;width:100%;height:auto;max-height:calc(100vh - 330px);object-fit:contain;margin:0 auto}
.dw-tour-steps{margin:14px 0 4px;padding-left:20px;color:var(--tx2);font-size:13px;line-height:1.7}
.dw-tour-steps b{color:var(--tx1)}
.dw-tour-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media (max-width:600px){ .dw-tour-card{padding:18px 16px} .dw-tour-card h2{font-size:19px} }

/* OI Deep Data: compact summary row of four, larger table text. */
.dwd-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dwd-sum .dwd-box{padding:8px 10px;border-radius:10px;gap:1px}
.dwd-sum .dwd-box span{font-size:9.5px;white-space:nowrap}
.dwd-sum .dwd-box b{font-size:19px;line-height:1.15}
.dwd-sum .dwd-box small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){ .dwd-sum{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dwd-grid{gap:8px}
.dwd-tbl{padding:8px 12px}
.dwd-tt{font-size:11px;margin-bottom:3px}
.dwd-r{font-size:14.5px;padding:0;line-height:1.45;font-weight:600}
.dwd-r b{font-weight:700}
/* Current Market State at half width: stack the regime and agreement. */
#dw-grid .dw.half #intel-state-card .intel-state-row{flex-direction:column;gap:10px}
#dw-grid .dw.half #intel-state-card .intel-state-main{flex:0 0 auto;width:100%}
#dw-grid .dw.half #intel-state-card .intel-state-conf{flex:0 0 auto;text-align:left;width:100%}

/* Market Stats: the twelve stat tiles grouped in one card, each still its
   own tile (same look as before, just inside one container). */
.dw-stats{padding:16px;display:flex;flex-direction:column;gap:12px}
.dw-stats-h{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3)}
.dw-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#dw-grid .dw:not(.half) .dw-stats-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){ #dw-grid .dw:not(.half) .dw-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ #dw-grid .dw-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
.dw-stats-grid .stat-tile{min-width:0;background:var(--bg2)}

/* ═══ Range Watch, bolder (dashboard) ═══════════════════════════════
   Colour-coded cells, R/S badges, larger levels, tighter spacing. */
#dw-grid #rw-card{padding:18px}
#dw-grid #rw-card .rw-head{margin-bottom:12px}
#dw-grid #rw-card .rw-title{font-size:18px;font-weight:900;letter-spacing:-.01em}
#dw-grid #rw-card .rw-title #rw-sym{color:var(--coral)}
#dw-grid #rw-card .rw-meta{font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;
  background:var(--bg3);color:var(--tx2)}
#dw-grid #rw-card .rw-grid{gap:10px;margin-bottom:10px}
#dw-grid #rw-card .rw-cell{--acc:var(--tx3);padding:11px 14px 12px;border-radius:12px;position:relative;
  background:color-mix(in srgb,var(--acc) 7%,var(--bg3));border:1px solid color-mix(in srgb,var(--acc) 28%,transparent)}
#dw-grid #rw-card .rw-cell::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc)}
#dw-grid #rw-card .rw-grid > .rw-cell:nth-child(1){--acc:#6366f1}
#dw-grid #rw-card .rw-grid > .rw-cell:nth-child(2){--acc:var(--amber,#f59e0b)}
#dw-grid #rw-card .rw-grid > .rw-cell:nth-child(3){--acc:var(--coral)}
#dw-grid #rw-card .rw-grid > .rw-cell:nth-child(4){--acc:#0ea5e9}
#dw-grid #rw-card .rw-lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--acc)}
#dw-grid #rw-card .rw-tag{color:var(--tx3);font-weight:600}
#dw-grid #rw-card .rw-lv{margin-top:7px;gap:10px;align-items:center}
#dw-grid #rw-card .rw-lv-k{width:auto;min-width:22px;height:22px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:6px;font-size:11px;font-weight:900;color:#fff}
#dw-grid #rw-card .rw-cell > .rw-lv:nth-child(2) .rw-lv-k{background:var(--red)}
#dw-grid #rw-card .rw-cell > .rw-lv:nth-child(3) .rw-lv-k{background:var(--green)}
#dw-grid #rw-card .rw-lv-v{font-size:22px;font-weight:800;letter-spacing:-.01em}
#dw-grid #rw-card .rw-cell > .rw-lv:nth-child(2) .rw-lv-v{color:var(--red)}
#dw-grid #rw-card .rw-cell > .rw-lv:nth-child(3) .rw-lv-v{color:var(--green)}
#dw-grid #rw-card .rw-st{font-size:11px;color:var(--tx2)}
#dw-grid #rw-card .rw-sub{font-size:11px;margin-top:6px;color:var(--tx2)}
#dw-grid #rw-card .rw-val{font-size:20px;font-weight:800;margin-top:7px}
#dw-grid #rw-card .rw-rangeline{font-size:12.5px;padding:10px 14px;border-radius:12px;margin-bottom:10px;
  background:color-mix(in srgb,var(--coral) 8%,var(--bg3));border:1px solid color-mix(in srgb,var(--coral) 22%,transparent)}
#dw-grid #rw-card .rw-rangeline b{font-weight:800}
#dw-grid #rw-card #rw-range,#dw-grid #rw-card #rw-or{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--tx1)}
#dw-grid #rw-card .rw-more summary{font-size:10.5px}

/* ── PCR & Spot, OI Buildup by Strike, Market Structure readings ─────── */
.dwp-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.dwp-top div{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.dwp-top span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.dwp-top b{font-size:19px;color:var(--tx1);font-variant-numeric:tabular-nums;margin-right:8px}
.dwp-top small{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.dwp-top .up,.dwb-row .up{color:var(--green)} .dwp-top .dn,.dwb-row .dn{color:var(--red)}
.dwp-lbl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin:6px 0 2px}
.dwp-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--tx3);font-variant-numeric:tabular-nums}
.dwp-svg{display:block;width:100%}
.dwp-t{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx3);margin-top:4px;font-variant-numeric:tabular-nums}
.dwb-row{display:grid;grid-template-columns:minmax(0,1.1fr) 1fr .8fr auto;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--border);font-size:13px;font-variant-numeric:tabular-nums}
.dwb-row:last-of-type{border-bottom:0}
.dwb-row > span{text-align:right}
.dwb-row b{color:var(--tx1)} .dwb-side{font-size:11px;color:var(--tx3);font-weight:700}
.dwb-px{color:var(--tx2);font-size:12px}
.dwb-chip,.dw-bias{font-size:10.5px;font-weight:800;border-radius:6px;padding:3px 8px;white-space:nowrap;text-align:center}
.dwb-chip.lb,.dw-bias.bull{background:var(--green-dim);color:var(--green)}
.dwb-chip.sb,.dw-bias.bear{background:var(--red-dim);color:var(--red)}
.dwb-chip.sc{background:rgba(59,130,246,.12);color:#3b82f6}
.dwb-chip.lu,.dw-bias.neu{background:rgba(245,158,11,.14);color:var(--amber)}
.dw-hist{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.dw-hist-h{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px}
.dw-hrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.dw-hrow:last-child{border-bottom:0}
.dw-hrow time{flex:0 0 40px;color:var(--tx3);font-size:11.5px;font-variant-numeric:tabular-nums}
.dw-hrow b{color:var(--tx1);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-hrow .sp{flex:1}
.dw-hnum{color:var(--tx2);font-variant-numeric:tabular-nums}

/* ═══ Demo theme on the dashboard (2026-10-06) ═══════════════════════
   Card headings, Range Watch, OI Chart, GEX and PCR & Spot drawn the way
   /demo draws them. */
#dw-grid :is(.dwc-title,.rw-title,.wall-title,.mkt-card-title,.intel-title,.ec-title,.mks-h-title,.regime-tag,.dw-stats-h){
  font-family:Manrope,system-ui,sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx2);display:inline-flex;align-items:center;gap:8px}
/* the ⋮⋮ handle (a real element now, so it can be grabbed) */
.dw-grip{color:var(--tx3);font-size:14px;letter-spacing:-1px;font-weight:400;padding:2px 6px 2px 0;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none;text-transform:none;line-height:1}
.dw-grip:hover{color:var(--coral)}
.dw-grip-abs{position:absolute;top:12px;left:8px;z-index:3}
#dw-grid .dw{position:relative}
.dw-ghost-card{position:fixed;left:0;top:0;z-index:4000;pointer-events:none;opacity:.93;overflow:hidden;
  border-radius:14px;box-shadow:0 24px 50px rgba(40,20,10,.30);outline:2px solid var(--coral);background:var(--bg-card)}
.dw-ghost-card .dw-tools{display:none}
#dw-grid #rw-card .rw-title #rw-sym,#dw-grid .ec-title #ec-sym{color:var(--coral)}
#dw-grid .dwc-meta{font-size:10.5px;color:var(--tx3);font-weight:600}

/* Range Watch */
#dw-grid #rw-card .rw-meta{background:none;border:0;padding:0;color:var(--tx3)}
.rwd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rwd-grid > div{border-radius:10px;padding:9px 12px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--tx2)}
.rwd-grid b{display:block;font-family:'IBM Plex Mono',monospace;font-size:19px;letter-spacing:0;margin-top:2px;font-variant-numeric:tabular-nums}
.rwd-grid .u{background:var(--green-dim)} .rwd-grid .u b{color:var(--green)}
.rwd-grid .d{background:var(--red-dim)} .rwd-grid .d b{color:var(--red)}
.rwd-state{margin:10px 0 12px;font-size:12.5px;color:var(--tx2)}
.rwd-state b{color:var(--tx1)}
.rwd-n{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;color:var(--tx1)}
#dw-grid #rw-card .rw-cell{background:var(--bg3);border:1px solid var(--border)}
#dw-grid #rw-card .rw-cell::before{display:none}
#dw-grid #rw-card .rw-lbl{color:var(--tx3)}
#dw-grid #rw-card .rw-lv-v,#dw-grid #rw-card .rw-val{font-family:'IBM Plex Mono',monospace;font-size:17px}
#dw-grid #rw-card .rw-tl{display:block;border-top:1px solid var(--border);padding-top:8px;margin:0 0 10px}
.rwd-log-h{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px}
.rwd-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.rwd-row:last-of-type{border-bottom:0}
.rwd-row time{flex:0 0 42px;font-family:'IBM Plex Mono',monospace;color:var(--tx3);font-size:11.5px}
.rwd-dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--tx3)}
.rwd-dot.up{background:var(--green)} .rwd-dot.dn{background:var(--red)} .rwd-dot.mp{background:var(--coral)}
.rwd-msg{flex:1;color:var(--tx1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rwd-row b{font-weight:700}

/* charts */
.dwx-svg{display:block;width:100%;height:210px}
.dwx-ax{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--tx3)}
.dwx-spot{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;fill:#ee654b}
.dwx-mid{stroke:var(--border2);stroke-width:1}
.dwx-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--tx2);margin-top:6px;align-items:center}
.dwx-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.dwx-leg .dwx-r{margin-left:auto} .dwx-leg b{color:var(--tx1)}
.dwx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dwx-chips span{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:11px;color:var(--tx3);font-weight:700}
.dwx-chips b{color:var(--tx1);font-family:'IBM Plex Mono',monospace;margin-left:4px}
.dwx-lbl{font-size:11.5px;font-weight:700;margin:0 0 4px}
#dw-grid #rw-card .rw-title{font-size:11.5px;font-weight:800;letter-spacing:.09em}
.dw-hist summary.dw-hist-h{cursor:pointer;list-style:none;margin-bottom:0}
.dw-hist summary.dw-hist-h::-webkit-details-marker{display:none}
.dw-hist summary.dw-hist-h::after{content:'\25BE';margin-left:6px;color:var(--tx3)}
.dw-hist details[open] summary.dw-hist-h{margin-bottom:4px}
.dw-hist details[open] summary.dw-hist-h::after{content:'\25B4'}

/* Session timeline in Market Structure */
.dw-hist .dw-tl{height:100px;margin:2px 0 8px}
.dw-hdot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--tx3)}
.dw-hdot.up,.dw-hdot.bull{background:var(--green)} .dw-hdot.dn,.dw-hdot.bear{background:var(--red)}
.dw-hdot.mp{background:var(--coral)} .dw-hdot.neu{background:var(--amber)}

/* Range Watch: walls as one compact table */
.rwc{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px;font-size:12.5px}
.rwc-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;
  padding:7px 12px;border-top:1px solid var(--border)}
.rwc-row:first-child{border-top:0}
.rwc-head{background:var(--bg3);padding:5px 12px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.rwc-head span:nth-child(2){color:var(--red)} .rwc-head span:nth-child(3){color:var(--green)}
.rwc-l{font-weight:700;color:var(--tx2);font-size:12px;line-height:1.25}
.rwc-l .rw-tag{display:block;font-size:10.5px;font-weight:600;color:var(--tx3)}
.rwc-v{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.rwc-v b{font-family:'IBM Plex Mono',monospace;font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rwc-v.r b{color:var(--red)} .rwc-v.s b{color:var(--green)}
#dw-grid #rw-card .rwc-v .rw-st,#rw-card .rwc-v .rw-st{font-size:10.5px;color:var(--tx3);font-family:'IBM Plex Mono',monospace;line-height:1.3}
#rw-card .rwc-v .rw-st.up{color:var(--green)} #rw-card .rwc-v .rw-st.dn{color:var(--red)}
.rwc-foot{background:var(--bg3);border-top:1px solid var(--border);padding:7px 12px;display:flex;flex-direction:column;gap:4px}
#dw-grid #rw-card .rwc-foot .rw-sub,#rw-card .rwc-foot .rw-sub{margin:0;font-size:11.5px;color:var(--tx2)}
#dw-grid #rw-card #rw-break-cell,#rw-card #rw-break-cell{background:none;border:0;padding:0;border-radius:0;box-shadow:none;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rwc-bl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
#dw-grid #rw-card #rw-break-cell .rw-val,#rw-card #rw-break-cell .rw-val{font-family:'IBM Plex Mono',monospace;font-size:13.5px;margin:0;color:var(--tx1)}
#rw-card #rw-break-cell.brk-up .rw-val{color:var(--green)} #rw-card #rw-break-cell.brk-dn .rw-val{color:var(--red)}
#dw-grid #rw-card #rw-break-cell.brk-up .rw-val{color:var(--green)} #dw-grid #rw-card #rw-break-cell.brk-dn .rw-val{color:var(--red)}

/* OI Deep Data, compact table */
.dwd2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.dwd2{grid-template-columns:1fr}}
.dwd2-side{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dwd2-h{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--bg3);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.dwd2-h em{font-style:normal;font-family:'IBM Plex Mono',monospace;letter-spacing:0;font-size:11.5px}
.dwd2-h em.up{color:var(--green)} .dwd2-h em.dn{color:var(--red)}
.dwd2-cols{display:grid;grid-template-columns:1fr 1fr}
.dwd2-col{padding:7px 10px 8px;min-width:0}
.dwd2-col + .dwd2-col{border-left:1px solid var(--border)}
.dwd2-t{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.dwd2-t span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dwd2-t b{font-family:'IBM Plex Mono',monospace;font-size:14.5px;font-weight:700}
.dwd2-col.up .dwd2-t{color:var(--green)} .dwd2-col.dn .dwd2-t{color:var(--red)}
.dwd2-sub{font-size:10.5px;color:var(--tx3);margin:1px 0 5px}
.dwd2-r{position:relative;display:flex;justify-content:space-between;gap:8px;padding:3px 4px;border-radius:5px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-variant-numeric:tabular-nums}
.dwd2-r i{position:absolute;right:0;top:2px;bottom:2px;border-radius:4px;opacity:.13}
.dwd2-col.up .dwd2-r i{background:var(--green)} .dwd2-col.dn .dwd2-r i{background:var(--red)}
.dwd2-r span{position:relative;color:var(--tx1)} .dwd2-r b{position:relative;font-weight:600}
.dwd2-col.up .dwd2-r b{color:var(--green)} .dwd2-col.dn .dwd2-r b{color:var(--red)}
.dwd2-none{font-size:11.5px;color:var(--tx3);padding:3px 4px}

/* Institutional Flows: cleaner, bigger figures */
#fii-dii-card .intel-headline{font-size:20px;font-weight:900;letter-spacing:-.01em;margin:4px 0 10px}
#fii-dii-card .fii-tabs{margin:0 0 12px}
.fao-cap{font-size:11.5px;color:var(--tx3);margin-bottom:6px}
.fao-cap b{color:var(--tx1)} .fao-cap span{margin-left:6px}
.fao-tbl{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fao-r{display:grid;grid-template-columns:64px repeat(4,minmax(0,1fr));align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border)}
.fao-r:first-child{border-top:0}
.fao-hd{background:var(--bg3);padding:6px 12px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.fao-hd span,.fao-c{text-align:right}
.fao-w{font-weight:800;font-size:13px;color:var(--tx1)}
.fao-c b{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.fao-c small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;opacity:.8;margin-top:1px}
.fao-c .fii-up{color:var(--green)} .fao-c .fii-dn{color:var(--red)}
.fao-ex{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
.fao-x{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.fao-xt{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.fao-xh{font-size:13.5px;font-weight:800;color:var(--tx1);margin-top:3px;line-height:1.35}
.fao-x details summary{font-size:11.5px;font-weight:700;color:var(--coral);cursor:pointer;margin-top:6px}
.fao-x details p{font-size:12.5px;line-height:1.55;color:var(--tx2);margin:6px 0 0}
#fii-dii-card .fii-legend{margin-top:12px;border-top:1px solid var(--border);padding-top:8px}
#fii-dii-card .fii-legend summary{font-size:11.5px;font-weight:700;color:var(--tx2);cursor:pointer}
#fii-dii-card .fii-legend details[open] summary{margin-bottom:6px}
#fii-dii-card .fii-row{font-size:13px}
#fii-dii-card .fii-v{font-family:'IBM Plex Mono',monospace;font-weight:700}
#fii-hist:has(.fao-tbl){max-height:none;overflow:visible}

/* F&O Scanner widget (demo style) */
.dwf-sel{margin-left:auto;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--tx1);
  font:700 12px Manrope,sans-serif;padding:4px 8px;cursor:pointer}
.dwf-row{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr .8fr 1fr;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:13px;font-variant-numeric:tabular-nums}
.dwf-row:last-of-type{border-bottom:0}
.dwf-row b{color:var(--tx1);font-weight:800}
.dwf-row > span{text-align:right;font-family:'IBM Plex Mono',monospace}
.dwf-row .up{color:var(--green)} .dwf-row .dn{color:var(--red)}
.dwf-oi{color:var(--tx2)}
/* OI Buildup by Strike: demo proportions */
.dwb-row b{font-family:'IBM Plex Mono',monospace;font-weight:700}

/* the remove (×) button only while customising */
body:not(.dw-editing) #dw-grid .dwc-x{display:none}

/* ═══ Range Watch: price map ═══ */
.rwm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rwm-spot span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.rwm-spot b{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;color:var(--tx1);letter-spacing:-.01em}
.rwm-pill{font-size:12px;font-weight:800;border-radius:999px;padding:6px 12px;background:var(--bg3);color:var(--tx2);white-space:nowrap}
.rwm-pill span{font-weight:600;opacity:.8}
.rwm-pill.above{background:var(--green-dim);color:var(--green)}
.rwm-pill.below{background:var(--red-dim);color:var(--red)}
.rwm-pill.inside{background:rgba(245,158,11,.14);color:var(--amber)}
.rwm{position:relative;margin:4px 0 12px}
.rwm-labs{position:relative;height:32px}
.rwm-lab{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;white-space:nowrap;line-height:14px}
.rwm-lab.r{color:var(--red)} .rwm-lab.s{color:var(--green)} .rwm-lab.mp{color:var(--amber)}
.rwm-track{position:relative;height:46px;border-radius:10px;background:var(--bg3);border:1px solid var(--border)}
.rwm-band{position:absolute;height:12px;border-radius:6px}
.rwm-band i{position:absolute;left:6px;top:-1px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;line-height:14px;white-space:nowrap}
.rwm-band.y{top:7px;background:rgba(120,120,140,.22)} .rwm-band.y i{color:var(--tx2)}
.rwm-band.t{top:25px;background:rgba(238,101,75,.28)} .rwm-band.t i{color:var(--coral)}
.rwm-open{position:absolute;top:22px;width:2px;height:18px;margin-left:-1px;background:var(--tx2);border-radius:1px}
.rwm-line{position:absolute;top:-4px;bottom:-4px;width:0;margin-left:-1px}
.rwm-line.r{border-left:2px solid var(--red)} .rwm-line.s{border-left:2px solid var(--green)}
.rwm-line.mp{border-left:2px dashed var(--amber)}
.rwm-spotline{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:var(--coral);border-radius:2px;
  box-shadow:0 0 0 3px rgba(238,101,75,.18)}
.rwm-foot{position:relative;height:26px}
.rwm-bubble{position:absolute;top:8px;background:var(--coral);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap}
.rwd-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
@media (max-width:520px){.rwd-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rwd-grid4 > div{border-radius:9px;padding:6px 9px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.rwd-grid4 b{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:0;margin-top:1px;font-variant-numeric:tabular-nums}
.rwd-grid4 .u{background:var(--green-dim)} .rwd-grid4 .u b{color:var(--green)}
.rwd-grid4 .d{background:var(--red-dim)} .rwd-grid4 .d b{color:var(--red)}
/* toolbar above the cards: the /demo buttons */
#dw-bar .dw-bar-btn{border:1px solid var(--border2);background:var(--bg2);color:var(--tx1);font:700 13px Manrope,system-ui,sans-serif;
  border-radius:10px;padding:9px 16px;cursor:pointer;box-shadow:none;letter-spacing:0;text-transform:none;line-height:1.2}
#dw-bar .dw-bar-btn:hover{border-color:var(--tx3)}
#dw-bar .dw-bar-btn.dw-add,#dw-bar .dw-bar-btn.dw-done{background:var(--coral);border-color:var(--coral);color:#fff}
#dw-bar .dw-bar-btn.dw-add:hover,#dw-bar .dw-bar-btn.dw-done:hover{filter:brightness(1.05)}
#dw-bar{gap:8px}
/* Dark mode: every card carries an orange border */
html:not(.light-mode) .card,
html:not(.light-mode) .mkt-heatmap-card,
html:not(.light-mode) #dw-grid .dw > .card{border:1px solid rgba(238,101,75,.22)!important}
/* Dark mode: the same subtle orange edge on the header controls and strips */
html:not(.light-mode) .sym-btn,
html:not(.light-mode) .date-pill,
html:not(.light-mode) .tab-pill,
html:not(.light-mode) .ev-chip,
html:not(.light-mode) .move-newslink{border:1px solid rgba(238,101,75,.22)!important}
html:not(.light-mode) .move-box{border-top-color:rgba(238,101,75,.22)!important;border-right-color:rgba(238,101,75,.22)!important;
  border-bottom-color:rgba(238,101,75,.22)!important}
html:not(.light-mode) .ev-chip.high{border-color:rgba(238,101,75,.45)!important}
/* Combine scanners: Reset clears every picker */
.mks-cmb-reset{border:1px solid var(--border2);background:transparent;color:var(--tx2);border-radius:999px;
  padding:8px 16px;font:700 12.5px Manrope,system-ui,sans-serif;cursor:pointer}
.mks-cmb-reset:hover{border-color:#ee654b;color:#ee654b}
.mks-cmb-item.mks-cmb-none{color:var(--tx3);font-style:italic}

/* Scanners guide (paid users) */
.mks-guide-btn{border:1px solid rgba(238,101,75,.45);background:rgba(238,101,75,.08);color:#ee654b;border-radius:999px;
  padding:5px 12px;font:700 12px Manrope,system-ui,sans-serif;cursor:pointer;margin-left:10px}
.mks-guide-btn:hover{background:#ee654b;color:#fff}
.mksg-veil{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.mksg-veil[hidden]{display:none}
.mksg{position:relative;width:min(680px,100%);max-height:88vh;overflow:auto;background:var(--bg2);color:var(--tx1);
  border:1px solid var(--border2);border-radius:18px;padding:26px 28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.mksg-x{position:absolute;top:12px;right:14px;border:0;background:none;color:var(--tx3);font-size:26px;cursor:pointer;line-height:1}
.mksg-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ee654b;
  border:1px solid rgba(238,101,75,.45);border-radius:999px;padding:3px 10px}
.mksg h2{font-size:22px;font-weight:900;margin:10px 0 6px;letter-spacing:-.01em}
.mksg-lead{color:var(--tx2);font-size:14px;line-height:1.6;margin:0 0 14px}
.mksg-steps{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.mksg-steps li{font-size:13.5px;line-height:1.6;color:var(--tx2)}
.mksg-steps li b{color:var(--tx1)}
.mksg-steps li::marker{color:#ee654b;font-weight:800}
.mksg-k{font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
.mksg-box{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:0 0 14px}
.mksg-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.mksg-box ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.mksg-box li{font-size:13px;line-height:1.55;color:var(--tx2)} .mksg-box li b{color:var(--tx1)}
.mksg-note{font-size:12px;line-height:1.55;color:var(--tx3);margin:0 0 16px}
.mksg-foot{display:flex;justify-content:flex-end}
.mksg-ok{background:#ee654b;color:#fff;border:0;border-radius:999px;padding:10px 22px;font:800 13px Manrope,system-ui,sans-serif;cursor:pointer}

/* Scanners guide v2: graphics */
.mks-combine .mks-guide-btn{margin-left:auto}
.mksg{width:min(860px,100%)}
.mksg-sec{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#ee654b;margin:18px 0 10px}
.mksg-combo{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:14px}
@media (max-width:640px){.mksg-combo{grid-template-columns:1fr}}
.mksg-venn{width:100%;height:auto}
.mksg-vt{font:800 11px Manrope,system-ui,sans-serif}
.mksg-vc{font:900 15px Manrope,system-ui,sans-serif;fill:#fff}
.mksg-vs{font:700 7.5px Manrope,system-ui,sans-serif;fill:#fff}
.mksg-flow{display:flex;flex-direction:column;gap:10px}
.mksg-step{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--tx2)}
.mksg-step b{color:var(--tx1)} .mksg-step small{display:block;margin-top:5px;font-size:11.5px;color:var(--tx3);line-height:1.5}
.mksg-n{flex:0 0 22px;height:22px;border-radius:50%;background:#ee654b;color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center}
.mksg-mock{display:inline-block;margin:5px 6px 0 0;padding:5px 10px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);font-size:12px;color:var(--tx1)}
.mksg-mock.go{background:#ee654b;border-color:#ee654b;color:#fff;font-weight:800;border-radius:999px}
.mksg-tip{font-size:12.5px;line-height:1.55;color:var(--tx2);margin:10px 0 0}
.mksg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.mksg-cols{grid-template-columns:1fr}}
.mksg-col{border-radius:12px;padding:10px 12px;border:1px solid var(--border)}
.mksg-col.bull{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.3)}
.mksg-col.bear{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.3)}
.mksg-col.either{background:var(--bg3)}
.mksg-ch{font-size:13px;font-weight:900;margin-bottom:8px}
.mksg-ch small{font-size:11px;font-weight:600;color:var(--tx3);margin-left:4px}
.mksg-col.bull .mksg-ch{color:var(--green)} .mksg-col.bear .mksg-ch{color:var(--red)} .mksg-col.either .mksg-ch{color:var(--tx2)}
.mksg-chip{display:inline-block;margin:0 5px 6px 0;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.mksg-chip.bull{background:rgba(22,163,74,.14);color:var(--green)}
.mksg-chip.bear{background:rgba(220,38,38,.12);color:var(--red)}
.mksg-chip.either{background:var(--bg2);color:var(--tx2);border:1px solid var(--border)}
.mksg-recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.mksg-recs{grid-template-columns:1fr}}
.mksg-rec{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg2)}
.mksg-rec.bull{border-left:3px solid var(--green)} .mksg-rec.bear{border-left:3px solid var(--red)}
.mksg-rec-eq{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px}
.mksg-rec-eq .mksg-chip{margin:0}
.mksg-rec-eq b{color:var(--tx3);font-size:13px}
.mksg-out{font-size:12px;font-weight:900}
.mksg-out.bull{color:var(--green)} .mksg-out.bear{color:var(--red)}
.mksg-rec p{margin:6px 0 0;font-size:12px;color:var(--tx3);line-height:1.5}
.mksg-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.mksg-list li{font-size:13px;line-height:1.55;color:var(--tx2)} .mksg-list li b{color:var(--tx1)}

.mks-xdir.side{background:var(--bg3);color:var(--tx3)}

/* Scanners guide: trade planning */
.mksg-veil{z-index:100000}
.mksg{position:relative}
.mksg-dyor{border:1px solid rgba(238,101,75,.45);background:rgba(238,101,75,.08);border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.55;color:var(--tx2);margin-bottom:12px}
.mksg-dyor b{color:#ee654b}
.mksg-plan{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:12px 14px 10px;color:var(--tx1)}
.mksg-plan-svg{width:100%;height:auto;display:block}
.mksg-pt{font:700 10px Manrope,system-ui,sans-serif}
.mksg-pl{font:900 12px Manrope,system-ui,sans-serif}
.mksg-plan-cap{font-size:12px;color:var(--tx3);margin-top:4px;text-align:center}
.mksg-pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
@media (max-width:640px){.mksg-pcards{grid-template-columns:1fr}}
.mksg-pcard{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg2);border-top:3px solid}
.mksg-pcard.entry{border-top-color:#ee654b} .mksg-pcard.stop{border-top-color:var(--red)} .mksg-pcard.target{border-top-color:var(--green)}
.mksg-ph{font-size:13px;font-weight:900;color:var(--tx1);margin-bottom:6px}
.mksg-pcard ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px}
.mksg-pcard li{font-size:12.5px;line-height:1.5;color:var(--tx2)}
.mksg-size,.mksg-check{border:1px solid var(--border);border-radius:12px;padding:11px 14px;background:var(--bg3);margin-top:10px}
.mksg-formula{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:#ee654b;background:var(--bg2);border:1px dashed rgba(238,101,75,.5);border-radius:8px;padding:8px 12px;margin:4px 0 8px;text-align:center}
.mksg-size p{margin:0;font-size:12.5px;line-height:1.55;color:var(--tx2)}
.mksg-check label{display:block;font-size:12.5px;line-height:1.5;color:var(--tx2);margin:4px 0}
.mks-dyor{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--tx3);background:rgba(238,101,75,.05)}
.mks-dyor-link{border:0;background:none;color:#ee654b;font:800 12px Manrope,system-ui,sans-serif;cursor:pointer;padding:0;white-space:nowrap}
.mks-dyor-link:hover{text-decoration:underline}

/* Scanners guide: video (paid users) */
.mks-combine .mks-guide-btn{margin-left:auto}
.mks-combine .mks-help{margin-left:auto;display:inline-flex;gap:8px;flex-wrap:wrap}
.mks-combine .mks-help .mks-guide-btn{margin-left:0}
.mks-video-btn{text-decoration:none;display:inline-flex;align-items:center}
.mksg-video{margin:12px 0 14px}
.mksg-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--border)}
.mksg-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mksg-video-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:800;color:#ee654b;text-decoration:none}
.mksg-video-link:hover{text-decoration:underline}