/* CYRIF v3 layer: one colour system (cyan UI, green/red for price, amber on-chain),
   HUD frames with corner brackets, command-center layout. Loaded after app.css. */
:root{
  --bg:#04070a; --plane:#070c11; --panel:#08111a; --panel2:#0a1520;
  --line:rgba(95,212,255,.12); --line2:rgba(95,212,255,.24);
  --text:#dfe8f0; --text2:#9fb0c0; --muted:#5c6c7c;
  --accent:#5fd4ff; --cy:#5fd4ff; --up:#2fbf71; --down:#ff4d5a; --warn:#fab219; --crit:#ff4d5a;
  --s-x:#5fd4ff; --s-truth:#5fd4ff; --s-poly:#5fd4ff; --s-news:#5fd4ff; --s-chain:#5fd4ff; --s-hl:#fab219; --s-deriv:#fab219;
}
body{background-color:var(--bg);counter-reset:sec;
  background-image:radial-gradient(rgba(95,212,255,.07) 1px,transparent 1px),radial-gradient(1100px 480px at 50% -10%,rgba(95,212,255,.06),transparent 60%);
  background-size:22px 22px,auto}
body::before{display:none}

/* ---------- HUD frames ---------- */
.card{border-radius:0;border:1px solid var(--line);
  background-image:
    linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),
    linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),
    linear-gradient(180deg,rgba(10,18,26,.82),rgba(6,11,16,.82));
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,auto;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%,0 0;
  background-repeat:no-repeat}
.card::before{display:none}
.hd{border-bottom:1px solid var(--line);padding:8px 12px}
.hd h3{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--text2)}
.card > .hd h3::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) " // ";color:var(--cy)}
.pickbtn h3{font-size:10.5px;color:var(--text)}
.hd .src{font:500 9.5px var(--mono);letter-spacing:.06em}
.hd .src .lg{color:var(--cy);margin-left:6px}
.hd .src .lg.hot{color:var(--down)}.hd .src .lg.chain{color:var(--warn)}
.livepill{border-radius:0;font-size:9px}
.badge{border-radius:0;background:transparent;color:var(--c);border-color:color-mix(in oklab,var(--c) 45%,transparent)}
.flag{border-radius:0}
.chip{border-radius:0;border-color:var(--line2)}
.seg,.seg button,.minibtn,.ctabs button,.wfilt button,.hd .wpager button{border-radius:0}
.ctabs button.on,.wfilt button.on{border-color:var(--cy);background:rgba(95,212,255,.08);box-shadow:none;color:var(--text)}
.pm .bar i{background:var(--cy)}
.pm .q b{color:var(--cy)}
.dot{border-radius:0;width:7px;height:7px}
.sysbtn{border-radius:0}
.t td.h{border-radius:0}

