/* btc15m — the QuantBoris skin: deep ink, greys, one mint accent.
 *
 * Rules the whole sheet follows, so the screen stays readable at a glance:
 *   1. One hero number per region. Everything else is support and is sized down.
 *   2. Separation by space and tone, not by boxes. Exactly one hairline weight exists.
 *   3. MINT is the house colour and does the work; everything structural is grey.
 *      Four other hues carry meaning and nothing else is tinted: DOWN (a muted clay
 *      rose, deliberately quieter than the mint so a falling market does not scream),
 *      TARGET, MODEL, INDEX. Anything the app is unsure about renders in --dim.
 *   4. Nothing is fully saturated. Pure #f00/#0f0 on pure black vibrates; every accent
 *      here sits a few steps in from the edge of the gamut and the page reads calm at
 *      the fifteen-minute stare this screen is built for.
 *   5. Labels are small, wide-tracked and grey. Values are mono and tight.
 *   6. Four regions, in a fixed order: header, hero, chart+rail, tiles+footer. Anything
 *      that does not earn one of those does not go on the page.
 */

:root {
  --bg:      #05080a;
  --surface: #080c0f;
  --hair:    rgba(190, 215, 210, 0.055);
  --hair-2:  rgba(190, 215, 210, 0.105);

  --text:  #e6eeee;
  --mid:   #7f8d90;
  --dim:   #49565a;

  --up:     #3fd79b;   /* the house mint */
  --down:   #d1687c;   /* muted clay rose — quieter than the mint, on purpose */
  --target: #d9a95e;
  --model:  #8b83c8;
  --index:  #d7e4e8;

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

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; }

.up { color: var(--up); } .down { color: var(--down); }
.muted { color: var(--mid); } .dimv { color: var(--dim); }

.lab {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim);
}

/* ── header ─────────────────────────────────────────────────────────────── */

header {
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 46px;
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: baseline; gap: 8px; letter-spacing: -0.4px; }
.brand b { font-size: 14px; font-weight: 600; }
.brand span { font-family: var(--mono); font-size: 9px; letter-spacing: 1.6px; color: var(--dim); }

#ticker { font-family: var(--mono); font-size: 11px; color: var(--mid); letter-spacing: 0.2px; }
#window-label { font-family: var(--mono); font-size: 11px; color: var(--dim); }

.sep { width: 1px; height: 16px; background: var(--hair-2); }

.head-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.dots { display: flex; gap: 5px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.dot.ok { background: var(--up); } .dot.warn { background: var(--target); } .dot.bad { background: var(--down); }

.ghost {
  background: none; border: 0; cursor: pointer; padding: 4px 2px; text-decoration: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--dim);
}
.ghost:hover { color: var(--text); }
.ghost.link { color: var(--up); opacity: .8; }
.ghost.link:hover { opacity: 1; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 14px;
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--hair);
}
.hero > div { padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--hair); }
.hero > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero .v { font-family: var(--mono); font-size: 27px; letter-spacing: -1.4px; line-height: 1.16; margin-top: 3px; }
.hero .s { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 2px; }

.hero .clock .v { font-size: 34px; }
.hero .delta .v { font-size: 38px; }
.hero .clock.urgent .v { color: var(--target); }
.hero .clock.final .v { color: var(--down); animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }

.hero .odds { display: flex; gap: 22px; margin-left: auto; padding-right: 0; border-right: 0; }
.hero .odds .side .v { font-size: 34px; }
.hero .odds .side.on .v { text-shadow: 0 0 26px currentColor; }
@media (max-width: 1320px) { .hero .odds { margin-left: 0; } }

/* the one number people will over-read, so it carries a visible question mark */
.qm {
  display: inline-block; width: 11px; height: 11px; line-height: 10px; text-align: center;
  border: 1px solid var(--hair-2); border-radius: 50%; color: var(--dim);
  font-size: 8px; cursor: pointer; margin-left: 3px; vertical-align: 1px;
}
.qm:hover { color: var(--text); border-color: var(--mid); }

/* ── main ───────────────────────────────────────────────────────────────── */

.main { display: grid; grid-template-columns: minmax(0, 1fr) 342px; min-height: 0; }
.rail {
  border-left: 1px solid var(--hair);
  display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0;
}
.rail > section { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rail > section + section { border-top: 1px solid var(--hair); }

.pane { position: relative; min-height: 0; }
.pane > canvas { display: block; width: 100%; height: 100%; }
.pane .hd {
  position: absolute; top: 10px; left: 18px; right: 18px; z-index: 2;
  display: flex; justify-content: space-between; pointer-events: none;
}
.pane .hd .note { font-family: var(--mono); font-size: 9px; letter-spacing: .7px; color: var(--dim); }

.sec-hd { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 6px; }

/* ── ladders ────────────────────────────────────────────────────────────── */

.rows { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 5px; }

.r {
  position: relative; display: grid; align-items: center;
  height: 16px; padding: 0 14px; font-family: var(--mono); font-size: 10.5px;
}
.r .bar { position: absolute; top: 1px; bottom: 1px; right: 14px; border-radius: 1px; }
.r > span { position: relative; z-index: 1; }

.mark {
  display: flex; justify-content: space-between; padding: 4px 14px; margin: 3px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 10px; color: var(--mid);
}
.foot {
  display: flex; justify-content: space-between; padding: 6px 14px 0; margin-top: auto;
  border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 9.5px; color: var(--dim);
}

.book .r { grid-template-columns: 52px 1fr 62px; }
.book .r .sz { text-align: right; color: var(--mid); }
.book .r.a .px { color: var(--down); } .book .r.a .bar { background: rgba(209,104,124,.13); }
.book .r.b .px { color: var(--up); }   .book .r.b .bar { background: rgba(63,215,155,.12); }
.book .r.best { background: rgba(220,240,235,.035); }

/* the spot DOM: price, one column per exchange, then total and cumulative */
.dom .r { grid-template-columns: 50px 27px 27px 27px 27px 42px 44px; font-size: 9.5px; gap: 2px; }
.dom .r > span:not(.px) { text-align: right; }
.dom .r .v0 { color: var(--dim); }                 /* nothing resting on that venue */
.dom .r .tot { color: var(--text); }
.dom .r .cum { color: var(--mid); }
.dom .r.a .px { color: var(--down); } .dom .r.a .bar { background: rgba(209,104,124,.13); }
.dom .r.b .px { color: var(--up); }   .dom .r.b .bar { background: rgba(63,215,155,.12); }
.dom .r.wall .px { text-shadow: 0 0 10px currentColor; }
.dom .r.wall .tot { font-weight: 500; }
.dom .dom-head {
  color: var(--dim); font-size: 8.5px; letter-spacing: .8px; height: 15px;
  border-bottom: 1px solid var(--hair); margin-bottom: 3px;
}

/* ── metrics ────────────────────────────────────────────────────────────── */

.metrics { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--hair); }
.m { padding: 9px 16px 10px; border-right: 1px solid var(--hair); min-width: 0; }
.m:last-child { border-right: 0; }
.m .top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.m .top .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .9px; color: var(--dim); }
.m .v { font-family: var(--mono); font-size: 17px; letter-spacing: -.7px; margin-top: 3px; line-height: 1.1; }
.m .s { font-family: var(--mono); font-size: 9.5px; color: var(--dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gauge { height: 2px; margin-top: 6px; background: rgba(220,240,235,.06); position: relative; }
.gauge > i { position: absolute; top: 0; bottom: 0; transition: left .2s, width .2s; }
.gauge.c::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--hair-2); }

