/* levels.css — the SUBSCRIBER's daily page, mobile-first.
   Rebuilt 2026-08-04 to the same finish as the Claude-Design pass on the ten
   public pages. Every selector below targets a class levels.html already
   carries or levels.js already emits (lv-level--call/put/gamma/focus/spot,
   __name/__price/__dist/__why, lv-symbol with aria-pressed) — the markup and
   JS contract are untouched. One-handed phone use stays the design target:
   ≥44px tap targets, no hover-dependent affordances, single column that only
   widens on large screens. */

:root {
  color-scheme: dark;
  --lv-bg: #0b0805;
  --lv-bg-top: #120d08;
  --lv-panel: #18130c;
  --lv-panel-strong: #1e1811;
  --lv-line: #26221b;
  --lv-text: #ecedef;
  --lv-muted: #9c9fa8;
  --lv-accent: #c8a878;
  --lv-accent-2: #e0c79a;
  --lv-ink: #1a1408;
  /* Level families — market data, mirrors the extension's own palette so the
     page and the chart never disagree about what a colour means. */
  --lv-call: #26a69a;
  --lv-put: #ef5350;
  --lv-gamma: #f6b45f;
  --lv-focus: #69c2ff;
  --lv-spot: #9598a1;
  --lv-zero: #8bb8d0;
  --lv-vega: #5ed6e0;
  /* Session families (2026-08-20): overnight, VWAP, prior-day/opening-range
     refs, ICT ranges. Futures NQ/ES only — distinct hues from the families
     above so a mixed grid never reads as one color meaning two things. */
  --lv-ovn: #b98cf0;
  --lv-vwap: #7fd1ae;
  --lv-refs: #9fb4ff;
  --lv-ict: #ff9f7a;
}

[data-backtest-form] { display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin:20px 0; }
[data-backtest-form] label { display:grid; gap:8px; color:var(--lv-muted); font-size:13px; flex:1 1 160px; }
[data-backtest-form] input, [data-backtest-form] select { min-height:44px; max-width:100%; padding:9px 12px; border:1px solid var(--lv-line); border-radius:8px; color:var(--lv-text); background:var(--lv-panel); font:inherit; color-scheme:dark; }
[data-backtest-form] :focus-visible { outline:2px solid var(--lv-accent); outline-offset:3px; }
[data-backtest-form] button { min-height:44px; }

* { box-sizing: border-box; }

.lv-body {
  margin: 0;
  min-height: 100dvh;
  padding: 0 0 max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(160deg, var(--lv-bg-top) 0%, var(--lv-bg) 60%);
  background-attachment: fixed;
  color: var(--lv-text);
  font-family: "Hanken Grotesk", "Aptos", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- Top bar -------------------------------------------------------------- */

.lv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--lv-line);
}

.lv-top__brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}
.lv-top__brand:hover { color: var(--lv-accent-2); }

.lv-top__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(200, 168, 120, 0.5);
  border-radius: 10px;
  color: var(--lv-accent-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.lv-top__link:hover { background: rgba(200, 168, 120, 0.12); border-color: var(--lv-accent); }

/* --- Shell ---------------------------------------------------------------- */

/* TERMINAL WIDTH (2026-08-25).
   This was max-width:760px, which left ~60% of a 1920px screen empty and forced
   every level family into one endless vertical stack. A market-data page earns
   its width: the shell now goes wide, and only the PROSE is re-narrowed below,
   so long sentences never stretch to an unreadable measure. */
.lv-main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 32px) 0;
}
/* Running text keeps a readable measure even though the shell is wide. */
.lv-main > .lv-sub,
.lv-main > .lv-readings,
.lv-group__sub,
.lv-legal { max-width: 74ch; }

.lv-h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.lv-sub { margin: 0 0 18px; color: var(--lv-muted); font-size: 15px; }

/* --- Readings zone (plain-language sentences, not priced levels) ---------- */

.lv-readings { display: flex; flex-direction: column; gap: 5px; margin: -8px 0 18px; }
.lv-readings[hidden] { display: none; }
.lv-reading { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--lv-muted); }

.lv-h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #fff;
}

.lv-h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lv-accent-2);
}

/* --- Symbol picker (segmented, thumb-sized, scrolls sideways on phones) --- */

.lv-symbols {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lv-symbols::-webkit-scrollbar { display: none; }

.lv-symbol {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 64px;
  padding: 0 18px;
  border: 1px solid var(--lv-line);
  border-radius: 10px;
  background: var(--lv-panel);
  color: var(--lv-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lv-symbol:hover { border-color: rgba(200, 168, 120, 0.45); color: var(--lv-text); }
.lv-symbol[aria-pressed="true"] {
  background: var(--lv-accent);
  border-color: var(--lv-accent);
  color: var(--lv-ink);
}
.lv-symbol:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; }

/* --- Status (sign-in gate, unavailable, network) -------------------------- */

.lv-status {
  margin: 4px 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--lv-line);
  border-left: 3px solid var(--lv-accent);
  border-radius: 12px;
  background: var(--lv-panel);
  font-size: 15.5px;
  color: #c3c6cc;
}
.lv-status a { color: var(--lv-accent-2); font-weight: 600; }
.lv-status a:hover { color: #fff; }

/* --- Level cards (JS-rendered) -------------------------------------------- */

.lv-levels { display: grid; gap: 10px; margin: 0 0 22px; }
@media (min-width: 640px) { .lv-levels { grid-template-columns: 1fr 1fr; } }

.lv-level {
  position: relative;
  padding: 13px 16px 13px 18px;
  border: 1px solid var(--lv-line);
  border-radius: 12px;
  background: var(--lv-panel);
  overflow: hidden;
}
.lv-level::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lv-line);
}
.lv-level--call::before  { background: var(--lv-call); }
.lv-level--put::before   { background: var(--lv-put); }
.lv-level--gamma::before { background: var(--lv-gamma); }
.lv-level--focus::before { background: var(--lv-focus); }
.lv-level--spot::before  { background: var(--lv-spot); }
.lv-level--zero::before  { background: var(--lv-zero); }
.lv-level--vega::before  { background: var(--lv-vega); }
.lv-level--ovn::before   { background: var(--lv-ovn); }
.lv-level--vwap::before  { background: var(--lv-vwap); }
.lv-level--refs::before  { background: var(--lv-refs); }
.lv-level--ict::before   { background: var(--lv-ict); }

.lv-level__name {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lv-muted);
  margin-bottom: 3px;
}
.lv-level--call .lv-level__name  { color: var(--lv-call); }
.lv-level--put .lv-level__name   { color: var(--lv-put); }
.lv-level--gamma .lv-level__name { color: var(--lv-gamma); }
.lv-level--focus .lv-level__name { color: var(--lv-focus); }
.lv-level--zero .lv-level__name  { color: var(--lv-zero); }
.lv-level--vega .lv-level__name  { color: var(--lv-vega); }
.lv-level--ovn .lv-level__name   { color: var(--lv-ovn); }
.lv-level--vwap .lv-level__name  { color: var(--lv-vwap); }
.lv-level--refs .lv-level__name  { color: var(--lv-refs); }
.lv-level--ict .lv-level__name   { color: var(--lv-ict); }

.lv-level__price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.lv-level__dist {
  font-size: 13px;
  font-weight: 550;
  color: var(--lv-muted);
  font-variant-numeric: tabular-nums;
}

.lv-level__why {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lv-muted);
}

/* --- Panels (block, setup) ------------------------------------------------ */

.lv-block, .lv-setup {
  margin: 0 0 18px;
  padding: 20px clamp(16px, 3vw, 24px);
  border: 1px solid var(--lv-line);
  border-radius: 12px;
  background: var(--lv-panel);
}

.lv-note { margin: 0 0 14px; font-size: 15px; color: #c3c6cc; }
.lv-hint { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }

.lv-warn {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(246, 180, 95, 0.35);
  border-radius: 10px;
  background: rgba(246, 180, 95, 0.07);
  font-size: 13.5px;
  line-height: 1.55;
  color: #d9c9a8;
}

/* --- Transfer block ------------------------------------------------------- */

.lv-code {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--lv-line);
  border-radius: 10px;
  background: #0d0a07;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lv-accent-2);
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

/* --- Buttons -------------------------------------------------------------- */

.lv-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(200, 168, 120, 0.5);
  border-radius: 10px;
  background: transparent;
  color: var(--lv-accent-2);
  font: inherit;
  font-size: 15.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.lv-btn:hover { background: rgba(200, 168, 120, 0.12); border-color: var(--lv-accent); transform: translateY(-1px); }
.lv-btn:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; }

.lv-btn--primary {
  background: var(--lv-accent);
  border-color: var(--lv-accent);
  color: var(--lv-ink);
}
.lv-btn--primary:hover { background: var(--lv-accent-2); border-color: var(--lv-accent-2); }

/* --- Options -------------------------------------------------------------- */

.lv-opts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lv-line); }

.lv-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 550;
}

.lv-opt select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lv-line);
  border-radius: 10px;
  background: var(--lv-panel-strong);
  color: var(--lv-text);
  font: inherit;
  font-size: 14.5px;
}
.lv-opt select:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 1px; }

.lv-opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin: 12px 0 0;
}

.lv-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14.5px;
  cursor: pointer;
}
.lv-check input {
  width: 19px;
  height: 19px;
  accent-color: var(--lv-accent);
  flex: 0 0 auto;
}

/* --- Install help --------------------------------------------------------- */

.lv-help summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--lv-accent-2);
  cursor: pointer;
  list-style: none;
}
.lv-help summary::before { content: "+"; margin-right: 10px; font-weight: 700; }
.lv-help[open] summary::before { content: "\2212"; }
.lv-help summary::-webkit-details-marker { display: none; }
.lv-help summary:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; border-radius: 6px; }

.lv-steps { margin: 10px 0 14px; padding-left: 20px; font-size: 15px; }
.lv-steps li { margin-bottom: 9px; }
.lv-steps li::marker { color: var(--lv-accent); font-weight: 650; }

/* --- Legal ---------------------------------------------------------------- */

.lv-legal {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8e9199;
  text-align: center;
}
.lv-learn {
  margin: 30px auto 0;
  max-width: 74ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lv-muted);
}
.lv-learn a { color: var(--lv-accent-2); text-decoration: none; border-bottom: 1px solid rgba(224,199,154,0.35); }
.lv-learn a:hover { border-bottom-color: var(--lv-accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .lv-btn:hover { transform: none; }
}

/* v-sess2: Show all / Hide all convenience for the level toggles */
.lv-opt-actions { display: flex; gap: 8px; margin: 4px 0 10px; }
.lv-btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* v-sess3: visual level map */
.lv-chart { margin: 6px 0 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 10px 6px; }
.lv-chartsvg { width: 100%; height: auto; display: block; }
.lv-chartsvg text { font-family: inherit; }

/* v-sess6: Fear score + regime quadrant module (parity with the indicator's
   Fear tab). Placed under the symbol picker, above the level map. Dark, panel
   finish. All dynamic sizing (the dial, the component-bar widths) is inline SVG
   or set through the CSSOM in levels.js — no inline style attributes, so the
   page's strict CSP (style-src 'self') is respected. */
.lv-regime { margin: 2px 0 16px; }
.lv-regime[hidden] { display: none; }
.lv-regime__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .lv-regime__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.lv-fear, .lv-quad {
  background: var(--lv-panel);
  border: 1px solid var(--lv-line);
  border-radius: 14px;
  padding: 14px 14px 16px;
}
.lv-regime__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lv-muted); margin: 0 0 10px;
}

/* Fear dial + composite decomposition */
.lv-fear__dial { display: flex; justify-content: center; }
.lv-fear__dial svg { max-width: 190px; height: auto; }
.lv-fear__comps { display: flex; flex-direction: column; gap: 7px; margin: 10px 2px 0; }
.lv-fear-comp { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 9px; }
.lv-fear-comp__label { font-size: 12.5px; color: var(--lv-muted); }
.lv-fear-comp__track { height: 7px; border-radius: 5px; background: rgba(255,255,255,0.09); overflow: hidden; }
.lv-fear-comp__bar { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--lv-accent), var(--lv-accent-2)); }
.lv-fear-comp__meta { font-size: 12px; font-weight: 650; color: var(--lv-text); font-variant-numeric: tabular-nums; }
.lv-fear__vix { font-size: 30px; font-weight: 800; text-align: center; color: var(--lv-text); font-variant-numeric: tabular-nums; }
.lv-fear__vix em { font-size: 15px; font-weight: 650; color: var(--lv-muted); font-style: normal; }
.lv-fear__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lv-muted); }
.lv-fear__note--dim { opacity: 0.75; font-style: italic; }
.lv-fear--warming .lv-fear__note { text-align: center; }