/* ---------- top bar: brand · key numbers · status ---------- */
.top3{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto;border-bottom:1px solid var(--line);background:rgba(4,7,10,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand3{display:flex;align-items:center;gap:10px;padding:0 18px;font:700 17px var(--disp);letter-spacing:.3em;border-right:1px solid var(--line)}
.brand3 i{width:8px;height:8px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.top3 .keys{background:transparent;border:0;gap:0;grid-template-columns:repeat(8,minmax(0,1fr))}
.top3 .key{background:transparent;border-right:1px solid var(--line);padding:7px 12px}
.top3 .key .v{font-size:16px;transition:color .6s,text-shadow .6s}
.top3 .key .v.flash{color:var(--cy);text-shadow:0 0 12px rgba(95,212,255,.65)}
.top3 .key .k{font-family:var(--mono);font-size:8.5px}
.live3{display:flex;align-items:center;gap:14px;padding:0 14px;font:500 10.5px var(--mono);color:var(--text2);white-space:nowrap}
.live3 b{color:var(--cy);font-weight:600}
@media (max-width:1400px){.live3 .opt{display:none}}
@media (max-width:1180px){.top3{grid-template-columns:1fr auto}.top3 .keys{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}}
.tape{background:rgba(4,7,10,.85)}
.tk{padding:4px 16px;font-size:11px}

/* ---------- layout ---------- */
#L-sig{grid-template-columns:minmax(0,1fr);padding-bottom:0}
#L-sig:has(> .card[hidden]){display:none}
#sigA{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#sigA .sig{border-bottom:0;border-right:1px solid var(--line)}
.sigcard{border-color:rgba(255,77,90,.5);box-shadow:0 0 24px rgba(255,77,90,.08)}
#L-a{grid-template-columns:230px minmax(0,1fr) 340px;align-items:start}
#L-b2{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);align-items:start;padding-top:0}
#L-more{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:0}
@media (max-width:1180px){#L-a,#L-b2{grid-template-columns:minmax(0,1fr)}}

/* markets rail */
.mk{display:grid;grid-template-columns:54px 1fr auto;gap:1px 8px;align-items:center;padding:6px 12px 5px;border-bottom:1px solid var(--line);cursor:pointer;font:500 11px var(--mono);font-variant-numeric:tabular-nums}
.mk:hover{background:rgba(95,212,255,.04)}
.mk.on{background:rgba(95,212,255,.07);box-shadow:inset 2px 0 0 var(--cy)}
.mk .s{font-weight:600;color:var(--text)}
.mk .p{text-align:right;color:var(--text2)}
.mk .c{text-align:right;min-width:58px}
.mk .spark{grid-column:1/-1}

/* feed rail: compact cards, no fixed heights */
#wireA{max-height:none;min-height:0;height:auto;overflow:visible}
#wireA .wi{height:auto;padding:8px 12px 9px}
#wireA .wt{font-size:13px;margin:3px 0 5px;-webkit-line-clamp:3;line-clamp:3}
#wireA .wi.lock{background:rgba(95,212,255,.07);box-shadow:inset 2px 0 0 var(--cy)}
#wireA .wi.hot.lock{box-shadow:inset 2px 0 0 var(--down),inset 0 0 0 1px rgba(255,77,90,.25)}
#wireA .wi.glitch{animation:glitch .5s steps(2) 2}
@keyframes glitch{0%{transform:none}25%{transform:translate(-2px,1px);filter:hue-rotate(40deg)}50%{transform:translate(2px,-1px);clip-path:inset(20% 0 30% 0)}75%{transform:translate(-1px,0)}100%{transform:none;clip-path:none}}
#feedCard .wfilt{padding:7px 10px}
#feedCard .wfilt button{padding:3px 7px;font-size:9px}

/* scanner: one status line */
.hud.tl{left:14px;right:14px;top:8px;display:flex;gap:14px;flex-wrap:wrap}
.hud.tl .r{margin-left:auto}
.scope::after{background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5) 100%)}
.callout{border-color:rgba(95,212,255,.45)}
.timeline .now{background:var(--cy);box-shadow:0 0 8px var(--cy)}

/* bays: one-line summary until opened */
.bay > .hd{cursor:pointer;user-select:none}
.bay .baysum{font:500 11px var(--mono);color:var(--text2);display:flex;gap:18px;flex-wrap:wrap;margin-left:8px}
.bay .baysum b{color:var(--text);font-weight:600}
.bay .baytog{margin-left:10px;color:var(--cy);font-size:11px;transition:transform .2s}
.bay.collapsed .baybody,.bay.collapsed .ctabs,.bay.collapsed .src{display:none}
.bay.collapsed > .hd{border-bottom:0}
.bay.collapsed .baytog{transform:rotate(-90deg)}
.bay:not(.collapsed) .baysum{display:none}
.bay.collapsed .baysum{margin-right:auto}

/* boot sequence (first load in a session) */
.boot{position:fixed;inset:0;z-index:60;background:#030507;display:flex;align-items:center;justify-content:center;font:500 12px/1.9 var(--mono);color:var(--cy);transition:opacity .5s}
.boot[hidden]{display:none}
.boot.gone{opacity:0;pointer-events:none}
.boot pre{margin:0;min-width:380px}

/* feed gets more room, scanner a bit less (v22) */
#L-a{grid-template-columns:230px minmax(0,1.7fr) minmax(380px,1fr)}
@media (max-width:1180px){#L-a{grid-template-columns:minmax(0,1fr)}}

/* ================= 2 × 2 grid (v23) ================= */
#L-a{grid-template-columns:minmax(0,1.6fr) minmax(380px,1fr);align-items:start}
@media (max-width:1180px){#L-a{grid-template-columns:minmax(0,1fr)}}
.mcgrid{display:grid;grid-template-columns:250px minmax(0,1fr)}
.mclist{border-right:1px solid var(--line)}
.mclist .mk{grid-template-columns:50px 1fr 58px 54px;gap:0 8px;padding:7px 12px}
.mclist .mk .spark{grid-column:auto}
.mclist .mk .c{min-width:0}
@media (max-width:760px){.mcgrid{grid-template-columns:minmax(0,1fr)}.mclist{border-right:0;border-bottom:1px solid var(--line)}}
.polybar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--line)}

/* both cards in a row share one height so the frames line up (v24) */
#L-a{align-items:stretch}

/* ================= on-chain monitor + new derivatives blocks (v27) ================= */
.onchain{padding-top:10px}
.ochead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ochead .sub{margin:0}
.onchain .sub.oc2{margin-top:16px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:8px}
.kpi{background:var(--plane);padding:6px 9px;min-width:0}
.kpi .k{font:600 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font:600 14px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.onchain .t{margin-top:6px}
.onchain .legend{margin-top:6px}
.wf{display:grid;grid-template-columns:54px 1fr 84px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);font-variant-numeric:tabular-nums}
.wf .s{font-weight:600}
.wf .dbar{width:100%;margin:0}
.wf > span:last-child{text-align:right}
.cyc-h{font:500 11.5px var(--mono);color:var(--text2);margin-bottom:8px}
.cyc-h b{font-size:13px}
.cyc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
@media (max-width:900px){.cyc{grid-template-columns:minmax(0,1fr)}}
.cy{display:grid;grid-template-columns:minmax(0,1fr) 120px 40px;gap:10px;align-items:center;font:500 11px var(--mono)}
.cy .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text2)}
.cy .bar{height:5px;background:var(--line)}
.cy .bar i{display:block;height:100%}
.cy .p{text-align:right;color:var(--text2)}
#resSym button{padding:2px 9px}

/* ================= feed hero (v29) ================= */
.hero-a{height:auto;max-height:310px;padding:14px 14px 16px;border-bottom:1px solid var(--line2);cursor:pointer;
  background:linear-gradient(180deg,rgba(95,212,255,.06),transparent 80%)}
.hero-a:empty{display:none}
.hero-a.hot{background:linear-gradient(120deg,rgba(255,77,90,.13),transparent 60%)}
.hero-a.lock{box-shadow:inset 3px 0 0 var(--cy)}
.hero-a.hot.lock{box-shadow:inset 3px 0 0 var(--down)}
.hero-a .hero-txt{font-size:clamp(18px,1.35vw,23px);margin:10px 0 12px}
.hero-a .hero-top{font-size:10.5px}
.hero-a .clock{font-size:24px}
.hero-a .react{border-radius:0;border-color:var(--line2);background:rgba(4,8,12,.5);min-width:128px}
.cc{display:inline-block;font:600 9px/1.4 var(--mono);letter-spacing:.06em;color:var(--cy);border:1px solid var(--line2);padding:0 4px;margin-right:3px;vertical-align:2px}

/* ================= the Monitor column never grows the row (v30) =================
   height:0 + min-height:100% makes the card take the row height set by the scanner
   without adding to it; a tab that still doesn't fit scrolls inside the card. */
#feedCard{height:0;min-height:100%;display:flex;flex-direction:column}
#feedCard > [data-pane]{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
@media (max-width:1180px){#feedCard{height:auto;min-height:0}#feedCard > [data-pane]{overflow:visible}}
.onchain .sub.oc2{margin-top:12px}

/* ================= Positioning tab (v31) ================= */
.posit{padding-top:10px}
.posit .ochead{margin:10px 0 6px;flex-wrap:wrap}
.posit .ochead.wh{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.posit .ochead .sub{margin:0}
.posit .ochead .sub b{color:var(--text);font-weight:600}
.posit .seg button{padding:2px 8px;font-size:10px}
.posit .dv{min-height:0}
.fvbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;font:500 10px var(--mono)}
.two-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:8px}
.three-ch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.posit .t{font-size:10.5px}
.posit .t th,.posit .t td{padding:4px 6px}
.posit .fng{font-size:12px;margin:0 0 0 6px;display:inline}
.posit .fng small{font-size:8.5px}
.posit #oiVen .lm{grid-template-columns:70px 1fr 40px;height:17px}
.posit .cyc{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px}
.posit .cy{grid-template-columns:minmax(0,1fr) 70px 34px;font-size:10px}
.posit .cyc-h{font-size:10px;margin:2px 0 4px}
.posit .dist{width:44px}
.posit #lmC{padding:4px 0}
@media (max-width:700px){.two-ch,.three-ch{grid-template-columns:minmax(0,1fr)}}