/* ── footer ─────────────────────────────────────────────────────────────── */

footer {
  display: flex; align-items: center; gap: 16px;
  padding: 7px 20px 9px; border-top: 1px solid var(--hair);
}
.streak { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.streak .v { font-family: var(--mono); font-size: 13px; }
.hbars { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 26px; min-width: 120px; }
.hb { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.hb > i { display: block; border-radius: 1px; }
.hb.y > i { background: var(--up); opacity: .75; }
.hb.n > i { background: var(--down); opacity: .75; }
.hb.now > i { opacity: 1; }
.fine { font-size: 9.5px; line-height: 1.45; color: var(--dim); max-width: 430px; text-align: right; }

@media (max-width: 1280px) { .fine { display: none; } }
@media (max-width: 1120px) { .main { grid-template-columns: minmax(0,1fr); } .rail { display: none; } }

/* ── overlay ────────────────────────────────────────────────────────────── */

.overlay { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(0,0,0,.9); padding: 4vh 4vw; overflow: auto; }
.overlay.on { display: block; }
.sheet { max-width: 880px; margin: 0 auto; padding: 30px 34px 36px; background: var(--surface);
  border: 1px solid var(--hair-2); border-radius: 4px; line-height: 1.65; }
.sheet h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.4px; font-weight: 600; }
.sheet h3 { margin: 26px 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; color: var(--target); }
.sheet p { color: #b9c3d3; font-size: 13px; margin: 8px 0; }
.sheet code { font-family: var(--mono); font-size: 12px; color: var(--index); }
.sheet table { border-collapse: collapse; width: 100%; margin-top: 6px; }
.sheet td { padding: 5px 12px 5px 0; vertical-align: top; font-size: 12.5px; color: #b9c3d3; border-top: 1px solid var(--hair); }
.sheet td:first-child { font-family: var(--mono); font-size: 11px; color: var(--index); white-space: nowrap; width: 140px; letter-spacing: .3px; }
.sheet .foot2 { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--dim); font-size: 11px; }

.banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 30; display: none;
  padding: 6px 14px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px;
  background: rgba(209,104,124,.11); border: 1px solid rgba(209,104,124,.3); color: #f0cdd4;
}
.banner.on { display: block; }

/* ── rail tabs + the fair ladder ─────────────────────────────────────────── */

.tabs, .steps { display: flex; gap: 3px; }
.tab {
  background: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  padding: 2px 6px; color: var(--dim);
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-color: var(--hair-2); background: rgba(220,240,235,.04); }

.pane-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pane-body[hidden] { display: none; }

/* one column per time-to-close; the first is "now" and is the one that is real */
.lad-head, .lad-row {
  display: grid; grid-template-columns: 58px repeat(var(--cols, 5), 1fr);
  gap: 2px; align-items: center; padding: 0 12px;
  font-family: var(--mono); font-size: 9.5px; height: 16px;
}
.lad-head { color: var(--dim); font-size: 8.5px; letter-spacing: .8px;
  border-bottom: 1px solid var(--hair); height: 15px; margin-bottom: 2px; }
.lad-head span:not(:first-child), .lad-row span:not(.lvl) { text-align: right; }
.lad-head .now, .lad-row .c0 { color: var(--text); }
.lad-row .lvl { color: var(--mid); }
.lad-row .c { padding-right: 3px; border-radius: 1px; }
.lad-row.tgt { background: rgba(217,169,94,.1); }
.lad-row.tgt .lvl { color: var(--target); }
.lad-row.spot .lvl { color: var(--index); text-shadow: 0 0 10px currentColor; }
.lad-row.spot { background: rgba(220,240,235,.05); }

/* ── chart toolbar + indicator popover ───────────────────────────────────── */

/* the pane becomes a column so the toolbar has its own row and the canvas takes
   whatever is left, instead of the header floating over the drawing */
.pane { display: flex; flex-direction: column; }
.pane > canvas { flex: 1; min-height: 0; }
.pane .hd { position: static; padding: 9px 18px 0; }

.toolbar { display: flex; align-items: center; gap: 16px; padding: 6px 18px 5px; position: relative; }
.toolbar .tabs { gap: 2px; }
#tf-tabs .tab { min-width: 34px; text-align: center; }

.popover {
  position: absolute; top: 28px; right: 0; z-index: 20; width: 232px;
  background: var(--surface); border: 1px solid var(--hair-2); border-radius: 4px;
  padding: 8px 0 6px; box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
.popover[hidden] { display: none; }
.ohd { font-family: var(--mono); font-size: 8px; letter-spacing: 1.3px; color: var(--dim);
  padding: 8px 12px 4px; }
.ohd:first-child { padding-top: 2px; }
.orow { display: flex; align-items: center; gap: 9px; padding: 4px 12px; cursor: pointer; }
.orow:hover { background: rgba(220,240,235,.04); }
.orow .ot { font-size: 11.5px; color: var(--mid); }
.orow .on2 { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--dim); }
.orow.on .ot { color: var(--text); }
.sw { width: 22px; height: 12px; border-radius: 7px; background: rgba(220,240,235,.1);
  position: relative; flex: none; transition: background .15s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--dim); transition: left .15s, background .15s; }
