/* 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 auto minmax(0, 1fr) 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; }
html[data-mode="easy"] #app { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; }
html:not([data-mode="easy"]) #app { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
/* 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; }