/* ==========================================================================
   Wealth Vision Scanner — desk design system
   --------------------------------------------------------------------------
   tokens → base → primitives → shell → overlays → components → charts →
   pages → responsive → motion

   Two themes on one set of tokens. Dark is the trading-terminal look; light
   keeps the original paper-white desk. With no stored choice the page follows
   the operating system; theme-boot.js applies a stored one before first paint.

   Production serves a CSP with no style-src, so inline style="" attributes are
   refused. Every dynamic value in markup is a custom property carried as
   data-css and applied by core.js — see WV.hydrate. Rules below read those
   properties (--w, --x, --deg, …) with a sensible fallback.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Inter, self-hosted (SIL OFL 1.1 — static/fonts/Inter-OFL-LICENSE.txt). The
   CSP allows fonts only from this origin. Two subsets: latin, and latin-ext,
   which carries the rupee sign. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Brand, from the logo: #0F01D0 is the "W", #0E0C31 the wordmark. */
  --brand: #0f01d0;
  --brand-ink: #0e0c31;

  --bg: #f1f0fa;
  --bg-glow-a: rgba(94, 82, 255, .16);
  --bg-glow-b: rgba(14, 165, 233, .09);
  --bg-dot: rgba(14, 12, 49, .055);
  --surface: #ffffff;
  --surface-2: #f7f6fe;
  --surface-3: #eeedf9;
  --surface-hi: #ffffff;
  --overlay: rgba(255, 255, 255, .8);
  --line: #e6e4f3;
  --line-2: #d3d0ea;
  --ink: #0e0c31;
  --ink-2: #3a395f;
  --muted: #706f98;
  --faint: #a4a3c4;

  --accent: #2f22e8;
  --accent-2: #5b4ff8;
  --accent-ink: #1d12b8;
  --accent-soft: rgba(47, 34, 232, .09);
  --accent-line: rgba(47, 34, 232, .28);

  --up: #07875a;
  --up-2: #14b174;
  --up-soft: rgba(7, 135, 90, .1);
  --up-line: rgba(7, 135, 90, .3);
  --down: #d4304c;
  --down-2: #ee4d68;
  --down-soft: rgba(212, 48, 76, .09);
  --down-line: rgba(212, 48, 76, .3);
  --flat: #8786ab;
  --warn: #a25a06;
  --warn-soft: rgba(217, 119, 6, .12);
  --hot: #7331e0;
  --hot-soft: rgba(115, 49, 224, .1);
  --cyan: #0284c7;
  --cyan-soft: rgba(2, 132, 199, .1);

  /* The column chart's "up" is the brand blue, as on the desk's reference. */
  --col-up: #1f12e6;
  --col-up-2: #5a4ff9;
  --col-down: #d4304c;
  --col-down-2: #f06a80;
  --grid: rgba(14, 12, 49, .07);

  --shadow-sm: 0 1px 2px rgba(14, 12, 49, .06);
  --shadow: 0 1px 2px rgba(14, 12, 49, .05), 0 12px 32px -18px rgba(14, 12, 49, .3);
  --shadow-lg: 0 34px 90px -34px rgba(14, 12, 49, .5);
  --glow: 0 0 0 1px var(--accent-line), 0 10px 34px -14px rgba(47, 34, 232, .45);
  --ring: 0 0 0 3px rgba(47, 34, 232, .28);

  /* The sidebar is the brand panel in both themes. */
  --side-bg: #0b0930;
  --side-ink: #d6d3f7;
  --side-muted: #8d88c9;
  --side-line: rgba(255, 255, 255, .08);

  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --side-w: 248px;
  --side-rail: 74px;
  --gap: 18px;
  --pad: 18px;
  --cell-y: 9px;
  --cell-x: 11px;

  --ease: cubic-bezier(.22, .68, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Dark: declared twice on purpose — once for "follow the system", once for an
   explicit choice — because CSS has no way to share one block between them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #06051a;
    --bg-glow-a: rgba(98, 84, 255, .2);
    --bg-glow-b: rgba(34, 211, 238, .06);
    --bg-dot: rgba(163, 158, 255, .06);
    --surface: #0e0d28;
    --surface-2: #131237;
    --surface-3: #1a1946;
    --surface-hi: #171640;
    --overlay: rgba(9, 8, 30, .78);
    --line: rgba(150, 144, 255, .11);
    --line-2: rgba(150, 144, 255, .2);
    --ink: #ecebff;
    --ink-2: #c3c1ec;
    --muted: #8e8cbd;
    --faint: #5c5a8c;
    --accent: #7d71ff;
    --accent-2: #a69eff;
    --accent-ink: #b8b2ff;
    --accent-soft: rgba(125, 113, 255, .14);
    --accent-line: rgba(125, 113, 255, .4);
    --up: #29d391;
    --up-2: #63f0b6;
    --up-soft: rgba(41, 211, 145, .12);
    --up-line: rgba(41, 211, 145, .34);
    --down: #ff5a77;
    --down-2: #ff8ea3;
    --down-soft: rgba(255, 90, 119, .12);
    --down-line: rgba(255, 90, 119, .36);
    --flat: #8e8cbd;
    --warn: #f5b544;
    --warn-soft: rgba(245, 181, 68, .13);
    --hot: #c592ff;
    --hot-soft: rgba(197, 146, 255, .14);
    --cyan: #38d4f5;
    --cyan-soft: rgba(56, 212, 245, .12);
    --col-up: #6c60ff;
    --col-up-2: #a39bff;
    --col-down: #ff5a77;
    --col-down-2: #ff9aac;
    --grid: rgba(150, 144, 255, .09);
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, .02) inset;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 44px -26px rgba(0, 0, 0, .9);
    --shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, .9);
    --glow: 0 0 0 1px var(--accent-line), 0 12px 40px -12px rgba(125, 113, 255, .5);
    --ring: 0 0 0 3px rgba(125, 113, 255, .35);
    --side-bg: #07061b;
    --side-line: rgba(150, 144, 255, .1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #06051a;
  --bg-glow-a: rgba(98, 84, 255, .2);
  --bg-glow-b: rgba(34, 211, 238, .06);
  --bg-dot: rgba(163, 158, 255, .06);
  --surface: #0e0d28;
  --surface-2: #131237;
  --surface-3: #1a1946;
  --surface-hi: #171640;
  --overlay: rgba(9, 8, 30, .78);
  --line: rgba(150, 144, 255, .11);
  --line-2: rgba(150, 144, 255, .2);
  --ink: #ecebff;
  --ink-2: #c3c1ec;
  --muted: #8e8cbd;
  --faint: #5c5a8c;
  --accent: #7d71ff;
  --accent-2: #a69eff;
  --accent-ink: #b8b2ff;
  --accent-soft: rgba(125, 113, 255, .14);
  --accent-line: rgba(125, 113, 255, .4);
  --up: #29d391;
  --up-2: #63f0b6;
  --up-soft: rgba(41, 211, 145, .12);
  --up-line: rgba(41, 211, 145, .34);
  --down: #ff5a77;
  --down-2: #ff8ea3;
  --down-soft: rgba(255, 90, 119, .12);
  --down-line: rgba(255, 90, 119, .36);
  --flat: #8e8cbd;
  --warn: #f5b544;
  --warn-soft: rgba(245, 181, 68, .13);
  --hot: #c592ff;
  --hot-soft: rgba(197, 146, 255, .14);
  --cyan: #38d4f5;
  --cyan-soft: rgba(56, 212, 245, .12);
  --col-up: #6c60ff;
  --col-up-2: #a39bff;
  --col-down: #ff5a77;
  --col-down-2: #ff9aac;
  --grid: rgba(150, 144, 255, .09);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .02) inset;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 44px -26px rgba(0, 0, 0, .9);
  --shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, .9);
  --glow: 0 0 0 1px var(--accent-line), 0 12px 40px -12px rgba(125, 113, 255, .5);
  --ring: 0 0 0 3px rgba(125, 113, 255, .35);
  --side-bg: #07061b;
  --side-line: rgba(150, 144, 255, .1);
}

:root[data-density="compact"] {
  --gap: 14px;
  --pad: 14px;
  --cell-y: 5px;
  --cell-x: 9px;
}

/* Sector identity tones. Kept in step with alerts/universe.py SECTORS by
   alerts/tests.py, so a colour change there fails loudly here. */