.orow.on .sw { background: rgba(139,131,200,.55); }
.orow.on .sw::after { left: 12px; background: #fff; }
.ofoot { font-size: 9.5px; line-height: 1.45; color: var(--dim); padding: 8px 12px 2px;
  margin-top: 4px; border-top: 1px solid var(--hair); }


/* ── tug of war strip ─────────────────────────────────────────────────────── */

.tug {
  display: grid; grid-template-columns: 120px minmax(260px, 1fr) 150px 200px minmax(200px, 1.1fr);
  align-items: center; gap: 22px; padding: 9px 20px; border-bottom: 1px solid var(--hair);
}
.tug-v { font-family: var(--mono); font-size: 22px; letter-spacing: -1px; margin-top: 2px; }
.tug-bar { display: flex; align-items: center; gap: 10px; }
.tug-side { font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px; }
.tug-side.dn { color: var(--down); } .tug-side.up { color: var(--up); }
.tug-track { position: relative; flex: 1; height: 10px; background: rgba(220,240,235,.05); border-radius: 1px; }
.tug-track i { position: absolute; top: 0; bottom: 0; }
.tug-mid { left: 50%; width: 1px; background: var(--hair-2); top: -3px !important; bottom: -3px !important; }
.tug-fill { transition: left .25s, width .25s, background .25s; opacity: .55; }
.tug-needle { width: 2px; background: var(--text); top: -4px !important; bottom: -4px !important; transition: left .25s;
  box-shadow: 0 0 8px currentColor; }
/* the zones where the research rules act: |tug| >= 0.5, and >= 0.85 for the stage-2 rule */
.tug-track::before, .tug-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 25%; }
.tug-track::before { left: 0; border-right: 1px dashed rgba(209,104,124,.35); }
.tug-track::after { right: 0; border-left: 1px dashed rgba(63,215,155,.35); }
.tug-parts { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; }
.tug-parts b { font-weight: 500; }
#tug-spark { width: 200px; height: 34px; }
.tug-note { font-size: 10px; line-height: 1.4; color: var(--dim); }

/* ── setups scoreboard ───────────────────────────────────────────────────── */

.su { padding: 7px 14px 8px; border-bottom: 1px solid var(--hair); font-family: var(--mono); }
.su .t1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.su .nm { font-size: 11px; color: var(--mid); }
.su .st { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.su.fire { background: rgba(217,169,94,.07); }
.su.fire .nm { color: var(--text); }
.su .st.up { color: var(--up); } .su .st.down { color: var(--down); }
.su .t2 { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10px; color: var(--dim); }
.su .ev { color: var(--text); }
.su .vd { letter-spacing: 1px; }
.su .vd.LOSES { color: var(--down); } .su .vd.EDGE { color: var(--up); }
.su .why { font-size: 9.5px; color: var(--target); margin-top: 2px; }
.setups-foot { line-height: 1.4; }

/* ═════════════════════════════════════════════════════════════════════════════
   TERM — the hacker theme. Default. Phosphor monochrome, everything monospace, thin
   terminal boxes, scanlines you only notice if you look for them. The semantic colours
   are unchanged (mint up, quiet clay down, amber target), only re-tuned for the green ink.
   ═════════════════════════════════════════════════════════════════════════════ */

html[data-theme="term"] {
  --bg:      #020604;
  --surface: #04100a;
  --hair:    rgba(110, 255, 170, 0.09);
  --hair-2:  rgba(110, 255, 170, 0.18);
  --text:    #c9f5da;
  --mid:     #6fae88;
  --dim:     #3c6b52;
  --up:      #5cf2a3;
  --down:    #e07d8c;
  --target:  #e8b45a;
  --model:   #6fd3e8;
  --index:   #e6fff0;
  --sans:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
html[data-theme="term"] body { background: radial-gradient(ellipse at 50% 0%, #061a10 0%, var(--bg) 60%); }
/* scanlines + vignette, above everything, never catching the mouse */
html[data-theme="term"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
}
html[data-theme="term"] #app { background: transparent; }
html[data-theme="term"] .lab { color: var(--mid); }
html[data-theme="term"] .lab::before { content: "["; color: var(--dim); margin-right: 3px; }
html[data-theme="term"] .lab::after { content: "]"; color: var(--dim); margin-left: 3px; }
html[data-theme="term"] .tab .lab::before, html[data-theme="term"] .tab .lab::after { content: none; }
html[data-theme="term"] .hero .v, html[data-theme="term"] .tug-v,
html[data-theme="term"] .m .v { text-shadow: 0 0 14px rgba(110,255,170,.18); }
html[data-theme="term"] .brand { gap: 6px; align-items: baseline; }
html[data-theme="term"] .brand .prompt { font-family: var(--mono); font-size: 11px; color: var(--up); opacity: .8; }
html[data-theme="term"] .brand b { color: var(--text); font-weight: 500; }
html[data-theme="term"] .cursor { font-style: normal; color: var(--up); animation: blink 1.05s steps(1) infinite; }
html[data-theme="term"] .tab.on { border-color: var(--up); color: var(--up); background: rgba(92,242,163,.06); }
html[data-theme="term"] .rail > section, html[data-theme="term"] .pane { position: relative; }
/* boxed sections, like a tiling terminal */
html[data-theme="term"] .hero, html[data-theme="term"] .tug, html[data-theme="term"] .metrics,
html[data-theme="term"] header, html[data-theme="term"] footer { border-color: var(--hair-2); }
html[data-theme="term"] .rail { border-left-color: var(--hair-2); }
html[data-theme="term"] .popover, html[data-theme="term"] .sheet { background: #031008; border-color: var(--hair-2); }
html[data-theme="term"] .sw { border-radius: 2px; }
html[data-theme="term"] .sw::after { border-radius: 1px; }
html[data-theme="term"] .orow.on .sw { background: rgba(92,242,163,.45); }
html[data-theme="term"] .tug-needle { color: var(--up); }
:root:not([data-theme="term"]) .brand .prompt, :root:not([data-theme="term"]) .cursor { display: none; }

@media (max-width: 1280px) { .tug { grid-template-columns: 110px 1fr 140px; } #tug-spark, .tug-note { display: none; } }

#replay-nav[hidden] { display: none; }

/* ── plain-English line (EASY mode) ──────────────────────────────────────── */
.plain { display: none; padding: 9px 20px; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.5; color: var(--text); }
.plain b { font-weight: 600; }
html[data-mode="easy"] .plain { display: block; }


/* EASY hides the dense panels; PRO shows everything */
html[data-mode="easy"] .metrics, html[data-mode="easy"] .rail > section.book { display: none; }
html[data-mode="easy"] .rail { grid-template-rows: minmax(0, 1fr); }
html[data-mode="easy"] .hero .v { font-size: 30px; }

/* ── range panel ─────────────────────────────────────────────────────────── */
.rp { padding: 8px 14px 10px; border-bottom: 1px solid var(--hair); }
.rp-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; }
.rp-bar { position: relative; height: 8px; margin: 9px 0 5px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(63,215,155,.35), rgba(220,240,235,.06) 50%, rgba(209,104,124,.35)); }
.rp-dot { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--text); box-shadow: 0 0 8px var(--text); transition: left .3s; }
.rp-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--mid); }
.dom .r.xm-head, .dom .r.xm { grid-template-columns: 74px 64px 50px 38px 44px 44px; gap: 2px; }
.xm-head { color: var(--dim); font-size: 8.5px; letter-spacing: .6px; height: 15px; border-bottom: 1px solid var(--hair); margin: 4px 0 2px; }
.xm-head span:not(:first-child), .xm span:not(:first-child) { text-align: right; }
.xm { font-size: 10px; height: 19px; }
.xm .nm { color: var(--mid); white-space: nowrap; overflow: hidden; }
.xm.res .nm { color: var(--down); } .xm.sup .nm { color: var(--up); } .xm.tgt .nm { color: var(--target); } .xm.vw .nm { color: var(--model); }
.xm .hit { color: var(--dim); }
.xm .hit.hot { color: var(--text); }

/* ── ledger ──────────────────────────────────────────────────────────────── */
.lg-top { padding: 9px 14px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; line-height: 1.55; }
.lg-top .big { font-size: 18px; }
.lg-h { padding: 8px 14px 4px; }
.lgr { padding: 4px 14px; font-family: var(--mono); font-size: 10px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--hair); }
.lgr .w { color: var(--up); } .lgr .l { color: var(--down); } .lgr .o { color: var(--dim); }