/* Regime quadrant (gamma x delta) */
.lv-quad__axis { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--lv-muted); margin: 0 2px 5px; }
.lv-quad__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lv-quad__cell {
  text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.25;
  padding: 12px 6px; border-radius: 9px;
  border: 1px solid var(--lv-line); color: var(--lv-muted);
  background: rgba(255,255,255,0.02);
}
.lv-quad__cell--long { background: rgba(38,166,154,0.06); }
.lv-quad__cell--short { background: rgba(239,83,80,0.06); }
.lv-quad__cell--on.lv-quad__cell--long { background: rgba(38,166,154,0.20); border-color: var(--lv-call); color: #d6f3ef; box-shadow: 0 0 0 1px rgba(38,166,154,0.35) inset; }
.lv-quad__cell--on.lv-quad__cell--short { background: rgba(239,83,80,0.20); border-color: var(--lv-put); color: #ffdcda; box-shadow: 0 0 0 1px rgba(239,83,80,0.35) inset; }
.lv-quad__name { margin: 12px 0 4px; font-size: 16px; font-weight: 800; }
.lv-quad__name--long { color: var(--lv-call); }
.lv-quad__name--short { color: var(--lv-put); }
.lv-quad__text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--lv-muted); }

/* ===========================================================================
   v-sess7 (2026-08-21): DECOMPRESSION + full dealer read.
   Owner: "la page est encore beaucoup trop compact — décompacter très fort,
   et ajouter absolument tout ce que l'indicateur possède." Levels are no longer
   one flat grid: they are grouped into titled families with generous rhythm,
   and the top panel now carries the whole dealer read (net gamma/delta, regime,
   fear, hedging pressure, dealer flow, greek exposure, GEX profile).
   =========================================================================== */

/* Level families: the flat grid becomes a vertical stack of titled sections. */
.lv-levels { display: block; gap: 0; margin: 0 0 26px; }
@media (min-width: 640px) { .lv-levels { grid-template-columns: none; } }
.lv-group { margin: 0 0 34px; }
.lv-group:last-child { margin-bottom: 0; }
.lv-group__title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin: 0 0 4px; }
.lv-group__sub { font-size: 13.5px; line-height: 1.5; color: var(--lv-muted); margin: 0 0 16px; max-width: 62ch; }
.lv-group__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lv-group__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lv-group__grid { grid-template-columns: 1fr 1fr 1fr; } }
/* The shell is wide now, so a fourth column earns its place on large desktops
   instead of leaving a dead margin. */