.sec-bank { --tone: #1d4ed8; }
.sec-psu_bank { --tone: #0f766e; }
.sec-it { --tone: #4f46e5; }
.sec-fmcg { --tone: #7c3aed; }
.sec-pharma { --tone: #0891b2; }
.sec-auto { --tone: #0ea5e9; }
.sec-realty { --tone: #312e81; }
.sec-metal { --tone: #475569; }
.sec-index { --tone: #0f766e; }
.sec-other { --tone: #94a3b8; }

/* The tones are mid-dark brand blues; on the dark theme they are lifted toward
   white so a Realty dot does not vanish into the surface. */
:root[data-theme="dark"] [class*="sec-"] { --tone-lift: color-mix(in srgb, var(--tone) 62%, #fff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [class*="sec-"] { --tone-lift: color-mix(in srgb, var(--tone) 62%, #fff); }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Ambient light and a faint dot grid behind the working surface. Fixed, so
   it sits still while the tables scroll over it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -140px, var(--bg-glow-a), transparent 70%),
    radial-gradient(700px 420px at 12% -120px, var(--bg-glow-b), transparent 68%),
    radial-gradient(circle at 1px 1px, var(--bg-dot) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .25) 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .25) 100%);
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
small { font-size: 11.5px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: .92em; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 30px; height: 30px; }

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.is-up { color: var(--up); }
.is-down { color: var(--down); }
.is-flat { color: var(--flat); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 14px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
}

kbd {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font: 650 10.5px/1 var(--font);
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------- buttons */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: inherit;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.icon-btn:hover { background: var(--surface-3); border-color: var(--line); }
.icon-btn:active { transform: scale(.94); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 7px 13px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 650; white-space: nowrap; text-decoration: none;
  transition: border-color .15s, background .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ico { width: 15px; height: 15px; }
.btn.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 24px -12px var(--accent);
}
.btn.is-primary:hover { filter: brightness(1.08); color: #fff; }
.btn.is-ghost { background: transparent; }
.btn.is-sm { min-height: 28px; padding: 4px 10px; font-size: 11.5px; border-radius: 8px; }
.btn.is-copied { border-color: var(--up-line); background: var(--up-soft); color: var(--up); }
.btn.is-error { border-color: var(--down-line); background: var(--down-soft); color: var(--down); }

/* Older names still used by markup (and by the copy-watchlist test contract). */
.ghost-btn, .copy-watchlist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 7px 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 650; white-space: nowrap; text-decoration: none;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.ghost-btn:hover, .copy-watchlist-btn:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.copy-watchlist-btn .ico { width: 15px; height: 15px; }
.copy-watchlist-btn:disabled { opacity: .45; cursor: not-allowed; }
.copy-watchlist-btn.is-compact { min-height: 30px; padding: 5px 9px; font-size: 11.5px; }
.copy-watchlist-btn.is-copied { border-color: var(--up-line); background: var(--up-soft); color: var(--up); }
.copy-watchlist-btn.is-error { border-color: var(--down-line); background: var(--down-soft); color: var(--down); }

/* Segmented control. */
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface-2);
}
.seg-btn {
  padding: 5px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 650; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active, .seg-btn[aria-pressed="true"] {
  background: var(--surface-hi); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--line);
}

/* Search field. */
.search { position: relative; display: flex; align-items: center; }
.search .ico { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.search input {
  width: 200px; padding: 8px 11px 8px 32px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
  font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s, width .25s var(--ease);
}
.search input:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
.search input::placeholder { color: var(--muted); }

/* The chevron is drawn with gradients: a data: URI image would be refused by
   the production CSP, which has no img-src and so allows only 'self'. */
select.select {
  appearance: none; -webkit-appearance: none;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-size: 12.5px; font-weight: 600;
  outline: none;
}
select.select:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ------------------------------------------------ chips, pills and tags */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 54px; padding: 4px 9px;
  border-radius: 99px;
  background: var(--surface-3); color: var(--ink-2);
  font-size: 12px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip-up { background: var(--up-soft); color: var(--up); }
.chip-down { background: var(--down-soft); color: var(--down); }
.chip-flat { background: var(--surface-3); color: var(--muted); }
.chip-value { background: var(--warn-soft); color: var(--warn); }
.chip-rf { background: var(--accent-soft); color: var(--accent-ink); min-width: 46px; }
.chip-rf.is-hot { background: var(--hot-soft); color: var(--hot); }
/* Sustained expansion: the 20-session average is itself 2x the 200-session
   one — heavy for weeks rather than for a day. */
.chip-rf.is-regime { box-shadow: inset 0 0 0 1.5px currentColor; }
.chip-rf.muted { background: transparent; color: var(--muted); }
.chip-dry { background: var(--down-soft); color: var(--down); }
.chip.is-breakout { background: var(--hot-soft); color: var(--hot); min-width: 44px; }
.chip.is-breakdown { background: var(--down-soft); color: var(--down); min-width: 44px; }

.pill-up, .pill-down, .pill-value, .pill-muted, .pill-scan {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill-up { background: var(--up-soft); color: var(--up); }
.pill-down { background: var(--down-soft); color: var(--down); }
.pill-value { background: var(--warn-soft); color: var(--warn); }
.pill-muted { background: var(--surface-3); color: var(--muted); }
.pill-scan { background: var(--accent-soft); color: var(--accent-ink); }

.bias-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--surface-3); color: var(--muted);
}
.bias-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bias-tag.is-strong_bullish { background: var(--up); color: #fff; box-shadow: 0 6px 16px -8px var(--up); }
.bias-tag.is-bullish { background: var(--up-soft); color: var(--up); }
.bias-tag.is-neutral { background: var(--surface-3); color: var(--muted); }
.bias-tag.is-bearish { background: var(--down-soft); color: var(--down); }
.bias-tag.is-strong_bearish { background: var(--down); color: #fff; box-shadow: 0 6px 16px -8px var(--down); }
:root[data-theme="dark"] .bias-tag.is-strong_bullish,
:root[data-theme="dark"] .bias-tag.is-strong_bearish { color: #06051a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bias-tag.is-strong_bullish,
  :root:not([data-theme="light"]) .bias-tag.is-strong_bearish { color: #06051a; }
}

.side-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.side-tag.is-bear { background: var(--down-soft); color: var(--down); }
.side-tag.is-bull { background: var(--up-soft); color: var(--up); }

/* New money is saturated; a position leaving is muted, because covering and
   unwinding are weaker signals than a fresh buildup. */
.buildup-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--surface-3); color: var(--muted);
}
.buildup-pill.buildup-long { background: var(--up-soft); color: var(--up); }
.buildup-pill.buildup-short { background: var(--down-soft); color: var(--down); }
.buildup-pill.buildup-cover { background: var(--accent-soft); color: var(--accent-ink); }
.buildup-pill.buildup-unwind { background: var(--warn-soft); color: var(--warn); }

.live-dot {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px; border-radius: 99px;
  background: var(--up-soft); color: var(--up);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
}
.live-dot i {
  position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.live-dot i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
  animation: ping 2s var(--ease-out) infinite;
}
body.is-closed .live-dot { background: var(--surface-3); color: var(--muted); }
body.is-closed .live-dot i::after { animation: none; }

/* Sector alignment on a scan row: does the sector agree with the setup? */
.align-tag {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 6px 1px 4px; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: 1px; white-space: nowrap;
}
.align-tag .ico { width: 11px; height: 11px; }
.align-tag.is-with { background: var(--up-soft); color: var(--up); }
.align-tag.is-against { background: var(--down-soft); color: var(--down); }
.align-tag.is-with.is-bear { background: var(--down-soft); color: var(--down); }
.align-tag.is-against.is-bear { background: var(--up-soft); color: var(--up); }

.new-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; vertical-align: 1px;
  animation: pop-in .4s var(--spring) both;
}

/* ================================================================== shell */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
body.sidebar-collapsed .app { grid-template-columns: var(--side-rail) minmax(0, 1fr); }

/* ------------------------------------------------------------- sidebar */
.side {
  position: sticky; top: 0; z-index: 40;
  height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(520px 300px at -10% -40px, rgba(108, 92, 255, .42), transparent 70%),
    radial-gradient(420px 260px at 120% 110%, rgba(34, 211, 238, .12), transparent 70%),
    linear-gradient(185deg, #150f5c 0%, var(--side-bg) 48%, #05041a 100%);
  color: var(--side-ink);
  border-right: 1px solid var(--side-line);
  overflow: hidden;
}
.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 14px 16px 16px;
  border-bottom: 1px solid var(--side-line);
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; color: #fff; text-decoration: none; }
.brand-logo { width: 146px; height: auto; display: block; }
.brand-logo-mark { width: 34px; height: auto; display: none; }
.brand-sub { padding-left: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #a49ee6; }
.side-collapse { color: #a49ee6; }
.side-collapse:hover { background: rgba(255, 255, 255, .08); border-color: transparent; color: #fff; }
.side-collapse .ico { transition: transform .25s var(--ease); }

.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 22px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.nav-label {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 10px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--side-muted);
}
.nav-label:first-child { margin-top: 6px; }
.nav-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; letter-spacing: .08em; color: #5ee9b5; font-size: 9.5px; }
.nav-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 2.2s infinite; }
body.is-closed .nav-live { color: var(--side-muted); }
body.is-closed .nav-live i { animation: none; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 2px; padding: 9px 10px;
  border-radius: 11px;
  color: #c9c6f2; font-size: 13.5px; font-weight: 550; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.is-active {
  background: linear-gradient(90deg, rgba(124, 108, 255, .34), rgba(124, 108, 255, .08));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(160, 150, 255, .16);
}
.nav-item.is-active::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #a79dff, #6c5cff);
  box-shadow: 0 0 12px #7b6cff;
}
.nav-ico { display: grid; place-items: center; width: 22px; flex: none; color: #9892de; transition: color .15s; }
.nav-item:hover .nav-ico, .nav-item.is-active .nav-ico { color: #e3e0ff; }
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-kbd {
  opacity: 0; transition: opacity .15s;
  height: 18px; min-width: 0; padding: 0 5px;
  border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #a49ee6; font-size: 9.5px;
}
.nav-item:hover .nav-kbd { opacity: 1; }
.nav-count {
  flex: none; min-width: 26px; padding: 2px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  transition: background .3s, transform .3s var(--spring);
}
.nav-count.is-bumped { background: linear-gradient(135deg, #7b6cff, #22d3ee); transform: scale(1.12); }
.nav-item.is-setup { align-items: flex-start; padding-block: 8px; }
.nav-item.is-setup .nav-ico { margin-top: 1px; }
.nav-item.is-setup .nav-count { margin-top: 1px; }
.nav-item.is-setup .nav-text { display: flex; flex-direction: column; line-height: 1.3; }
.nav-name { overflow: hidden; text-overflow: ellipsis; }
.nav-item.is-setup small { font-size: 10.5px; font-weight: 500; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; }
.nav-item.is-setup.is-active small { color: #c3befa; }
/* Bear share in red, the rest of the track green: which way the group leans. */
.nav-split {
  display: block; position: relative; height: 3px; margin-top: 6px; border-radius: 99px;
  background: rgba(41, 211, 145, .55); overflow: hidden;
}
.nav-split i { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: #ff5a77; border-radius: 99px; transition: width .8s var(--ease-out); }
.nav-empty { margin: 4px 12px 8px; font-size: 12.5px; color: var(--side-muted); }

.side-foot { padding: 12px 16px 14px; border-top: 1px solid var(--side-line); }
.feed-state { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #a5a0dc; white-space: nowrap; }
.feed-state i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #f2b544; }
.feed-state.is-open i { background: #34d399; }
.feed-state.is-open i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #34d399; opacity: 0;
  animation: ping 2.2s var(--ease-out) infinite;
}
.feed-state.is-closed i { background: #7d86b6; }

/* Collapsed rail. */
body.sidebar-collapsed .brand-logo,
body.sidebar-collapsed .brand-sub,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-count,
body.sidebar-collapsed .nav-kbd,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .feed-state span { display: none; }
body.sidebar-collapsed .brand-logo-mark { display: block; }
body.sidebar-collapsed .side-head { flex-direction: column; padding-inline: 10px; }
body.sidebar-collapsed .side-collapse .ico { transform: rotate(180deg); }
body.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .nav-item.is-active::before { left: -10px; }
body.sidebar-collapsed .nav-setups { border-top: 1px solid var(--side-line); margin-top: 10px; padding-top: 10px; }
body.sidebar-collapsed .feed-state { justify-content: center; }

/* ---------------------------------------------------------------- main */
.main { min-width: 0; display: flex; flex-direction: column; }

.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  min-height: 62px; padding: 10px 22px;
  background: var(--overlay);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
}
.top-title { min-width: 0; flex: none; max-width: 30%; }
.top-title .eyebrow { font-size: 9.5px; }
.top-title h1 {
  font-size: 19px; font-weight: 750; letter-spacing: -.022em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-btn { display: none; }

/* Right-aligned while it fits, scrollable from its first chip when it does
   not: flex-end on a scroll container would strand the overflow on the left. */
.ribbon {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 6px), transparent 100%);
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon > :first-child { margin-left: auto; }
.ribbon-skeleton { display: inline-flex; gap: 8px; }
.ribbon-skeleton i { width: 128px; height: 36px; border-radius: 11px; background: var(--surface-3); animation: shimmer 1.4s ease-in-out infinite; }
.ribbon-empty { font-size: 12px; color: var(--muted); white-space: nowrap; }

.index-chip {
  flex: none;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px;
  align-items: baseline;
  padding: 5px 11px 5px 10px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.index-chip::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--flat); }
.index-chip.up::before { background: var(--up); }
.index-chip.down::before { background: var(--down); }
.idx-name { grid-column: 1 / -1; font-size: 9.5px; font-weight: 700; letter-spacing: .11em; color: var(--muted); line-height: 1.25; }
.idx-price { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.idx-move { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.index-chip.up .idx-move { color: var(--up); }
.index-chip.down .idx-move { color: var(--down); }

.top-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px 0 11px;
  border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--surface-2); color: var(--muted);
  font-size: 12.5px; font-weight: 600;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.search-trigger:hover { border-color: var(--accent-line); color: var(--ink); box-shadow: var(--ring); }
.search-trigger .ico { width: 15px; height: 15px; }
.search-trigger kbd { margin-left: 6px; }

.session-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 12px 0 11px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface);
  white-space: nowrap;
}
.session-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--flat); }
.session-pill.is-open .session-dot { background: var(--up); }
.session-pill.is-open .session-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--up); opacity: 0; animation: ping 2s var(--ease-out) infinite;
}
.session-pill.is-preopen .session-dot, .session-pill.is-orb .session-dot { background: var(--warn); }
.session-pill.is-power .session-dot { background: var(--hot); }
.session-pill.is-power .session-dot::after { border-color: var(--hot); }
.session-text { display: flex; flex-direction: column; line-height: 1.15; }
.session-text b { font-size: 12px; font-weight: 700; }
.session-text small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The refresh ring counts down to the next shared refresh. */
.refresh-ring {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.refresh-ring:hover { color: var(--accent-ink); border-color: var(--accent-line); }
.refresh-ring svg:first-child { position: absolute; inset: 3px; width: 28px; height: 28px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line); stroke-width: 2.4; }
.ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: var(--ring, 100);
}
.ring-ico { width: 13px; height: 13px; }
.refresh-ring.is-busy .ring-ico { animation: spin .8s linear infinite; }
.refresh-ring.is-error { color: var(--down); }
.refresh-ring.is-error .ring-fill { stroke: var(--down); }
.refresh-ring.is-idle .ring-fill { stroke: var(--faint); }

.theme-btn { border-color: var(--line); background: var(--surface); }
.theme-btn .ico-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ico-sun { display: inline-block; }
:root[data-theme="dark"] .theme-btn .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ico-sun { display: inline-block; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon { display: none; }
}

.account { position: relative; }
.avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; }
.avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(from 200deg, #6c5cff, #22d3ee, #a78bfa, #6c5cff);
  color: #fff; font-weight: 750; font-size: 13px;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent-line);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: 250px; padding: 6px;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface-hi);
  box-shadow: var(--shadow-lg);
  animation: pop-in .18s var(--ease-out);
}
.menu-who { display: flex; flex-direction: column; padding: 9px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-who span { font-size: 11px; color: var(--muted); }
.menu-who b { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu form { margin: 0; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--ink-2); text-align: left; text-decoration: none;
  font-size: 13px; font-weight: 550;
}
.menu-item:hover { background: var(--surface-3); color: var(--ink); }
.menu-item .ico { width: 16px; height: 16px; color: var(--muted); }
.menu-item kbd { margin-left: auto; }
.menu-item.is-danger:hover { background: var(--down-soft); color: var(--down); }
.menu-item.is-danger:hover .ico { color: var(--down); }

.content { display: flex; flex-direction: column; gap: var(--gap); padding: 22px 24px 64px; min-width: 0; }
.scrim { display: none; }

/* =============================================================== overlays */
.palette, .drawer-wrap, .sheet-wrap { position: fixed; inset: 0; z-index: 90; }
.palette-backdrop, .drawer-backdrop, .sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 5, 26, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in .2s ease;
}

/* ------------------------------------------------------ command palette */
.palette-box {
  position: relative; margin: 11vh auto 0; width: min(640px, calc(100% - 28px));
  border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface-hi);
  box-shadow: var(--shadow-lg), var(--glow);
  overflow: hidden;
  animation: rise-in .26s var(--ease-out);
}
.palette-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.palette-input .ico { width: 20px; height: 20px; color: var(--accent); }
.palette-input input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; font-weight: 500; }
.palette-input input::placeholder { color: var(--faint); }
.palette-results { max-height: min(430px, 56vh); overflow-y: auto; padding: 6px; }
.palette-group { padding: 10px 12px 5px; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.palette-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 11px;
  background: none; text-align: left; text-decoration: none; color: var(--ink);
}
.palette-item.is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.palette-item .p-ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--surface-3); color: var(--accent-ink); font-size: 10.5px; font-weight: 800;
}
.palette-item .p-ico.stock-tile { width: 30px; height: 30px; border-radius: 9px; }
.palette-item .p-main { min-width: 0; }
.palette-item .p-main b { display: block; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .p-main b mark { background: none; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.palette-item .p-main small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .p-side { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.palette-empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.palette-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 11px; color: var(--muted); }
.palette-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ----------------------------------------------------- quick-view drawer */
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: slide-in .32s var(--ease-out);
}
.drawer-wrap.is-leaving .drawer { animation: slide-out .22s ease-in forwards; }
.drawer-wrap.is-leaving .drawer-backdrop { animation: fade-out .22s ease forwards; }
.drawer-body { flex: 1; overflow-y: auto; }
.qv-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px 18px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.qv-head .stock-tile { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; }
.qv-id { flex: 1; min-width: 0; }
.qv-id h2 { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.qv-id p { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qv-star.is-on { color: #f5b544; }
.qv-section { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.qv-section h3 { margin-bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.qv-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.qv-price strong { font-size: 32px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.qv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin-top: 14px; }
.qv-facts div { min-width: 0; }
.qv-facts span { display: block; font-size: 10.5px; color: var(--muted); }
.qv-facts b { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qv-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px 22px; }
.qv-loading { padding: 60px 20px; text-align: center; color: var(--muted); }
.qv-loading i { display: block; width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }

/* The level ladder: every level the desk measures against, with the price. */
.ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.ladder li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; font-size: 12.5px;
}
.ladder li + li { margin-top: 1px; }
.ladder .l-label { color: var(--ink-2); font-weight: 550; }
.ladder .l-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.ladder .l-gap { text-align: right; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.ladder li.is-above .l-gap { color: var(--up); }
.ladder li.is-below .l-gap { color: var(--down); }
.ladder li.is-near { background: var(--hot-soft); }
.ladder li.is-price {
  margin: 4px 0; background: linear-gradient(90deg, var(--accent-soft), transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ladder li.is-price .l-label { color: var(--accent-ink); font-weight: 750; }
.ladder li.is-ref .l-label { color: var(--muted); }

.qv-scans { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qv-scans a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); text-decoration: none; font-size: 12.5px;
}
.qv-scans a:hover { border-color: var(--accent-line); }
.qv-scans b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qv-scans small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.qv-sector {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  text-decoration: none;
}
.qv-sector:hover { border-color: var(--accent-line); }
.qv-sector b { display: block; font-size: 13.5px; }
.qv-sector small { font-size: 11.5px; color: var(--muted); }
.qv-rank { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-3); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sheets */
.sheet {
  position: relative; margin: 12vh auto 0; width: min(560px, calc(100% - 28px));
  border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface-hi); box-shadow: var(--shadow-lg);
  animation: rise-in .26s var(--ease-out);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 16px; font-weight: 700; }
.pref-grid { display: grid; gap: 4px; padding: 10px 12px 16px; }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 8px; border-radius: 10px; }
.pref + .pref { border-top: 1px solid var(--line); }
.pref-label { font-size: 13.5px; font-weight: 650; }
.pref-label small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.keys { margin: 0; padding: 12px 18px 18px; display: grid; gap: 2px; }
.keys div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.keys div:last-child { border-bottom: 0; }
.keys dt { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.keys dd { margin: 0; font-size: 13px; font-weight: 550; }

/* --------------------------------------------------------------- tooltip */
.wv-tip {
  position: fixed; z-index: 150; left: 0; top: 0;
  max-width: 290px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface-hi); color: var(--ink);
  box-shadow: var(--shadow-lg);
  font-size: 12px; line-height: 1.45;
  pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity .12s, transform .12s;
}
.wv-tip.is-on { opacity: 1; transform: none; }
.wv-tip b { font-weight: 700; }
.tip-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.tip-row { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); }
.tip-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ============================================================= components */
/* ----------------------------------------------------------------- panel */
.panel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--line);
}
.panel-head.is-plain { border-bottom: 0; padding-bottom: 4px; }
.panel-title { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 260px; }
.panel-title > div { display: flex; flex-direction: column; min-width: 0; }
.panel-title h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }
.panel-title .sub { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.panel-ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.panel-ico .ico { width: 17px; height: 17px; }
.panel-ico.is-up { background: var(--up-soft); color: var(--up); box-shadow: inset 0 0 0 1px var(--up-line); }
.panel-ico.is-down { background: var(--down-soft); color: var(--down); box-shadow: inset 0 0 0 1px var(--down-line); }
.panel-ico.is-hot { background: var(--hot-soft); color: var(--hot); box-shadow: none; }
.panel-tools, .panel-meta-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px; color: var(--muted);
}
.panel-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.panel-meta .ico { width: 14px; height: 14px; }
.detail-meta { border: 0; background: none; padding: 0; }
.panel-body { padding: var(--pad); }
.panel-note {
  padding: 11px var(--pad) 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
}
.panel-note.small { font-size: 11px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid-stretch { align-items: stretch; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 2px -4px; }
.section-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; }
.stat {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform .2s var(--ease), border-color .2s;
}
.stat:hover { transform: translateY(-2px); border-color: var(--line-2); }
.stat-ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.stat-ico.up { background: var(--up-soft); color: var(--up); }
.stat-ico.down { background: var(--down-soft); color: var(--down); }
.stat-label { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 550; color: var(--muted); }
.stat strong { font-size: 23px; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat strong small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stat strong.stat-sm { font-size: 15.5px; }

/* ----------------------------------------------------------- data tables */
.table-wrap { max-height: 560px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.table-wrap.is-tall { max-height: 72vh; }
.table-wrap.is-free { max-height: none; }
.table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid var(--surface); }

.depth-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.depth-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px var(--cell-x);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: right; white-space: nowrap;
  user-select: none;
}
.depth-table thead th.col-symbol, .depth-table thead th.is-left { text-align: left; }
.depth-table thead th[data-sort] { cursor: pointer; transition: color .15s, background .15s; }
.depth-table thead th[data-sort]:hover { color: var(--ink); background: var(--surface-3); }
.sort-ico { width: 11px; height: 11px; opacity: .35; margin-left: 2px; vertical-align: -1px; transition: transform .2s, opacity .2s; }
.depth-table th.is-sorted { color: var(--accent-ink); }
.depth-table th.is-sorted .sort-ico { opacity: 1; }
.depth-table th.is-desc .sort-ico { transform: rotate(180deg); }

.depth-table td {
  padding: var(--cell-y) var(--cell-x);
  border-bottom: 1px solid var(--line);
  text-align: right; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.depth-table td.num { white-space: nowrap; }
.depth-table td.col-symbol, .depth-table td.is-left { text-align: left; }
.depth-table th.col-symbol, .depth-table td.col-symbol { width: 32%; }
.depth-table tbody tr { transition: background .14s; }
.depth-table tbody tr:hover { background: var(--accent-soft); }
.depth-table tbody tr[data-quick] { cursor: pointer; }
.depth-table tbody tr:last-child td { border-bottom: 0; }
.depth-table tbody tr.is-hidden { display: none; }
.depth-table td.is-up { color: var(--up); }
.depth-table td.is-down { color: var(--down); }
.depth-table td.is-flat { color: var(--muted); }
.depth-table td.muted { color: var(--muted); }
.empty-cell { padding: 34px 16px !important; text-align: center !important; color: var(--muted); }

/* A refresh that changes a price flashes the row, once. */
@keyframes flash-up { from { background: var(--up-soft); box-shadow: inset 3px 0 0 var(--up); } }
@keyframes flash-down { from { background: var(--down-soft); box-shadow: inset 3px 0 0 var(--down); } }
.depth-table tbody tr.flash-up { animation: flash-up 1.4s var(--ease-out); }
.depth-table tbody tr.flash-down { animation: flash-down 1.4s var(--ease-out); }
/* A symbol a scan picked up since the last look. */
.depth-table tbody tr.is-fresh { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); box-shadow: inset 3px 0 0 var(--accent); }
.depth-table tbody tr.is-entering { animation: row-in .5s var(--ease-out) backwards; }

/* Any number marked data-tick flashes its own colour when it changes. */
@keyframes tick-up { 0% { color: var(--up); background: var(--up-soft); } 100% { background: transparent; } }
@keyframes tick-down { 0% { color: var(--down); background: var(--down-soft); } 100% { background: transparent; } }
.tick-up { animation: tick-up 1.2s var(--ease-out); border-radius: 4px; }
.tick-down { animation: tick-down 1.2s var(--ease-out); border-radius: 4px; }

.cell-main { display: block; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cell-sub.is-up, .cell-main.is-up { color: var(--up); }
.cell-sub.is-down, .cell-main.is-down { color: var(--down); }
.cell-none { font-size: 11.5px; color: var(--faint); }

/* --------------------------------------------------------- the stock cell */
.stock { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.tradingview-link { border-radius: 9px; }
.tradingview-link .stock-symbol::after {
  content: "↗"; margin-left: 4px; font-size: 10px; font-weight: 700; color: var(--faint);
  transition: color .15s, transform .15s; display: inline-block;
}
.tradingview-link:hover .stock-symbol { color: var(--accent-ink); }
.tradingview-link:hover .stock-symbol::after { color: var(--accent-ink); transform: translate(1px, -1px); }
.stock-tile {
  position: relative; overflow: hidden;
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background-color: var(--tone, var(--accent));
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .28));
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 14px -8px var(--tone, var(--accent)), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.stock-monogram { line-height: 1; }
/* The logo stays invisible until it has actually loaded: the production CSP
   blocks the logo host today, and a blocked image must not paint a white
   square over the monogram while it fails. */
.stock-logo {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; padding: 3px; object-fit: contain;
  background: #fff; opacity: 0; transition: opacity .25s;
}
.stock-logo.is-loaded { opacity: 1; }
.stock-logo.is-failed { display: none; }
.stock-id { display: flex; flex-direction: column; min-width: 0; }
.stock-symbol { font-size: 13px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; }
.stock-name { max-width: 100%; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-symbol .stock-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }

.ltp { font-size: 13.5px; font-weight: 650; }
.found-time { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.found-hits {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 700;
}
.col-found { white-space: nowrap; }
.th-short { display: none; }

/* ------------------------------------------------------ bars and meters */
/* Where the last price sits inside today's range. */
.range-meter {
  position: relative; display: block;
  width: 64px; height: 4px; margin: 5px 0 0 auto;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--down-soft), var(--line-2), var(--up-soft));
}
.range-meter i {
  position: absolute; top: 50%; left: var(--x, 50%);
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  transition: left .8s var(--ease-out);
}
:root:not(.is-hydrated) .range-meter i { left: 50%; }

/* Composite score: drawn from the centre so the sign reads before the digits. */
.score-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 60px; }
.score-cell b { font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.score-bar { position: relative; display: block; width: 64px; height: 4px; border-radius: 99px; background: var(--line); }
.score-bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); }
.score-bar em { position: absolute; top: 0; height: 4px; width: var(--w, 0%); border-radius: 99px; transition: width .9s var(--ease-out); }
.score-bar em.is-up { left: 50%; background: linear-gradient(90deg, var(--up), var(--up-2)); }
.score-bar em.is-down { right: 50%; background: linear-gradient(270deg, var(--down), var(--down-2)); }
.score-bar em.is-flat { left: 50%; width: 0; }

/* Two-sided proportion: the green share of a track that is otherwise red. */
.split-bar {
  position: relative; display: block; height: 6px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg, var(--down), var(--down-2));
}
.split-bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 50%);
  background: linear-gradient(90deg, var(--up), var(--up-2));
  border-right: 2px solid var(--surface);
  transition: width 1s var(--ease-out);
}
.split-bar.is-thin { height: 4px; }

.meter {
  position: relative; display: block; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--surface-3);
}
.meter i {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 1s var(--ease-out);
}
.meter.is-up i { background: linear-gradient(90deg, var(--up), var(--up-2)); }
.meter.is-down i { background: linear-gradient(90deg, var(--down), var(--down-2)); }