/* ── setups stats switch ─────────────────────────────────────────────────── */
.su-ctl { display: flex; justify-content: flex-end; padding: 6px 14px 0; }

/* ── alert toasts ────────────────────────────────────────────────────────── */
.toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 360px; max-width: 620px; padding: 10px 16px; border-radius: 3px;
  font-family: var(--mono); font-size: 13px; background: rgba(4,16,10,.96); border: 1px solid var(--target);
  box-shadow: 0 0 24px rgba(232,180,90,.25); animation: toastin .25s ease-out; }
.toast.up { border-color: var(--up); box-shadow: 0 0 24px rgba(92,242,163,.25); }
.toast.down { border-color: var(--down); box-shadow: 0 0 24px rgba(224,125,140,.25); }
.toast .tl { font-size: 9px; letter-spacing: 1.4px; color: var(--mid); margin-bottom: 3px; }
@keyframes toastin { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── BOOKS view: every BRTI venue's own book, side by side ──────────────── */
.books { position: absolute; inset: 70px 10px 10px 10px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; overflow: hidden; }
.books[hidden] { display: none; }
.bk { border: 1px solid var(--hair-2); border-radius: 2px; display: flex; flex-direction: column; min-width: 0; font-family: var(--mono); }
.bk-h { padding: 6px 8px; border-bottom: 1px solid var(--hair); }
.bk-h b { font-size: 12px; }
.bk-h .m { font-size: 10px; color: var(--mid); margin-top: 2px; }
.bk-l { position: relative; display: flex; justify-content: space-between; padding: 0 8px; font-size: 10px; height: 16px; align-items: center; }
.bk-l i { position: absolute; top: 1px; bottom: 1px; right: 0; }
.bk-l span { position: relative; z-index: 1; }
.bk-l.a span:first-child { color: var(--down); } .bk-l.a i { background: rgba(209,104,124,.16); }
.bk-l.b span:first-child { color: var(--up); }   .bk-l.b i { background: rgba(63,215,155,.15); }
.bk-l.wall span { font-weight: 600; color: var(--text) !important; }
.bk-mid { text-align: center; font-size: 9.5px; color: var(--dim); padding: 3px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.bk-f { margin-top: auto; padding: 5px 8px; border-top: 1px solid var(--hair); font-size: 9.5px; color: var(--mid); }
.bk.off { opacity: .4; }

/* ── spot DOM with seven venues: a stacked venue-mix bar instead of 7 columns ── */
.dom #pane-dom .r { grid-template-columns: 54px minmax(0, 1fr) 46px 46px; }
.mix { display: flex; height: 8px; border-radius: 1px; overflow: hidden; background: rgba(220,240,235,.04); }
.mix i { display: block; height: 100%; }
.mixkey { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 6px; font-family: var(--mono); font-size: 8.5px; color: var(--mid); }
.mixkey i { display: inline-block; width: 7px; height: 7px; margin-right: 3px; vertical-align: 0; }


/* ── LITE: one simple screen ─────────────────────────────────────────────── */
#lite { display: none; }
html[data-mode="lite"] #lite { display: flex; flex-direction: column; gap: 12px; min-height: 100vh; padding: 0 20px 16px; max-width: 1280px; margin: 0 auto; }
html[data-mode="lite"] #app { display: none; }
html[data-public="1"] .pub-hide { display: none !important; }

.cta { display: inline-block; padding: 8px 16px; border-radius: 3px; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .8px; color: #04120b; background: var(--up); text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 18px rgba(92,242,163,.45); animation: ctaglow 2.6s ease-in-out infinite; }
.cta:hover { filter: brightness(1.12); }
@keyframes ctaglow { 50% { box-shadow: 0 0 30px rgba(92,242,163,.75); } }

.lt-top { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.lt-win { font-family: var(--mono); font-size: 12px; color: var(--mid); }
.lt-btns { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lt-sub { font-size: 12px; color: var(--mid); line-height: 1.45; }
.lt-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lt-card, .lt-signal, .lt-range, .lt-chart, .lt-record { border: 1px solid var(--hair-2); border-radius: 3px; padding: 12px 16px; background: rgba(220,240,235,.015); }
.lt-big { font-family: var(--mono); font-size: 38px; font-weight: 500; line-height: 1.15; margin: 4px 0 2px; }

.lt-signal { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 20px; align-items: center; }
.lt-enter { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--hair-2); }
.lt-enter b { font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--mid); }
.lt-enter.on-up { border-color: var(--up); box-shadow: 0 0 26px rgba(92,242,163,.35); }
.lt-enter.on-up b { color: var(--up); }
.lt-enter.on-down { border-color: var(--down); box-shadow: 0 0 26px rgba(224,125,140,.35); }
.lt-enter.on-down b { color: var(--down); }
.lt-tug-h { display: flex; justify-content: space-between; align-items: baseline; }
.lt-tug-h b { font-family: var(--mono); font-size: 22px; }
.lt-tug-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-family: var(--mono); font-size: 11px; }
.lt-track { position: relative; flex: 1; height: 14px; background: rgba(220,240,235,.05); border-radius: 2px; }
.lt-track i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.lt-track em { position: absolute; top: -4px; width: 3px; height: 22px; background: var(--text); }
.lt-track u { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--hair-2); }

.lt-range-h { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.lt-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.lt-lv { border: 1px solid var(--hair-2); border-left-width: 3px; border-radius: 2px; padding: 9px 12px; font-family: var(--mono); }
.lt-lv.res { border-left-color: var(--down); } .lt-lv.sup { border-left-color: var(--up); } .lt-lv.vw { border-left-color: var(--model); }
.lt-lv .nm { font-size: 11px; letter-spacing: 1px; color: var(--mid); }
.lt-lv .px { font-size: 20px; margin: 2px 0; }
.lt-lv .play { font-size: 15px; margin-top: 4px; }
.lt-lv .meta { font-size: 11px; color: var(--mid); margin-top: 3px; }
.lt-lv.near { box-shadow: 0 0 18px rgba(232,180,90,.25); border-color: var(--target); }
.lt-pos { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--mono); font-size: 11px; }
.lt-pos span:first-child { color: var(--up); } .lt-pos span:last-child { color: var(--down); }
.lt-pos-bar { position: relative; flex: 1; height: 10px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(63,215,155,.4), rgba(220,240,235,.06) 50%, rgba(209,104,124,.4)); }
.lt-pos-bar i { position: absolute; top: -5px; width: 4px; height: 20px; background: var(--text); box-shadow: 0 0 10px var(--text); transition: left .4s; }
.lt-pos-txt { margin-top: 6px; }

