:root{
  --bg:#f5f6f8; --surface:#fff; --text:#1c2230; --muted:#5b6578; --line:#d9dde5; --accent:#1f3864;
  --ok:#1e8e3e; --warn:#b26a00; --bad:#c5221f;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#12151c; --surface:#1b2030; --text:#e7eaf1; --muted:#9aa4b8; --line:#2c3347; --accent:#8fb0ff; --ok:#5bd37d; --warn:#f0b050; --bad:#ff7b72}
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:0 16px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:14px 0 8px}
.brand{font-weight:700;font-size:18px}
.brand .sub{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.tabs{display:flex;gap:6px}
.tabs button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:6px 14px;border-radius:8px;font:inherit;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.status[data-s="live"] .dot{background:var(--ok)}
.status[data-s="delayed"] .dot{background:var(--warn)}
.status[data-s="stale"] .dot,.status[data-s="offline"] .dot{background:var(--bad)}
.status[data-s="closed"] .dot{background:var(--muted)}
.summary{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:flex-end;padding:6px 0 12px}
.stats{display:flex;gap:6px 16px;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 12px}
.stats .lbl{display:block;font-size:10px}
.stats b{font-size:14px;font-variant-numeric:tabular-nums}
.stats i{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px}
.mini .lbl{font-size:10px}
.mini b{font-size:14px;font-variant-numeric:tabular-nums}
.summary .lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.summary .val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.chg{margin-left:8px;font-variant-numeric:tabular-nums}
.chg.up{color:var(--ok)} .chg.dn{color:var(--bad)}
.ctl{margin-left:auto;display:flex;gap:16px;color:var(--muted)}
.ctl select{font:inherit}
.wrap{flex:1 1 0;min-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:flex-start}
table{border-collapse:collapse;font:12px Calibri,Arial,sans-serif;color:#000;white-space:nowrap;margin:0}
th,td{padding:.17em .66em;text-align:right;border-bottom:1px solid #d9d9d9;font-variant-numeric:tabular-nums}
thead th{background:#eef1f6;color:#1f3864;font-weight:700;position:sticky;top:0;border-bottom:1px solid #9aa7bd}
thead th.grp{text-align:center;font-size:13px;letter-spacing:.08em}
thead th.grp.ce{background:#fbe3e3;color:#7a1f1f} thead th.grp.pe{background:#e0f1e0;color:#1f5a1f}
td.k{background:#e87f16;font-weight:700;text-align:center}
td.k.dark{color:#fff}
td.lab{text-align:center;font-weight:400}
tr.spot td{background:#fff;padding:2px 3px;border-top:2px solid #f00;border-bottom:2px solid #f00;text-align:center;vertical-align:middle}
tr.spot td.sp{background:#1f3864;color:#fff;font-weight:800;font-size:1.08em;padding:.2em .6em}
tr.spot td.yt{background:#ffe699;border:1px solid #bf9000;line-height:1.15}
tr.spot td.yt .cap{display:block;font-size:.72em;color:#444;font-weight:400;text-transform:none}
tr.spot td.yt b{font-size:1em;font-weight:700}
.pos{color:#2e7d32}
.t0,.t5{background:#99ccff} .t1,.t2{background:#fd7b7b} .t3,.t4{background:#4ede36}
.neg{color:#f00} .cepos{color:#385724} .pepos{color:#548235}
.nog .g{display:none}
td.up{animation:fu .7s ease-out} td.dn{animation:fd .7s ease-out}
@keyframes fu{from{outline:2px solid #1e8e3e;outline-offset:-2px}to{outline:2px solid transparent}}
@keyframes fd{from{outline:2px solid #c5221f;outline-offset:-2px}to{outline:2px solid transparent}}
.foot{color:var(--muted);font-size:12px;padding-top:12px}
@media (max-width:640px){.status{margin-left:0}.ctl{margin-left:0}}
@media (prefers-reduced-motion:reduce){td.up,td.dn{animation:none}}
.note{margin:0 0 10px;padding:6px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--warn);color:var(--warn);font-size:13px}

.plan{margin:0 0 12px}
.plan h2{font-size:15px;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-end}
.plan h2 small{font-weight:400;color:var(--muted);font-size:12px}
.lnk{margin-left:auto;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.tpc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;border-top:3px solid var(--muted)}
.tpc.ce{border-top-color:#c0504d} .tpc.pe{border-top-color:#4f9a45}
.tph{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}
.tph .lv{font-weight:400;color:var(--muted)} .tph .lv b{color:var(--text);font-variant-numeric:tabular-nums}
.tpf{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:8px;align-items:flex-end}
.tpf .mt small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tpf .mt b{font-size:18px;font-variant-numeric:tabular-nums;line-height:30px}
.tpf label{display:flex;flex-direction:column;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);gap:2px}
.tpf select,.tpf input{font:14px system-ui,sans-serif;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);width:112px;font-variant-numeric:tabular-nums}
.tpm{display:flex;gap:22px;margin-bottom:8px}
.tpm small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tpm b{font-size:18px;font-variant-numeric:tabular-nums}
.tpl{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:4px;align-items:center}
.tpl .h{text-align:center;font-size:11px;color:var(--muted);text-transform:uppercase}
.tpl .rl{font-size:11px;color:var(--muted);padding-right:6px;white-space:nowrap}
.tpl .rl b{display:block;color:var(--text)}
.tpl .v{text-align:center;padding:6px 4px;border-radius:6px;font-weight:700;font-variant-numeric:tabular-nums;border:2px solid transparent}
.tpl .v.o{background:#f4b084;color:#000} .tpl .v.b{background:#9dc3e6;color:#000}
.tpl .v.off{opacity:.35}
.tpl .v.sel{border:2px dotted #000;box-shadow:0 0 0 2px #fff inset}
.tpl .v.blink{animation:bl 1s steps(2,start) infinite}
@keyframes bl{50%{background:#fff}}
.tpn{margin-top:8px;font-size:12px;color:var(--muted);min-height:1.4em}
@media (prefers-reduced-motion:reduce){.tpl .v.blink{animation:none;outline:2px solid #c5221f}}

.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--muted);margin:10px 0 0}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px;border:1px solid #0003}
.sw.t1{background:#fd7b7b} .sw.t3{background:#4ede36} .sw.t0{background:#99ccff}
.sw.k-r{background:linear-gradient(90deg,#910000,#ff6565)} .sw.k-g{background:linear-gradient(90deg,#385723,#baff8f)} .sw.k-y{background:#ffd966} .sw.k-o{background:#e87f16}

/* compact Trade Plan, bottom block pinned to the end of the page */
.bar{padding:8px 0 4px}
.summary{padding:2px 0 6px}
.plan{margin:0 0 6px}
.plan h2{font-size:13px;margin:0 0 4px}
.plan-grid{gap:8px}
.tpc{padding:5px 10px 6px}
.tpf{margin-bottom:4px;gap:2px 12px}
.tpf select,.tpf input{padding:3px 6px;font-size:13px;width:104px}
.tpf label{font-size:10px}
.tpf .mt small{font-size:10px}
.tpf .mt b{font-size:15px;line-height:26px}
.tpf .mt.tt small{color:var(--text);font-weight:700}
.tpl{gap:3px}
.tpl .h{font-size:10px;line-height:1}
.tpl .rl{font-size:10px;line-height:1.1}
.tpl .v{padding:3px 4px;font-size:13px}
.tpn{margin-top:3px;font-size:11px;min-height:15px;line-height:15px}
.note{margin:0 0 6px;padding:3px 10px;font-size:12px}
.bottom{padding:6px 0 1.4em}
.legend{font-size:11px;gap:2px 14px;margin:0}
.foot{padding-top:4px;font-size:11px}

tbody td{vertical-align:middle}

/* 12 Oct 2026 (evening): bolder, darker CALL / PUT headers; yellow-row tiles: label top-centre, bigger value */
thead th.grp{font-weight:800;font-size:1.05em;letter-spacing:.1em}
thead th.grp.ce{background:#f3b9b6;color:#6b1414}
thead th.grp.pe{background:#b9e0b9;color:#14501e}
thead th.grp:not(.ce):not(.pe){background:#dfe4ee}
tr.spot td.yt{vertical-align:top;text-align:center;padding:.12em .2em}
tr.spot td.yt .cap{display:block;text-align:center;font-size:.72em;line-height:1.1;margin-bottom:.12em}
tr.spot td.yt b{display:block;text-align:center;font-size:1.22em;line-height:1.1}
.tpf input[hidden],.tpf select[hidden]{display:none}

.wrap>table{margin:0 auto} /* auto margins centre it, and collapse to the left edge when it is wider than the box (flex centring would clip the left columns on a phone) */

thead th.kh{text-align:center}
td.k{text-align:center}

/* 13 Oct 2026: sign-in page and the signed-in line */
.who{font-size:11px;opacity:.8;white-space:nowrap}
.who a{color:inherit;margin-left:.4em}
body.loginpage{display:flex;min-height:100vh;align-items:center;justify-content:center;margin:0}
.login{max-width:420px;margin:0 16px;padding:24px 22px;border:1px solid #c9d0dd;border-radius:10px;background:#fff;text-align:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1c2330}
.login h1{font-size:20px;margin:0 0 14px}
.login p{margin:10px 0;font-size:14px;line-height:1.45}
.login .btn{display:inline-block;padding:10px 18px;border-radius:6px;background:#1a56db;color:#fff;text-decoration:none;font-weight:600}
@media (prefers-color-scheme:dark){.login{background:#161b26;border-color:#2b3447;color:#e6eaf2}.login .btn{background:#3b72e8}}

/* 13 Oct 2026: Replay bar (sits above the colour key) */
.status[data-s="replay"] .dot{background:#8b5cf6}
.replay{margin:0 0 6px;padding:5px 10px;border:1px solid #c9d0dd;border-radius:8px;background:#f4f6fb;font-size:12px}
.replay[hidden]{display:none}
.rp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-row+.rp-row{margin-top:4px}
.rp-btn{padding:3px 9px;border:1px solid #9aa6bd;border-radius:5px;background:#fff;color:inherit;font:inherit;cursor:pointer;min-width:2.4em}
body.replaying #rp-live{background:#8b5cf6;border-color:#8b5cf6;color:#fff}
#rp-slider{flex:1 1 220px;min-width:140px;accent-color:#8b5cf6}
.rp-time{font-variant-numeric:tabular-nums;font-weight:700;min-width:5.5em;text-align:right}
.rp-opts label{display:inline-flex;align-items:center;gap:4px}
.rp-opts select{font:inherit}
.rp-note{opacity:.8}
@media (prefers-color-scheme:dark){.replay{background:#1a2030;border-color:#2b3447}.rp-btn{background:#222a3c;border-color:#3a4560}}