/* ------------------------------------------------------------ sparklines */
.spark { display: block; width: 100%; height: 92px; overflow: visible; }
.spark-sm { width: 100%; height: 34px; }
.spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-fill { stroke: none; }
.spark.is-up .spark-line { stroke: var(--up); }
.spark.is-down .spark-line { stroke: var(--down); }
.spark.is-up .spark-fill { fill: var(--up); opacity: .13; }
.spark.is-down .spark-fill { fill: var(--down); opacity: .13; }
.spark-base { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spark-bench { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .75; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark.is-up .spark-dot { stroke: var(--up); }
.spark.is-down .spark-dot { stroke: var(--down); }
.spark-hour { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-none { color: var(--faint); font-size: 12px; }
/* The line draws itself in on first paint. pathLength="1" on the path makes
   the dash maths independent of the path's real length. */
.spark-line[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.4s var(--ease-out) backwards; }
.spark-empty {
  display: grid; place-items: center; min-height: 92px; padding: 18px;
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 12px; text-align: center;
}
.spark-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.spark-foot span:nth-child(2) { font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.spark-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.spark-legend i { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: 3px; border-top: 2px solid var(--up); }
.spark-legend i.is-bench { border-top: 2px dashed var(--muted); }

/* ------------------------------------------------------------------ tabs */
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 calc(var(--pad) - 6px); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 10px 12px; border: 0; background: none;
  color: var(--muted); font-size: 12.5px; font-weight: 650; white-space: nowrap;
  transition: color .15s;
}
.tab:hover { color: var(--ink); }
.tab b { padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.tab::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transform: scaleX(0); transition: transform .25s var(--ease-out);
}
.tab.is-active { color: var(--ink); }
.tab.is-active b { background: var(--accent-soft); color: var(--accent-ink); }
.tab.is-active::after { transform: scaleX(1); }

/* ---------------------------------------------------------- empty states */
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty .ico { color: var(--faint); margin-bottom: 10px; }
.empty h3 { margin-bottom: 6px; font-size: 16px; color: var(--ink); }
.empty p { max-width: 420px; margin: 0 auto; font-size: 13px; }
.empty.compact { padding: 26px 18px; }
.chart-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------ list rows */
.list { list-style: none; margin: 0; padding: 4px 8px 10px; }
.list li + li { border-top: 1px solid var(--line); }
.list a, .list .list-row {
  display: grid; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
  transition: background .14s;
}
.list a:hover { background: var(--accent-soft); }
.list-empty { padding: 18px 10px; color: var(--muted); font-size: 12.5px; }

/* ============================================================ market pulse */
.pulse-lede {
  padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(600px 160px at 0% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}
.pulse-lede p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.pulse-lede b { font-weight: 780; }
.lede-sector {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 1px; padding: 1px 10px 1px 7px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.lede-sector:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.lede-sector i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-lift, var(--tone, var(--accent))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-lift, var(--tone, var(--accent))) 25%, transparent); }

.pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pulse-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 17px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(300px 160px at 100% 0%, var(--card-glow, var(--accent-soft)), transparent 70%), var(--surface);
  box-shadow: var(--shadow);
}
.pulse-card.is-breadth { --card-glow: var(--up-soft); }
.pulse-card.is-signals { --card-glow: var(--hot-soft); }
.pulse-head { position: relative; display: flex; align-items: center; gap: 9px; }
.pulse-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.pulse-ico .ico { width: 15px; height: 15px; }
.pulse-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-big { position: relative; font-size: 25px; font-weight: 780; letter-spacing: -.03em; line-height: 1.1; }
.pulse-sub { position: relative; font-size: 12px; color: var(--muted); }
.pulse-sub b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pulse-sub b.is-up { color: var(--up); }
.pulse-sub b.is-down { color: var(--down); }
.pulse-tag { padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 750; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.pulse-tag.is-up { background: var(--up-soft); color: var(--up); }
.pulse-tag.is-down { background: var(--down-soft); color: var(--down); }

/* The session, as a track from the open to the close. */
.timeline { position: relative; margin-top: 2px; }
.timeline-track { position: relative; display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.tl-seg { height: 100%; border-right: 2px solid var(--surface); }
.tl-seg:last-of-type { border-right: 0; }
.tl-seg.is-orb { flex: 15; background: color-mix(in srgb, var(--warn) 30%, transparent); }
.tl-seg.is-morning { flex: 120; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tl-seg.is-midday { flex: 120; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tl-seg.is-afternoon { flex: 60; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tl-seg.is-power { flex: 60; background: color-mix(in srgb, var(--hot) 26%, transparent); }
.tl-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--cyan) 70%, transparent));
  border-radius: 99px 0 0 99px;
  transition: width 1.2s var(--ease-out);
}
.tl-now {
  position: absolute; top: -3px; bottom: -3px; left: var(--p, 0%);
  width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 12px var(--accent);
  transition: left 1.2s var(--ease-out);
}
.session-closed .tl-now { opacity: .35; box-shadow: none; }
.timeline-labels { position: relative; height: 14px; margin-top: 5px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline-labels span { position: absolute; top: 0; transform: translateX(-50%); }
.timeline-labels span:nth-child(1) { left: 0; transform: none; }
.timeline-labels span:nth-child(2) { left: 36%; }
.timeline-labels span:nth-child(3) { left: 68%; }
.timeline-labels span:nth-child(4) { right: 0; left: auto; transform: none; }
.phase-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.phase-list li {
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--faint);
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
  transition: color .3s, background .3s, border-color .3s;
}
.phase-list li.is-past { color: var(--muted); }
.phase-list li.is-now { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.phase-list li.is-now[data-phase="power"] { border-color: color-mix(in srgb, var(--hot) 45%, transparent); background: var(--hot-soft); color: var(--hot); }
.pulse-facts { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.pulse-facts dt { font-size: 10.5px; color: var(--muted); }
.pulse-facts dd { margin: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.breadth-figures { position: relative; display: flex; justify-content: space-between; align-items: flex-end; }
.breadth-figures div { display: flex; flex-direction: column; }
.breadth-figures div + div { text-align: right; }
.breadth-figures strong { font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.breadth-figures small { font-size: 11px; color: var(--muted); }
.breadth-figures .is-up strong { color: var(--up); }
.breadth-figures .is-down strong { color: var(--down); }
.pulse-meter-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.pulse-meter-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Sector tone gauge: -100 at the left stop, +100 at the right. */
.gauge { position: relative; width: 100%; max-width: 230px; margin: -2px auto 0; }
.gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-track { fill: none; stroke: var(--surface-3); stroke-width: 13; stroke-linecap: round; }
.gauge-band { fill: none; stroke-width: 13; stroke-linecap: round; opacity: .42; }
.gauge-band.is-down { stroke: var(--down); }
.gauge-band.is-up { stroke: var(--up); }
.gauge-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--deg, 0deg)); transition: transform 1.3s var(--spring); }
:root:not(.is-hydrated) .gauge-needle { transform: rotate(0deg); }
.gauge-needle line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.gauge-needle circle { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.gauge-scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 2px; padding: 0 2px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gauge-scale > span:last-child { text-align: right; }
.gauge-value { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.gauge-value.is-up { color: var(--up); }
.gauge-value.is-down { color: var(--down); }

.signal-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.signal {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s var(--ease);
}
.signal:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.signal > span { font-size: 11px; font-weight: 600; color: var(--muted); }
.signal strong { font-size: 21px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.signal strong i { font-style: normal; color: var(--faint); margin: 0 2px; font-weight: 500; }
.signal small { font-size: 10.5px; color: var(--muted); }
.signal small b { color: var(--ink-2); }
.signal.is-hot strong { color: var(--hot); }
.signal.is-down strong { color: var(--down); }
.signal .split-bar { margin-top: 5px; }

/* ------------------------------------------------------ column chart */
.chart-panel { padding-bottom: 4px; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 11.5px; color: var(--muted); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.chart-legend .lg-up { background: linear-gradient(180deg, var(--col-up-2), var(--col-up)); }
.chart-legend .lg-down { background: linear-gradient(180deg, var(--col-down), var(--col-down-2)); }
.chart-legend .lg-bench { background: var(--flat); opacity: .6; }
.column-chart { position: relative; overflow-x: auto; overflow-y: hidden; padding: 8px 12px 2px 6px; scrollbar-width: thin; }
.column-chart svg { display: block; width: 100%; height: auto; min-width: 760px; overflow: visible; }
.col-grid { stroke: var(--grid); stroke-width: 1; }
.col-zero { stroke: var(--line-2); stroke-width: 1.5; }
.col-axis { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.stop-up-a { stop-color: var(--col-up-2); }
.stop-up-b { stop-color: var(--col-up); }
.stop-down-a { stop-color: var(--col-down-2); }
.stop-down-b { stop-color: var(--col-down); }
.col-bar { transition: x .6s var(--ease-out), y .6s var(--ease-out), height .6s var(--ease-out), width .6s var(--ease-out), opacity .2s; }
.col-item.is-up .col-bar { fill: url(#colUp); }
.col-item.is-down .col-bar { fill: url(#colDown); }
.col-item.is-flat .col-bar { fill: var(--line-2); }
/* A benchmark is a reference, not a candidate: same axis, quieter ink. */
.col-item.is-benchmark .col-bar { fill: var(--flat); opacity: .5; }
.col-item.is-benchmark .col-name { fill: var(--muted); font-weight: 800; letter-spacing: .04em; }
.col-value { fill: var(--ink-2); font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; pointer-events: none; transition: x .6s var(--ease-out), y .6s var(--ease-out); }
.col-item.is-up .col-value { fill: var(--col-up); }
.col-item.is-down .col-value { fill: var(--col-down); }
.col-name { fill: var(--ink-2); font-size: 10.5px; font-weight: 600; pointer-events: none; }
.col-hit { fill: transparent; transition: fill .15s; }
.col-item.is-clickable { cursor: pointer; }
.col-item.is-clickable:hover .col-hit { fill: var(--accent-soft); }
.col-item.is-clickable:hover .col-name { fill: var(--accent-ink); font-weight: 750; }
.col-item.is-clickable:focus { outline: none; }
.col-item.is-clickable:focus-visible .col-hit { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.col-item.is-dim .col-bar { opacity: .3; }
/* First paint: the bars rise out of the zero line in sequence. */
.col-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: col-grow .95s var(--ease-out) backwards; }
.col-item.is-down .col-bar { transform-origin: 50% 0%; }
.col-bars > .col-item:nth-child(2) .col-bar { animation-delay: .03s; }
.col-bars > .col-item:nth-child(3) .col-bar { animation-delay: .06s; }
.col-bars > .col-item:nth-child(4) .col-bar { animation-delay: .09s; }
.col-bars > .col-item:nth-child(5) .col-bar { animation-delay: .12s; }
.col-bars > .col-item:nth-child(6) .col-bar { animation-delay: .15s; }
.col-bars > .col-item:nth-child(7) .col-bar { animation-delay: .18s; }
.col-bars > .col-item:nth-child(8) .col-bar { animation-delay: .21s; }
.col-bars > .col-item:nth-child(9) .col-bar { animation-delay: .24s; }
.col-bars > .col-item:nth-child(10) .col-bar { animation-delay: .27s; }
.col-bars > .col-item:nth-child(11) .col-bar { animation-delay: .3s; }
.col-bars > .col-item:nth-child(12) .col-bar { animation-delay: .33s; }
.col-bars > .col-item:nth-child(13) .col-bar { animation-delay: .36s; }
.col-bars > .col-item:nth-child(14) .col-bar { animation-delay: .39s; }
.col-bars > .col-item:nth-child(15) .col-bar { animation-delay: .42s; }
.col-bars > .col-item:nth-child(16) .col-bar { animation-delay: .45s; }
.col-bars > .col-item:nth-child(17) .col-bar { animation-delay: .48s; }
.col-bars > .col-item:nth-child(18) .col-bar { animation-delay: .51s; }
.col-bars > .col-item:nth-child(19) .col-bar { animation-delay: .54s; }
.col-bars > .col-item:nth-child(20) .col-bar { animation-delay: .57s; }
.col-bars > .col-item:nth-child(n+21) .col-bar { animation-delay: .6s; }
/* NIFTY's level, drawn across: everything under it is lagging the market. */
.col-bench-line { stroke: var(--flat); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.col-bench-label { fill: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------- leaders and laggards */
.rotation-card.is-leading { border-top: 2px solid var(--up); }
.rotation-card.is-lagging { border-top: 2px solid var(--down); }
.rotation-list { list-style: none; margin: 0; padding: 4px 8px 8px; }
.rotation-list li + li { border-top: 1px solid var(--line); }
.rotation-list a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px 76px 40px; align-items: center; gap: 12px;
  padding: 8px 8px; border-radius: 11px;
  color: inherit; text-decoration: none;
  transition: background .14s;
}
.rotation-list a:hover { background: var(--accent-soft); }
.rot-rank {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-2);
  font-size: 11px; font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--tone-lift, var(--tone, var(--accent)));
}
.rot-name { min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-name small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rot-spark { display: block; width: 120px; height: 34px; }
.rot-num { text-align: right; line-height: 1.25; }
.rot-num b { display: block; font-size: 13.5px; font-weight: 780; font-variant-numeric: tabular-nums; }
.rot-num small { display: block; font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rot-num small.is-flat { color: var(--muted); }
.rot-score { text-align: right; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.rot-score.is-up { color: var(--up); }
.rot-score.is-down { color: var(--down); }

/* --------------------------------------------------------- sector board */
.sector-table td { vertical-align: middle; }
.sector-name { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.sector-rank { flex: none; width: 20px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.sector-dot {
  flex: none; width: 10px; height: 10px; border-radius: 3px;
  background: var(--tone-lift, var(--tone, var(--accent)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-lift, var(--tone, var(--accent))) 24%, transparent);
}
.sector-text { display: block; min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.3; }
.sector-text small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.sector-name:hover .sector-text { color: var(--accent-ink); }
.sector-row.is-strong_bullish td:first-child { box-shadow: inset 3px 0 0 var(--up); }
.sector-row.is-strong_bearish td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.sector-row.is-moving td { background: var(--accent-soft); }
.breadth-sub { display: flex !important; align-items: center; justify-content: flex-end; gap: 6px; }
.sector-table .split-bar { width: 44px; flex: none; }

/* The legend under the board: what each of the eight sectors is read against,
   and the industries folded into it. */
.sector-guide {
  list-style: none; margin: 0; padding: 0 var(--pad) 16px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px;
}
.sector-guide li { min-width: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.sector-guide a { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; }
.sector-guide a b { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.sector-guide a small { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.sector-guide a:hover b { color: var(--accent-ink); }
.sector-guide .sector-dot { width: 8px; height: 8px; align-self: center; }
.sector-guide li > span { display: block; padding-left: 16px; }
@media (max-width: 1280px) { .sector-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sector-guide { grid-template-columns: minmax(0, 1fr); } }
.breadth { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.breadth b.up, .cell-sub b.up, .level-pair b.up { color: var(--up); }
.breadth b.down, .cell-sub b.down, .level-pair b.down { color: var(--down); }
.breadth i { margin: 0 2px; color: var(--faint); font-style: normal; }
.level-pair { display: inline-flex; gap: 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mover {
  display: inline-flex; align-items: baseline; gap: 5px;
  margin: 1px 6px 1px 0; padding: 2px 7px;
  border: 1px solid transparent; border-radius: 7px; background: none;
  font-size: 11.5px; white-space: nowrap;
  transition: border-color .14s, background .14s;
}
.mover:hover { border-color: var(--line-2); background: var(--surface-2); }
.mover-sym { font-weight: 700; }
.mover-pct { font-variant-numeric: tabular-nums; }
.mover.is-up .mover-pct { color: var(--up); }
.mover.is-down .mover-pct { color: var(--down); }

/* "Why it ranks here": the five components in score points, as columns that
   rise or fall from a shared zero line. --w is a half-height, 0-50%. */
.why { display: grid; grid-template-columns: repeat(5, 36px); gap: 5px; }
.why-part { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.why-track { position: relative; display: block; width: 100%; height: 26px; border-radius: 5px; background: var(--surface-3); }
.why-track::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--line-2); }
.why-track em { position: absolute; left: 8px; right: 8px; height: var(--w, 0%); transition: height .8s var(--ease-out); }
.why-track em.is-up { bottom: 50%; border-radius: 3px 3px 0 0; background: var(--up); }
.why-track em.is-down { top: 50%; border-radius: 0 0 3px 3px; background: var(--down); }
.why-part small { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }

/* ---------------------------------------------------------------- movers */
.movers-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.movers-list {
  list-style: none; margin: 0; padding: 6px 8px 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px;
}
.movers-list > li { border-bottom: 1px solid var(--line); }
.movers-list.is-switching { animation: fade-swap .3s var(--ease-out); }
.mover-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 70px; align-items: center; gap: 10px;
  width: 100%; padding: 8px 6px; border: 0; border-radius: 11px;
  background: none; text-align: left;
  transition: background .14s;
}
.mover-row:hover { background: var(--accent-soft); }
.mover-row .stock-tile { width: 32px; height: 32px; border-radius: 9px; font-size: 10.5px; }
.mv-id { min-width: 0; }
.mv-id b { display: block; font-size: 13px; font-weight: 720; }
.mv-id small { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mv-metric b { font-weight: 720; }
.mv-metric small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.mv-metric .chip { min-width: 0; padding: 2px 7px; font-size: 11px; }
.mv-metric .range-meter { width: 52px; margin: 3px 0 0; }
.mv-change { justify-self: end; min-width: 66px; }

.watch-list { list-style: none; margin: 0; padding: 6px 8px 10px; }
.watch-list > li + li { border-top: 1px solid var(--line); }
.watch-list .mover-row { grid-template-columns: 32px minmax(0, 1fr) auto 70px 26px; }
.watch-remove { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--faint); }
.watch-remove:hover { background: var(--down-soft); color: var(--down); }
.watch-remove .ico { width: 14px; height: 14px; }
.watch-empty { padding: 26px 14px 30px; text-align: center; color: var(--muted); font-size: 12.5px; }
.watch-empty .ico { color: #f5b544; margin-bottom: 8px; }
.watch-empty p { max-width: 260px; margin: 0 auto; }

/* --------------------------------------------------------- setup hero */
.setup-hero {
  display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(520px 200px at 0% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}
.setup-hero-lede { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.setup-hero-ico {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: #fff;
  box-shadow: 0 12px 26px -12px var(--accent);
}
.setup-hero-ico .ico { width: 23px; height: 23px; }
.setup-hero h2 { font-size: 20px; font-weight: 780; letter-spacing: -.025em; }
.setup-hero small { color: var(--muted); }

/* Bearish against bullish: red share from the left, green the rest. */
.tug { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px; max-width: 460px; }
.tug-side { white-space: nowrap; font-size: 12px; font-weight: 650; color: var(--muted); }
.tug-side b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 3px; }
.tug-side.is-bear b { color: var(--down); }
.tug-side.is-bull b { color: var(--up); }
.tug-bar {
  position: relative; flex: 1; height: 9px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg, var(--up-2), var(--up));
}
.tug-bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 50%);
  background: linear-gradient(90deg, var(--down), var(--down-2));
  border-right: 3px solid var(--surface);
  transition: width 1.1s var(--ease-out);
}
:root:not(.is-hydrated) .tug-bar i { width: 50%; }
.tug.is-mini { gap: 8px; min-width: 0; max-width: none; }
.tug.is-mini .tug-side b { font-size: 12.5px; }
.tug.is-mini .tug-bar { height: 5px; }

/* ------------------------------------------------ direction panels */
.dir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.dir-card { display: flex; flex-direction: column; border-top: 3px solid var(--dir); }
.dir-card.is-bear { --dir: var(--down); --dir-soft: var(--down-soft); }
.dir-card.is-bull { --dir: var(--up); --dir-soft: var(--up-soft); }
.dir-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px 11px 14px;
  background: linear-gradient(180deg, var(--dir-soft), transparent);
  border-bottom: 1px solid var(--line);
}
.dir-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 99px;
  background: var(--dir); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 8px 18px -10px var(--dir);
}
:root[data-theme="dark"] .dir-badge { color: #06051a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dir-badge { color: #06051a; } }
.dir-badge .ico { width: 14px; height: 14px; }
.dir-title { flex: 1; min-width: 120px; display: flex; align-items: baseline; gap: 9px; }
.dir-title h2 { font-size: 14px; font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dir-count b { color: var(--ink); }
.dir-tools { display: flex; align-items: center; gap: 6px; }
.dir-search input { width: 120px; padding-block: 6px; font-size: 12px; }
.icon-btn.is-sm { width: 30px; height: 30px; border: 1px solid var(--line-2); background: var(--surface); }
.icon-btn.is-sm .ico { width: 15px; height: 15px; }
.dir-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); font-size: 11.5px; color: var(--muted);
}
.dir-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.dir-meta .ico { width: 13px; height: 13px; }
.dir-shown { margin-left: auto; }
.dir-shown b { color: var(--ink); }
.dir-card .table-wrap { flex: 1; max-height: 540px; }
.filter-empty { padding: 22px 16px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Paired boards are half width: the ticker carries the row on its own and the
   least-read columns step out as the viewport narrows. */
.dir-grid .depth-table { font-size: 12.5px; }
.dir-grid .depth-table td, .dir-grid .depth-table thead th { padding-left: 8px; padding-right: 8px; }
.dir-grid .stock-name { display: none; }
.dir-grid .stock-tile { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.dir-grid .stock { gap: 8px; }
.dir-grid .chip { min-width: 44px; padding: 3px 7px; font-size: 11.5px; }
.dir-grid .chip-rf { min-width: 40px; }
.dir-grid .th-long { display: none; }
.dir-grid .th-short { display: inline; }
.dir-grid .depth-table th.col-symbol, .dir-grid .depth-table td.col-symbol { width: 1%; }
.dir-grid .depth-table th:nth-child(3), .dir-grid .depth-table td:nth-child(3) { display: none; }
.dir-grid .range-meter { width: 46px; }
.dir-grid .found-hits { display: none; }
.dir-grid .align-tag { margin-left: 2px; padding: 2px 3px; }
.dir-grid .align-tag span { display: none; }
@media (max-width: 1600px) {
  .dir-grid .depth-table th:nth-child(5), .dir-grid .depth-table td:nth-child(5) { display: none; }
}

/* A styled checkbox as a filter chip. */
.toggle-chip { position: relative; display: inline-flex; cursor: pointer; }
.toggle-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-chip span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface); color: var(--muted);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.toggle-chip span .ico { width: 14px; height: 14px; }
.toggle-chip:hover span { color: var(--ink); border-color: var(--accent-line); }
.toggle-chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.toggle-chip input:focus-visible + span { box-shadow: var(--ring); }

/* ------------------------------------------------------- scan cards */
.scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: var(--pad); }
.scan-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); color: var(--ink); text-decoration: none;
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.scan-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--glow); }
.scan-card-head { display: flex; align-items: center; gap: 10px; }
.scan-card-head strong { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-card-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.scan-card-ico .ico { width: 16px; height: 16px; }
.scan-card-count { padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.scan-card-meta { font-size: 12px; color: var(--muted); }
.scan-card-time { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scan-card-time .ico { width: 12px; height: 12px; }
.scan-card-tag { align-self: flex-start; padding: 2px 8px; border-radius: 99px; background: var(--up-soft); color: var(--up); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.scan-card.is-recent::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 3px var(--up-soft);
  animation: breathe 1.6s infinite;
}

/* ======================================================= sector rotation */
.stat-note { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.stat strong.is-up { color: var(--up); }
.stat strong.is-down { color: var(--down); }
.stat strong .is-up { color: var(--up); }
.stat strong .is-down { color: var(--down); }
/* Side by side only where both charts get real room; stacked, each spans the
   content width and sizes its drawing to it. */
.rotation-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
@media (min-width: 1700px) { .rotation-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.rotation-pair > .panel { display: flex; flex-direction: column; }

/* The rotation map. Dot positions arrive as --tx/--ty custom properties, so a
   refresh glides every sector to its new place. */
.rrg { padding: 6px 12px 0; }
.rrg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.q { stroke: none; }
.q-lead { fill: var(--up-soft); }
.q-weak { fill: var(--warn-soft); }
.q-lag { fill: var(--down-soft); }
.q-imp { fill: var(--cyan-soft); }
.rrg-quads rect { opacity: .7; }
.q-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; opacity: .9; }
text.q-lead { fill: var(--up); }
text.q-weak { fill: var(--warn); }
text.q-lag { fill: var(--down); }
text.q-imp { fill: var(--cyan); }
.rrg-grid { stroke: var(--grid); stroke-width: 1; }
.rrg-grid.is-zero { stroke: var(--line-2); stroke-width: 1.4; }
.rrg-tick { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.rrg-axis { fill: var(--muted); font-size: 10.5px; font-weight: 600; }
.rrg-trail polyline { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; stroke-dasharray: 3 3; transition: opacity .2s; }
.rrg-trail .rrg-crumb { opacity: .6; transition: opacity .2s; }
.rrg-trail.is-lead polyline, .rrg-trail.is-lead .rrg-crumb { stroke: var(--up); fill: var(--up); }
.rrg-trail.is-weak polyline, .rrg-trail.is-weak .rrg-crumb { stroke: var(--warn); fill: var(--warn); }
.rrg-trail.is-lag polyline, .rrg-trail.is-lag .rrg-crumb { stroke: var(--down); fill: var(--down); }
.rrg-trail.is-imp polyline, .rrg-trail.is-imp .rrg-crumb { stroke: var(--cyan); fill: var(--cyan); }
.rrg-trail polyline { fill: none !important; }
.rrg-trail.is-dim { opacity: .15; }
.rrg-dot {
  cursor: pointer;
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform .9s var(--ease-out), opacity .2s;
}
.rrg-body { animation: rrg-pop .7s var(--spring) backwards; }
.rrg-dots .rrg-dot:nth-child(2) .rrg-body { animation-delay: .03s; }
.rrg-dots .rrg-dot:nth-child(3) .rrg-body { animation-delay: .06s; }
.rrg-dots .rrg-dot:nth-child(4) .rrg-body { animation-delay: .09s; }
.rrg-dots .rrg-dot:nth-child(5) .rrg-body { animation-delay: .12s; }
.rrg-dots .rrg-dot:nth-child(6) .rrg-body { animation-delay: .15s; }
.rrg-dots .rrg-dot:nth-child(7) .rrg-body { animation-delay: .18s; }
.rrg-dots .rrg-dot:nth-child(8) .rrg-body { animation-delay: .21s; }
.rrg-dots .rrg-dot:nth-child(9) .rrg-body { animation-delay: .24s; }
.rrg-dots .rrg-dot:nth-child(n+10) .rrg-body { animation-delay: .27s; }
@keyframes rrg-pop { from { transform: scale(0); opacity: 0; } }
.rrg-ball { stroke-width: 1.6; transition: r .6s var(--ease-out); }
.rrg-halo { opacity: 0; transition: opacity .2s; }
.rrg-dot.is-lead .rrg-ball { fill: color-mix(in srgb, var(--up) 34%, transparent); stroke: var(--up); }
.rrg-dot.is-weak .rrg-ball { fill: color-mix(in srgb, var(--warn) 34%, transparent); stroke: var(--warn); }
.rrg-dot.is-lag .rrg-ball { fill: color-mix(in srgb, var(--down) 34%, transparent); stroke: var(--down); }
.rrg-dot.is-imp .rrg-ball { fill: color-mix(in srgb, var(--cyan) 34%, transparent); stroke: var(--cyan); }
.rrg-dot.is-lead .rrg-halo { fill: var(--up-soft); }
.rrg-dot.is-weak .rrg-halo { fill: var(--warn-soft); }
.rrg-dot.is-lag .rrg-halo { fill: var(--down-soft); }
.rrg-dot.is-imp .rrg-halo { fill: var(--cyan-soft); }
.rrg-dot.is-estimated .rrg-ball { stroke-dasharray: 3 2; fill-opacity: .4; }
.rrg-dot:hover .rrg-halo, .rrg-dot.is-lit .rrg-halo, .rrg-dot:focus-visible .rrg-halo { opacity: 1; }
.rrg-dot:focus { outline: none; }
.rrg-dot.is-dim { opacity: .25; }
.rrg-name { fill: var(--ink-2); font-size: 11px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.rrg-dot.is-lit .rrg-name { fill: var(--ink); }
.rrg-bench path { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
.rrg-bench text { fill: var(--ink); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.rrg-key { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px var(--pad) 14px; margin-top: auto; font-size: 11.5px; color: var(--muted); }
.rrg-key span { display: inline-flex; align-items: center; gap: 6px; }
.rrg-key i { width: 10px; height: 10px; border-radius: 50%; }
.rrg-key .k-lead i { background: var(--up); }
.rrg-key .k-weak i { background: var(--warn); }
.rrg-key .k-lag i { background: var(--down); }
.rrg-key .k-imp i { background: var(--cyan); }

/* The session race. */
.race { padding: 6px 8px 0 4px; }
.race-svg { display: block; width: 100%; height: auto; overflow: visible; }
.race-grid { stroke: var(--grid); stroke-width: 1; }
.race-grid.is-zero { stroke: var(--line-2); stroke-width: 1.4; }
.race-grid.is-hour { stroke-dasharray: 2 4; }
.race-tick { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.race-line {
  fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .38;
  stroke-dasharray: 1; animation: draw 1.8s var(--ease-out) backwards;
  transition: opacity .2s, stroke-width .2s;
}
.race-line.is-up { stroke: var(--up); }
.race-line.is-down { stroke: var(--down); }
.race-line.is-flat { stroke: var(--flat); }
.race-line.is-top, .race-line.is-bottom { opacity: .85; stroke-width: 2; }
.race-line.is-dim { opacity: .08; }
.race-line.is-lit { opacity: 1; stroke-width: 3; }
.race-bench { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; opacity: .7; }
.race-end { font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; transition: y .5s var(--ease-out); }
.race-end.is-up { fill: var(--up); }
.race-end.is-down { fill: var(--down); }
.race-end.is-flat { fill: var(--muted); }
.race-end.is-bench { fill: var(--ink); font-weight: 800; }
.race-cross line { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.race-hit { fill: transparent; cursor: crosshair; }
.race-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px var(--pad) 14px; margin-top: auto; }
.race-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 650;
  transition: border-color .15s, background .15s;
}
.race-chip b { font-weight: 750; font-variant-numeric: tabular-nums; }
.race-chip.is-up b { color: var(--up); }
.race-chip.is-down b { color: var(--down); }
.race-chip:hover, .race-chip.is-lit { border-color: var(--accent-line); background: var(--accent-soft); }
.race-chip.is-pinned { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tip-gap { text-align: center; color: var(--faint); line-height: 1; margin: 2px 0; }
.tip-hint span { color: var(--faint); font-size: 11px; }

/* The heatmap. Tile colours come from JS, mixed on this ramp. */
:root { --heat-neutral: 233, 231, 248; --heat-up: 4, 128, 84; --heat-down: 196, 32, 62; }
:root[data-theme="dark"] { --heat-neutral: 30, 29, 68; --heat-up: 24, 190, 122; --heat-down: 236, 68, 100; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --heat-neutral: 30, 29, 68; --heat-up: 24, 190, 122; --heat-down: 236, 68, 100; }
}
.heat-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 650; color: var(--muted); }
.legend-bar {
  width: 128px; height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, rgb(var(--heat-down)), rgb(var(--heat-neutral)) 50%, rgb(var(--heat-up)));
}
.heat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.heat-stage { position: relative; height: clamp(380px, 56vh, 640px); padding: 12px; }
.heat-map { position: relative; width: 100%; height: 100%; }
.heat-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.heat-map:not(:empty) + .heat-empty { display: none; }
.heat-tile {
  position: absolute; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: var(--fill, var(--surface-3)); color: var(--ink);
  text-align: left; cursor: pointer;
  transition: left .7s var(--ease-out), top .7s var(--ease-out), width .7s var(--ease-out), height .7s var(--ease-out),
              background-color .6s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
}
.heat-tile.is-ink-light { color: #fff; }
.heat-tile:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); filter: brightness(1.08); z-index: 3; }
.heat-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 4; }
.heat-tile.is-selected { box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .9), 0 12px 28px -12px rgba(0, 0, 0, .55); z-index: 2; }
.heat-name { font-size: 12px; font-weight: 750; line-height: 1.2; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-move { font-size: 17px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.heat-sub { font-size: 10.5px; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.heat-tile.is-small { padding: 5px 7px; }
.heat-tile.is-small .heat-name { font-size: 10px; }
.heat-tile.is-small .heat-move { font-size: 12px; }
.heat-tile.is-tiny { align-items: center; padding: 2px; }
.heat-tile.is-tiny .heat-name { display: none; }
.heat-tile.is-tiny .heat-move { font-size: 9.5px; }
.heat-tile.is-stock { border-radius: 4px; padding: 4px 6px; }
.heat-tile.is-stock .heat-name { font-size: 11px; }
.heat-tile.is-stock .heat-move { font-size: 12.5px; }
.heat-tile.is-stock.is-small .heat-name { font-size: 9.5px; }
.heat-tile.is-stock.is-small .heat-move { font-size: 10px; }
.heat-frame {
  position: absolute; border-radius: 8px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: left .7s var(--ease-out), top .7s var(--ease-out), width .7s var(--ease-out), height .7s var(--ease-out);
}
.heat-frame-head {
  display: block; height: 17px; padding: 2px 6px 0;
  color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heat-frame-head:hover { color: var(--accent-ink); }
.heat-map .is-entering { animation: tile-in .5s var(--ease-out) backwards; }
@keyframes tile-in { from { opacity: 0; transform: scale(.9); } }

.heat-detail { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface-2); }
.heat-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.heat-detail-head h3 { margin-top: 2px; font-size: 16px; font-weight: 750; letter-spacing: -.015em; }
.heat-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.heat-detail-meta .chip { min-width: 0; }
.heat-detail-list { list-style: none; margin: 0; padding: 6px 8px 10px; overflow-y: auto; flex: 1; max-height: clamp(300px, 48vh, 560px); }
.heat-detail-list > li + li { border-top: 1px solid var(--line); }
.heat-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: none; text-align: left;
}
.heat-row:hover { background: var(--accent-soft); }
.heat-row-id b { display: block; font-size: 12.5px; font-weight: 720; }
.heat-row-id small { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-row-num { text-align: right; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.heat-row-num small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
.heat-row .chip { min-width: 0; justify-self: end; }

/* With the breakdown column the board drops Leading · lagging (the pulse
   page carries it) and scrolls rather than squeezing on a narrow screen. */
.sector-table.has-breakdown { min-width: 1040px; }
.sector-table.has-breakdown th:nth-child(9), .sector-table.has-breakdown td:nth-child(9) { display: none; }
.sector-text { white-space: nowrap; }

@media (max-width: 1280px) {
  .heat-layout { grid-template-columns: minmax(0, 1fr); }
  .heat-detail { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .heat-stage { height: 420px; padding: 8px; }
}

/* ======================================================= sector deep dive */
.dd-hero {
  position: relative; overflow: hidden;
  padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(900px 260px at 0% 0%, color-mix(in srgb, var(--tone-lift, var(--tone, var(--accent))) 14%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}
.dd-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--tone-lift, var(--tone, var(--accent))), transparent);
}
.dd-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.dd-step {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 5px 10px; border-radius: 10px;
  color: var(--ink-2); font-size: 12.5px; font-weight: 650; text-decoration: none;
  transition: background .15s, color .15s;
}
.dd-step:hover { background: var(--surface-3); color: var(--ink); }
.dd-step span { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.dd-step small { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.dd-step.is-next { text-align: right; }
.dd-step.is-off { color: var(--faint); cursor: default; }
.dd-step.is-off:hover { background: none; }
.dd-jump select { max-width: 320px; }

.dd-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .8fr) minmax(280px, 1fr);
  gap: 26px; align-items: center;
  padding: 20px 24px 22px;
}
.dd-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone-lift, var(--tone, var(--accent))); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone-lift, var(--tone, var(--accent))) 22%, transparent); }
.dd-figure { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dd-value { font-size: clamp(32px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; border-radius: 8px; }
.dd-delta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px;
  font-size: 16px; font-weight: 780; font-variant-numeric: tabular-nums;
}
.dd-delta .ico { width: 16px; height: 16px; }
.dd-delta.is-up { background: var(--up-soft); color: var(--up); box-shadow: 0 0 24px -8px var(--up); }
.dd-delta.is-down { background: var(--down-soft); color: var(--down); box-shadow: 0 0 24px -8px var(--down); }
.dd-delta.is-flat { background: var(--surface-3); color: var(--muted); }
.dd-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dd-rank { padding: 3px 10px; border-radius: 99px; background: var(--surface-3); font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dd-rank b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dd-range { display: flex; align-items: center; gap: 10px; margin-top: 16px; max-width: 460px; }
.dd-range-end { font-size: 11px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.dd-range-track { position: relative; flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--down-soft), var(--line-2), var(--up-soft)); }
.dd-range-now {
  position: absolute; top: 50%; left: var(--x, 50%);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--tone-lift, var(--tone, var(--accent)));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone-lift, var(--tone, var(--accent))) 20%, transparent);
  transition: left 1s var(--ease-out);
}
:root:not(.is-hydrated) .dd-range-now { left: 50%; }
.dd-sub { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.dd-block-label { margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dd-score .gauge { max-width: 200px; margin: 0; }
.dd-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.dd-parts li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.dd-parts b { text-align: right; font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--muted); }
.dd-parts b.is-up { color: var(--up); }
.dd-parts b.is-down { color: var(--down); }
.dd-part-track { position: relative; height: 6px; border-radius: 99px; background: var(--surface-3); }
.dd-part-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); }
.dd-part-track em { position: absolute; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 99px; transition: width .9s var(--ease-out); }
.dd-part-track em.is-up { left: 50%; background: var(--up); }
.dd-part-track em.is-down { right: 50%; background: var(--down); }
.dd-chart .spark-hero { width: 100%; height: auto; }
.spark-legend .spark-times { margin-left: auto; font-variant-numeric: tabular-nums; }

/* The three reads. */
.read-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* The corner glow is a background layer, not a pseudo-element: a positioned
   ::after would paint over the verdict text. */
.read-card {
  position: relative; overflow: hidden;
  padding: 16px 18px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(360px 170px at 100% 0%, var(--read-glow, transparent), transparent 70%), var(--surface);
  box-shadow: var(--shadow);
}
.read-card.is-up { --read-glow: var(--up-soft); }
.read-card.is-down { --read-glow: var(--down-soft); }
.read-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line-2); }
.read-card.is-up::before { background: linear-gradient(90deg, var(--up), var(--up-2)); }
.read-card.is-down::before { background: linear-gradient(90deg, var(--down), var(--down-2)); }
.read-label { position: relative; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.read-label .ico { width: 14px; height: 14px; }
.read-verdict { position: relative; margin-bottom: 6px; font-size: 19px; font-weight: 760; letter-spacing: -.02em; line-height: 1.2; }
.read-card.is-up .read-verdict { color: var(--up); }
.read-card.is-down .read-verdict { color: var(--down); }
.read-detail { position: relative; min-height: 38px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.read-foot { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.read-foot b { margin-left: 3px; font-size: 12.5px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.read-foot b.is-up, .read-foot b.up { color: var(--up); }
.read-foot b.is-down, .read-foot b.down { color: var(--down); }
.read-split { width: 60px; }

/* What is inside the sector: one card per industry folded into it, the one
   the index measures first. A card filters the constituent table to its own. */
.inside-list {
  list-style: none; margin: 0; padding: 12px var(--pad) 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
}
.inside-list li { display: flex; }
.inside-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: space-between; gap: 9px 12px;
  width: 100%; padding: 11px 13px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  transition: border-color .14s, background .14s;
}
.inside-item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.inside-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inside-item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.inside-item.is-core { box-shadow: inset 3px 0 0 var(--tone-lift, var(--tone, var(--accent))); }
.inside-name { grid-area: 1 / 1; min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.3; }
.inside-name small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.inside-tag {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 99px; vertical-align: 1px;
  font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .03em;
  color: var(--muted); border: 1px solid var(--line-2);
}
.inside-move { grid-area: 1 / 2; font-size: 15px; font-weight: 760; font-variant-numeric: tabular-nums; }
.inside-breadth { grid-area: 2 / 1 / auto / -1; display: flex; align-items: center; gap: 9px; }
.inside-breadth .split-bar { flex: 1; }
.inside-clear { gap: 6px; }
.inside-clear .ico { width: 12px; height: 12px; }
/* The filter jumps to the table; keep its heading clear of the sticky top bar. */
.panel[data-table] { scroll-margin-top: 76px; }

.dd-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }

/* What moved the index: signed bars from a shared centre. */
.contrib-list { list-style: none; margin: 0; padding: 8px 18px 10px; }
.contrib-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 62px 58px; align-items: center; gap: 12px;
  padding: 6px 6px; border-radius: 9px; cursor: pointer; transition: background .14s;
}
.contrib-row:hover { background: var(--accent-soft); }
.contrib-row + .contrib-row { border-top: 1px solid var(--line); }
.contrib-sym { min-width: 0; font-size: 12.5px; font-weight: 720; line-height: 1.25; }
.contrib-sym small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.contrib-track { position: relative; height: 18px; border-radius: 6px; background: var(--surface-2); }
.contrib-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); }
.contrib-track i { position: absolute; top: 3px; bottom: 3px; width: var(--w, 0%); min-width: 3px; border-radius: 4px; transition: width 1s var(--ease-out); }
.contrib-track i.is-up { left: 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--up) 55%, transparent), var(--up)); }
.contrib-track i.is-down { right: 50%; background: linear-gradient(270deg, color-mix(in srgb, var(--down) 55%, transparent), var(--down)); }
.contrib-num { text-align: right; font-size: 13px; font-weight: 780; font-variant-numeric: tabular-nums; }
.contrib-move { text-align: right; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.contrib-num.is-up, .contrib-move.is-up { color: var(--up); }
.contrib-num.is-down, .contrib-move.is-down { color: var(--down); }

/* The positioning matrix: price on one axis, open interest on the other. */
.oi-matrix {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 9px;
  padding: 12px 18px 6px;
}
.oi-head { align-self: end; padding-bottom: 2px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.oi-head b { display: block; font-size: 12.5px; font-weight: 760; color: var(--ink); }
.oi-head small { display: block; font-size: 10px; }
.oi-side { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.oi-side b { display: block; font-size: 13px; font-weight: 760; color: var(--ink); }
.oi-cell {
  position: relative; min-width: 0; min-height: 112px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.oi-cell strong { display: block; padding-right: 36px; font-size: 13px; font-weight: 740; }
.oi-count { position: absolute; top: 10px; right: 14px; font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; opacity: .7; border-radius: 6px; }
.oi-cell small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--ink-2); }
.oi-syms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.oi-sym {
  padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--surface); font-size: 10.5px; font-weight: 700; color: var(--ink-2);
}
.oi-sym:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.oi-more { padding: 1px 4px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.oi-cell.buildup-long { background: var(--up-soft); border-color: var(--up-line); }
.oi-cell.buildup-long strong, .oi-cell.buildup-long .oi-count { color: var(--up); }
.oi-cell.buildup-short { background: var(--down-soft); border-color: var(--down-line); }
.oi-cell.buildup-short strong, .oi-cell.buildup-short .oi-count { color: var(--down); }
.oi-cell.buildup-cover { background: var(--accent-soft); border-color: var(--accent-line); }
.oi-cell.buildup-cover strong, .oi-cell.buildup-cover .oi-count { color: var(--accent-ink); }
.oi-cell.buildup-unwind { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.oi-cell.buildup-unwind strong, .oi-cell.buildup-unwind .oi-count { color: var(--warn); }
/* The quadrant carrying the most open interest is the sector's stance. */
.oi-cell.is-dominant { border-width: 2px; box-shadow: 0 14px 34px -18px currentColor; }
.oi-cell.buildup-long.is-dominant { border-color: var(--up); color: var(--up); }
.oi-cell.buildup-short.is-dominant { border-color: var(--down); color: var(--down); }
.oi-cell.buildup-cover.is-dominant { border-color: var(--accent); color: var(--accent); }
.oi-cell.buildup-unwind.is-dominant { border-color: var(--warn); color: var(--warn); }
.oi-cell.is-dominant small { color: var(--ink-2); }
.oi-cell.is-empty { opacity: .5; }
.oi-verdict {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 8px 18px 16px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.oi-verdict .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--muted); }
.oi-verdict.is-up { box-shadow: inset 3px 0 0 var(--up); }
.oi-verdict.is-down { box-shadow: inset 3px 0 0 var(--down); }
.oi-verdict.is-up b:last-child { color: var(--up); }
.oi-verdict.is-down b:last-child { color: var(--down); }

/* The four shortlists. */
.insight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.insight .panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.insight .panel-title h2 { font-size: 14px; }
.strip-count { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--muted); border-radius: 6px; }
.strip-count.is-hot { color: var(--hot); }
.strip-count.is-up { color: var(--up); }
.strip-count.is-down { color: var(--down); }
.insight-list { list-style: none; margin: 0; padding: 4px 8px 10px; }
.insight-list > li { padding: 8px 8px; border-radius: 10px; cursor: pointer; transition: background .14s; }
.insight-list > li + li { border-top: 1px solid var(--line); }
.insight-list > li:hover { background: var(--accent-soft); }
.insight-list > li.list-empty { cursor: default; }
.insight-list > li.list-empty:hover { background: none; }
.ins-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ins-sym { font-size: 12.5px; font-weight: 740; color: var(--ink); text-decoration: none; }
.ins-sym::after { content: "↗"; margin-left: 4px; font-size: 10px; color: var(--faint); }
.ins-sym:hover { color: var(--accent-ink); }
.ins-num { font-size: 12.5px; font-weight: 740; font-variant-numeric: tabular-nums; }
.ins-num.is-up { color: var(--up); }
.ins-num.is-down { color: var(--down); }
.ins-bot { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.ins-level { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bot .chip { min-width: 44px; padding: 2px 8px; font-size: 11px; }
.ins-note { font-size: 10.5px; font-style: normal; color: var(--muted); white-space: nowrap; }
.setup-link {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.setup-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.setup-ico .ico { width: 15px; height: 15px; }
.setup-name { min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.setup-name small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.setup-sides { display: flex; gap: 4px; }

/* Constituents flagged against a level carry a rail in its colour. */
.sector-constituents tr.is-near-breakout td:first-child { box-shadow: inset 3px 0 0 var(--hot); }
.sector-constituents tr.is-near-breakdown td:first-child { box-shadow: inset 3px 0 0 var(--down); }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px var(--pad) 16px; }
.alert-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface-2); color: var(--ink);
  font-size: 11.5px; font-weight: 720;
  transition: border-color .15s, background .15s;
}
.alert-chip:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.alert-chip b { font-size: 10px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Quick-view extras. */
.qv-sub { margin-top: 4px; font-size: 12px; }
.qv-range { margin-top: 14px; }
.qv-range-track { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--down-soft), var(--line-2), var(--up-soft)); }
.qv-range-track i { position: absolute; top: 50%; left: var(--x, 50%); transform: translate(-50%, -50%); transition: left .8s var(--ease-out); }
.qv-range-track .mk-ltp { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); z-index: 2; }
.qv-range-track .mk-vwap { width: 2px; height: 16px; border-radius: 2px; background: var(--cyan); }
.qv-range-track .mk-open { width: 2px; height: 12px; border-radius: 2px; background: var(--muted); }
.qv-range-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qv-range-ends b { display: inline-block; width: 8px; height: 8px; margin: 0 4px 0 8px; border-radius: 2px; vertical-align: 0; }
.qv-range-ends .k-vwap { background: var(--cyan); }
.qv-range-ends .k-open { background: var(--muted); }
.qv-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.qv-signals .chip { min-width: 0; }
.qv-facts b.is-up { color: var(--up); }
.qv-facts b.is-down { color: var(--down); }
.qv-facts b.is-hot { color: var(--hot); }

@media (max-width: 1280px) {
  .dd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dd-main { grid-column: 1 / -1; }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .read-grid { grid-template-columns: minmax(0, 1fr); }
  .dd-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .dd-step span { display: none; }
  .dd-jump { flex: 1; }
  .dd-jump select { width: 100%; max-width: none; }
}
@media (max-width: 620px) {
  .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .oi-matrix { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 10px 10px 4px; }
  .oi-cell { min-height: 96px; padding: 10px; }
  .contrib-row { grid-template-columns: 90px minmax(0, 1fr) 54px; }
  .contrib-move { display: none; }
}

/* ========================================================== setups & scans */
.setup-hint {
  display: flex; align-items: flex-start; gap: 8px; flex-basis: 100%;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 1.5;
}
.setup-hint .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--accent-ink); }
.setup-hint b { color: var(--ink); }
.pair-label { display: flex; align-items: center; gap: 14px; margin: 4px 2px -6px; }
.pair-rule { flex: 1; height: 1px; background: var(--line-2); }
.pair-name { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }

.detail-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--line); box-shadow: var(--shadow);
}
.detail-strip > div { padding: 13px 16px; background: var(--surface); }
.detail-strip span { display: block; margin-bottom: 3px; font-size: 11px; color: var(--muted); }
.detail-strip strong { font-size: 14px; font-weight: 700; }

/* ------------------------------------------------------------- screener */
.view-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px var(--pad); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.view-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 650; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, transform .15s var(--ease);
}
.view-chip:hover { border-color: var(--accent-line); color: var(--ink); }
.view-chip:active { transform: scale(.97); }
.view-chip.is-active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px -10px var(--accent);
}
.view-chip .ico { width: 13px; height: 13px; }
.view-chip i { width: 7px; height: 7px; border-radius: 50%; }
.view-chip .dot-up { background: var(--up); }
.view-chip .dot-down { background: var(--down); }
.view-chip.is-active i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.screener .panel-tools .select { max-width: 200px; }
.screener-table { min-width: 1080px; }
.screener-table th.col-symbol, .screener-table td.col-symbol { width: 22%; }
.screener-table .stock-id { max-width: 240px; }
.screener-table .buildup-pill { margin-top: 3px; }
.screener-table td:nth-child(7) { white-space: nowrap; }
.screener-table .bias-tag { font-size: 10.5px; padding: 2px 8px; }
.is-hot { color: var(--hot); }

/* ------------------------------------------------------- opening burst */
.funnel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
.funnel-step { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.funnel-n { min-width: 54px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.funnel-step.is-dry .funnel-n { color: var(--down); }
.funnel-step.is-burst { background: var(--hot-soft); }
.funnel-step.is-burst .funnel-n { color: var(--hot); }
.funnel-label { font-size: 13px; font-weight: 700; line-height: 1.3; }
.funnel-label small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.funnel-arrow { color: var(--faint); }
.funnel-time { display: flex; align-items: center; gap: 6px; flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.funnel-time .ico { width: 14px; height: 14px; }
.opening-volume-table { min-width: 1060px; }
.opening-volume-table th.col-symbol, .opening-volume-table td.col-symbol { width: 22%; }
.vbars { display: block; width: 86px; height: 26px; margin-left: auto; overflow: visible; }
.vbars.is-open { width: 54px; }
.vbars rect { fill: var(--line-2); }
.vbars.is-dry rect { fill: color-mix(in srgb, var(--down) 55%, transparent); }
.vbars.is-dry rect.is-over { fill: var(--warn); }
.vbars.is-open rect { fill: var(--hot); }
.vbars-ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 2; opacity: .7; }

/* ================================================================= login */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  width: min(1040px, 100%); min-height: 560px;
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-lg);
  animation: rise-in .5s var(--ease-out);
}
.auth-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 44px 42px;
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(124, 108, 255, .55), transparent 70%),
    radial-gradient(420px 300px at 100% 100%, rgba(34, 211, 238, .22), transparent 70%),
    linear-gradient(160deg, #1a1170 0%, #0b0930 55%, #06051a 100%);
  color: #e3e0ff;
}
.auth-brand .eyebrow { color: #a79dff; }
.auth-logo { width: 190px; height: auto; margin-bottom: 18px; }
.auth-brand h2 { max-width: 420px; font-size: 28px; font-weight: 780; letter-spacing: -.03em; line-height: 1.2; color: #fff; }
.auth-brand-copy { max-width: 420px; margin: 0; color: #c4bff0; font-size: 15px; line-height: 1.6; }
.auth-glow {
  position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .02), 0 0 0 80px rgba(255, 255, 255, .015);
}
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; }
.login-logo { width: 200px; height: auto; margin-bottom: 22px; }
:root[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); opacity: .92; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-logo { filter: brightness(0) invert(1); opacity: .92; } }
.login-card h1 { margin: 6px 0; font-size: 28px; font-weight: 780; letter-spacing: -.03em; }
.login-access-notice {
  margin: 14px 0; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 10px;
  background: var(--accent-soft); color: var(--ink); font-size: 13px; line-height: 1.5;
}
.login-access-notice strong { display: block; font-weight: 750; }
.stack { display: grid; gap: 6px; margin-top: 20px; }
.notice.error { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--down-soft); color: var(--down); font-size: 13px; }
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 48px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface-hi); color: var(--ink); font-weight: 650;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.google-btn svg { width: 18px; height: 18px; flex: none; }
.google-btn:hover:not(:disabled) { border-color: var(--accent-line); box-shadow: var(--glow); transform: translateY(-1px); }
.google-btn:disabled { cursor: not-allowed; opacity: .55; }
.google-btn.is-loading span::after { content: "…"; }
.google-btn.wide { width: 100%; }
.login-foot { margin-top: 18px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 820px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { padding: 30px 26px; }
  .login-card { padding: 30px 26px; }
}