.lt-chart { height: 340px; padding: 6px; }
.lt-chart canvas { width: 100%; height: 100%; display: block; }
.lt-record { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lt-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.lt-dots i { width: 12px; height: 12px; border-radius: 2px; background: var(--hair-2); }
.lt-dots i.w { background: var(--up); } .lt-dots i.l { background: var(--down); }
.lt-foot { font-size: 11px; color: var(--dim); text-align: center; padding: 4px 0; }

@media (max-width: 820px) {
  .lt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-signal { grid-template-columns: 1fr; }
  .lt-big { font-size: 28px; }
  html[data-mode="lite"] #lite { padding: 0 16px 16px; }
  .lt-chart { height: 260px; }
}
/* the LITE header is a plain wrapping row, not the fixed-height main header */
#lite header.lt-top { height: auto; min-height: 0; display: flex; grid-template-columns: none; padding: 12px 0; position: static; }
@media (max-width: 820px) { .lt-btns { margin-left: 0; width: 100%; } .lt-btns .cta { flex: 1; text-align: center; } }

html[data-static="1"] .static-hide { display: none !important; }

/* ── LITE v2: the public landing view ─────────────────────────────────────── */
html[data-mode="lite"] body { background:
  radial-gradient(900px 500px at 12% -10%, rgba(63,215,155,.10), transparent 60%),
  radial-gradient(700px 420px at 100% 0%, rgba(139,131,200,.08), transparent 60%), var(--bg); }
html[data-mode="lite"] #lite { max-width: 1240px; gap: 18px; padding: 0 24px 28px; }
.lx-nav { display: flex; align-items: center; gap: 16px; padding: 16px 0; flex-wrap: wrap; border-bottom: 1px solid var(--hair); }
.lx-logo { display: flex; align-items: center; gap: 10px; }
.lx-logo b { font-family: var(--mono); font-size: 15px; letter-spacing: 2.5px; font-weight: 600; }
.lx-mark { width: 26px; height: 26px; color: var(--up); filter: drop-shadow(0 0 6px rgba(63,215,155,.6)); }
.lx-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
  color: var(--up); border: 1px solid rgba(63,215,155,.35); border-radius: 99px; padding: 4px 10px; margin-left: 6px; }
.lx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); animation: lxpulse 1.6s infinite; }
@keyframes lxpulse { 50% { opacity: .25; } }
.lx-links { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lx-link { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--mid); background: none; border: 1px solid transparent;
  padding: 8px 11px; border-radius: 3px; cursor: pointer; }
.lx-link:hover { color: var(--text); border-color: var(--hair-2); }

.lx-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; padding-top: 8px; }
.lx-main { border: 1px solid var(--hair-2); border-radius: 6px; padding: 24px 26px; background: linear-gradient(180deg, rgba(220,240,235,.03), rgba(220,240,235,.01)); }
.lx-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px; color: var(--dim); text-transform: uppercase; }
.lx-h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -1px; font-weight: 600; margin: 10px 0 22px; max-width: 760px; }
.lx-now { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.lx-ring { position: relative; width: 150px; height: 150px; flex: none; }
.lx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lx-ring-bg { fill: none; stroke: var(--hair-2); stroke-width: 7; }
.lx-ring-fg { fill: none; stroke: var(--up); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset .9s linear, stroke .3s;
  filter: drop-shadow(0 0 6px rgba(63,215,155,.5)); }
.lx-ring.final .lx-ring-fg { stroke: var(--target); filter: drop-shadow(0 0 8px rgba(217,169,94,.6)); }
.lx-ring-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lx-ring-t b { font-family: var(--mono); font-size: 32px; font-weight: 500; }
.lx-ring-t span { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; color: var(--mid); text-transform: uppercase; margin-top: 2px; }
.lx-delta { font-family: var(--mono); font-size: clamp(38px, 5vw, 58px); font-weight: 500; line-height: 1.05; margin: 4px 0; }
.lx-sub { font-size: 12.5px; color: var(--mid); line-height: 1.5; }

.lx-odds { margin-top: 24px; }
.lx-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lx-side { border: 1px solid var(--hair-2); border-radius: 5px; padding: 12px 16px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; }
.lx-side span { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; font-weight: 600; }
.lx-side b { font-family: var(--mono); font-size: 34px; font-weight: 500; text-align: right; }
.lx-side small { grid-column: 1 / -1; font-size: 11.5px; color: var(--mid); }
.lx-side.up { border-color: rgba(63,215,155,.35); } .lx-side.up span, .lx-side.up b { color: var(--up); }
.lx-side.down { border-color: rgba(209,104,124,.35); } .lx-side.down span, .lx-side.down b { color: var(--down); }
.lx-split { position: relative; display: flex; height: 10px; border-radius: 99px; overflow: visible; margin-top: 14px; background: var(--hair); }
.lx-split i { display: block; height: 100%; transition: width .6s; }
.lx-split i.u { background: linear-gradient(90deg, rgba(63,215,155,.35), var(--up)); border-radius: 99px 0 0 99px; }
.lx-split i.d { background: linear-gradient(90deg, var(--down), rgba(209,104,124,.35)); border-radius: 0 99px 99px 0; }
.lx-split em { position: absolute; top: -5px; width: 3px; height: 20px; background: var(--model); box-shadow: 0 0 8px var(--model); border-radius: 2px; transition: left .6s; }
.lx-split-lab { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--mid); margin-top: 7px; }
#lt-model-lab { color: var(--model); }

.lx-side-col { display: flex; flex-direction: column; gap: 12px; }
.lx-side-col .lt-enter { border-radius: 6px; padding: 18px 20px; background: rgba(220,240,235,.02); }
.lx-side-col .lt-enter b { font-size: 44px; letter-spacing: 1px; }
.lx-card { border: 1px solid var(--hair-2); border-radius: 6px; padding: 14px 18px; background: rgba(220,240,235,.015); }
.lx-card-h { display: flex; justify-content: space-between; align-items: baseline; }
.lx-card-h b { font-family: var(--mono); font-size: 20px; font-weight: 500; }

.lx-block { border: 1px solid var(--hair-2); border-radius: 6px; padding: 18px 22px; background: rgba(220,240,235,.012); }
.lx-sec-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lx-sec-h h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.3px; }

