:root{
  --bg:#07090a; --panel:#0d1112; --line:#1b2427; --line2:#26343a;
  --txt:#c9d6d3; --dim:#5f7470; --green:#39ff88; --cyan:#22e4ff; --red:#ff3b5c; --amber:#ffc23d;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font:13px/1.45 var(--mono)}
body{min-height:100vh;background-image:linear-gradient(rgba(34,228,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(34,228,255,.025) 1px,transparent 1px);background-size:24px 24px}
.topbar{display:flex;align-items:center;gap:20px;padding:10px 16px;border-bottom:1px solid var(--line2);background:#050607;position:sticky;top:0;z-index:5}
.brand{font:700 18px 'Space Grotesk',var(--mono);letter-spacing:.08em;color:var(--green);white-space:nowrap;text-shadow:0 0 12px rgba(57,255,136,.45)}
.slash{color:var(--cyan)} .ver{font:400 10px var(--mono);color:var(--dim);margin-left:6px}
.blink{animation:b 1.1s steps(2) infinite}@keyframes b{50%{opacity:0}}
.ticker{color:var(--dim);font-size:11px;letter-spacing:.12em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.desk{display:grid;grid-template-columns:minmax(360px,440px) 1fr;gap:10px;padding:10px}
.panel{background:var(--panel);border:1px solid var(--line2);padding:10px 12px;min-width:0}
.panel-h{color:var(--cyan);font-size:11px;letter-spacing:.14em;border-bottom:1px dashed var(--line2);padding:6px 0;margin:6px 0 8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.panel-h:first-child{margin-top:0}
.hint{color:var(--dim);letter-spacing:.04em;text-transform:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
input,select{background:#040506;border:1px solid var(--line2);color:var(--green);font:500 13px var(--mono);padding:6px 7px;border-radius:0;width:100%;min-width:0}
select{color:var(--txt)}
input:focus,select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
input.bad{border-color:var(--red);color:var(--red)}
.btn{background:transparent;border:1px solid var(--green);color:var(--green);font:700 11px var(--mono);letter-spacing:.14em;padding:7px 10px;cursor:pointer;width:100%}
.btn:hover{background:var(--green);color:#000}
.btn.ghost{border-color:var(--line2);color:var(--cyan);margin-top:6px}.btn.ghost:hover{background:var(--cyan);color:#000}
.legs-head,.leg{display:grid;grid-template-columns:64px 66px 1fr 1fr 56px 26px;gap:4px;align-items:center}
.legs-head{font-size:9px;color:var(--dim);letter-spacing:.1em;padding-bottom:3px}
.leg{margin-bottom:4px}
.leg select,.leg input{padding:5px 4px;font-size:12px}
.leg .side-long{color:var(--green)} .leg .side-short{color:var(--red)}
.del{background:none;border:1px solid var(--line2);color:var(--red);cursor:pointer;height:28px;font:700 12px var(--mono)}
.del:hover{background:var(--red);color:#000}
.errors{color:var(--red);font-size:11px;margin-top:6px;min-height:1em}
.chart-wrap{position:relative;width:100%;aspect-ratio:16/9;min-height:260px;background:#040506;border:1px solid var(--line)}
#chart{width:100%;height:100%;display:block}
#chart .grid{stroke:var(--line);stroke-width:1}
#chart .zero{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3}
#chart .axis-t{fill:var(--dim);font:10px var(--mono)}
#chart .pl{fill:none;stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 4px rgba(34,228,255,.6))}
#chart .be-l{stroke:var(--amber);stroke-dasharray:2 3}
#chart .be-t{fill:var(--amber);font:700 10px var(--mono)}
#chart .spot-l{stroke:#8a9a97;stroke-dasharray:6 4;opacity:.6}
#chart .cross{stroke:var(--txt);opacity:.35}
#readout{color:var(--green)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.stat{border:1px solid var(--line2);padding:8px;background:#060809}
.stat .k{font-size:9px;letter-spacing:.14em;color:var(--dim)}
.stat .v{font:700 16px var(--mono);margin-top:3px;word-break:break-word;font-variant-numeric:tabular-nums}
.pos{color:var(--green)} .neg{color:var(--red)}
.note{margin-top:10px;font-size:11px;color:var(--dim);border-left:2px solid var(--amber);padding-left:8px}
.note b{color:var(--amber)}
.disclaimer{margin:0 10px 14px;padding:10px 12px;border:1px solid #5a1a26;background:#140709;color:#e5a3ae;font-size:11px}
.disclaimer b{color:var(--red)}
@media (max-width:900px){.desk{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.ticker{display:none}}
@media (max-width:420px){.legs-head,.leg{grid-template-columns:54px 58px 1fr 1fr 44px 24px}.chart-wrap{aspect-ratio:4/3}}
.leg select{-webkit-appearance:none;appearance:none;text-align:center;padding:5px 2px;letter-spacing:.02em;cursor:pointer}
@media (max-width:420px){.leg select,.leg input{font-size:11px}}