/* ================================================================= motion */
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes breathe { 50% { opacity: .35; } }
@keyframes shimmer { 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-swap { from { opacity: .2; transform: translateY(4px); } }
@keyframes slide-in { from { transform: translateX(100%); } }
@keyframes slide-out { to { transform: translateX(100%); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes col-grow { from { transform: scaleY(0); } }

/* Panels settle in on first paint, in reading order. */
.reveal { animation: reveal-up .6s var(--ease-out) backwards; }
.content > .reveal:nth-child(2), .pulse > .reveal:nth-child(1) { animation-delay: .04s; }
.content > .reveal:nth-child(3), .pulse > .reveal:nth-child(2) { animation-delay: .08s; }
.content > .reveal:nth-child(4), .pulse > .reveal:nth-child(3) { animation-delay: .12s; }
.content > .reveal:nth-child(5), .pulse > .reveal:nth-child(4) { animation-delay: .16s; }
.content > .reveal:nth-child(n+6) { animation-delay: .2s; }
.grid-2 > .reveal:nth-child(2), .movers-grid > .reveal:nth-child(2) { animation-delay: .1s; }
.rotation-list li { animation: row-in .5s var(--ease-out) backwards; }
.rotation-list li:nth-child(2) { animation-delay: .06s; }
.rotation-list li:nth-child(3) { animation-delay: .12s; }
.rotation-list li:nth-child(4) { animation-delay: .18s; }
.rotation-list li:nth-child(5) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

/* ============================================================= responsive */
@media (max-width: 1500px) {
  .top-title { max-width: 24%; }
  .session-text small { display: none; }
  .search-trigger-text, .search-trigger kbd { display: none; }
  .search-trigger { width: 36px; padding: 0; justify-content: center; }
  .dir-grid .stock-tile { display: none; }
}

@media (max-width: 1380px) {
  .pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-grid .depth-table th:nth-child(5), .dir-grid .depth-table td:nth-child(5) { display: none; }
  .dir-grid .dir-search { display: none; }
}

@media (max-width: 1180px) {
  .movers-grid { grid-template-columns: 1fr; }
  .rotation-list a { grid-template-columns: 26px minmax(0, 1fr) 96px 72px 36px; gap: 9px; }
  .rot-spark { width: 96px; }
}

/* Below this the sidebar goes off-canvas and the ribbon takes its own row. */
@media (max-width: 1024px) {
  .app, body.sidebar-collapsed .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; z-index: 70; top: 0; left: 0; bottom: 0; height: auto;
    width: var(--side-w);
    transform: translateX(-102%);
    transition: transform .28s var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .side { transform: none; }
  body.sidebar-open .scrim {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(6, 5, 26, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: fade-in .2s ease;
  }
  body.sidebar-collapsed .brand-logo, body.sidebar-collapsed .brand-sub, body.sidebar-collapsed .nav-text,
  body.sidebar-collapsed .nav-count, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .feed-state span { display: revert; }
  body.sidebar-collapsed .brand-logo-mark { display: none; }
  body.sidebar-collapsed .side-head { flex-direction: row; }
  body.sidebar-collapsed .nav-item { justify-content: flex-start; padding-inline: 10px; }
  .side-collapse { display: none; }
  .menu-btn { display: inline-grid; }
  .top { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
  .top-title { flex: 1; max-width: none; }
  .ribbon { order: 3; flex: 1 0 100%; justify-content: flex-start; }
  .content { padding: 18px 16px 56px; }
}

@media (max-width: 900px) {
  .grid-2, .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .movers-list { grid-template-columns: minmax(0, 1fr); }
  .dir-grid .depth-table th:nth-child(5), .dir-grid .depth-table td:nth-child(5) { display: table-cell; }
  .dir-grid .dir-search { display: flex; }
  .session-pill .session-text { display: none; }
  .session-pill { width: 36px; padding: 0; justify-content: center; }
}

@media (max-width: 620px) {
  :root { --pad: 14px; --gap: 14px; }
  .pulse { grid-template-columns: minmax(0, 1fr); }
  .top-title h1 { font-size: 17px; }
  .top-title .eyebrow { display: none; }
  .theme-btn { display: none; }
  .panel-head { padding: 12px var(--pad); }
  .search input { width: 150px; }
  .rotation-list a { grid-template-columns: 24px minmax(0, 1fr) 70px 34px; }
  .rot-spark { display: none; }
  .depth-table td.col-symbol, .depth-table th.col-symbol {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .depth-table thead th.col-symbol { z-index: 3; background: var(--surface-2); }
  .dir-grid .depth-table th:nth-child(5), .dir-grid .depth-table td:nth-child(5) { display: none; }
  .drawer { width: 100%; }
  .qv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Five-minute trap setups: rules and evidence share the desk's theme tokens. */
.trap-guide, .trap-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.trap-guide { margin: 14px 0 18px; }
.trap-guide summary { cursor: pointer; color: var(--ink); font-weight: 650; }
.trap-guide p { margin: 8px 0; }
.trap-note { margin: 12px 0 18px; }
.trap-status { border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 6px; font: inherit; font-size: 12px; }
.trap-grid .dir-tools { flex-wrap: wrap; }
.trap-grid .trap-table { min-width: 670px; }
/* Trap evidence uses different columns from the general setup tables. */
.dir-grid.trap-grid .trap-table thead th, .dir-grid.trap-grid .trap-table td { display: table-cell; }
.trap-grid .empty { min-height: 180px; }