.lx-range { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.lx-ladder { position: relative; height: 320px; border-left: 1px solid var(--hair-2); margin-left: 6px; }
.lx-lv { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; transition: top .6s; }
.lx-lv::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; flex: none; }
.lx-lv .n { min-width: 92px; letter-spacing: .5px; }
.lx-lv .p { color: var(--text); }
.lx-lv .x { margin-left: auto; color: var(--mid); white-space: nowrap; }
.lx-lv.res { color: var(--down); } .lx-lv.sup { color: var(--up); } .lx-lv.tgt { color: var(--target); } .lx-lv.vw { color: var(--model); }
.lx-lv.now { color: var(--text); font-weight: 600; z-index: 2; }
.lx-lv.now::before { width: 40px; height: 2px; box-shadow: 0 0 10px var(--text); }
.lx-lv.now .n::after { content: " ◀"; }
.lx-range .lt-levels { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.lx-canvas { height: 360px; }
.lx-canvas canvas { width: 100%; height: 100%; display: block; }
html[data-mode="lite"] .lt-chart { height: auto; padding: 18px 22px; }

.lx-band { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-radius: 6px; padding: 22px 26px;
  border: 1px solid rgba(63,215,155,.35); background: linear-gradient(90deg, rgba(63,215,155,.10), rgba(63,215,155,.02)); }
.lx-band h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.4px; }
.lx-band p { margin: 0; }
.cta-lg { font-size: 14px; padding: 13px 22px; }

@media (max-width: 900px) {
  .lx-hero, .lx-range { grid-template-columns: 1fr; }
  .lx-ladder { height: 260px; }
}
@media (max-width: 560px) {
  html[data-mode="lite"] #lite { padding: 0 16px 20px; }
  .lx-main { padding: 18px; }
  .lx-ring { width: 118px; height: 118px; }
  .lx-ring-t b { font-size: 25px; }
  .lx-side b { font-size: 26px; }
  .lx-links .lx-link { display: none; }
  .lx-links #lt-full { display: inline-block; }
  .lx-canvas { height: 260px; }
  .lx-lv .n { min-width: 70px; }
}

