/* app.css — Synthetic Control Panel v4 shell + design system
   Tokens extracted from synthetictrader.ai — extend, don't restyle. */

:root{
  --bg:#070a0e;--panel:#0e141b;--panel-top:#121a22;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.04);
  --txt:#eaf1f6;--dim:#7e8c99;--faint:#55626d;
  --cyan:#26d8e6;--cyan2:#0bb4c2;--green:#36d399;--red:#f06b6b;--amber:#f3b53f;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter','Segoe UI',system-ui,sans-serif;
  --hd-h:110px;   /* topbar grew with the 48px website-style logo */
}
*{box-sizing:border-box}
html{background:#05080c}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(38,216,230,.05),transparent 60%) no-repeat,#05080c;
  color:var(--txt);font-family:var(--sans);font-size:13.5px;min-height:100vh;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- header */
.hd{position:sticky;top:0;z-index:5;background:rgba(10,14,19,.82);backdrop-filter:blur(8px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 26px;border-bottom:1px solid var(--line2)}
/* brand block styled to match the website header (synthetictrader.ai):
   plain circular logo, gradient-filled wordmark, mono sub */
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.mark{width:48px;height:48px;border-radius:50%;background:#05080a;overflow:hidden;flex:0 0 auto;display:block}
.mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.name{font-family:Inter,"Segoe UI",system-ui,sans-serif;font-weight:600;letter-spacing:5px;font-size:21px;line-height:1;background:linear-gradient(#fff,#9fb4bf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sub{color:#55626d;font-family:var(--mono);font-size:11px;letter-spacing:2px;margin-top:3px}
.topright{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:6px}
.livedot.stale{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.meta{color:var(--dim);font-size:11.5px;font-family:var(--mono);white-space:nowrap}

/* price ticker */
.ticker{display:flex;gap:20px;align-items:center;justify-content:flex-end;flex:1;min-width:0;overflow:hidden;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.tick{display:inline-flex;gap:7px;align-items:baseline}
.tick .sym{color:var(--faint);font-size:10px;letter-spacing:1.5px}
.tick .px{color:var(--txt)}
.tick .chg{font-size:10.5px}
.tick .chg.pos{color:var(--green)}
.tick .chg.neg{color:var(--red)}

/* risk-heat arc (topbar) */
.riskheat{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.riskheat canvas{display:block;width:46px;height:30px}
.rh-pct{font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.5px;margin-top:-1px}

/* dry-run toggle (topbar) */
.dry{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 12px;font-size:11px}
.dry input{accent-color:#26d8e6}
.dry b{letter-spacing:1px}
.dry.armed{border-color:var(--red);background:rgba(240,107,107,.08)}
.dry.armed b{color:var(--red)}

/* tab bar */
.tabbar{display:flex;gap:28px;padding:0 26px;border-bottom:1px solid var(--line)}
.tabbar a{color:var(--dim);text-decoration:none;padding:11px 2px 10px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabbar a:hover{color:var(--txt)}
.tabbar a.active{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ---------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:330px 1fr;min-height:calc(100vh - var(--hd-h))}
.main{min-width:0;padding:16px 26px 40px}
.screen{min-width:0}

/* sidebar */
.side{border-right:1px solid var(--line);background:rgba(10,14,19,.55);display:flex;flex-direction:column;position:sticky;top:var(--hd-h);height:calc(100vh - var(--hd-h))}
.orbwrap{padding:12px 26px 4px;text-align:center}
#avatar{width:72%;max-width:210px;display:inline-block;
  filter:drop-shadow(0 0 18px rgba(38,216,230,.5)) drop-shadow(0 0 46px rgba(38,216,230,.22));
  transition:filter .6s}
#avatar.h-warn{filter:drop-shadow(0 0 18px rgba(243,181,63,.55)) drop-shadow(0 0 46px rgba(243,181,63,.22))}
#avatar.h-bad{filter:drop-shadow(0 0 18px rgba(240,107,107,.6)) drop-shadow(0 0 46px rgba(240,107,107,.25))}
#avatar.think{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{
  0%,100%{filter:drop-shadow(0 0 14px rgba(38,216,230,.45)) drop-shadow(0 0 38px rgba(38,216,230,.18))}
  50%{filter:drop-shadow(0 0 26px rgba(38,216,230,.85)) drop-shadow(0 0 64px rgba(38,216,230,.4))}
}
.aistatus{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--faint);padding:4px 0 10px;border-bottom:1px solid var(--line2)}
.aistatus b{color:var(--green);font-weight:600}

/* chat */
.chat{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px}
.bub{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.55;max-width:94%;white-space:pre-wrap}
.bub.ai{background:rgba(38,216,230,.05);border-color:rgba(38,216,230,.18);align-self:flex-start}
.bub.me{background:var(--panel-top);align-self:flex-end}
.bub.think{color:var(--dim);font-family:var(--mono)}
.chiprow{display:flex;gap:6px;flex-wrap:wrap}
button.chip{font-size:10.5px;padding:3px 9px}
.chatin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chatin input{flex:1}
.chatin button{color:var(--cyan);border-color:rgba(38,216,230,.4);font-size:15px;padding:4px 14px}

/* ---------------------------------------------------------------- shared components */

/* section header — cyan smallcaps with hairline rule */
.mkt{color:var(--cyan);font-size:11px;letter-spacing:4px;font-weight:600;text-transform:uppercase;margin:26px 0 12px;display:flex;align-items:center;gap:10px}
.mkt:first-child{margin-top:4px}
.mkt:after{content:'';flex:1;height:1px;background:var(--line)}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-bottom:12px;min-width:0}
.panel.tight{padding:0;overflow:hidden}
.panel-top{background:var(--panel-top);border-bottom:1px solid var(--line2);padding:10px 18px}
.panel-title{color:var(--faint);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}

/* KPI tiles */
.strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 16px;min-width:132px}
.kpi .l{color:var(--faint);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase}
.kpi .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:3px}
.kpi .v.cy{color:var(--cyan)}
.kpi .v.gr{color:var(--green)}
.kpi .v.rd{color:var(--red)}
.kpi .v.am{color:var(--amber)}
.kpi .s{color:var(--dim);font-size:10.5px;font-family:var(--mono);margin-top:2px}

/* status pills */
.pill{font-family:var(--mono);font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.pill.live{color:var(--green);border-color:rgba(54,211,153,.35)}
.pill.calibration{color:var(--amber);border-color:rgba(243,181,63,.35)}
.pill.shadow{color:#a78bfa;border-color:rgba(167,139,250,.35)}
.pill.bench{color:var(--dim)}
.pill.graveyard{color:#6e4747}
.pill.down{color:var(--red);border-color:rgba(240,107,107,.4)}

/* dark tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{color:var(--faint);font-weight:400;font-size:10.5px;text-transform:uppercase;letter-spacing:1.5px;text-align:left;padding:7px 14px;border-top:none}
.tbl td{padding:7px 14px;text-align:left;border-top:1px solid var(--line2)}
.tbl td.mono,.tbl .mono{font-family:var(--mono);font-size:12px}
.tbl tr:hover td{background:rgba(255,255,255,.015)}

/* value colouring */
.r.pos,.pos{color:var(--green)}
.r.neg,.neg{color:var(--red)}
.openflag{color:var(--amber);font-family:var(--mono);font-size:11px}
.note{color:var(--dim);font-size:12px}
.warn{color:var(--amber);font-size:12.5px;font-family:var(--mono);margin:8px 0}

/* buttons + inputs */
button{background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:5px 13px;font-size:11.5px;cursor:pointer;font-family:var(--sans);letter-spacing:.5px}
button:hover{border-color:var(--cyan2);color:var(--cyan)}
button:disabled{opacity:.45;cursor:default}
button.danger:hover{border-color:var(--red);color:var(--red)}
button.go{border-color:rgba(54,211,153,.4)}
button.go:hover{border-color:var(--green);color:var(--green)}
input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:6px 10px;font-size:13px;font-family:var(--mono)}
input:focus{outline:none;border-color:var(--cyan2)}

/* charts */
canvas{display:block;width:100%}

/* layout helpers for screens */
.grid{display:grid;gap:12px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1200px){.cols-3,.cols-4{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- modal */
#modal{position:fixed;inset:0;background:rgba(4,7,10,.82);display:none;align-items:center;justify-content:center;z-index:20}
#modal .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:780px;width:92%;max-height:82vh;overflow:auto;padding:22px}
#modal h3{margin:0 0 6px;letter-spacing:1px}
.mbtns{display:flex;gap:10px;margin-top:10px}
pre{background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:12px;font-size:11px;white-space:pre-wrap;color:#7ee787;font-family:var(--mono)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:420px}
  .ticker{display:none}
}

/* ---------------- bottom ticker bars: NEWS + SYNTHETIC (Chris 2026-08-21) */
:root{--bars-h:101px}   /* two 50px bars + divider (50% bigger, Chris) */
.side{height:calc(100vh - var(--hd-h) - var(--bars-h))}
.main{padding-bottom:calc(40px + var(--bars-h))}
#bars{position:fixed;left:0;right:0;bottom:0;z-index:15;border-top:1px solid var(--line);background:rgba(8,11,15,.93);backdrop-filter:blur(6px)}
.bar{display:flex;align-items:stretch;height:50px;border-top:1px solid var(--line2)}
.bar:first-child{border-top:none}
.barlabel{flex:0 0 150px;display:flex;align-items:center;padding:0 20px;font-size:15px;letter-spacing:4px;text-transform:uppercase;font-weight:600;border-right:1px solid var(--line2);white-space:nowrap}
.barlabel.news{color:var(--cyan);background:linear-gradient(90deg,rgba(38,216,230,.13),transparent);box-shadow:inset 3px 0 0 var(--cyan)}
.barlabel.synth{color:var(--green);background:linear-gradient(90deg,rgba(54,211,153,.13),transparent);box-shadow:inset 3px 0 0 var(--green)}
.barviewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.bartrack{display:inline-flex;align-items:center;height:50px;white-space:nowrap;will-change:transform;animation:barscroll linear infinite;animation-duration:60s}
.bar:hover .bartrack{animation-play-state:paused}
@keyframes barscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.barcopy{display:inline-flex;align-items:center;flex:none}
.baritem{display:inline-flex;align-items:center;gap:10px;font-size:17px}
.barsep{color:var(--cyan);opacity:.35;font-size:12px;margin:0 24px}
.bage{color:var(--faint);font-family:var(--mono);font-size:15px}
.bsrc{color:var(--dim);font-size:15px;letter-spacing:.5px}
.bhead{color:var(--txt);text-decoration:none}
.bhead:hover{color:var(--cyan)}
.btid{font-family:var(--mono);font-size:16px;color:var(--cyan)}
.bdim{color:var(--dim);font-size:15px}
.bchip{font-family:var(--mono);font-size:13px;letter-spacing:1px;padding:2px 10px;border-radius:4px;text-transform:uppercase;flex:none}
.bchip.sys,.bchip.entry{color:var(--cyan);border:1px solid rgba(38,216,230,.35);background:rgba(38,216,230,.08)}
.bchip.win{color:var(--green);border:1px solid rgba(54,211,153,.35);background:rgba(54,211,153,.1)}
.bchip.lose{color:var(--red);border:1px solid rgba(240,107,107,.3);background:rgba(240,107,107,.08)}
.bchip.stop{color:var(--red);border:1px solid rgba(240,107,107,.4);background:rgba(240,107,107,.12)}
.bchip.moved{color:var(--amber);border:1px solid rgba(243,181,63,.35);background:rgba(243,181,63,.1)}
.bchip.brk{color:#0a0d10;background:var(--red);font-weight:700;box-shadow:0 0 10px rgba(240,107,107,.55);animation:brkpulse 1.1s ease-in-out infinite}
@keyframes brkpulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (max-width:980px){#bars{display:none}.side{height:420px}.main{padding-bottom:40px}}

/* Overview: LIVE TRADES right rail (Chris 2026-08-21) */
.ovwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
.ovrail{min-width:0}

/* Overview is STATIC — no page scroll; the sub boxes scroll instead
   (LIVE TRADES via .railscroll, the chat pane already scrolls) */
body[data-tab="overview"]{overflow:hidden}
body[data-tab="overview"] .main{padding-bottom:16px}
#screen-overview{height:calc(100vh - var(--hd-h) - var(--bars-h) - 32px);overflow:hidden}
#screen-overview .ovwrap{height:100%;align-items:stretch}
#screen-overview .ovmain{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
#screen-overview .ovrail{height:100%;min-height:0}
#screen-overview .ovrail .panel{height:100%;display:flex;flex-direction:column;margin-bottom:0;min-height:0}
.railscroll{flex:1;overflow-y:auto;min-height:0}

/* Overview centre spread: neural galaxy + projection/performance chart */
#ov-centre{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:9px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 45%,rgba(20,32,44,.55),rgba(6,9,13,.2) 70%)}
#ov-centre canvas{position:absolute;inset:0}
#ov-galaxy{z-index:1;opacity:.6}   /* dulled so the equity line reads over it */
#ov-perf{z-index:2;pointer-events:none}
.ov-tf,.ov-series{position:absolute;z-index:3;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.ov-tf{left:12px}
.ov-series{right:12px;justify-content:flex-end;max-width:62%}
.ovchip{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;padding:3px 10px;border-radius:20px;border:1px solid var(--line);background:rgba(8,11,15,.6);color:var(--dim);cursor:pointer}
.ovchip:hover{border-color:var(--cyan2);color:var(--cyan)}
#ov-pace{position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:4px 13px;border-radius:20px;border:1px solid var(--line);background:rgba(8,11,15,.7);white-space:nowrap}
.railsec{background:var(--panel-top);border-top:1px solid var(--line2);padding:8px 14px;color:var(--faint);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.ltrow{display:flex;align-items:center;gap:8px;padding:7px 14px;border-top:1px solid var(--line2);font-size:11.5px;min-width:0}
.ltrow:hover{background:rgba(255,255,255,.015)}
.ltrow .when{color:var(--dim);font-family:var(--mono);font-size:10.5px;flex:0 0 auto}
.ltrow .tid{font-family:var(--mono);font-size:11px;color:var(--cyan);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ltrow .right{margin-left:auto;font-family:var(--mono);font-size:11.5px;white-space:nowrap;flex:0 0 auto}
.ltrow .sub{color:var(--dim);font-size:10px}
.sbadge{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:1px 6px;border-radius:3px;text-transform:uppercase;flex:0 0 auto}
.sbadge.long{color:var(--green);background:rgba(54,211,153,.1);border:1px solid rgba(54,211,153,.3)}
.sbadge.short{color:var(--red);background:rgba(240,107,107,.1);border:1px solid rgba(240,107,107,.3)}
@media (max-width:1200px){.ovwrap{grid-template-columns:1fr}}

/* Overview: single instrument strip (Chris 2026-08-21) */
.ovstrip{display:flex;align-items:stretch;background:var(--panel);
border:1px solid var(--line);border-radius:9px;margin-bottom:12px;
overflow-x:auto}
.ovcell{flex:1 1 0;min-width:130px;padding:12px 18px;border-left:1px solid var(--line2)}
.ovcell:first-child{border-left:none}
.ovcell .l{color:var(--faint);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap}
.ovcell .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:4px;white-space:nowrap}
.ovcell .v.cy{color:var(--cyan)}.ovcell .v.gr{color:var(--green)}
.ovcell .v.am{color:var(--amber)}.ovcell .v.rd{color:var(--red)}
.ovcell .s{color:var(--dim);font-size:10.5px;font-family:var(--mono);margin-top:3px}

/* ---------------- The Panel: public read-only mirror additions ---------- */
/* read-only badge (replaces the console's DRY RUN toggle) */
.rolock{display:flex;gap:8px;align-items:center;background:var(--panel);
  border:1px solid rgba(38,216,230,.35);border-radius:9px;padding:6px 12px;
  font-size:11px;color:var(--cyan);letter-spacing:1px;font-family:var(--mono);
  white-space:nowrap}

/* site nav back to the classic pages */
.sitenav{display:flex;gap:18px;align-items:center;font-size:11.5px}
.sitenav a{color:var(--dim);text-decoration:none;letter-spacing:1px}
.sitenav a:hover{color:var(--txt)}

/* locked operator controls: visible, padlocked, inert-looking */
.fambtns button,.bandbtn,#bt-refresh,#pod-live,#pod-bench,#pod-grave,#pod-logs{
  opacity:.55;cursor:not-allowed}
.fambtns button:hover,.bandbtn:hover,#bt-refresh:hover,#pod-live:hover,
#pod-bench:hover,#pod-grave:hover,#pod-logs:hover{
  border-color:var(--line);color:var(--dim)}
.fambtns button::after,#bt-refresh::after,#pod-live::after,#pod-bench::after,
#pod-grave::after,#pod-logs::after{content:' 🔒';font-size:9px}

/* guide bubbles share the console's ai styling */
.bub.guide{background:rgba(38,216,230,.05);border-color:rgba(38,216,230,.18);
  align-self:flex-start}

/* ===================================================== mobile / responsive
   Phone + small-tablet pass, layered on the existing ≤980 tablet rules.
   Pure CSS: the board comes first, Synthetic's guide becomes a compact
   card below it, the tab bar swipes horizontally, and Overview drops its
   desktop no-scroll lock so the whole board flows in one column. */
@media (max-width:720px){
  /* header — compact, allowed to wrap; ticker already hidden ≤980 */
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .mark{width:36px;height:36px}
  .name{font-size:17px;letter-spacing:3px}
  .sub{font-size:9.5px;letter-spacing:1px}
  .topright{gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .rolock{padding:5px 9px;font-size:10px}
  .meta{font-size:10px}
  .riskheat{display:none}   /* redundant with the OPEN RISK KPI below */

  /* tab bar — one swipeable row, all ten tabs reachable */
  .tabbar{gap:0;padding:0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar a{flex:0 0 auto;padding:11px 14px;font-size:11px;letter-spacing:1.5px}

  /* shell — single column, DATA first, Synthetic's card below */
  .shell{display:flex;flex-direction:column;min-height:0}
  .main{order:1;padding:12px 14px 28px}
  .side{order:2;position:static;height:auto;min-height:0;
    border-right:0;border-top:1px solid var(--line)}
  .orbwrap{padding:12px 14px 2px}
  #avatar{width:84px;max-width:84px}
  .chat{max-height:230px}

  /* panels + tables denser */
  .panel{padding:11px 12px}
  .mkt{margin:18px 0 10px;font-size:10px;letter-spacing:3px}
  .tbl th,.tbl td{padding:6px 9px}
  .grid{gap:10px}
  .grid.cols-2,.cols-2{grid-template-columns:1fr}
  .strip{gap:8px}
  .kpi{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px)}

  /* Overview — release the desktop no-scroll lock; flow the board */
  body[data-tab="overview"]{overflow:auto}
  body[data-tab="overview"] .main{padding-bottom:28px}
  #screen-overview{height:auto;overflow:visible}
  #screen-overview .ovwrap{height:auto;align-items:stretch}
  #screen-overview .ovmain{height:auto;overflow:visible}
  #screen-overview .ovrail,#screen-overview .ovrail .panel{height:auto}
  .ovwrap{grid-template-columns:1fr}
  #ov-centre{height:440px;flex:0 0 auto}
  .ovchip{padding:2px 7px;font-size:9.5px}
  /* the two chip groups can't share the top corners on a narrow chart —
     stack them as two swipeable strips pinned to the top edge */
  .ov-tf,.ov-series{left:8px;right:8px;max-width:none;flex-wrap:nowrap;
    overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    padding-bottom:3px;background:linear-gradient(rgba(8,11,15,.82),rgba(8,11,15,0))}
  .ov-tf::-webkit-scrollbar,.ov-series::-webkit-scrollbar{display:none}
  .ov-tf{top:6px}
  .ov-series{top:34px}
  .railscroll{max-height:340px}

  /* KPI instrument strip — stack into a readable 2-col grid */
  .ovstrip{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .ovcell{min-width:0;padding:10px 12px;
    border-left:1px solid var(--line2);border-top:1px solid var(--line2)}
  .ovcell:first-child,.ovcell:nth-child(2){border-top:0}
  .ovcell:nth-child(odd){border-left:0}
  .ovcell .v{font-size:15px}

  /* fixed bottom ticker bars — restored on mobile (the ≤980 rule hides
     them), compacted, with body clearance so content scrolls above them */
  #bars{display:block}
  .bar{height:40px}
  .bartrack{height:40px}
  .barlabel{flex:0 0 90px;font-size:9.5px;letter-spacing:1.5px;padding:0 9px}
  .baritem{font-size:12px;gap:8px}
  .barsep{margin:0 13px}
  .bage,.bsrc,.bdim{font-size:11px}
  .btid{font-size:12px}
  .bchip{font-size:10px;padding:2px 7px}
  body{padding-bottom:90px}
}

@media (max-width:460px){
  .name{font-size:15px}
  #ov-centre{height:400px}
  .ov-series{max-width:52%}
  .kpi{min-width:100%;flex-basis:100%}
}