@media (min-width: 1380px) { .lv-group__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── TERMINAL ROW: chart beside the structural readouts ─────────────────────
   One column on phones, two from 1080px so the map and the readouts are read
   together rather than by scrolling between them. */
.lv-termrow { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 26px; align-items: start; }
/* The chart is the thing people read first, so it takes the larger share; the
   readout column only needs enough width for its labels and the topo grid. */
@media (min-width: 1080px) { .lv-termrow { grid-template-columns: minmax(0, 1.75fr) minmax(330px, 0.95fr); } }
@media (min-width: 1600px) { .lv-termrow { grid-template-columns: minmax(0, 2fr) minmax(360px, 0.9fr); } }
.lv-termside { display: grid; gap: 18px; align-content: start; min-width: 0; }
.lv-chartcol { display: grid; gap: 18px; align-content: start; min-width: 0; }
.lv-termrow > .lv-chart { margin: 0; min-width: 0; }

/* ── Dealer greek exposure ─────────────────────────────────────────────────── */
.lv-greeks { min-width: 0; }
.lv-gk { display: grid; gap: 7px; }
.lv-gk__row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 96px minmax(0, 1fr) 74px 58px;
  font-size: 12.5px;
}
.lv-gk__k { color: var(--lv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-gk__track { position: relative; height: 7px; border-radius: 4px; background: rgba(245,241,233,.07); overflow: hidden; }
.lv-gk__bar { position: absolute; inset: 0 auto 0 0; border-radius: 4px; display: block; }
.lv-gk__bar.is-pos { background: linear-gradient(90deg, rgba(63,183,159,.55), rgba(63,183,159,.95)); }
.lv-gk__bar.is-neg { background: linear-gradient(90deg, rgba(239,107,102,.55), rgba(239,107,102,.95)); }
.lv-gk__v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.lv-gk__v.is-pos, .lv-gk__t.is-pos { color: #3fb79f; }
.lv-gk__v.is-neg, .lv-gk__t.is-neg { color: #ef6b66; }
.lv-gk__t { color: var(--lv-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 460px) {
  .lv-gk__row { grid-template-columns: 84px minmax(0, 1fr) 66px; }
  .lv-gk__t { display: none; }
}

/* ── GEX topography (strike × expiry) ──────────────────────────────────────── */
.lv-topo { display: grid; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.lv-topo__row { display: grid; grid-template-columns: 76px repeat(auto-fit, minmax(16px, 1fr)); gap: 2px; align-items: center; }
.lv-topo__row--head { position: sticky; top: 0; }
.lv-topo__s {
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--lv-muted);
  text-align: right; padding-right: 6px; white-space: nowrap;
}
.lv-topo__h {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lv-muted); text-align: center;
}
.lv-topo__c { height: 15px; border-radius: 2px; display: block; }
/* The row straddling spot is where the reader is standing — mark it. */
.lv-topo__row.is-spot .lv-topo__s { color: #e0c79a; font-weight: 700; }
.lv-topo__row.is-spot .lv-topo__c { box-shadow: inset 0 0 0 1px rgba(224,199,154,.5); }

/* ── Unstable corridor ─────────────────────────────────────────────────────── */
.lv-corr {
  border: 1px solid var(--lv-line); border-radius: 12px; padding: 14px 16px;
  background: rgba(245,241,233,.02);
}
.lv-corr.is-active { border-color: rgba(224,176,98,.42); background: rgba(224,176,98,.06); }
.lv-corr__h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.lv-corr__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lv-muted); flex: none; }
.lv-corr.is-active .lv-corr__dot { background: #e0b062; box-shadow: 0 0 0 3px rgba(224,176,98,.18); }
.lv-corr__tag {
  margin-left: auto; font-size: 10px; letter-spacing: .1em; color: var(--lv-muted);
  border: 1px solid var(--lv-line); border-radius: 100px; padding: 2px 8px;
}
.lv-corr__range { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.lv-corr__gap { font-size: 11.5px; font-weight: 500; color: var(--lv-muted); margin-left: 6px; }
.lv-corr__note { font-size: 12.5px; line-height: 1.5; color: var(--lv-muted); margin: 8px 0 0; }

/* ── TERMINAL LOOK PASS (2026-08-25) ───────────────────────────────────────────
   The page read as a stack of marketing cards. These rules pull it toward a
   market-data instrument: tabular figures everywhere a number can be compared,
   panel surfaces instead of floating rounded boxes, and section titles that
   behave like column headers rather than headlines. */

/* Every comparable figure aligns on its digits. */
.lv-level__price, .lv-hero__v, .lv-gk__v, .lv-topo__s, .lv-corr__range,
.lv-level__dist, .lv-chip { font-variant-numeric: tabular-nums; }

/* Structural panels share one surface language. */
.lv-greeks, .lv-topo-wrap, .lv-corr, .lv-chart {
  background: rgba(245,241,233,.02);
  border: 1px solid var(--lv-line);
  border-radius: 12px;
}
.lv-greeks, .lv-topo { padding: 14px 16px; }
.lv-topo { border: 1px solid var(--lv-line); border-radius: 12px; background: rgba(245,241,233,.02); }

/* Group titles read as instrument section headers, not article headlines. */
.lv-group__title {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--lv-muted); border-bottom: 1px solid var(--lv-line);
  padding-bottom: 8px; margin-bottom: 6px;
}
.lv-greeks .lv-group__title, .lv-topo .lv-group__title { border-bottom: 0; padding-bottom: 0; }

/* The hero becomes a dense readout strip rather than four big cards. */
.lv-hero__v { font-size: 21px; font-weight: 700; }
.lv-hero__k {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-muted);
}
.lv-hero__it--conv .lv-hero__v { font-size: 15px; }

/* Level cards: quieter chrome, louder numbers. */
.lv-level { border-radius: 10px; }
.lv-level__name { font-size: 12.5px; }
.lv-level__price { font-size: 19px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .lv-level, .lv-corr, .lv-gk__bar { transition: none; }
}

/* ── GEX profile (HTML bars, terminal column) ────────────────────
   Built from divs, not SVG. An SVG viewBox scales its own text whenever the
   measured width and the rendered width disagree, which is exactly how this
   panel once rendered at ~1.9x. HTML bars inherit the page type scale. */
.lv-pfwrap { border: 1px solid var(--lv-line); border-radius: 12px; padding: 14px 16px; background: rgba(245,241,233,.02); }
.lv-pf__sum { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--lv-muted); margin: 0 0 10px; }
.lv-pf__sum b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lv-pf__sum b.is-pos { color: #3fb79f; }
.lv-pf__sum b.is-neg { color: #ef6b66; }
.lv-pf__axis { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lv-faint, #7d776c); margin: 0 0 5px; }
.lv-pf { display: grid; gap: 1px; }
.lv-pf__row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; gap: 10px; position: relative; padding: 2px 4px; border-radius: 5px; transition: background .12s; }
.lv-pf__row:hover { background: rgba(245,241,233,.035); }
/* When per-strike flow is on, the ladder gains a fourth column beside it. */
.lv-pfwrap.has-flow .lv-pf__row { grid-template-columns: 60px minmax(0, 1fr) 60px 36px; }
.lv-pf__fl { position: relative; height: 10px; background: rgba(245,241,233,.05); border-radius: 2px; }
.lv-pf__flbar { position: absolute; left: 0; top: 0; height: 10px; border-radius: 2px; display: block; }
.lv-pf__flbar.is-pos { background: rgba(63,183,159,.85); }
.lv-pf__flbar.is-neg { background: rgba(239,107,102,.85); }
.lv-pf__flh { margin-left: auto; }
.lv-pf__k { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--lv-text); text-align: right; opacity: .82; }
/* The centre line is the zero axis: bars grow right for long gamma, left for short. */
.lv-pf__track { position: relative; height: 13px; }
.lv-pf__track::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: rgba(245,241,233,.22); }
.lv-pf__bar { position: absolute; top: 1.5px; height: 10px; border-radius: 2.5px; display: block; box-shadow: 0 0 8px -2px currentColor; }
.lv-pf__bar.is-pos { left: 50%; color: #3fb79f; background: linear-gradient(90deg, rgba(63,183,159,.55), rgba(63,183,159,1)); }
.lv-pf__bar.is-neg { right: 50%; color: #ef6b66; background: linear-gradient(270deg, rgba(239,107,102,.55), rgba(239,107,102,1)); }
.lv-pf__v { font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; }
.lv-pf__v.is-pos { color: #4cc9a8; }
.lv-pf__v.is-neg { color: #f27b76; }
.lv-pf__row.is-spot { background: rgba(224,199,154,.06); }
.lv-pf__row.is-spot .lv-pf__k { color: #e0c79a; font-weight: 700; opacity: 1; }
.lv-pf__peak { position: absolute; right: 2px; top: -8px; font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lv-accent-2); font-weight: 700; }
.lv-pf__note { font-size: 10.5px; line-height: 1.45; color: var(--lv-muted); margin: 9px 0 0; }

/* ── Conversion provenance badge ───────────────────────────────────────────── */
.lv-conv {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(224,199,154,.34); color: #e0c79a;
  border-radius: 100px; padding: 3px 10px;
}
.lv-conv--warn { border-color: rgba(224,176,98,.5); color: #e0b062; }

/* Bigger, airier level cards. */
.lv-level { padding: 16px 18px 16px 20px; }
.lv-level::before { width: 4px; }
.lv-level__price { font-size: 21px; }

/* Dealer-positioning panel: give it real room + a section header. */
.lv-regime { margin: 6px 0 30px; }
.lv-regime .lv-group__title { margin-bottom: 4px; }
.lv-regime .lv-group__sub { margin-bottom: 18px; }
.lv-regime__grid { gap: 16px; }
.lv-span2 { grid-column: 1 / -1; }

/* Net gamma / net delta — the headline dealer numbers (customer-requested). */
.lv-netg { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .lv-netg { grid-template-columns: 1fr 1fr; } }
.lv-netg__item { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--lv-line); background: rgba(255,255,255,0.02); }
.lv-netg__item--long, .lv-netg__item--pos { background: rgba(38,166,154,0.10); border-color: rgba(38,166,154,0.45); }
.lv-netg__item--short, .lv-netg__item--neg { background: rgba(239,83,80,0.10); border-color: rgba(239,83,80,0.45); }
.lv-netg__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lv-muted); }
.lv-netg__val { font-size: 27px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lv-netg__item--long .lv-netg__val, .lv-netg__item--pos .lv-netg__val { color: var(--lv-call); }
.lv-netg__item--short .lv-netg__val, .lv-netg__item--neg .lv-netg__val { color: var(--lv-put); }
.lv-netg__sub { font-size: 12.5px; color: var(--lv-muted); }

/* Hedging pressure. */
.lv-hedge__val { font-size: 30px; font-weight: 800; color: var(--lv-text); font-variant-numeric: tabular-nums; margin: 2px 0 8px; }
.lv-hedge__val span { font-size: 14px; font-weight: 600; color: var(--lv-muted); }

/* Dealer flow read. */
.lv-flow { display: flex; flex-direction: column; }
.lv-flow__line { margin: 0 0 7px; font-size: 13.5px; line-height: 1.5; color: var(--lv-text); }
.lv-flow__line:last-child { margin-bottom: 0; }
.lv-flow__line--amp strong { color: var(--lv-put); }
.lv-flow__line--damp strong { color: var(--lv-call); }
.lv-flow__line--dim { color: var(--lv-muted); }

/* Bar colour variants (shared .lv-fear-comp track, used by greeks/hedge/pin). */
.lv-fear-comp__bar--gold { background: linear-gradient(90deg, var(--lv-accent), var(--lv-accent-2)); }
.lv-fear-comp__bar--pos { background: linear-gradient(90deg, #1f8f78, var(--lv-call)); }
.lv-fear-comp__bar--neg { background: linear-gradient(90deg, #c0413e, var(--lv-put)); }
.lv-greeks .lv-fear-comp, .lv-flow .lv-fear-comp { margin-top: 8px; }


/* ═══════════════════════════════════════════════════════════════════════════
   v-sess8 (2026-08-22) — visual pass on /levels + the opening film.
   Three changes carry most of it: a real header with a live session chip, a
   summary strip so the important read is visible before any scrolling, and a
   sticky symbol picker so switching never means scrolling back up.
   CSP-safe: no inline styles; JS writes only canvas size and bar width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- page ground: a little more depth than a flat fill ---- */
.lv-body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(200,168,120,.09), transparent 62%),
    radial-gradient(70% 50% at 100% 100%, rgba(63,183,159,.05), transparent 60%);
}

/* ---- header ---- */
.lv-top{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,8,5,.84); gap:12px }
.lv-top__mid{ display:flex; align-items:center; gap:9px; margin-left:auto; margin-right:auto; min-width:0 }
.lv-chip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--lv-line); border-radius:999px;
  padding:5px 12px; font-size:12px; color:var(--lv-muted); background:var(--lv-panel); white-space:nowrap }
.lv-chip b{ color:var(--lv-text); font-weight:650 }
.lv-chip__dot{ width:7px; height:7px; border-radius:50%; background:var(--lv-muted); flex:none }
.lv-chip--locked .lv-chip__dot{ background:var(--lv-accent) }
.lv-chip--live .lv-chip__dot{ background:var(--lv-call); animation:lvPulse 2.2s ease-in-out infinite }
@keyframes lvPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(38,166,154,.5) } 50%{ box-shadow:0 0 0 5px rgba(38,166,154,0) } }
.lv-iconbtn{ background:var(--lv-panel); border:1px solid var(--lv-line); color:var(--lv-muted); cursor:pointer;
  border-radius:10px; padding:6px 11px; font-family:inherit; font-size:12.5px; white-space:nowrap; transition:.15s }
.lv-iconbtn:hover{ color:#fff; border-color:var(--lv-accent) }
@media(max-width:640px){ .lv-top__mid{ display:none } }

/* ---- summary strip: the read, before any scrolling ---- */
.lv-hero{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:4px 0 20px }
.lv-hero[hidden]{ display:none }
.lv-hero__it{ border:1px solid var(--lv-line); border-radius:15px; padding:14px 16px; background:var(--lv-panel);
  display:flex; flex-direction:column; gap:3px; min-width:0 }
.lv-hero__k{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lv-muted); font-weight:700 }
.lv-hero__v{ font-size:23px; font-weight:800; color:#fff; line-height:1.15; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lv-hero__s{ font-size:11.5px; color:var(--lv-muted) }
.lv-hero__it--spot .lv-hero__v{ color:#fff }
.lv-hero__it--long{ background:linear-gradient(180deg,rgba(38,166,154,.12),rgba(24,19,12,.6)); border-color:rgba(38,166,154,.4) }
.lv-hero__it--long .lv-hero__v{ color:var(--lv-call) }
.lv-hero__it--short{ background:linear-gradient(180deg,rgba(239,83,80,.12),rgba(24,19,12,.6)); border-color:rgba(239,83,80,.4) }
.lv-hero__it--short .lv-hero__v{ color:var(--lv-put) }

/* ---- sticky symbol picker ---- */
.lv-symbols{ position:sticky; top:57px; z-index:30; padding:8px 0;
  background:linear-gradient(180deg,rgba(11,8,5,.95) 70%,rgba(11,8,5,0));
  backdrop-filter:blur(6px) }

/* ---- loading skeletons: a shape, not the word "Loading" ---- */
.lv-skel{ display:grid; gap:12px; grid-template-columns:1fr; margin:14px 0 }
@media(min-width:560px){ .lv-skel{ grid-template-columns:1fr 1fr } }
@media(min-width:1000px){ .lv-skel{ grid-template-columns:1fr 1fr 1fr } }
.lv-skel__b{ height:78px; border-radius:14px; border:1px solid var(--lv-line);
  background:linear-gradient(100deg,var(--lv-panel) 30%,rgba(255,255,255,.045) 50%,var(--lv-panel) 70%);
  background-size:220% 100%; animation:lvShimmer 1.5s linear infinite }
@keyframes lvShimmer{ from{ background-position:180% 0 } to{ background-position:-40% 0 } }
@media(prefers-reduced-motion:reduce){ .lv-skel__b{ animation:none } }

/* ---- card polish ---- */
.lv-level{ transition:border-color .15s ease, transform .15s ease }
.lv-level:hover{ border-color:#3b3323; transform:translateY(-1px) }
.lv-group__title{ display:flex; align-items:baseline; gap:10px }

/* ---- design-preview banner (draft hostnames only, see levels.js) ---- */
.lv-demo{ position:sticky; top:0; z-index:60; background:linear-gradient(90deg,#5a1f1c,#7a2b26);
  color:#ffd9d7; text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.04em; padding:7px 12px;
  border-bottom:1px solid #a33b34 }

/* ---- the opening film ---- */
#lvIntro{ position:fixed; inset:0; z-index:200; background:#0a0704; display:none }
#lvIntro.is-on{ display:block }
#lvIntro canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.lvi__vig{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 26%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.92) 100%) }
.lvi__stage{ position:absolute; inset:0; display:grid; place-items:center; padding:26px; text-align:center }
.lvi__gate{ display:flex; flex-direction:column; align-items:center; gap:22px }
.lvi__mark{ width:78px; height:78px; border-radius:22px; display:grid; place-items:center; font-size:34px;
  color:var(--lv-ink); background:linear-gradient(150deg,var(--lv-accent-2),#a8895a);
  box-shadow:0 0 0 1px rgba(232,210,164,.35),0 0 70px rgba(200,168,120,.32); animation:lviBreathe 3.4s ease-in-out infinite }
@keyframes lviBreathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.04) } }
.lvi__t{ font-family:Georgia,serif; font-weight:400; font-size:clamp(25px,4.4vw,42px); color:#fff; margin:0 }
.lvi__s{ color:var(--lv-muted); font-size:15px; max-width:44ch; margin:0; line-height:1.6 }
.lvi__btn{ border:0; cursor:pointer; padding:15px 34px; border-radius:999px; font-family:inherit; font-weight:750;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--lv-ink);
  background:linear-gradient(180deg,var(--lv-accent-2),var(--lv-accent)); box-shadow:0 10px 34px rgba(200,168,120,.3);
  transition:transform .16s ease }
.lvi__btn:hover{ transform:translateY(-2px) }
.lvi__skipgate{ background:none; border:0; color:#6f685b; cursor:pointer; font-family:inherit; font-size:13px; padding:6px }
.lvi__skipgate:hover{ color:var(--lv-muted) }
.lvi__line{ font-family:Georgia,serif; font-weight:400; color:#fff; font-size:clamp(24px,4.3vw,48px); line-height:1.2;
  max-width:22ch; margin:0; opacity:0; transform:translateY(18px); filter:blur(6px);
  animation:lviIn 1.1s cubic-bezier(.2,.7,.2,1) forwards; text-shadow:0 2px 40px rgba(0,0,0,.85) }
.lvi__line em{ font-style:normal; color:var(--lv-accent-2) }
.lvi__line--hero{ font-size:clamp(28px,5.4vw,60px); max-width:16ch }
@keyframes lviIn{ to{ opacity:1; transform:none; filter:blur(0) } }
.lvi__skip{ position:absolute; right:20px; bottom:20px; z-index:9; background:rgba(20,15,9,.6);
  border:1px solid var(--lv-line); color:var(--lv-muted); border-radius:999px; padding:9px 18px;
  font-family:inherit; font-size:12.5px; cursor:pointer }
.lvi__skip:hover{ color:#fff; border-color:#a8895a }
.lvi__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.06); z-index:9 }
.lvi__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#a8895a,var(--lv-accent-2)) }
body.lvi-lock{ overflow:hidden }
@media(prefers-reduced-motion:reduce){ #lvIntro *{ animation:none !important } }

/* ═══════════════════════════════════════════════════════════════════════════
   v-sess9 (2026-08-22) — the level CARDS.
   sess8 dressed the page and left the cards alone. Lens: a subscriber opens
   this on a phone at 9:25 with ninety seconds before the open. Three things
   must be pre-attentive — which side of price a level sits on, how far away it
   is, and which two levels price meets first — and one thing must be traceable:
   that this card is the same object the indicator draws.
   Everything drawn here is a comparison between numbers the cards already
   print. The one length encoding states its own denominator in .lv-tools__scale
   and marks its own saturation point inside the track, because an unlabelled
   bar is a claim and a labelled bar is a measurement.
   CSP-safe: no inline styles anywhere. levels.js writes only the rail fill's
   width, through the CSSOM.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- one family variable per card. Stripe, name, arrow, token pill and rail
        all read from it. Same --lv-* palette, no new colour; a future family
        costs one line instead of five. ---- */
.lv-level        { --lv-fam: var(--lv-line); }
.lv-level--call  { --lv-fam: var(--lv-call); }
.lv-level--put   { --lv-fam: var(--lv-put); }
.lv-level--gamma { --lv-fam: var(--lv-gamma); }
.lv-level--focus { --lv-fam: var(--lv-focus); }
.lv-level--spot  { --lv-fam: var(--lv-spot); }
.lv-level--zero  { --lv-fam: var(--lv-zero); }
.lv-level--vega  { --lv-fam: var(--lv-vega); }
.lv-level--ovn   { --lv-fam: var(--lv-ovn); }
.lv-level--vwap  { --lv-fam: var(--lv-vwap); }
.lv-level--refs  { --lv-fam: var(--lv-refs); }
.lv-level--ict   { --lv-fam: var(--lv-ict); }
.lv-level::before         { background: var(--lv-fam); }
.lv-level .lv-level__name { color: var(--lv-fam); }

/* ---- card shell: a flex column, so the rail can be pinned to the card floor
        and the rails of two or three cards in one grid row share ONE
        horizontal baseline. Aligned length is the only comparison channel a
        reader can use without arithmetic. ---- */
.lv-level {
  display: flex;
  flex-direction: column;
  min-width: 0;                     /* a 6-digit level can never widen the grid */
  padding: 15px 17px 14px 20px;
  border-radius: 14px;
}

/* ---- head: name, block token, nearest flag ---- */
.lv-level__head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; margin: 0 0 5px; }
.lv-level__name { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The token the TradingView indicator actually reads. It IS the buildBlock
   key, emitted in the same render pass, so it cannot drift from the paste. */
.lv-level__tag {
  flex: none; margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 6px;
  color: var(--lv-fam);
  border: 1px solid var(--lv-line);
  background: rgba(255, 255, 255, 0.045);
}

.lv-level__flag {
  flex: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; line-height: 1.2;
  color: var(--lv-ink); background: var(--lv-accent-2);
}

/* ---- the number is the object on the card ---- */
.lv-level__price {
  display: block; margin: 0;
  font-size: clamp(23px, 6vw, 27px); line-height: 1.1;
  font-weight: 800; letter-spacing: -0.02em;
}

/* ---- distance: a chip with a direction and both units, out of the price row.
        Bottom margin is the rail's minimum clearance (the rail uses
        margin-top:auto, which collapses to zero in the tallest card of a row). */
.lv-level__dist {
  display: inline-flex; align-items: baseline; align-self: flex-start; gap: 6px;
  margin: 7px 0 12px; padding: 3px 10px 3px 8px;
  border: 1px solid var(--lv-line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 12.5px; font-weight: 700; color: var(--lv-text);
  font-variant-numeric: tabular-nums;
}
.lv-level__arrow { position: relative; top: -1px; font-size: 8.5px; line-height: 1; color: var(--lv-fam); }
.lv-level__pct   { font-size: 11.5px; font-weight: 600; color: var(--lv-muted); }

/* ---- the explanation band: hidden in Compact, one tap away in Explained.
        This is the biggest single scan win — today those two or three grey
        lines double the height of all 25 cards. ---- */
.lv-level__note { display: none; margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--lv-line); }
.lv-levels--explain .lv-level__note { display: block; }
.lv-level__why  { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }
.lv-level__src  { margin: 7px 0 0; font-size: 11.5px; line-height: 1.45; color: #82858e; }
.lv-level__src code { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 11px; color: var(--lv-accent-2); }
.lv-level__src--chart { color: #75787f; font-style: italic; }

/* ---- the distance rail. margin-top:auto pins it to the card floor; grid
        items stretch, so every rail in a row lands on the same y. Centre tick
        is price; the fill runs right for above and left for below. Absent
        entirely whenever the distance cannot be computed. ---- */
.lv-level__rail {
  position: relative; height: 6px; margin: auto 0 0; overflow: hidden;
  border-radius: 4px; background: rgba(255, 255, 255, 0.06);
}
.lv-level__rail::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; z-index: 2;
  background: rgba(255, 255, 255, 0.32);
}
.lv-level__fill {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-radius: 4px; background: var(--lv-fam); opacity: 0.9;
  transition: width 0.25s ease;
}
.lv-level--above .lv-level__fill { left: 50%; }
.lv-level--below .lv-level__fill { right: 50%; }

/* ---- off-scale cap: the ONE place the length encoding stops being linear.
        Deliberately drawn INSIDE the track, never outside the card and never
        dependent on card padding — this marker is the only thing stopping a
        saturated bar from reading as a genuine maximum distance, so it must
        not be clippable by a rule it does not own. ---- */
.lv-level--offscale .lv-level__rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 11px; z-index: 3;
  background: repeating-linear-gradient(115deg, rgba(11, 8, 5, 0.9) 0 2px, transparent 2px 4px);
}
.lv-level--offscale.lv-level--above .lv-level__rail::after { right: 0; }
.lv-level--offscale.lv-level--below .lv-level__rail::after { left: 0; }

/* ---- the two levels nearest price, one on each side. A fact (the minimum of
        a set of distances the cards already print), not a score. ---- */
/* Doubled class = (0,2,0), so these beat the sess8 .lv-level:hover rule at :609.
   At (0,1,0) the gold ring vanished the moment the pointer touched the card. */
.lv-level.lv-level--near { border-color: rgba(200, 168, 120, 0.5); box-shadow: 0 0 0 1px rgba(200, 168, 120, 0.18), 0 8px 26px rgba(0, 0, 0, 0.3); }
.lv-level--near .lv-level__price { color: #fff; }

/* ---- the anchor: price itself, the origin of every measurement. Full width,
        so it reads as the divider it is in ladder mode. ---- */
.lv-level.lv-level--spot {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgba(200, 168, 120, 0.10), rgba(30, 24, 17, 0.55));
  border-color: rgba(200, 168, 120, 0.34);
}
.lv-level--spot .lv-level__price { font-size: clamp(26px, 7vw, 32px); }

/* ---- ladder mode: the price line, in the groups that hold no anchor card ---- */
.lv-group__rule {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 2px 0;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lv-accent-2); font-variant-numeric: tabular-nums;
}
.lv-group__rule::before,
.lv-group__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 168, 120, 0.45), transparent); }

/* ---- card tools: order, density, and the scale said out loud. Built in
        levels.js so levels.html keeps its exact markup. ---- */
.lv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; }
.lv-tools__set { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-tools__k { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lv-muted); }
.lv-tools__scale { flex: 1 0 100%; max-width: 72ch; margin: 2px 0 0; font-size: 12px; line-height: 1.55; color: var(--lv-muted); }

.lv-seg { display: inline-flex; border: 1px solid var(--lv-line); border-radius: 11px; background: var(--lv-panel); overflow: hidden; }
.lv-seg__b {
  min-height: 44px; padding: 0 14px; border: 0; background: transparent;
  color: var(--lv-muted); font: inherit; font-size: 13.5px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.lv-seg__b + .lv-seg__b { border-left: 1px solid var(--lv-line); }
.lv-seg__b:hover { color: var(--lv-text); }
.lv-seg__b[aria-pressed="true"] { background: var(--lv-accent); color: var(--lv-ink); }
.lv-seg__b:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: -2px; }

/* ---- phones. Column counts are UNCHANGED (1 / 2 at 560px / 3 at 1000px,
        levels.css:494-496); min-width:0 on the card and the ellipsis on the
        name guarantee no horizontal page scroll. ---- */
@media (max-width: 559px) {
  .lv-level { padding: 14px 15px 13px 18px; }
  .lv-tools { gap: 8px 12px; }
  .lv-tools__set { flex: 1 0 100%; }
  .lv-seg { flex: 1; }
  .lv-seg__b { flex: 1; padding: 0 10px; }
}

/* ---- levels.css:410 is `* { transition: none !important }` under reduced
        motion, which already neutralises the rail. This pass adds no
        @keyframes of any kind. Belt and braces. ---- */
@media (prefers-reduced-motion: reduce) {
  .lv-level__fill { transition: none; }
  .lv-level:hover { transform: none; }
}

/* ── Charm heat ladder (2026-08-26) — same visual language as the topography ── */
.lv-chwrap { border: 1px solid var(--lv-line); border-radius: 12px; padding: 14px 16px; background: rgba(245,241,233,.02); }
.lv-ch { display: grid; gap: 3px; margin-top: 10px; }
.lv-ch__row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 64px; align-items: center; gap: 8px; }
.lv-ch__s { font-size: 11.5px; color: var(--lv-muted); font-variant-numeric: tabular-nums; text-align: right; }
.lv-ch__row.is-spot .lv-ch__s { color: #e0c79a; font-weight: 700; }
.lv-ch__c { display: block; height: 16px; border-radius: 4px; background: rgba(245,241,233,.04); }
.lv-ch__v { font-size: 11px; font-variant-numeric: tabular-nums; text-align: left; }
.lv-ch__v.is-pos { color: #3fb79f; }
.lv-ch__v.is-neg { color: #ef6b66; }

/* ── Meter rows (expiry decay, wall concentration, EM budget) 2026-08-26 ── */
.lv-mt { display: grid; gap: 6px; margin-top: 10px; }
.lv-mt__row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 46px 72px; align-items: center; gap: 8px; }
.lv-mt__k { font-size: 11.5px; color: var(--lv-muted); font-variant-numeric: tabular-nums; text-align: right; }
.lv-mt__k--w { font-size: 11px; }
.lv-mt__track { display: block; height: 10px; border-radius: 5px; background: rgba(245,241,233,.06); overflow: hidden; }
.lv-mt__track--em { height: 14px; border-radius: 7px; margin-top: 10px; }
.lv-mt__fill { display: block; height: 100%; border-radius: 5px; background: #c8a878; }
.lv-mt__fill.is-pos { background: #3fb79f; }
.lv-mt__fill.is-neg { background: #ef6b66; }
/* NOT --lv-ink: that token is the DARK ink for gold buttons (#1a1408) — using
   it here rendered the % column invisible on the dark card (caught in QA). */
.lv-mt__v { font-size: 11px; color: #f5f1e9; font-variant-numeric: tabular-nums; text-align: right; }
.lv-mt__n { font-size: 10.5px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv-mt__n.is-pos { color: #3fb79f; }
.lv-mt__n.is-neg { color: #ef6b66; }

/* Gamma terrain */
.lv-ter { display: block; width: 100%; height: auto; margin-top: 10px; }

/* Two crowds table */
.lv-tc { display: grid; gap: 5px; margin-top: 10px; }
.lv-tc__row { display: grid; grid-template-columns: 84px 1fr 1fr 110px; align-items: center; gap: 8px; }
.lv-tc__row--head .lv-tc__v, .lv-tc__row--head .lv-tc__g { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lv-muted); }
.lv-tc__n { font-size: 11.5px; color: var(--lv-muted); }
.lv-tc__v { font-size: 12px; font-variant-numeric: tabular-nums; }
.lv-tc__g { font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.lv-tc__g.is-pos { color: #3fb79f; }
.lv-tc__g.is-warn { color: #e0c79a; }

/* ── OI chain mirror + wall mix (2026-08-26) ── */
.lv-oi { display: grid; gap: 4px; margin-top: 8px; }
.lv-oi__head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lv-muted); margin-top: 10px; }
.lv-oi__row { display: grid; grid-template-columns: 44px minmax(0,1fr) 74px minmax(0,1fr) 44px; align-items: center; gap: 6px; }
.lv-oi__v { font-size: 10.5px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv-oi__row .lv-oi__v:first-child { text-align: right; }
.lv-oi__k { font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; color: #f5f1e9; }
.lv-oi__row.is-spot .lv-oi__k { color: #e0c79a; font-weight: 700; }
.lv-oi__wall { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #e0c79a; }
.lv-oi__track { display: block; height: 12px; border-radius: 4px; background: rgba(245,241,233,.05); overflow: hidden; }
.lv-oi__bar { display: block; height: 100%; border-radius: 4px; }
.lv-oi__bar--call { background: #3fb79f; }
.lv-oi__bar--put { background: #ef6b66; margin-left: auto; }
.lv-mx { display: grid; gap: 8px; margin-top: 10px; }
.lv-mx__row { display: grid; grid-template-columns: 96px minmax(0,1fr) 118px; align-items: center; gap: 8px; }
.lv-mx__k { font-size: 11px; color: var(--lv-muted); text-align: right; }
.lv-mx__track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(245,241,233,.05); }
.lv-mx__seg { display: block; height: 100%; }
.lv-mx__seg--call { background: #3fb79f; }
.lv-mx__seg--put { background: #ef6b66; }
.lv-mx__v { font-size: 10.5px; color: #f5f1e9; font-variant-numeric: tabular-nums; }
/* Fresh-positioning rows carry a longer "vol / OI" tail — give it room. */
.lv-mt--fresh .lv-mt__row { grid-template-columns: 54px minmax(0,1fr) 44px 128px; }
.lv-mt--fresh .lv-mt__n { white-space: nowrap; font-size: 10px; }

/* ── Full-width fold layout (2026-08-27): chart takes the page, analytics
   collapse. The old 2-column terminal grid is retired — the side stack now
   runs FULL WIDTH under the chart as closed folds. ── */
@media (min-width: 1080px) { .lv-termrow { grid-template-columns: 1fr !important; } }
@media (min-width: 1600px) { .lv-termrow { grid-template-columns: 1fr !important; } }
.lv-termside { gap: 10px; }

.lv-fold > .lv-group__title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  user-select: none;
}
.lv-fold > .lv-group__title::after {
  content: "\25B8"; /* ▸ */
  font-size: 14px;
  color: var(--lv-accent-2);
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.lv-fold.is-open > .lv-group__title::after { transform: rotate(90deg); }
.lv-fold.is-open > .lv-group__title { margin-bottom: 10px; }
.lv-fold > .lv-group__title:hover { color: var(--lv-accent-2); }
.lv-fold > .lv-group__title:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 3px; border-radius: 6px; }
/* Closed: only the title row remains — the wrapper slims down to a bar. */
.lv-fold:not(.is-open) { padding-top: 12px; padding-bottom: 12px; }
.lv-fold:not(.is-open) > :not(.lv-group__title) { display: none; }
/* Open on a wide page: content stays at a readable measure, never stretched
   bar-charts across 1500px. */
.lv-fold.is-open > :not(.lv-group__title) { max-width: 760px; }

/* =========================================================================
   /levels uplift (2026-08-28) — quick-access nav, symbol popup, cleaner
   section separators, and the intraday greek field. Same Héritage tokens.
   ========================================================================= */

/* Background: keep the warm dark, but add a faint top ambient for depth and
   crisper section borders so cards separate cleanly from the ground. */
.lv-body {
  background:
    radial-gradient(1200px 420px at 78% -8%, rgba(200,168,120,0.06), transparent 60%),
    linear-gradient(160deg, var(--lv-bg-top) 0%, var(--lv-bg) 58%);
}

/* --- Top bar: brand + quick-access nav + account -------------------------- */
.lv-top { flex-wrap: wrap; }
.lv-top__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: rgba(24, 19, 12, 0.6);
  border: 1px solid var(--lv-line);
  border-radius: 12px;
  padding: 3px;
}
.lv-top__navlink {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 9px;
  color: var(--lv-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.lv-top__navlink svg { width: 15px; height: 15px; opacity: .8; flex: 0 0 auto; }
.lv-top__navlink:hover { color: var(--lv-text); background: rgba(200,168,120,0.10); }
.lv-top__navlink[aria-current="page"] { color: var(--lv-ink); background: var(--lv-accent); }
.lv-top__navlink[aria-current="page"] svg { opacity: 1; }
@media (max-width: 720px) {
  .lv-top__nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .lv-top__nav::-webkit-scrollbar { display: none; }
  .lv-top__navlink span { display: inline; }
}

/* --- Symbol popup (replaces the pill row) --------------------------------- */
.lv-symsel { position: relative; margin: 2px 0 16px; display: inline-block; }
.lv-symsel__btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--lv-line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--lv-panel-strong), var(--lv-panel));
  color: var(--lv-text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lv-symsel__btn:hover { border-color: rgba(200,168,120,0.5); }
.lv-symsel__btn[aria-expanded="true"] { border-color: var(--lv-accent); }
.lv-symsel__cur { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.lv-symsel__kind { font-size: 12px; font-weight: 600; color: var(--lv-muted); }
.lv-symsel__chev { margin-left: 4px; width: 16px; height: 16px; color: var(--lv-accent-2); transition: transform .18s ease; }
.lv-symsel__btn[aria-expanded="true"] .lv-symsel__chev { transform: rotate(180deg); }
.lv-symsel__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 280px;
  padding: 8px;
  background: var(--lv-panel-strong);
  border: 1px solid var(--lv-line);
  border-radius: 14px;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,168,120,0.06);
}
.lv-symsel__pop[hidden] { display: none; }
.lv-symsel__grouplabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lv-muted);
  padding: 8px 10px 4px;
}
.lv-symsel__opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lv-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lv-symsel__opt:hover { background: rgba(200,168,120,0.10); }
.lv-symsel__opt[aria-current="true"] { background: rgba(200,168,120,0.16); }
.lv-symsel__opt b { font-size: 16px; font-weight: 750; }
.lv-symsel__opt .lv-symsel__desc { font-size: 12.5px; color: var(--lv-muted); font-weight: 500; }
.lv-symsel__opt[aria-current="true"] .lv-symsel__tick { color: var(--lv-accent-2); }
.lv-symsel__tick { width: 16px; height: 16px; color: transparent; flex: 0 0 auto; }

/* --- Breadcrumb (structure page) ------------------------------------------ */
.lv-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--lv-muted); font-family: "Hanken Grotesk", system-ui, sans-serif; }
.lv-crumb a { color: var(--lv-accent-2); text-decoration: none; }
.lv-crumb a:hover { text-decoration: underline; }
.lv-crumb span[aria-hidden] { color: var(--lv-line); }
.lv-crumb span[aria-current] { color: var(--lv-text); }

/* --- Two zones: the levels vs the greek graphs (2026-08-28) --------------- */
/* The levels zone keeps the chart above its classic level-card families,
   unchanged. Every greek graph is separated into .lv-analytics below. */
.lv-levelzone { display: grid; gap: 18px; margin: 0 0 8px; min-width: 0; }
.lv-levelzone > .lv-chart { margin: 0; min-width: 0; }

/* The graphs, as a responsive grid rather than one endless narrow column. Hidden
   sections collapse out of the grid, so only graphs with data take a cell. */
/* Masonry via CSS columns (2026-08-28): a fixed grid left ragged bottoms and big
   holes because the cards are very different heights (owner: "BEAUCOUP trop de
   vide"). Columns pack each card directly under the previous one, so the vertical
   whitespace collapses. Hidden sections (display:none) never take a slot. */
/* ---- Structure page: FreeFlow-style key-number strip -------------------- */
.lv-statsbar {
  display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 16px 18px;
  background: var(--lv-panel, rgba(255,255,255,0.02));
  border: 1px solid var(--lv-line); border-radius: 14px;
}
.lv-statsbar__grid {
  flex: 1; display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}
.lv-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lv-stat__k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lv-muted); }
.lv-stat__v { font-size: 21px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lv-stat__s { font-size: 11.5px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv-stat__v--spot { color: var(--lv-accent-2); }
.lv-stat__v--call { color: #5fe0a0; }
.lv-stat__v--put { color: #ff7d7d; }
.lv-stat__v--flip { color: #e6c476; }
.lv-stat__v--vt { color: #e6a94a; }
.lv-stat__v--mp { color: #e8edf5; }
.lv-stat__v--pos { color: #5fe0a0; }
.lv-stat__v--neg { color: #ff7d7d; }
.lv-statsbar__actions { display: flex; align-items: flex-start; }
.lv-statsbar__copy {
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--lv-accent-2);
  background: transparent; border: 1px solid var(--lv-line); border-radius: 9px;
  padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.lv-statsbar__copy:hover { border-color: var(--lv-accent); }

/* ---- Structure page: thematic bands (ordered grid, replaces masonry) ----- */
.lv-bandwrap { margin: 0 0 8px; }
.lv-band { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 26px; }
@media (min-width: 900px) {
  .lv-band { grid-template-columns: 1fr 1fr; }
  .lv-band > .lv-span2 { grid-column: 1 / -1; }
}
.lv-band > section { min-width: 0; margin: 0; }

.lv-analytics { column-gap: 16px; margin: 0 0 26px; }
@media (min-width: 900px) { .lv-analytics { column-count: 2; } }
@media (min-width: 1400px) { .lv-analytics { column-count: 3; } }
.lv-analytics > section {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 16px;
  min-width: 0;
}
/* Wide graphs span every column: the strike×expiry topography and the charm
   heatmap both read across maturities and need the full width. */
.lv-analytics > .lv-topo,
.lv-analytics > .lv-chwrap {
  column-span: all;
  -webkit-column-span: all;
}

/* --- Section separator + eyebrow kicker ----------------------------------- */
.lv-divide {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 20px;
}
.lv-divide::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--lv-line), transparent);
}
.lv-divide__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lv-accent);
  white-space: nowrap;
}
.lv-divide__eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--lv-accent);
  vertical-align: middle;
}

/* --- Intraday greek field ------------------------------------------------- */
.lv-ghf[hidden] { display: none; }
.lv-ghf__panel {
  border: 1px solid var(--lv-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--lv-panel-strong), var(--lv-panel));
  overflow: hidden;
}
.lv-ghf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--lv-line);
}
.lv-ghf__greeks { display: flex; gap: 2px; background: var(--lv-bg); border: 1px solid var(--lv-line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.lv-ghf__greeks button {
  font-size: 13px; font-weight: 650; color: var(--lv-muted);
  background: transparent; border: 0; padding: 7px 12px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: color .14s, background .14s;
}
.lv-ghf__greeks button:hover { color: var(--lv-text); }
.lv-ghf__greeks button[aria-pressed="true"] { background: var(--lv-panel-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--lv-line); }
.lv-ghf__sw { width: 9px; height: 9px; border-radius: 2px; opacity: .6; }
.lv-ghf__greeks button[aria-pressed="true"] .lv-ghf__sw { opacity: 1; }
.lv-ghf__asof { font-size: 13px; font-weight: 650; color: var(--lv-accent-2); font-variant-numeric: tabular-nums; }
.lv-ghf__span { display: inline-flex; gap: 2px; background: var(--lv-bg); border: 1px solid var(--lv-line); border-radius: 9px; padding: 3px; }
.lv-ghf__span button {
  font-size: 12px; font-weight: 700; color: var(--lv-muted); letter-spacing: 0.02em;
  background: transparent; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  transition: color .14s, background .14s; font-variant-numeric: tabular-nums;
}
.lv-ghf__span button:hover { color: var(--lv-text); }
.lv-ghf__span button[aria-pressed="true"] { background: var(--lv-panel-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--lv-line); }
.lv-ghf__view { display: inline-flex; gap: 2px; background: var(--lv-bg); border: 1px solid var(--lv-line); border-radius: 9px; padding: 3px; }
.lv-ghf__view button {
  font-size: 12px; font-weight: 700; color: var(--lv-muted); letter-spacing: 0.01em;
  background: transparent; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  transition: color .14s, background .14s;
}
.lv-ghf__view button:hover { color: var(--lv-text); }
.lv-ghf__view button[aria-pressed="true"] { background: var(--lv-panel-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--lv-line); }
.lv-ghf__day {
  font-size: 13px; font-weight: 650; color: var(--lv-text); font-family: inherit;
  background: var(--lv-bg); border: 1px solid var(--lv-line); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font-variant-numeric: tabular-nums; margin-left: auto;
}
.lv-ghf__day--static { cursor: default; color: var(--lv-muted); }
.lv-ghf__stage { display: grid; grid-template-columns: 150px 1fr 46px; gap: 10px; padding: 12px; align-items: stretch; }
.lv-ghf__col-h { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv-muted); margin-bottom: 6px; }
/* 2026-09-03: the bars column (300px tall canvas) used to dictate the row height while the
   field canvas kept its own 2:1 height and the overlay stretched to the row -> candles and
   grid drifted off the field by up to ~80px. Now the HEAT box owns the height (2:1) and the
   bars / legend canvases stretch to it, so every y(price) maps to the same pixel row. */
.lv-ghf__bars { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.lv-ghf__barcanvas { display: block; width: 100%; flex: 1 1 0; min-height: 0; height: 100%; }
.lv-ghf__heat { position: relative; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--lv-bg); aspect-ratio: 2 / 1; min-height: 240px; }
.lv-ghf__field, .lv-ghf__overlay { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-ghf__overlay { pointer-events: none; }
.lv-ghf__legend { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; min-height: 0; }
.lv-ghf__legcanvas { border-radius: 4px; border: 1px solid var(--lv-line); flex: 1 1 0; min-height: 0; width: 18px; }
.lv-ghf__legnum { font-size: 10px; font-weight: 600; color: var(--lv-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-ghf__legmid { position: absolute; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--lv-muted); font-variant-numeric: tabular-nums; background: var(--lv-bg); padding: 1px 2px; }
.lv-ghf__scrub { display: flex; align-items: center; gap: 14px; padding: 6px 16px 16px; }
.lv-ghf__scrub .lv-ghf__lab { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv-muted); white-space: nowrap; }
.lv-ghf__scrub input[type="range"] { flex: 1; accent-color: var(--lv-accent); height: 4px; }
.lv-ghf__scrub .lv-ghf__val { font-size: 13px; color: var(--lv-text); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.lv-ghf__scrub .lv-ghf__val b { color: var(--lv-accent-2); }
.lv-ghf__hint { color: var(--lv-muted); font-size: 12px; margin-right: 8px; }
/* Hover readout: snapped crosshair + value tip over the field / interval map. */
.lv-ghf__heat { cursor: crosshair; }
.lv-ghf__cross { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; }
.lv-ghf__cross[hidden] { display: none; }
.lv-ghf__cross--v { width: 1px; height: 100%; background: rgba(226,201,157,0.5); }
.lv-ghf__cross--h { width: 100%; height: 1px; background: rgba(226,201,157,0.5); }
.lv-ghf__tip {
  position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; min-width: 128px;
  background: rgba(12,10,7,0.93); border: 1px solid var(--lv-line); border-radius: 9px;
  padding: 8px 10px; box-shadow: 0 6px 22px rgba(0,0,0,0.5); backdrop-filter: blur(3px);
}
.lv-ghf__tip[hidden] { display: none; }
.lv-ghf__tiptime { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--lv-accent-2); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.lv-ghf__tiprow { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.lv-ghf__tiprow span { color: var(--lv-muted); }
.lv-ghf__tiprow b { color: var(--lv-text); font-weight: 700; }
.lv-ghf__tiprow b.is-pos { color: #5fd6a0; }
.lv-ghf__tiprow b.is-neg { color: #ef7168; }

/* --- /structure sub-page tabs -------------------------------------------- */
.lv-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 20px 0 22px; border-bottom: 1px solid var(--lv-line); }
.lv-tabs[hidden] { display: none; }
.lv-tabs button {
  font-size: 13.5px; font-weight: 650; color: var(--lv-muted); background: transparent; border: 0;
  border-bottom: 2px solid transparent; padding: 10px 15px; cursor: pointer; margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease; white-space: nowrap;
}
.lv-tabs button[hidden] { display: none; }
.lv-tabs button:hover { color: var(--lv-text); }
.lv-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--lv-accent); }
.lv-tabpane[hidden] { display: none; }
@media (max-width: 640px) {
  .lv-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lv-tabs button { padding: 10px 12px; font-size: 13px; }
}

/* --- Net premium drift ---------------------------------------------------- */
.lv-nd[hidden] { display: none; }
.lv-nd { border: 1px solid var(--lv-line); border-radius: 16px; background: linear-gradient(180deg, var(--lv-panel-strong), var(--lv-panel)); padding: 16px 18px; }
.lv-nd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lv-nd__head .lv-group__title { margin: 0; }
.lv-nd__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-nd__chip { font-size: 12.5px; color: var(--lv-muted); background: var(--lv-bg); border: 1px solid var(--lv-line); border-radius: 999px; padding: 5px 12px; font-variant-numeric: tabular-nums; }
.lv-nd__chip b { color: var(--lv-text); font-weight: 700; margin-left: 4px; }
.lv-nd__chip b.is-pos { color: #5fd6a0; } .lv-nd__chip b.is-neg { color: #ef7168; }
.lv-nd__stage { position: relative; margin-top: 12px; border-radius: 10px; overflow: hidden; background: var(--lv-bg); cursor: crosshair; }
.lv-nd__canvas { display: block; width: 100%; }
.lv-nd__legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.lv-nd__lg { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.lv-nd__lg::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.lv-nd__lg--net { color: #e2c99d; } .lv-nd__lg--call { color: #5fd6a0; } .lv-nd__lg--put { color: #ef7168; }
.lv-nd__lg--vol { color: rgba(226,201,157,0.55); }

/* --- CTA from /levels to the separate /structure page --------------------- */
.lv-structure-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 8px 0 26px; padding: 18px 20px;
  border: 1px solid var(--lv-line); border-radius: 16px;
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(200,168,120,0.08), transparent 70%),
    linear-gradient(180deg, var(--lv-panel-strong), var(--lv-panel));
  color: var(--lv-text); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.lv-structure-cta:hover { border-color: rgba(200,168,120,0.55); transform: translateY(-1px); }
.lv-structure-cta__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lv-structure-cta__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lv-accent); }
.lv-structure-cta__title { font-size: 18px; font-weight: 750; color: #fff; letter-spacing: -0.01em; }
.lv-structure-cta__sub { font-size: 13.5px; color: var(--lv-muted); line-height: 1.5; max-width: 70ch; }
.lv-structure-cta__arrow { flex: 0 0 auto; font-size: 26px; color: var(--lv-accent-2); line-height: 1; }
@media (max-width: 560px) { .lv-structure-cta { flex-direction: column; align-items: flex-start; } }
.lv-ghf__empty { padding: 26px 18px; color: var(--lv-muted); font-size: 14px; line-height: 1.6; }
.lv-ghf__empty b { color: var(--lv-text); font-weight: 650; }
@media (max-width: 700px) {
  .lv-ghf__stage { grid-template-columns: 1fr; }
  .lv-ghf__bars { order: 2; } .lv-ghf__heat { order: 1; } .lv-ghf__legend { order: 3; flex-direction: row; justify-content: center; }
}

/* Replay ▶ du champ intraday (01/09) */
.lv-ghf__play{background:#181d28;border:1px solid #2a3040;color:#f6c667;border-radius:8px;width:30px;height:26px;cursor:pointer;font-size:11px;line-height:1;margin-right:8px}
.lv-ghf__play:hover{border-color:#f6c667}

/* Theme toggle in the .lv-top header (both data pages). */
.lv-theme-btn {
  background: none;
  border: 1px solid var(--lv-line);
  border-radius: 8px;
  color: var(--lv-muted);
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .3px;
  padding: 7px 12px;
  cursor: pointer;
  min-height: 32px;
}
.lv-theme-btn:hover, .lv-theme-btn:focus-visible {
  color: var(--lv-accent-2);
  border-color: var(--lv-accent);
}


/* "Your map" (2026-09-06) */
.lv-map{margin:0 0 22px;padding:18px 18px 16px;border:1px solid rgba(245,241,233,.1);border-radius:14px;background:rgba(245,241,233,.02)}
.lv-map__presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0 16px}
.lv-map__preset{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid rgba(245,241,233,.12);background:transparent;color:#f5f1e9;cursor:pointer;font:inherit}
.lv-map__preset b{font-size:13.5px;font-weight:600}.lv-map__preset span{font-size:11.5px;color:#9c9fa8;line-height:1.35}
.lv-map__preset[aria-pressed="true"]{border-color:rgba(212,180,131,.7);background:rgba(212,180,131,.1)}
.lv-map__mine-head{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.lv-map__k{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c8a878}
.lv-map__rows{display:grid;gap:8px}
.lv-map__row{display:grid;grid-template-columns:150px 1fr;gap:8px}
.lv-map__row input{background:#0b0805;border:1px solid rgba(245,241,233,.14);border-radius:9px;padding:9px 11px;color:#f5f1e9;font:inherit;font-size:13.5px}
.lv-map__row input:focus{outline:none;border-color:#d4b483}
.lv-map__foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.lv-map__status{font-size:12.5px;color:#9c9fa8}.lv-map__status[data-tone="ok"]{color:#b9c7a8}.lv-map__status[data-tone="error"]{color:#e0644b}.lv-map__status[data-tone="warn"]{color:#e0c79a}
@media (max-width:640px){.lv-map__row{grid-template-columns:1fr}}


.lv-map__focus{margin-top:16px;padding-top:14px;border-top:1px solid rgba(245,241,233,.08)}
.lv-map__presets--focus{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.lv-map__sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin:6px 0 10px}
.lv-map__slider{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:10px;font-size:12.5px;color:#c9c2b4}
.lv-map__slider input[type=range]{width:100%;accent-color:#d4b483}
.lv-map__slider output{font-family:"JetBrains Mono",monospace;font-size:12px;color:#f5f1e9;text-align:right}
.lv-map__focus-opts{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 6px}

/* ===== GEX THEMES (GENERATED - do not edit, run scripts/gen-themes.py) ===== */
/* -- theme dark -- */
html[data-theme="dark"] { --lv-bg: #000000; --lv-bg-top: #050506; --lv-panel: #0a0b0d; --lv-panel-strong: #101114; --lv-line: #1b1d22; --lv-text: #e8edf2; --lv-muted: #8f97a3; --lv-ink: #050506; }
html[data-theme="dark"] .lv-code { background: #050403; }
html[data-theme="dark"] .lv-pf__axis { color: var(--lv-faint, #7d8590); }
html[data-theme="dark"] .lv-top { background: rgba(0, 0, 0, .84); }
html[data-theme="dark"] .lv-hero__it--long { background: linear-gradient(180deg,rgba(38,166,154,.12),rgba(10, 11, 13, .6)); }
html[data-theme="dark"] .lv-hero__it--short { background: linear-gradient(180deg,rgba(239,83,80,.12),rgba(10, 11, 13, .6)); }
html[data-theme="dark"] .lv-symbols { background: linear-gradient(180deg,rgba(0, 0, 0, .95) 70%,rgba(0, 0, 0, 0)); }
html[data-theme="dark"] .lv-level:hover { border-color: #14120d; }
html[data-theme="dark"] .lv-demo { background: linear-gradient(90deg,#191111,#7a2b26); }
html[data-theme="dark"] #lvIntro { background: #030304; }
html[data-theme="dark"] .lvi__vig { background: radial-gradient(120% 90% at 50% 50%,transparent 26%,rgba(4, 4, 4, .5) 76%,rgba(4, 4, 4, .92) 100%); }
html[data-theme="dark"] .lvi__skipgate { color: #6b7380; }
html[data-theme="dark"] .lvi__skip { background: rgba(6, 5, 4, .6); }
html[data-theme="dark"] .lv-level--offscale .lv-level__rail::after { background: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.9) 0 2px, transparent 2px 4px); }
html[data-theme="dark"] .lv-level.lv-level--spot { background: linear-gradient(120deg, rgba(200, 168, 120, 0.10), rgba(16, 17, 20, 0.55)); }
html[data-theme="dark"] .lv-top__nav { background: rgba(10, 11, 13, 0.6); }
html[data-theme="dark"] .lv-ghf__tip { background: rgba(5, 4, 3, 0.93); }
html[data-theme="dark"] .lv-ghf__play { background: #12151c; }
html[data-theme="dark"] .lv-ghf__play { border-color: #0f1116; }
html[data-theme="dark"] .lv-map__preset span { color: #8f97a3; }
html[data-theme="dark"] .lv-map__row input { background: #000000; }
html[data-theme="dark"] .lv-map__status { color: #8f97a3; }
/* -- theme white -- */
html[data-theme="white"] { --lv-bg: #faf8f4; --lv-bg-top: #f4f0e8; --lv-panel: #ffffff; --lv-panel-strong: #f7f3ec; --lv-line: #e3dccd; --lv-text: #211d16; --lv-muted: #6c675d; --lv-accent: #9a7434; --lv-accent-2: #b08a45; --lv-ink: #fdfbf7; --lv-call: #177f74; --lv-put: #d43835; --lv-gamma: #c8862f; --lv-focus: #1f78c0; --lv-spot: #26282b; --lv-zero: #1b2d37; --lv-vega: #188f9a; --lv-ovn: #271b37; --lv-vwap: #1b372b; --lv-refs: #1b2137; --lv-ict: #37221b; }
html[data-theme="white"] .lv-top__brand { color: #211d16; }
html[data-theme="white"] .lv-top__link { border-color: rgba(154, 116, 52, 0.5); }
html[data-theme="white"] .lv-top__link:hover { background: rgba(154, 116, 52, 0.12); }
html[data-theme="white"] .lv-h1 { color: #211d16; }
html[data-theme="white"] .lv-h2 { color: #211d16; }
html[data-theme="white"] .lv-symbol:hover { border-color: rgba(154, 116, 52, 0.45); }
html[data-theme="white"] .lv-status { color: #5a5548; }
html[data-theme="white"] .lv-status a:hover { color: #211d16; }
html[data-theme="white"] .lv-level__price { color: #211d16; }
html[data-theme="white"] .lv-note { color: #5a5548; }
html[data-theme="white"] .lv-warn { background: rgba(200, 134, 47, 0.07); }
html[data-theme="white"] .lv-warn { color: #372e1b; }
html[data-theme="white"] .lv-warn { border-color: rgba(200, 134, 47, 0.35); }
html[data-theme="white"] .lv-code { background: #f6f4f1; }
html[data-theme="white"] .lv-btn { border-color: rgba(154, 116, 52, 0.5); }
html[data-theme="white"] .lv-btn:hover { background: rgba(154, 116, 52, 0.12); }
html[data-theme="white"] .lv-legal { color: #63666d; }
html[data-theme="white"] .lv-learn a { border-bottom-color: rgba(176, 138, 69, 0.35); }
html[data-theme="white"] .lv-quad__cell--long { background: rgba(23, 127, 116, 0.06); }
html[data-theme="white"] .lv-quad__cell--short { background: rgba(212, 56, 53, 0.06); }
html[data-theme="white"] .lv-quad__cell--on.lv-quad__cell--long { background: rgba(23, 127, 116, 0.20); }
html[data-theme="white"] .lv-quad__cell--on.lv-quad__cell--long { color: #1b3733; }
html[data-theme="white"] .lv-quad__cell--on.lv-quad__cell--short { background: rgba(212, 56, 53, 0.20); }
html[data-theme="white"] .lv-quad__cell--on.lv-quad__cell--short { color: #371c1b; }
html[data-theme="white"] .lv-group__title { color: #211d16; }
html[data-theme="white"] .lv-gk__track { background: rgba(36, 31, 22, .07); }
html[data-theme="white"] .lv-gk__bar.is-pos { background: linear-gradient(90deg, rgba(29, 138, 116, .55), rgba(29, 138, 116, .95)); }
html[data-theme="white"] .lv-gk__bar.is-neg { background: linear-gradient(90deg, rgba(194, 58, 52, .55), rgba(194, 58, 52, .95)); }
html[data-theme="white"] .lv-gk__v.is-pos, html[data-theme="white"] .lv-gk__t.is-pos { color: #1d8a74; }
html[data-theme="white"] .lv-gk__v.is-neg, html[data-theme="white"] .lv-gk__t.is-neg { color: #c23a34; }
html[data-theme="white"] .lv-topo__row.is-spot .lv-topo__s { color: #b08a45; }
html[data-theme="white"] .lv-corr { background: rgba(36, 31, 22, .02); }
html[data-theme="white"] .lv-corr__range { color: #211d16; }
html[data-theme="white"] .lv-greeks, html[data-theme="white"] .lv-topo-wrap, html[data-theme="white"] .lv-corr, html[data-theme="white"] .lv-chart { background: rgba(36, 31, 22, .02); }
html[data-theme="white"] .lv-topo { background: rgba(36, 31, 22, .02); }
html[data-theme="white"] .lv-pfwrap { background: rgba(36, 31, 22, .02); }
html[data-theme="white"] .lv-pf__sum b.is-pos { color: #1d8a74; }
html[data-theme="white"] .lv-pf__sum b.is-neg { color: #c23a34; }
html[data-theme="white"] .lv-pf__axis { color: var(--lv-faint, #8a8478); }
html[data-theme="white"] .lv-pf__row:hover { background: rgba(36, 31, 22, .035); }
html[data-theme="white"] .lv-pf__fl { background: rgba(36, 31, 22, .05); }
html[data-theme="white"] .lv-pf__flbar.is-pos { background: rgba(29, 138, 116, .85); }
html[data-theme="white"] .lv-pf__flbar.is-neg { background: rgba(194, 58, 52, .85); }
html[data-theme="white"] .lv-pf__track::before { background: rgba(36, 31, 22, .22); }
html[data-theme="white"] .lv-pf__bar.is-pos { color: #1d8a74; }
html[data-theme="white"] .lv-pf__bar.is-pos { background: linear-gradient(90deg, rgba(29, 138, 116, .55), rgba(29, 138, 116, 1)); }
html[data-theme="white"] .lv-pf__bar.is-neg { color: #c23a34; }
html[data-theme="white"] .lv-pf__bar.is-neg { background: linear-gradient(270deg, rgba(194, 58, 52, .55), rgba(194, 58, 52, 1)); }
html[data-theme="white"] .lv-pf__v.is-pos { color: #278169; }
html[data-theme="white"] .lv-pf__v.is-neg { color: #371c1b; }
html[data-theme="white"] .lv-pf__row.is-spot { background: rgba(176, 138, 69, .06); }
html[data-theme="white"] .lv-pf__row.is-spot .lv-pf__k { color: #b08a45; }
html[data-theme="white"] .lv-conv { color: #b08a45; }
html[data-theme="white"] .lv-conv { border-color: rgba(176, 138, 69, .34); }
html[data-theme="white"] .lv-conv--warn { color: #372c1b; }
html[data-theme="white"] .lv-netg__item--long, html[data-theme="white"] .lv-netg__item--pos { background: rgba(23, 127, 116, 0.10); }
html[data-theme="white"] .lv-netg__item--long, html[data-theme="white"] .lv-netg__item--pos { border-color: rgba(23, 127, 116, 0.45); }
html[data-theme="white"] .lv-netg__item--short, html[data-theme="white"] .lv-netg__item--neg { background: rgba(212, 56, 53, 0.10); }
html[data-theme="white"] .lv-netg__item--short, html[data-theme="white"] .lv-netg__item--neg { border-color: rgba(212, 56, 53, 0.45); }
html[data-theme="white"] .lv-body::before { background: radial-gradient(90% 55% at 50% -8%, rgba(154, 116, 52, .09), transparent 62%),
    radial-gradient(70% 50% at 100% 100%, rgba(29, 138, 116, .05), transparent 60%); }
html[data-theme="white"] .lv-top { background: rgba(250, 248, 244, .84); }
html[data-theme="white"] .lv-iconbtn:hover { color: #211d16; }
html[data-theme="white"] .lv-hero__v { color: #211d16; }
html[data-theme="white"] .lv-hero__it--spot .lv-hero__v { color: #211d16; }
html[data-theme="white"] .lv-hero__it--long { border-color: rgba(23, 127, 116, .4); }
html[data-theme="white"] .lv-hero__it--long { background: linear-gradient(180deg,rgba(23, 127, 116, .12),rgba(255, 255, 255, .6)); }
html[data-theme="white"] .lv-hero__it--short { border-color: rgba(212, 56, 53, .4); }
html[data-theme="white"] .lv-hero__it--short { background: linear-gradient(180deg,rgba(212, 56, 53, .12),rgba(255, 255, 255, .6)); }
html[data-theme="white"] .lv-symbols { background: linear-gradient(180deg,rgba(250, 248, 244, .95) 70%,rgba(250, 248, 244, 0)); }
html[data-theme="white"] .lv-level:hover { border-color: #f6f4f1; }
html[data-theme="white"] .lv-demo { color: #371c1b; }
html[data-theme="white"] .lv-demo { background: linear-gradient(90deg,#f6f1f1,#f6f1f1); }
html[data-theme="white"] #lvIntro { background: #fcfbf9; }
html[data-theme="white"] .lvi__vig { background: radial-gradient(120% 90% at 50% 50%,transparent 26%,rgba(244, 244, 244, .5) 76%,rgba(244, 244, 244, .92) 100%); }
html[data-theme="white"] .lvi__mark { background: linear-gradient(150deg,var(--lv-accent-2),#8a6a30); }
html[data-theme="white"] .lvi__t { color: #211d16; }
html[data-theme="white"] .lvi__skipgate { color: #9c968a; }
html[data-theme="white"] .lvi__line { color: #211d16; }
html[data-theme="white"] .lvi__skip { background: rgba(246, 244, 241, .6); }
html[data-theme="white"] .lvi__skip:hover { color: #211d16; }
html[data-theme="white"] .lvi__skip:hover { border-color: #8a6a30; }
html[data-theme="white"] .lvi__bar i { background: linear-gradient(90deg,#8a6a30,var(--lv-accent-2)); }
html[data-theme="white"] .lv-level--offscale .lv-level__rail::after { background: repeating-linear-gradient(115deg, rgba(250, 248, 244, 0.9) 0 2px, transparent 2px 4px); }
html[data-theme="white"] .lv-level.lv-level--near { border-color: rgba(154, 116, 52, 0.5); }
html[data-theme="white"] .lv-level--near .lv-level__price { color: #211d16; }
html[data-theme="white"] .lv-level.lv-level--spot { border-color: rgba(154, 116, 52, 0.34); }
html[data-theme="white"] .lv-level.lv-level--spot { background: linear-gradient(120deg, rgba(154, 116, 52, 0.10), rgba(247, 243, 236, 0.55)); }
html[data-theme="white"] .lv-group__rule::before, html[data-theme="white"] .lv-group__rule::after { background: linear-gradient(90deg, transparent, rgba(154, 116, 52, 0.45), transparent); }
html[data-theme="white"] .lv-chwrap { background: rgba(36, 31, 22, .02); }
html[data-theme="white"] .lv-ch__row.is-spot .lv-ch__s { color: #b08a45; }
html[data-theme="white"] .lv-ch__c { background: rgba(36, 31, 22, .04); }
html[data-theme="white"] .lv-ch__v.is-pos { color: #1d8a74; }
html[data-theme="white"] .lv-ch__v.is-neg { color: #c23a34; }
html[data-theme="white"] .lv-mt__track { background: rgba(36, 31, 22, .06); }
html[data-theme="white"] .lv-mt__fill { background: #9a7434; }
html[data-theme="white"] .lv-mt__fill.is-pos { background: #1d8a74; }
html[data-theme="white"] .lv-mt__fill.is-neg { background: #c23a34; }
html[data-theme="white"] .lv-mt__v { color: #241f16; }
html[data-theme="white"] .lv-mt__n.is-pos { color: #1d8a74; }
html[data-theme="white"] .lv-mt__n.is-neg { color: #c23a34; }
html[data-theme="white"] .lv-tc__g.is-pos { color: #1d8a74; }
html[data-theme="white"] .lv-tc__g.is-warn { color: #b08a45; }
html[data-theme="white"] .lv-oi__k { color: #241f16; }
html[data-theme="white"] .lv-oi__row.is-spot .lv-oi__k { color: #b08a45; }
html[data-theme="white"] .lv-oi__wall { color: #b08a45; }
html[data-theme="white"] .lv-oi__track { background: rgba(36, 31, 22, .05); }
html[data-theme="white"] .lv-oi__bar--call { background: #1d8a74; }
html[data-theme="white"] .lv-oi__bar--put { background: #c23a34; }
html[data-theme="white"] .lv-mx__track { background: rgba(36, 31, 22, .05); }
html[data-theme="white"] .lv-mx__seg--call { background: #1d8a74; }
html[data-theme="white"] .lv-mx__seg--put { background: #c23a34; }
html[data-theme="white"] .lv-mx__v { color: #241f16; }
html[data-theme="white"] .lv-body { background: radial-gradient(1200px 420px at 78% -8%, rgba(154, 116, 52, 0.06), transparent 60%),
    linear-gradient(160deg, var(--lv-bg-top) 0%, var(--lv-bg) 58%); }
html[data-theme="white"] .lv-top__nav { background: rgba(255, 255, 255, 0.6); }
html[data-theme="white"] .lv-top__navlink:hover { background: rgba(154, 116, 52, 0.10); }
html[data-theme="white"] .lv-symsel__btn:hover { border-color: rgba(154, 116, 52, 0.5); }
html[data-theme="white"] .lv-symsel__cur { color: #211d16; }
html[data-theme="white"] .lv-symsel__opt:hover { background: rgba(154, 116, 52, 0.10); }
html[data-theme="white"] .lv-symsel__opt[aria-current="true"] { background: rgba(154, 116, 52, 0.16); }
html[data-theme="white"] .lv-stat__v--call { color: #1b3729; }
html[data-theme="white"] .lv-stat__v--put { color: #371b1b; }
html[data-theme="white"] .lv-stat__v--flip { color: #372e1b; }
html[data-theme="white"] .lv-stat__v--vt { color: #372c1b; }
html[data-theme="white"] .lv-stat__v--mp { color: #1b2637; }
html[data-theme="white"] .lv-stat__v--pos { color: #1b3729; }
html[data-theme="white"] .lv-stat__v--neg { color: #371b1b; }
html[data-theme="white"] .lv-ghf__greeks button[aria-pressed="true"] { color: #211d16; }
html[data-theme="white"] .lv-ghf__span button[aria-pressed="true"] { color: #211d16; }
html[data-theme="white"] .lv-ghf__view button[aria-pressed="true"] { color: #211d16; }
html[data-theme="white"] .lv-ghf__tip { background: rgba(246, 244, 241, 0.93); }
html[data-theme="white"] .lv-ghf__tiprow b.is-pos { color: #1b372a; }
html[data-theme="white"] .lv-ghf__tiprow b.is-neg { color: #371c1b; }
html[data-theme="white"] .lv-tabs button[aria-selected="true"] { color: #211d16; }
html[data-theme="white"] .lv-nd__chip b.is-pos { color: #1b372a; }
html[data-theme="white"] .lv-nd__chip b.is-neg { color: #371c1b; }
html[data-theme="white"] .lv-nd__lg--net { color: #372d1b; }
html[data-theme="white"] .lv-nd__lg--call { color: #1b372a; }
html[data-theme="white"] .lv-nd__lg--put { color: #371c1b; }
html[data-theme="white"] .lv-nd__lg--vol { color: rgba(55, 45, 27, 0.55); }
html[data-theme="white"] .lv-structure-cta { background: radial-gradient(600px 200px at 100% 0%, rgba(154, 116, 52, 0.08), transparent 70%),
    linear-gradient(180deg, var(--lv-panel-strong), var(--lv-panel)); }
html[data-theme="white"] .lv-structure-cta:hover { border-color: rgba(154, 116, 52, 0.55); }
html[data-theme="white"] .lv-structure-cta__title { color: #211d16; }
html[data-theme="white"] .lv-ghf__play { background: #e9edf4; }
html[data-theme="white"] .lv-ghf__play { color: #b58a1f; }
html[data-theme="white"] .lv-ghf__play { border-color: #f1f2f6; }
html[data-theme="white"] .lv-ghf__play:hover { border-color: #b58a1f; }
html[data-theme="white"] .lv-map { background: rgba(36, 31, 22, .02); }
html[data-theme="white"] .lv-map { border-color: rgba(36, 31, 22, .1); }
html[data-theme="white"] .lv-map__preset { color: #241f16; }
html[data-theme="white"] .lv-map__preset { border-color: rgba(36, 31, 22, .12); }
html[data-theme="white"] .lv-map__preset span { color: #6c675d; }
html[data-theme="white"] .lv-map__preset[aria-pressed="true"] { border-color: rgba(165, 128, 60, .7); }
html[data-theme="white"] .lv-map__preset[aria-pressed="true"] { background: rgba(165, 128, 60, .1); }
html[data-theme="white"] .lv-map__k { color: #9a7434; }
html[data-theme="white"] .lv-map__row input { background: #faf8f4; }
html[data-theme="white"] .lv-map__row input { color: #241f16; }
html[data-theme="white"] .lv-map__row input { border-color: rgba(36, 31, 22, .14); }
html[data-theme="white"] .lv-map__row input:focus { border-color: #a5803c; }
html[data-theme="white"] .lv-map__status { color: #6c675d; }
html[data-theme="white"] .lv-map__status[data-tone="ok"] { color: #5d7a45; }
html[data-theme="white"] .lv-map__status[data-tone="error"] { color: #371f1b; }
html[data-theme="white"] .lv-map__status[data-tone="warn"] { color: #b08a45; }
html[data-theme="white"] .lv-map__focus { border-top-color: rgba(36, 31, 22, .08); }
html[data-theme="white"] .lv-map__slider { color: #807869; }
html[data-theme="white"] .lv-map__slider output { color: #241f16; }
/* ===== END GEX THEMES ===== */


















































/* 2026-09-03: header - below ~1180px the nav pill wrapped onto its own row and pushed
   "Account" to a THIRD row. Wrap deliberately: brand + theme + account stay on row 1,
   the nav takes row 2 and scrolls sideways instead of stacking. */
@media (max-width: 1180px) {
  .lv-top { flex-wrap: wrap; row-gap: 10px; }
  .lv-top__nav { order: 9; flex: 1 1 100%; overflow-x: auto; scrollbar-width: thin; }
  .lv-top__mid { order: 2; }
}

/* ── One price ladder (2026-09-04) ─────────────────────────────────────────── */
.lv-ladder { margin: 0 0 22px; padding: 14px 16px 18px; border: 1px solid var(--lv-line); border-radius: 12px; background: rgba(245,241,233,.02); }
.lv-ladder[hidden] { display: none; }
.lv-ladder__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lv-ladder__title { border-bottom: 0; padding-bottom: 0; margin: 0; }
.lv-ladder__legend { font-size: 11px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv-ladder__rail { position: relative; height: 520px; margin: 6px 0 0 14px; border-left: 2px solid var(--lv-line); }
.lv-ladder__band { position: absolute; left: -2px; right: 0; border-radius: 4px; pointer-events: none; }
.lv-ladder__band--em { background: rgba(224,199,154,.06); border-top: 1px dashed rgba(224,199,154,.35); border-bottom: 1px dashed rgba(224,199,154,.35); }
.lv-ladder__band--zg { background: rgba(94,214,196,.10); border-top: 1px solid rgba(94,214,196,.45); border-bottom: 1px solid rgba(94,214,196,.45); }
.lv-ladder__spot { position: absolute; left: -2px; right: 0; height: 0; border-top: 2px solid #e0c79a; z-index: 2; }
.lv-ladder__spottag { position: absolute; right: 0; top: -11px; font-size: 11px; font-weight: 800; color: #1a140c; background: #e0c79a; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.lv-ladder__row { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); font-size: 12.5px; white-space: nowrap; }
.lv-ladder__dot { width: 10px; height: 10px; border-radius: 50%; margin-left: -6px; background: var(--lv-muted); box-shadow: 0 0 0 2px var(--lv-bg); flex: none; }
.lv-ladder__tags { font-weight: 800; letter-spacing: .04em; font-size: 11.5px; min-width: 58px; }
.lv-ladder__px { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lv-text); }
.lv-ladder__d { font-size: 11px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv-ladder__row--call .lv-ladder__dot, .lv-ladder__row--call .lv-ladder__tags { background-color: var(--lv-call); color: var(--lv-call); }
.lv-ladder__row--put .lv-ladder__dot, .lv-ladder__row--put .lv-ladder__tags { background-color: var(--lv-put); color: var(--lv-put); }
.lv-ladder__row--gamma .lv-ladder__dot, .lv-ladder__row--gamma .lv-ladder__tags { background-color: var(--lv-gamma); color: var(--lv-gamma); }
.lv-ladder__row--zero .lv-ladder__dot, .lv-ladder__row--zero .lv-ladder__tags { background-color: var(--lv-zero); color: var(--lv-zero); }
.lv-ladder__row--focus .lv-ladder__dot, .lv-ladder__row--focus .lv-ladder__tags { background-color: var(--lv-focus); color: var(--lv-focus); }
.lv-ladder__row--vega .lv-ladder__dot, .lv-ladder__row--vega .lv-ladder__tags { background-color: var(--lv-vega); color: var(--lv-vega); }
.lv-ladder__row--zg .lv-ladder__dot, .lv-ladder__row--zg .lv-ladder__tags { background-color: #5ed6c4; color: #5ed6c4; }
.lv-ladder__row--mp .lv-ladder__dot, .lv-ladder__row--mp .lv-ladder__tags { background-color: #b4aac8; color: #b4aac8; }
.lv-ladder__tags { background-color: transparent !important; }
.lv-ladder__row.is-off { opacity: .55; }
.lv-ladder__row.is-off .lv-ladder__dot { border-radius: 2px; }
/* Zero-gamma card family + stats cell */
.lv-level--zg::before { background: #5ed6c4; }
.lv-level--zg .lv-level__name { color: #5ed6c4; }
.lv-stat__v--zg { color: #5ed6c4; }
@media (max-width: 640px) { .lv-ladder__rail { height: 420px; } .lv-ladder__d { display: none; } }
/* /levels: chart and ladder side by side on desktop, the card families full width below. */
@media (min-width: 1080px) {
  .lv-levelzone { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr); align-items: start; }
  .lv-levelzone > .lv-levels { grid-column: 1 / -1; }
  .lv-levelzone > .lv-ladder { margin: 0; }
}

/* Ladder v2 (2026-09-04): session candles inside the rail, one shared price scale. */
.lv-ladder__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; align-items: stretch; }
.lv-ladder__chart { position: relative; height: 520px; border: 1px solid var(--lv-line); border-right: 0; border-radius: 10px 0 0 10px; background: var(--lv-bg); overflow: hidden; }
.lv-ladder__chart canvas { display: block; width: 100%; height: 100%; }
.lv-ladder__body .lv-ladder__rail { margin: 0; border-left: 2px solid var(--lv-line); }
.lv-ladder__body .lv-ladder__spot { left: -2px; }
.lv-ladder__body .lv-ladder__spottag { right: auto; left: 8px; top: -22px; }
@media (max-width: 760px) {
  .lv-ladder__body { grid-template-columns: minmax(0, 1fr) 190px; }
  .lv-ladder__chart, .lv-ladder__rail { height: 420px; }
  .lv-ladder__d { display: none; }
}
/* Ladder v2 — narrow screens: stack the chart above the rail instead of squeezing it to nothing. */
@media (max-width: 600px) {
  .lv-ladder__body { grid-template-columns: 1fr; gap: 8px; }
  .lv-ladder__chart { height: 260px; border-right: 1px solid var(--lv-line); border-radius: 10px; }
  .lv-ladder__body .lv-ladder__rail { height: 400px; }
}

/* Mobile pass (2026-09-04): the greek field kept its 2:1 ratio from min-height (480px wide in a
   343px column -> level tags cut off), the header nav and the structure tabs were hidden-scroll rows. */
@media (max-width: 700px) {
  .lv-ghf__heat { width: 100%; justify-self: stretch; aspect-ratio: auto; height: 250px; min-height: 0; }
}
@media (max-width: 720px) {
  .lv-top__nav { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 2px; }
  .lv-top__navlink { min-height: 34px; padding: 0 10px; font-size: 13px; }
}
@media (max-width: 640px) {
  .lv-tabs { flex-wrap: wrap; overflow: visible; }
  .lv-tabs button { padding: 9px 10px; font-size: 12.5px; flex: 1 1 auto; text-align: center; }
}
/* Chart attribution (2026-09-04): the library's own logo injected a <style> the CSP blocks, so the
   logo is off and the required TradingView notice is plain text under the chart. */
.lv-chart__attr { font-size: 10.5px; color: var(--lv-muted); text-align: right; margin: 6px 0 0; }
.lv-chart__attr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.lv-sub--cta { margin-top: 6px; }
.lv-structure-cta--inline { display: inline-block; font-size: 14px; font-weight: 700; color: #6fb3c9; text-decoration: none; border: 1px solid rgba(111,179,201,.45); border-radius: 999px; padding: 6px 14px; }
.lv-structure-cta--inline:hover { background: rgba(111,179,201,.12); }

/* Structures on the map: one row each, the legs shown as chips. */
.lv-leg { display: inline-block; font-variant-numeric: tabular-nums; font-size: 11px; padding: 1px 6px; margin: 2px 2px 0 0; border-radius: 999px; border: 1px solid currentColor; opacity: .85; }
.lv-leg.is-buy { color: var(--lv-pos, #4c9a72); }
.lv-leg.is-sell { color: var(--lv-neg, #b45c5c); }
.lv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lv-scroll > table { min-width: 640px; }
.lv-note--tiny { font-size: 11px; opacity: .7; }

/* Lit chart (07/09/2026). The ground gets a vignette so the panel reads as a box
   with walls rather than a flat rectangle, and the halo layer sits behind the
   library's canvas so the crisp level line stays on top of its own glow. */
.lv-chart {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.045), transparent 62%),
    radial-gradient(140% 120% at 50% 110%, rgba(200,168,120,.05), transparent 68%),
    rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -18px rgba(0,0,0,.85);
}
.lv-chart__glow { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.lv-chart > :not(.lv-chart__glow) { position: relative; z-index: 1; }
html[data-theme="white"] .lv-chart {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(36,31,22,.03), transparent 62%),
    rgba(36, 31, 22, .02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px -20px rgba(60,45,20,.4);
}

/* Lift: one shadow, one inset highlight, one hover travel, inherited by every
   panel on the levels and structure pages. */
.lv-pfwrap, .lv-greeks, .lv-topo-wrap, .lv-corr, .lv-nd, .lv-regime, .lv-ghf {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px -16px rgba(0,0,0,.8);
}
html[data-theme="white"] .lv-pfwrap, html[data-theme="white"] .lv-greeks,
html[data-theme="white"] .lv-topo-wrap, html[data-theme="white"] .lv-corr,
html[data-theme="white"] .lv-nd, html[data-theme="white"] .lv-regime, html[data-theme="white"] .lv-ghf {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px -18px rgba(60,45,20,.35);
}
.lv-leg { transition: transform .16s ease, background .16s ease; }
.lv-leg:hover { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .lv-leg { transition: none; } }