:root {
  color-scheme: dark;
  --bg: #000000;
  --panel: #070605;
  --bar: #1a1006;
  --rule: #2b2117;
  --amber: #ff9f1c;
  --ink: #ece8de;
  --dim: #8a8273;
  --cmd: #ffd23f;
  --up: #2ee59d;
  --down: #ff5a4f;
  --sel: #2a1a05;
  --blue: #4a9eff;
  --aqua: #1fbf8f;
  --violet: #9085e9;
  --f: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.35 var(--f); }
body { min-height: 100vh; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--amber); }
:focus-visible { outline: 1px solid var(--cmd); outline-offset: 1px; }

/* Header: page tabs, command line, clocks */
.top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 6px 10px; background: var(--bar); border-bottom: 1px solid var(--amber); }
.pages { display: flex; gap: 2px; }
.pages a { padding: 4px 10px; color: var(--dim); text-decoration: none; border: 1px solid var(--rule); }
.pages a[aria-current="page"] { color: #000; background: var(--amber); border-color: var(--amber); font-weight: 600; }
.cmd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmd label { color: var(--amber); font-weight: 600; }
.cmdwrap { position: relative; flex: 1; min-width: 0; }
.cmd input { width: 100%; background: #000; color: var(--cmd); border: 1px solid #4a3410;
  font: 500 14px var(--f); padding: 5px 8px; text-transform: uppercase; caret-color: var(--cmd); }
.cmd input::placeholder { color: #a08a5a; text-transform: none; }
.go { background: var(--cmd); color: #000; font-weight: 600; padding: 5px 10px; }
.sugg { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none;
  background: #050403; border: 1px solid var(--amber); max-height: 360px; overflow: auto; }
.sugg li { display: grid; grid-template-columns: 46px minmax(70px, auto) 1fr auto; gap: 8px; align-items: baseline;
  padding: 4px 8px; cursor: pointer; border-bottom: 1px solid #120e0a; }
.sugg li[aria-selected="true"] { background: var(--sel); }
.sugg .t { font-size: 11px; color: #000; background: var(--dim); text-align: center; padding: 0 2px; }
.sugg .t.EQ { background: var(--amber); } .sugg .t.CRY { background: var(--violet); } .sugg .t.FN { background: var(--cmd); }
.sugg .c { color: var(--amber); font-weight: 600; }
.sugg .n { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg .n small { color: var(--dim); }
.sugg .q { text-align: right; white-space: nowrap; }
.sugg mark { background: none; color: var(--cmd); text-decoration: underline; }
.clock { display: flex; gap: 12px; color: var(--dim); white-space: nowrap; align-items: center; }
.clock b { color: var(--ink); font-weight: 500; }
.badge { padding: 1px 6px; border: 1px solid currentColor; }
.badge.paper { color: var(--blue); } .badge.real { color: var(--down); } .badge.halt { color: var(--down); background: #2a0805; }
.open { color: var(--up); } .closed { color: var(--dim); }
#livebtn { cursor: pointer; font: inherit; }
.feed { display: inline-flex; gap: 6px; align-items: center; }
.feed .tabs button { border: 1px solid var(--rule); padding: 0 6px; }
.live-off { color: var(--dim); } .live-connecting { color: var(--cmd); } .live-on { color: var(--up); } .live-error { color: var(--down); }

.strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.tile { padding: 5px 8px; border-right: 1px solid var(--rule); min-width: 0; }
.tile .n { color: var(--amber); }
.tile .v { font-weight: 500; }
.tile .c { font-size: 12px; }

main { flex: 1; display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: minmax(260px, 3fr) minmax(0, 6fr) minmax(320px, 4fr);
  grid-template-areas: "mon gp book" "mon perf bltr" "sig risk mth" "pre aud dh"; }
.p { background: var(--panel); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.p > h2 { margin: 0; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font: 600 13px var(--f); color: var(--amber); background: var(--bar); padding: 4px 8px; border-bottom: 1px solid var(--rule); }
.p > h2 small { color: var(--dim); font-weight: 400; }
.p > h2 .k { color: var(--cmd); font-weight: 500; }
.p.flash > h2 { animation: flash .6s 2; }
@keyframes flash { 50% { background: #4a3410; } }
.body { overflow: auto; flex: 1; min-height: 0; }
#mon { grid-area: mon; max-height: 860px; } #gp { grid-area: gp; } #perf { grid-area: perf; }
#book { grid-area: book; max-height: 470px; } #bltr { grid-area: bltr; max-height: 420px; }
#sig { grid-area: sig; max-height: 620px; } #risk { grid-area: risk; max-height: 760px; } #mth { grid-area: mth; max-height: 520px; }
#pre { grid-area: pre; max-height: 640px; } #aud { grid-area: aud; max-height: 640px; } #dh { grid-area: dh; max-height: 640px; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; background: var(--panel); color: var(--dim); font-weight: 400; text-align: right;
  padding: 3px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 2px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid #120e0a; }
th:first-child, td:first-child, td.l { text-align: left; }
td.wrap { text-align: left; white-space: normal; min-width: 160px; }
.light { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.appr { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.appr a.go { text-decoration: none; }
.tabs b { color: inherit; font-weight: 600; }
tfoot td { position: sticky; bottom: 0; background: var(--bar); border-top: 1px solid var(--rule); font-weight: 500; }
td.s { color: var(--amber); font-weight: 500; }
td .dot { color: var(--up); margin-left: 4px; font-size: 10px; }
tr.click { cursor: pointer; } tr.click:hover, tr.on { background: var(--sel); }
.up { color: var(--up); } .dn { color: var(--down); } .mut { color: var(--dim); }
.empty { color: var(--dim); padding: 14px 10px; margin: 0; }
.tick-up { background: rgba(46,229,157,.28); } .tick-dn { background: rgba(255,90,79,.28); }
.lv { transition: background .6s; }

.ghead { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 8px; align-items: baseline; border-bottom: 1px solid var(--rule); }
.ghead .sym { color: var(--amber); font-size: 16px; font-weight: 600; }
.ghead .px { font-size: 16px; font-weight: 500; }
.ghead span { color: var(--dim); } .ghead span b { color: var(--ink); font-weight: 400; }
.ghead .trk { color: var(--up); }
.chart { height: 330px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs button { padding: 0 6px; color: var(--dim); }
.tabs button[aria-pressed="true"] { color: #000; background: var(--amber); }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.kpi { padding: 5px 8px; border-right: 1px solid var(--rule); min-width: 0; }
.kpi div:first-child { color: var(--dim); font-size: 12px; }
.kpi div:last-child { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 8px; color: var(--dim); }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; }
.note { color: var(--dim); padding: 4px 8px; font-size: 12px; border-top: 1px solid var(--rule); }

.acct { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 5px 8px; border-bottom: 1px solid var(--rule); color: var(--dim); }
.acct b { color: var(--ink); font-weight: 500; }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; }
.rgrid div { padding: 5px 8px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 8px; }
.rgrid span { color: var(--dim); }
.sub { color: var(--amber); padding: 6px 8px 2px; font-weight: 500; }
.bar { height: 8px; background: #1a140d; position: relative; min-width: 60px; }
.bar i { position: absolute; top: 0; bottom: 0; }
.halt { padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.halt .bar { height: 10px; margin-top: 4px; }
.corr { display: grid; gap: 1px; padding: 4px 8px 10px; font-size: 9px; color: var(--dim); }
.corr i { aspect-ratio: 1; display: block; }
.corr .cl { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; overflow: hidden; height: 34px; line-height: 1; }
.corr .rl { text-align: right; padding-right: 3px; line-height: 1; white-space: nowrap; overflow: hidden; align-self: center; }
.mth td { padding: 2px 3px; font-size: 12px; }

.fkeys { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border-top: 1px solid var(--amber); }
.fkeys button { flex: 1; min-width: 92px; background: var(--bar); padding: 5px 6px; text-align: left; }
.fkeys button b { color: #000; background: var(--amber); padding: 0 4px; margin-right: 6px; font-weight: 600; }
.foot { color: var(--dim); padding: 6px 10px; font-size: 12px; margin: 0; }

dialog { background: #050403; color: var(--ink); border: 1px solid var(--amber); max-width: 560px; font: 13px/1.5 var(--f); }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h3 { color: var(--amber); margin: 0 0 8px; font-size: 14px; }
dialog code { color: var(--cmd); }
dialog label { display: block; margin: 8px 0; color: var(--dim); }
dialog input:not([type="checkbox"]) { display: block; width: 100%; margin-top: 3px; background: #000; color: var(--ink);
  border: 1px solid #4a3410; font: 13px var(--f); padding: 5px 8px; }
dialog .row { display: flex; gap: 8px; margin-top: 12px; }
dialog .row button:not(.go) { border: 1px solid var(--rule); padding: 5px 10px; }

@media (prefers-reduced-motion: reduce) {
  .p.flash > h2 { animation: none; outline: 1px solid var(--cmd); }
  .lv { transition: none; }
}
@media (max-width: 1150px) {
  main { grid-template-columns: 1fr 1fr; grid-template-areas: "gp gp" "perf perf" "book book" "mon bltr" "sig risk" "pre mth" "dh aud"; }
  .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .top { grid-template-columns: auto 1fr; }
  .clock { grid-column: 1 / -1; flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 700px) {
  main { grid-template-columns: 1fr; grid-template-areas: "gp" "perf" "book" "mon" "bltr" "sig" "risk" "pre" "dh" "aud" "mth"; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart { height: 260px; }
  #mon, #book, #bltr, #sig, #mth, #pre, #dh, #aud { max-height: 480px; }
  .sugg li { grid-template-columns: 40px auto 1fr; } .sugg .q { display: none; }
}