/* Stock Volatility dashboard (#stockvol) — rendered by stock_vol.js.
   Theme-token only: --bg/--panel/--panel-2/--border/--text/--text-2/--muted/
   --accent/--green/--red/--amber. No hard-coded blues (dark-theme rule). */
/* Bands, top to bottom: title → market read → filter toolbar → table. */
.sv-head { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-start; justify-content: space-between; padding: 12px 12px 4px; }
.sv-title h2 { margin: 0 0 4px; font-size: 18px; }
.sv-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.sv-meta b { color: var(--text-2); font-weight: 600; }
.sv-toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 2px 12px 8px; }
.sv-toolbar .sv-chips { flex: 1 1 auto; }
.sv-count { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.sv-q { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; min-width: 160px; }
.sv-q:focus { outline: none; border-color: var(--accent); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip, .sv-btn { background: var(--panel); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; line-height: 1.2; }
.sv-chip:hover, .sv-btn:hover { background: var(--panel-2); color: var(--text); }
.sv-chip.on { border-color: var(--amber); color: var(--text); background: var(--row-atm, rgba(212,168,87,0.16)); }
.sv-btn { border-radius: 6px; }
.sv-info { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); flex: 0 1 auto; max-width: 100%; }
.sv-info[open] { flex-basis: 100%; }
.sv-info summary { cursor: pointer; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.sv-info summary::-webkit-details-marker { display: none; }
.sv-info-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); font-size: 10px; font-weight: 700; color: var(--text-2); }
.sv-info-body { padding: 8px 4px 0 22px; max-width: 980px; }
.sv-info-body p { margin: 0 0 6px; line-height: 1.45; }

.sv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 12px 16px; }
.sv-body:has(.sv-drill:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
.sv-tablewrap { overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); max-height: calc(100vh - 210px); }
.sv-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; white-space: nowrap; }
.sv-table th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 8px; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; text-align: left; }
.sv-table th.num, .sv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-table th.on { color: var(--text); }
.sv-sort { font-size: 9px; margin-left: 2px; }
.sv-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.sv-table td.sym { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.sv-table th.sym { left: 0; z-index: 3; }
.sv-table td.strong { font-weight: 700; }
.sv-table td.small { font-size: 11px; color: var(--text-2); }
.sv-table tbody tr { cursor: pointer; }
.sv-table tbody tr:hover td { background: var(--row-hover, rgba(255,255,255,0.04)); }
.sv-table tbody tr.sel td { background: var(--row-atm, rgba(212,168,87,0.16)); }
.sv-table .up { color: var(--red); }        /* IV up = premiums richer */
.sv-table .dn { color: var(--green); }
.sv-table .rich { color: var(--amber); font-weight: 600; }
.sv-table .cheap { color: var(--green); font-weight: 600; }
.sv-table .ce { color: var(--accent); }
.sv-table .pe { color: var(--amber); }
.sv-table .muted { color: var(--muted); }
.sv-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.sv-rank { position: relative; display: inline-block; width: 72px; height: 16px; border-radius: 3px; background: var(--panel-2); overflow: hidden; vertical-align: middle; text-align: right; }
.sv-rank i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .45; }
.sv-rank.hi i { background: var(--red); }
.sv-rank.mid i { background: var(--amber); }
.sv-rank.lo i { background: var(--green); }
.sv-rank b { position: relative; font-size: 11px; line-height: 16px; padding-right: 4px; font-weight: 600; }
.sv-spark { display: block; }
.sv-spark polyline { fill: none; stroke: var(--amber); stroke-width: 1.3; stroke-linejoin: round; }
.sv-spark circle { fill: var(--amber); }
.sv-table td.spark { padding: 2px 8px; }

