:root {
  --bg: #0b0f17; --panel: #111826; --panel2: #0e1521; --border: #1e2a3d; --border2: #2a3a55;
  --text: #d8e0ee; --muted: #8592a8; --faint: #5b6780; --accent: #4f8cff; --accent2: #2f6fe8;
  --up: #22c55e; --down: #ef4444; --ce: #f87171; --pe: #34d399; --amber: #f5b041; --violet: #a78bfa;
  --row: #0f1622; --rowalt: #0d131e; --atm: #172540; --itm-ce: rgba(248,113,113,.06); --itm-pe: rgba(52,211,153,.06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.45 var(--font); }
button, select, input { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 16px; background: rgba(11,15,23,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.brand { font-weight: 700; letter-spacing: .2px; font-size: 15px; white-space: nowrap; }
.brand-mark { color: var(--accent); }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.seg button { background: none; border: 0; padding: 5px 11px; border-radius: 6px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.seg button.on { background: var(--accent2); color: #fff; }
.seg button:disabled { opacity: .35; cursor: not-allowed; }
.ctl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
select, input[type=search], input[type=text] { background: var(--panel); border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; outline: none; }
select:focus, input:focus { border-color: var(--accent); }
.timetravel { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; min-width: 240px; }
.timetravel input[type=range] { flex: 1; accent-color: var(--accent); }
#atLabel { min-width: 78px; text-align: right; }
.livebtn { background: var(--panel); border: 1px solid var(--border2); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.livebtn.on { border-color: var(--up); color: var(--up); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border2); color: var(--muted); white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.pill.live .dot { background: var(--up); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 1.6s infinite; }
.pill.live { color: var(--up); border-color: rgba(34,197,94,.4); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55);} 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0);} 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);} }
.spacer { flex: 1; }
a.logout { color: var(--muted); text-decoration: none; }

/* ---------- KPI strip ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; padding: 12px 16px 4px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; min-width: 0; }
.kpi .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .val { font: 600 17px/1.3 var(--mono); margin-top: 2px; white-space: nowrap; }
.kpi .sub { font: 11px/1.3 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.ce .val { color: var(--ce); } .kpi.pe .val { color: var(--pe); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; padding: 8px 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
main { padding: 12px 16px 28px; }
.tab { display: none; } .tab.on { display: block; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-width: 0; }
.card h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.card .hint { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.notice { background: rgba(245,176,65,.08); border: 1px solid rgba(245,176,65,.3); color: #f3d39a; border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; font-size: 12px; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

/* ---------- chart tab ---------- */
.chartwrap { display: grid; grid-template-columns: 270px 1fr; gap: 12px; }
.picker { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 230px); min-height: 520px; }
.picker .quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { background: var(--panel2); border: 1px solid var(--border2); border-radius: 7px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.chip-btn:hover { border-color: var(--accent); }
.strikelist { overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; flex: 1; }
.strikelist table { width: 100%; border-collapse: collapse; }
.strikelist td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.strikelist tr.atm td { background: var(--atm); }
.strikelist tr.atm td.k::after { content: " ATM"; color: var(--accent); font-size: 10px; }
.strikelist td.k { font-family: var(--mono); }
.strikelist label { cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.selected { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; }
.chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.chip button { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0 4px; }
#mainChart { height: 430px; position: relative; }
#oiChart { height: 150px; position: relative; margin-top: 6px; }
.legend { position: absolute; left: 10px; top: 6px; z-index: 5; font: 12px/1.5 var(--mono); pointer-events: none; background: rgba(17,24,38,.75); padding: 2px 6px; border-radius: 6px; }
.panel-title { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 2px; }

/* ---------- option chain ---------- */
.chain-scroll { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--border); border-radius: 10px; }
table.chain { width: 100%; border-collapse: collapse; font: 12px/1.4 var(--mono); }
table.chain th { position: sticky; top: 0; z-index: 2; background: #131c2c; color: var(--muted); font: 600 11px var(--font); padding: 7px 6px; border-bottom: 1px solid var(--border2); white-space: nowrap; }
table.chain th.ce { color: var(--ce); } table.chain th.pe { color: var(--pe); }
table.chain td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; position: relative; }
table.chain td.strike { text-align: center; font-weight: 700; background: #101a2b; color: #e8eefb; min-width: 74px; }
table.chain tr:hover td { background-color: #152036; }
table.chain td.itm-ce { background: var(--itm-ce); } table.chain td.itm-pe { background: var(--itm-pe); }
table.chain tr.atm td { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
table.chain tr.atm td.strike { background: var(--accent2); color: #fff; }
table.chain td.oi { min-width: 92px; }
table.chain td.oi .bar { position: absolute; top: 3px; bottom: 3px; opacity: .22; border-radius: 3px; }
table.chain td.oi.ce .bar { right: 0; background: var(--ce); } table.chain td.oi.pe .bar { left: 0; background: var(--pe); }
table.chain td.oi span { position: relative; }
table.chain td.sel { text-align: center; width: 26px; }
.tag { font: 600 9px var(--font); padding: 1px 4px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.tag.res { background: rgba(248,113,113,.18); color: var(--ce); } .tag.sup { background: rgba(52,211,153,.18); color: var(--pe); }
tr.spotrow td { padding: 0; height: 2px; background: var(--amber) !important; border: 0; }
.chain-legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }

/* ---------- build-up ---------- */
table.simple { width: 100%; border-collapse: collapse; font: 12px/1.4 var(--mono); }
table.simple th { text-align: right; color: var(--muted); font: 600 11px var(--font); padding: 6px; border-bottom: 1px solid var(--border2); }
table.simple td { text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--border); }
table.simple th:first-child, table.simple td:first-child { text-align: left; }
.cls { font: 600 11px var(--font); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.cls.lb { background: rgba(34,197,94,.15); color: var(--up); } .cls.sb { background: rgba(239,68,68,.15); color: var(--down); }
.cls.sc { background: rgba(79,140,255,.16); color: #8fb3ff; } .cls.lu { background: rgba(245,176,65,.15); color: var(--amber); }
.ec { height: 340px; }
.ec.tall { height: 420px; }

/* ---------- health ---------- */
.events { max-height: 360px; overflow: auto; font: 12px/1.5 var(--mono); }
.events div { padding: 3px 0; border-bottom: 1px solid var(--border); }
.lvl-WARN, .lvl-ALERT { color: var(--amber); }
pre.report { white-space: pre-wrap; font: 12px/1.55 var(--mono); margin: 0; color: var(--text); }
footer { padding: 12px 16px 24px; color: var(--faint); font-size: 11px; }
footer a { color: var(--muted); }

/* ---------- login ---------- */
.login-body { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #13223f, var(--bg) 60%); }
.login-card { width: min(360px, 92vw); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.login-card input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--panel2); }
.login-card button { padding: 10px; border-radius: 8px; border: 0; background: var(--accent2); color: #fff; font-weight: 600; cursor: pointer; }
.login-card .err { color: var(--down); min-height: 1em; margin: 0; }
.login-card p { margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  .chartwrap { grid-template-columns: 1fr; }
  .chartwrap .picker { order: 2; }
  .picker { max-height: none; min-height: 0; }
  .strikelist { max-height: 260px; }
  .grid2 { grid-template-columns: 1fr; }
  #mainChart { height: 360px; }
  .hide-sm { display: none; }
}
@media (max-width: 600px) {
  .topbar { padding: 8px 10px; } main, .kpis { padding-left: 10px; padding-right: 10px; }
  .kpi .val { font-size: 15px; }
  .hide-xs { display: none; }
}