/* ── LITE v2.1: story line, last 12, guide, sticky CTA ───────────────────── */
a.lx-logo { color: inherit; text-decoration: none; }
.lx-story { font-size: 15.5px; line-height: 1.55; color: var(--text); margin: -10px 0 22px; max-width: 760px; }
.lx-story b { font-weight: 600; }
.lx-story .up { color: var(--up); } .lx-story .down { color: var(--down); }
.lx-hist { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.lx-chips { display: flex; gap: 5px; }
.lx-chips i { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-style: normal;
  font-family: var(--mono); font-size: 11px; font-weight: 600; }
.lx-chips i.u { background: rgba(63,215,155,.16); color: var(--up); border: 1px solid rgba(63,215,155,.35); }
.lx-chips i.d { background: rgba(209,104,124,.14); color: var(--down); border: 1px solid rgba(209,104,124,.35); }
.lx-chips i.last { box-shadow: 0 0 10px currentColor; }
.gold { color: var(--target); } .violet { color: var(--model); }

.lx-guide { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: rgba(3,6,8,.78); backdrop-filter: blur(6px); }
.lx-guide[hidden] { display: none; }
.lx-guide-box { max-width: 860px; width: 100%; border: 1px solid rgba(63,215,155,.35); border-radius: 10px; padding: 26px;
  background: linear-gradient(180deg, #0a1311, #070b0d); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 22px; }
.lx-steps b { font-size: 15px; }
.lx-steps p { color: var(--mid); font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
.lx-steps p b { color: var(--text); font-size: inherit; }
.lx-guide-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lx-guide-act .lx-link { text-decoration: none; color: var(--up); }

.lx-sticky { display: none; }
@media (max-width: 900px) {
  .lx-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  html[data-mode="lite"] #lite { padding-bottom: 84px; }
  .lx-sticky { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; align-items: center;
    justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 8px; text-decoration: none;
    background: var(--up); color: #04120b; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(63,215,155,.45); }
  .lx-sticky span { font-size: 12px; font-weight: 500; }
  .lx-sticky b { font-family: var(--mono); font-size: 12.5px; letter-spacing: .6px; white-space: nowrap; }
  .lx-story { font-size: 14.5px; }
}

/* ── asset switcher ──────────────────────────────────────────────────────── */
.asw { display: inline-flex; border: 1px solid var(--hair-2); border-radius: 4px; overflow: hidden; }
.asw a { padding: 5px 11px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 1px;
  color: var(--mid); text-decoration: none; }
.asw a + a { border-left: 1px solid var(--hair-2); }
.asw a.on { background: rgba(63,215,155,.14); color: var(--up); }
html[data-asset="gold"] .asw a.on { background: rgba(232,190,90,.16); color: var(--target); }
html:not([data-asset="btc"]) .gold-hide { display: none !important; }

/* ── EASY: a page that scrolls, with room to breathe ─────────────────────── */
html[data-mode="easy"], html[data-mode="easy"] body { height: auto; overflow: auto; }
html[data-mode="easy"] body { font-size: 14px; }
html[data-mode="easy"] #app { height: auto; display: block; }
html[data-mode="easy"] .main { height: clamp(460px, 74vh, 920px); }
html[data-mode="easy"] .lab { font-size: 10.5px; }
html[data-mode="easy"] .hero .s { font-size: 12px; }
html[data-mode="easy"] .plain { font-size: 16.5px; line-height: 1.55; padding: 14px 20px; }
html[data-mode="easy"] .tug-v { font-size: 26px; }
html[data-mode="easy"] .tug-note { font-size: 12px; }
@media (max-width: 1120px) {
  html[data-mode="easy"] .main { display: block; height: auto; }
  html[data-mode="easy"] .pane { height: clamp(380px, 64vh, 680px); }
  html[data-mode="easy"] .rail { display: block; border-left: 0; border-top: 1px solid var(--hair); }
  html[data-mode="easy"] .rail > section { overflow: visible; }
}

/* ── phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  header { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .brand .prompt, .brand .cursor, .brand span, #ticker, #window-label, .dots, #clock-et, #theme-btn, #help-btn, #sound-btn, header .sep { display: none; }
  .head-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
  header .cta { padding: 7px 10px; font-size: 11px; white-space: normal; text-align: center; }
  .hero { padding: 12px 16px; row-gap: 12px; }
  .hero > div { padding-right: 14px; margin-right: 14px; }
  html[data-mode="easy"] .hero .v, .hero .v { font-size: 22px; }
  .hero .clock .v, .hero .delta .v, .hero .odds .side .v { font-size: 26px; }
  .hero .odds { width: 100%; justify-content: space-around; }
  .tug { grid-template-columns: 1fr; gap: 8px; padding: 10px 16px; }
  .plain, html[data-mode="easy"] .plain { padding: 12px 16px; font-size: 15px; }
  .toolbar { flex-wrap: wrap; row-gap: 4px; }
  #tf-tabs { max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  html[data-mode="easy"] .pane { height: 62vh; min-height: 340px; }
  .lx-nav { flex-wrap: wrap; gap: 10px; }
  .lx-links { flex-wrap: wrap; gap: 8px; width: 100%; justify-content: space-between; }
  .lx-links .cta { flex: 1 1 100%; text-align: center; white-space: normal; }
}
@media (max-width: 760px) {
  .hero > div { border-right: 0; }
  .hero > div:not(.odds) { min-width: 44%; }
}
@media (max-width: 560px) {
  .lx-sticky span { display: none; }
  .lx-sticky { justify-content: center; }
  .lx-sticky b { white-space: normal; text-align: center; }
}

/* ── header: nothing squeezes; lower-value items drop out as the width shrinks ── */
header > *, .head-right > * { flex-shrink: 0; white-space: nowrap; }
header .asw { margin-left: -6px; }
.main { border-bottom: 1px solid var(--hair); }
@media (max-width: 1500px) { .brand .prompt, .brand span { display: none; } }
@media (max-width: 1320px) { #window-label, #theme-btn, #sound-btn { display: none; } }
@media (max-width: 1120px) { #ticker, header .sep, #clock-et, #help-btn { display: none; } }
@media (max-width: 760px) { header .asw { margin-left: 0; } }

/* LITE chart: first thing on the page, with a few timeframes */
.lt-chart .lx-sec-h { flex-wrap: wrap; }
#lt-tf { margin-left: auto; }
html[data-mode="lite"] .lt-chart .lx-canvas { height: clamp(300px, 46vh, 520px); }
@media (max-width: 760px) { #lt-tf { margin-left: 0; } html[data-mode="lite"] .lt-chart .lx-canvas { height: 300px; } }
.pane .hd { gap: 14px; }
#chart-title { white-space: nowrap; flex-shrink: 0; }
#chart-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the hero sits under the header again; the chart follows it */
.hero { border-top: 0; }
/* easier to read: bigger support text, labels one step brighter */
.hero .s { font-size: 12px; color: var(--mid); }
.lab { color: var(--mid); }
.pane .hd .note { font-size: 10.5px; color: var(--mid); }
.tab { font-size: 11px; }
.fine { font-size: 10.5px; color: var(--mid); max-width: 520px; }
@media (max-width: 1280px) { .fine { display: block; text-align: left; max-width: none; } footer { flex-wrap: wrap; } }
.lt-foot { font-size: 12px; color: var(--mid); line-height: 1.55; max-width: 980px; margin: 0 auto; padding: 8px 16px 18px; }
.lt-foot b { color: var(--text); }
canvas#chart, canvas#lt-canvas { cursor: crosshair; touch-action: pan-y; }

/* ── PURPLE ─────────────────────────────────────────────────────────────── */
html[data-theme="purple"] {
  --bg: #07050d; --surface: #0d0918;
  --hair: rgba(180, 150, 255, 0.08); --hair-2: rgba(180, 150, 255, 0.16);
  --text: #ece6ff; --mid: #a598cf; --dim: #5f557f;
  --up: #4fe0a6; --down: #f07a9a; --target: #f0c060; --model: #b79cff; --index: #f2eeff;
}
html[data-theme="purple"] body { background: radial-gradient(ellipse at 50% 0%, #1a1035 0%, var(--bg) 62%); }
html[data-theme="purple"] #app { background: transparent; }
html[data-theme="purple"] .tab.on { border-color: var(--model); color: var(--model); background: rgba(183,156,255,.08); }
html[data-theme="purple"] .popover, html[data-theme="purple"] .sheet { background: #0f0a1d; border-color: var(--hair-2); }
html[data-theme="purple"] .cta { background: #b79cff; color: #140b2a; box-shadow: 0 0 22px rgba(183,156,255,.35); }

/* ── LIGHT ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg: #f4f6f5; --surface: #ffffff;
  --hair: rgba(10, 40, 30, 0.09); --hair-2: rgba(10, 40, 30, 0.17);
  --text: #0f1a18; --mid: #4c5b57; --dim: #7f8d8a;
  --up: #0b9a69; --down: #cc3f5a; --target: #b7791f; --model: #5b4fc8; --index: #13201d;
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .popover, html[data-theme="light"] .sheet,
html[data-theme="light"] .lx-guide-box { background: #fff; border-color: var(--hair-2); box-shadow: 0 20px 60px rgba(0,0,0,.15); }
html[data-theme="light"] .cta { color: #fff; }
html[data-theme="light"] .tab.on { background: rgba(10,40,30,.06); }
@media (max-width: 760px) { .lx-links #lt-theme { display: inline-block; } }

/* ── SIMPLE view scrolls (the page is taller than the screen) ───────────── */
html[data-mode="lite"], html[data-mode="lite"] body { height: auto; overflow: auto; }

/* ── the funnel: my picks, sports, Discord, the arb bot ─────────────────── */
.promo { display: flex; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.promo::-webkit-scrollbar { display: none; }
.pr { flex: 1 0 auto; display: flex; flex-direction: column; gap: 1px; padding: 7px 14px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--hair-2); background: rgba(220,240,235,.03); transition: transform .15s, border-color .15s, box-shadow .15s; }
.pr:hover { transform: translateY(-1px); }
.pr b { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .8px; color: var(--text); white-space: nowrap; }
.pr span { font-size: 11px; color: var(--mid); white-space: nowrap; }
.pr-main { background: var(--up); border-color: var(--up); box-shadow: 0 0 22px rgba(63,215,155,.35); }
.pr-main b, .pr-main span { color: #03120a; }
.pr-sport { border-color: rgba(240,180,90,.5); } .pr-sport b { color: #f0b45a; }
.pr-disc { border-color: rgba(114,137,218,.6); } .pr-disc b { color: #8ea1ff; }
.pr-bot { border-color: rgba(183,156,255,.5); } .pr-bot b { color: #c3a8ff; }
.pr-sport:hover, .pr-disc:hover, .pr-bot:hover { box-shadow: 0 0 18px rgba(183,156,255,.2); }
html[data-mode="lite"] #lite > .promo { padding: 0; border: 0; }
html[data-theme="light"] .pr-main b, html[data-theme="light"] .pr-main span { color: #fff; }

/* ── rail: Kalshi book on top, the tape under it (ADVANCED) ─────────────── */
.main { grid-template-columns: minmax(0, 1fr) 380px; }
html[data-mode="easy"] .rail > section.book { display: flex; }
html[data-mode="easy"] .rail { grid-template-rows: auto minmax(0, 1fr); }
.book .r, .book .bk-head { grid-template-columns: 64px 1fr 1fr; }
.book .r .sz, .book .r .cum, .bk-head span + span { text-align: right; }
.book .r .cum { color: var(--dim); }
.bk-head, .tp-head { color: var(--dim); font-size: 9.5px; letter-spacing: 1px; }
.r { height: 19px; font-size: 11.5px; }
.r.t { grid-template-columns: 74px 54px 1fr 1fr; }
.r.t span:nth-child(n+3) { text-align: right; }
.r.t.u .sd, .r.t.u .px { color: var(--up); } .r.t.d .sd, .r.t.d .px { color: var(--down); }
.r.t .sz { color: var(--mid); }
.r.t.big .sz, .r.t.big .px { font-weight: 700; color: var(--text); }
.r.t.new { animation: tapein .9s ease-out; }
.r.t.u.new { --flash: rgba(63,215,155,.28); } .r.t.d.new { --flash: rgba(209,104,124,.28); }
@keyframes tapein { from { background: var(--flash); transform: translateY(-4px); } to { background: transparent; transform: none; } }
#pane-tape .rows { overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1120px) {
  html[data-mode="easy"] #pane-tape .rows { max-height: 420px; }
}
@media (max-width: 760px) {
  .promo { padding: 8px 16px; }
  .pr { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 10px 16px; }
  .hero > div, .hero > div:not(.odds) { min-width: 0; margin: 0; padding: 0; border: 0; }
  .hero .odds { grid-column: 1 / -1; }
  .hero .v, html[data-mode="easy"] .hero .v, .hero .clock .v, .hero .delta .v { font-size: 22px; }
  .hero .s, html[data-mode="easy"] .hero .s { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero .odds .side .v { font-size: 24px; }
  header .cta { display: none; }
}

/* ── fixes: figures that do not shift, tabs that do not overlap, a chart that does not select ── */
.tab { flex: none; white-space: nowrap; }
.model-hide { display: none !important; }
canvas#chart, canvas#lt-canvas, .toolbar, .pane .hd, .tab, .asw, .promo .pr {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
canvas#chart, canvas#lt-canvas { touch-action: pan-y; }
.hero .v, .hero .s, .lx-side b, .lx-side small { font-variant-numeric: tabular-nums; }
.hero .odds .side { flex: none; width: 150px; min-width: 0; }
.hero .odds .side .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#zoom-tabs .tab, .lt-zoom .tab { min-width: 26px; text-align: center; font-size: 14px; line-height: 1; padding: 3px 7px; }
.lt-zoom { gap: 2px; }

.online { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--mid);
  letter-spacing: .4px; white-space: nowrap; }
.online[hidden] { display: none; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.online b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.fb-btn { position: fixed; left: 10px; bottom: 10px; z-index: 55; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--hair-2); background: rgba(8,12,15,.7); color: var(--dim); font: 600 13px var(--mono); cursor: pointer; opacity: .45; }
.fb-btn:hover { opacity: 1; color: var(--text); }
.fb-box { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(3,6,8,.78); }
.fb-box[hidden] { display: none; }
.fb-card { width: min(420px, 100%); border: 1px solid var(--hair-2); border-radius: 8px; padding: 18px; background: #0a1311; color: var(--text);
  display: flex; flex-direction: column; gap: 10px; }
.fb-card textarea, .fb-card input { width: 100%; box-sizing: border-box; background: rgba(220,240,235,.04); color: var(--text);
  border: 1px solid var(--hair-2); border-radius: 4px; padding: 9px; font: 14px var(--mono); }
.fb-card textarea { min-height: 110px; resize: vertical; }
.fb-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-act .msg { font-size: 12px; color: var(--mid); }

.more-wrap { position: relative; display: inline-block; }
.more-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 150px; border: 1px solid var(--hair-2);
  border-radius: 6px; background: #0a1311; padding: 4px; display: flex; flex-direction: column; }
.more-pop[hidden] { display: none; }
.more-pop a { padding: 8px 12px; font: 600 12px var(--mono); letter-spacing: .8px; color: var(--mid); text-decoration: none; border-radius: 4px; }
.more-pop a:hover, .more-pop a.on { color: var(--up); background: rgba(63,215,155,.1); }

@media (max-width: 760px) {
  .hero .odds { width: 100%; gap: 12px; }
  .hero .odds .side { flex: 1 1 0; width: auto; }
  .toolbar { gap: 6px 10px; padding: 6px 12px 5px; }
  #tf-tabs { flex: 1 0 100%; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  #tf-tabs .tab, #lt-tf .tab { padding: 6px 9px; }
  #lt-tf { max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .pane .hd { padding: 9px 12px 0; }
  .online { font-size: 10.5px; }
}
.more-btn { border: 1px solid var(--hair-2); border-radius: 4px; background: none; padding: 5px 11px; font-family: var(--mono); font-size: 11.5px;
  font-weight: 600; letter-spacing: 1px; color: var(--mid); cursor: pointer; white-space: nowrap; }
.more-btn:hover { color: var(--text); }
.more-btn.on { background: rgba(63,215,155,.14); color: var(--up); }
header .more-wrap { margin-left: -2px; }
@media (max-width: 560px) { html[data-mode="lite"] .fb-btn { bottom: 76px; } }
@media (max-width: 760px) {
  #tf-tabs { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 2px; }
  #lt-tf { flex-wrap: wrap; overflow: visible; white-space: normal; }
}
@media (max-width: 560px) { .lx-band .cta-lg { width: 100%; box-sizing: border-box; white-space: normal; text-align: center; } }

/* ── round 3: bigger zoom buttons, last-12 row that fits a phone, promo cards that fit one screen ── */
#zoom-tabs .tab, .lt-zoom .tab { min-width: 38px; font-size: 20px; line-height: 1; padding: 3px 10px; }
@media (max-width: 760px) {
  #zoom-tabs .tab, .lt-zoom .tab { min-width: 44px; min-height: 36px; font-size: 22px; }
  .lx-hist { gap: 8px; }
  .lx-hist > .lab, .lx-hist > .lx-sub { flex: 1 0 100%; }
  .lx-chips { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; width: 100%; }
  .lx-chips i { width: auto; min-width: 0; height: 24px; font-size: 10px; }
  /* BTC + Gold positions and Discord fill the first screen; sports and the bot scroll sideways */
  .promo { gap: 6px; scroll-snap-type: x proximity; }
  .pr { flex: 0 0 calc(50% - 3px); min-width: 0; padding: 7px 10px; scroll-snap-align: start; }
  .pr b { white-space: normal; font-size: 11px; line-height: 1.2; }
  .pr span { white-space: normal; font-size: 10.5px; }
}
@media (max-width: 760px) { .promo { scroll-padding-left: 16px; } }