.sv-drill { position: sticky; top: 8px; align-self: start; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 12px; max-height: calc(100vh - 210px); overflow: auto; }
.sv-drill-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-drill-head h3 { margin: 0; font-size: 16px; }
.sv-x { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1; }
.sv-x:hover { background: var(--panel-2); color: var(--text); }
.sv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin: 10px 0; }
.sv-stats .stat { background: var(--panel-2); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.sv-stats .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sv-stats .val { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sv-stats .val.ce { color: var(--accent); }
.sv-stats .val.pe { color: var(--amber); }
.sv-chartwrap { position: relative; height: 240px; }
.sv-foot { margin-top: 6px; }

@media (max-width: 900px) {
  .sv-body:has(.sv-drill:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .sv-drill { position: static; max-height: none; }
  .sv-tablewrap { max-height: 60vh; }
}

/* No global symbol/expiry bar on this page — the table IS the selector
   (same pattern as body.page-movers / body.page-macro). */
body.page-stockvol .instr-bar { display: none !important; }

/* ── table-level insights strip ─────────────────────────────────── */
.sv-summary { margin: 4px 12px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; }
.sv-summary.collapsed { padding-bottom: 8px; }
.sv-sum-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sv-sum-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.sv-regime { flex-shrink: 0; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; background: var(--panel-2); color: var(--text-2); }
.sv-regime.hi { color: var(--red); } .sv-regime.lo { color: var(--green); } .sv-regime.mid { color: var(--amber); }
.sv-headline { margin: 0; flex: 1 1 420px; font-size: 13px; line-height: 1.45; color: var(--text); }
.sv-sum-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: 6px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; margin-left: auto; }
.sv-sum-toggle:hover { background: var(--panel-2); color: var(--text); }
.sv-sum-body { margin-top: 10px; }
.sv-sum-cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px 8px; margin-bottom: 10px; }
.sv-sum-cards .stat { background: var(--panel-2); border-radius: 6px; padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-sum-cards .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-sum-cards .val { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sv-sum-cards .rich, .sv-insight .rich { color: var(--amber); } .sv-sum-cards .cheap, .sv-insight .cheap { color: var(--green); }
.sv-sum-cards .pe { color: var(--amber); } .sv-sum-cards .ce { color: var(--accent); }
.sv-tops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.sv-top { min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.sv-top-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-top-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-top-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; cursor: pointer; line-height: 1.4; }
.sv-top-chip:hover { border-color: var(--amber); }
.sv-top-chip b { font-weight: 600; margin-left: 2px; }
.sv-top-chip.up b { color: var(--red); } .sv-top-chip.dn b { color: var(--green); }
.sv-top-chip.rich b { color: var(--amber); } .sv-top-chip.cheap b { color: var(--green); }
.sv-top-chip.pe b { color: var(--amber); } .sv-top-chip.ev b { color: var(--red); }
.sv-sum-notes { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
@media (max-width: 1400px) { .sv-sum-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .sv-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sv-tops, .sv-sum-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-headline { flex-basis: 100%; } }

/* ── per-stock insights (drill-down) ────────────────────────────── */
.sv-insight { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.sv-bias { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sv-bias.hi { color: var(--red); } .sv-bias.lo { color: var(--green); } .sv-bias.ev { color: var(--amber); }
.sv-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.sv-badge { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); color: var(--text-2); }
.sv-badge.hi { color: var(--red); } .sv-badge.lo { color: var(--green); } .sv-badge.mid { color: var(--amber); }
.sv-badge.pe { color: var(--amber); } .sv-badge.ce { color: var(--accent); }
.sv-notes { margin: 0 0 6px; padding-left: 16px; font-size: 12px; line-height: 1.45; color: var(--text); }
.sv-notes li { margin-bottom: 3px; }
.sv-structs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sv-structs .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 4px; width: 100%; }
.sv-struct { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--text); }

/* ════════════════════════════════════════════════════════════════════
   Bright palette — no grey fills. Semantic colours, tinted at ~12% on the
   card, saturated for values, bars and bullets. Light theme first; dark and
   blue themes lift the same hues. (User: "no grey fill, bright and beautiful")
   ═══════════════════════════════════════════════════════════════════ */
section[data-page="stockvol"] {
  --sv-iv: #ea580c;      /* implied vol — orange */
  --sv-rv: #2563eb;      /* realised vol — blue */
  --sv-lo: #059669;      /* low / cheap — emerald */
  --sv-mid: #d97706;     /* mid — amber */
  --sv-hi: #dc2626;      /* high / rich — red */
  --sv-ev: #7c3aed;      /* event — violet */
  --sv-ce: #0284c7;      /* calls — sky */
  --sv-pe: #c2410c;      /* puts — burnt orange */
  --sv-card: var(--panel);
  --sv-ink: var(--text);
}
:root[data-theme="dark"] section[data-page="stockvol"], :root[data-theme="blue"] section[data-page="stockvol"] {
  --sv-iv: #fb923c; --sv-rv: #60a5fa; --sv-lo: #34d399; --sv-mid: #fbbf24; --sv-hi: #f87171; --sv-ev: #a78bfa; --sv-ce: #38bdf8; --sv-pe: #fdba74;
}

/* cards: white, thin border, coloured left rail + coloured value */
.sv-stats .stat, .sv-sum-cards .stat {
  background: var(--sv-card); border: 1px solid var(--border); border-left: 4px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.sv-stats .stat .val, .sv-sum-cards .stat .val { color: var(--sv-ink); }
.sv-stats .stat.iv,   .sv-sum-cards .stat.iv   { border-left-color: var(--sv-iv); }  .sv-stats .stat.iv .val,   .sv-sum-cards .stat.iv .val   { color: var(--sv-iv); }
.sv-stats .stat.rv,   .sv-sum-cards .stat.rv   { border-left-color: var(--sv-rv); }  .sv-stats .stat.rv .val,   .sv-sum-cards .stat.rv .val   { color: var(--sv-rv); }
.sv-stats .stat.lo,   .sv-sum-cards .stat.lo   { border-left-color: var(--sv-lo); }  .sv-stats .stat.lo .val,   .sv-sum-cards .stat.lo .val   { color: var(--sv-lo); }
.sv-stats .stat.mid,  .sv-sum-cards .stat.mid  { border-left-color: var(--sv-mid); } .sv-stats .stat.mid .val,  .sv-sum-cards .stat.mid .val  { color: var(--sv-mid); }
.sv-stats .stat.hi,   .sv-sum-cards .stat.hi   { border-left-color: var(--sv-hi); }  .sv-stats .stat.hi .val,   .sv-sum-cards .stat.hi .val   { color: var(--sv-hi); }
.sv-stats .stat.rich, .sv-sum-cards .stat.rich { border-left-color: var(--sv-hi); }  .sv-stats .stat.rich .val, .sv-sum-cards .stat.rich .val { color: var(--sv-hi); }
.sv-stats .stat.cheap,.sv-sum-cards .stat.cheap{ border-left-color: var(--sv-lo); }  .sv-stats .stat.cheap .val,.sv-sum-cards .stat.cheap .val{ color: var(--sv-lo); }
.sv-stats .stat.fair, .sv-sum-cards .stat.fair { border-left-color: var(--sv-mid); } .sv-stats .stat.fair .val, .sv-sum-cards .stat.fair .val { color: var(--sv-mid); }
.sv-stats .stat.ce,   .sv-sum-cards .stat.ce   { border-left-color: var(--sv-ce); }  .sv-stats .stat.ce .val,   .sv-sum-cards .stat.ce .val   { color: var(--sv-ce); }
.sv-stats .stat.pe,   .sv-sum-cards .stat.pe   { border-left-color: var(--sv-pe); }  .sv-stats .stat.pe .val,   .sv-sum-cards .stat.pe .val   { color: var(--sv-pe); }
.sv-stats .stat.ev,   .sv-sum-cards .stat.ev   { border-left-color: var(--sv-ev); }  .sv-stats .stat.ev .val,   .sv-sum-cards .stat.ev .val   { color: var(--sv-ev); }
.sv-sum-cards .val .rich { color: var(--sv-hi); } .sv-sum-cards .val .cheap { color: var(--sv-lo); }
.sv-sum-cards .val .hi-t { color: var(--sv-hi); } .sv-sum-cards .val .lo-t { color: var(--sv-lo); }
.sv-sum-cards .val .pe { color: var(--sv-pe); } .sv-sum-cards .val .ce { color: var(--sv-ce); }
.sv-sum-cards .val .muted { color: var(--muted); font-weight: 400; }

/* summary strip + regime pill */
.sv-summary { background: var(--sv-card); }
.sv-regime { background: color-mix(in srgb, var(--sv-mid) 14%, transparent); color: var(--sv-mid); }
.sv-regime.hi { background: color-mix(in srgb, var(--sv-hi) 14%, transparent); color: var(--sv-hi); }
.sv-regime.lo { background: color-mix(in srgb, var(--sv-lo) 14%, transparent); color: var(--sv-lo); }
.sv-top { background: var(--sv-card); }
.sv-top-chip { background: var(--sv-card); border-color: var(--border); }
.sv-top-chip.up    { border-color: color-mix(in srgb, var(--sv-hi) 45%, transparent); background: color-mix(in srgb, var(--sv-hi) 8%, transparent); }  .sv-top-chip.up b    { color: var(--sv-hi); }
.sv-top-chip.dn    { border-color: color-mix(in srgb, var(--sv-lo) 45%, transparent); background: color-mix(in srgb, var(--sv-lo) 8%, transparent); }  .sv-top-chip.dn b    { color: var(--sv-lo); }
.sv-top-chip.rich  { border-color: color-mix(in srgb, var(--sv-hi) 45%, transparent); background: color-mix(in srgb, var(--sv-hi) 8%, transparent); }  .sv-top-chip.rich b  { color: var(--sv-hi); }
.sv-top-chip.cheap { border-color: color-mix(in srgb, var(--sv-lo) 45%, transparent); background: color-mix(in srgb, var(--sv-lo) 8%, transparent); }  .sv-top-chip.cheap b { color: var(--sv-lo); }
.sv-top-chip.pe    { border-color: color-mix(in srgb, var(--sv-pe) 45%, transparent); background: color-mix(in srgb, var(--sv-pe) 8%, transparent); }  .sv-top-chip.pe b    { color: var(--sv-pe); }
.sv-top-chip.ev    { border-color: color-mix(in srgb, var(--sv-ev) 45%, transparent); background: color-mix(in srgb, var(--sv-ev) 8%, transparent); }  .sv-top-chip.ev b    { color: var(--sv-ev); }
.sv-top-chip:hover { border-color: var(--sv-iv); }

/* filter chips */
.sv-chip { background: var(--sv-card); }
.sv-chip.on { background: color-mix(in srgb, var(--sv-iv) 12%, transparent); border-color: var(--sv-iv); color: var(--sv-iv); }

/* insight block: white, coloured top rail by bias */
.sv-insight { background: var(--sv-card); border-top: 4px solid var(--sv-mid); }
.sv-insight.hi { border-top-color: var(--sv-hi); } .sv-insight.lo { border-top-color: var(--sv-lo); } .sv-insight.ev { border-top-color: var(--sv-ev); }
.sv-insight .sv-bias { color: var(--sv-mid); }
.sv-insight.hi .sv-bias { color: var(--sv-hi); } .sv-insight.lo .sv-bias { color: var(--sv-lo); } .sv-insight.ev .sv-bias { color: var(--sv-ev); }
.sv-badge { background: var(--sv-card); }
.sv-badge.hi  { background: color-mix(in srgb, var(--sv-hi) 12%, transparent);  border-color: color-mix(in srgb, var(--sv-hi) 40%, transparent);  color: var(--sv-hi); }
.sv-badge.lo  { background: color-mix(in srgb, var(--sv-lo) 12%, transparent);  border-color: color-mix(in srgb, var(--sv-lo) 40%, transparent);  color: var(--sv-lo); }
.sv-badge.mid { background: color-mix(in srgb, var(--sv-mid) 12%, transparent); border-color: color-mix(in srgb, var(--sv-mid) 40%, transparent); color: var(--sv-mid); }
.sv-badge.rich  { background: color-mix(in srgb, var(--sv-hi) 12%, transparent); border-color: color-mix(in srgb, var(--sv-hi) 40%, transparent); color: var(--sv-hi); }
.sv-badge.cheap { background: color-mix(in srgb, var(--sv-lo) 12%, transparent); border-color: color-mix(in srgb, var(--sv-lo) 40%, transparent); color: var(--sv-lo); }
.sv-badge.pe  { background: color-mix(in srgb, var(--sv-pe) 12%, transparent);  border-color: color-mix(in srgb, var(--sv-pe) 40%, transparent);  color: var(--sv-pe); }
.sv-badge.ce  { background: color-mix(in srgb, var(--sv-ce) 12%, transparent);  border-color: color-mix(in srgb, var(--sv-ce) 40%, transparent);  color: var(--sv-ce); }
.sv-notes li::marker { color: var(--sv-iv); }
.sv-struct { background: color-mix(in srgb, var(--sv-rv) 8%, transparent); border-color: color-mix(in srgb, var(--sv-rv) 35%, transparent); color: var(--sv-rv); font-weight: 600; }
.sv-stats .val.ce { color: var(--sv-ce); } .sv-stats .val.pe { color: var(--sv-pe); }

/* table accents */
.sv-table .up { color: var(--sv-hi); } .sv-table .dn { color: var(--sv-lo); }
.sv-table .rich { color: var(--sv-hi); } .sv-table .cheap { color: var(--sv-lo); }
.sv-table .ce { color: var(--sv-ce); } .sv-table .pe { color: var(--sv-pe); }
.sv-table td.strong { color: var(--sv-iv); }
.sv-rank { background: color-mix(in srgb, var(--sv-mid) 12%, transparent); }
.sv-rank i { opacity: 1; }
.sv-rank.hi { background: color-mix(in srgb, var(--sv-hi) 12%, transparent); }  .sv-rank.hi i  { background: var(--sv-hi); }
.sv-rank.mid i { background: var(--sv-mid); }
.sv-rank.lo { background: color-mix(in srgb, var(--sv-lo) 12%, transparent); }  .sv-rank.lo i  { background: var(--sv-lo); }
.sv-rank b { color: var(--sv-ink); mix-blend-mode: normal; }
.sv-rank.hi b, .sv-rank.mid b, .sv-rank.lo b { text-shadow: 0 0 2px var(--sv-card), 0 0 2px var(--sv-card); }
.sv-spark polyline { stroke: var(--sv-iv); } .sv-spark circle { fill: var(--sv-iv); }
.sv-table tbody tr.sel td { background: color-mix(in srgb, var(--sv-iv) 10%, transparent); }
.sv-table th.on { color: var(--sv-iv); }

/* price chart above the IV chart in the drill-down */
.sv-pricewrap { height: 150px; margin-bottom: 6px; }

/* "no trades yet" markers: the live cell is showing the last close */
.sv-nt { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; vertical-align: middle; }
.sv-nt-big { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ATM liquidity cards (Terminal classes, injected by tradebook.js) */
.sv-liq { margin: 4px 0 10px; }
.sv-liq-h { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sv-liq-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sv-liq-cards .tb-liq-card { background: var(--sv-card); }
.sv-liq-cards .tb-liq-nm.ce { color: var(--sv-ce); } .sv-liq-cards .tb-liq-nm.pe { color: var(--sv-pe); } .sv-liq-cards .tb-liq-nm.mid { color: var(--sv-iv); }
@media (min-width: 1500px) { .sv-body:has(.sv-drill:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); } }

/* Vol Lab regime tags */
.sv-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--sv-card); color: var(--text-2); white-space: nowrap; }
.sv-tag.sell   { color: var(--sv-hi);  border-color: color-mix(in srgb, var(--sv-hi) 45%, transparent);  background: color-mix(in srgb, var(--sv-hi) 10%, transparent); }
.sv-tag.buy    { color: var(--sv-lo);  border-color: color-mix(in srgb, var(--sv-lo) 45%, transparent);  background: color-mix(in srgb, var(--sv-lo) 10%, transparent); }
.sv-tag.coiled { color: #0f766e; border-color: rgba(15,118,110,.45); background: rgba(15,118,110,.10); }
.sv-tag.event  { color: var(--sv-ev);  border-color: color-mix(in srgb, var(--sv-ev) 45%, transparent);  background: color-mix(in srgb, var(--sv-ev) 10%, transparent); }
.sv-tag.puts   { color: var(--sv-pe);  border-color: color-mix(in srgb, var(--sv-pe) 45%, transparent);  background: color-mix(in srgb, var(--sv-pe) 10%, transparent); }
.sv-tag.calls  { color: var(--sv-ce);  border-color: color-mix(in srgb, var(--sv-ce) 45%, transparent);  background: color-mix(in srgb, var(--sv-ce) 10%, transparent); }
.sv-tag.neutral { color: var(--muted); }
.sv-tag-btn { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.sv-tag-btn:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px currentColor inset; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; }
.sv-legend .sv-top-l { margin-right: 4px; }
.sv-table td.tag { padding-top: 3px; padding-bottom: 3px; }
:root[data-theme="dark"] .sv-tag.coiled, :root[data-theme="blue"] .sv-tag.coiled { color: #5eead4; border-color: rgba(94,234,212,.45); background: rgba(94,234,212,.10); }

.sv-idx { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--sv-rv); border: 1px solid color-mix(in srgb, var(--sv-rv) 45%, transparent); background: color-mix(in srgb, var(--sv-rv) 8%, transparent); border-radius: 3px; padding: 0 3px; vertical-align: middle; }

.sv-chip.dim { opacity: .45; }