:root {
  --bg: #0a0d0b;
  --bg2: #111612;
  --bg3: #18201a;
  --line: #243026;
  --fg: #c8d3c9;
  --dim: #6b7a6d;
  --faint: #3d4a3f;
  --green: #4cf28a;
  --green2: #2bb562;
  --red: #ff5f6d;
  --yellow: #ffd166;
  --orange: #ff9f43;
  --cyan: #5ad7ff;
  --magenta: #d98cff;
  --blue: #7aa2ff;
  --sel: #1d3a28;
  --cur: #2c5a3d;
  --row: 19px;
  --font: "JetBrains Mono", "Cascadia Mono", "Fira Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 12px/1.35 var(--font); }
button { font: inherit; color: inherit; }
#app { display: flex; flex-direction: column; height: 100vh; }

/* header */
#top { display: flex; align-items: center; gap: 14px; padding: 3px 8px; background: var(--bg2); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.brand { font-weight: 700; letter-spacing: 1px; color: var(--fg); }
.brand .g { color: var(--green); }
.spacer { flex: 1; }
#feeds span { margin-right: 10px; color: var(--dim); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.stale { background: var(--yellow); }
.dot.err { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot.wait { background: var(--faint); }
#calcinfo b { color: var(--cyan); font-weight: 400; }
#calcinfo .clk { cursor: pointer; }
#calcinfo .clk:hover .tag { filter: brightness(1.4); }
#calcinfo kbd { color: var(--yellow); font: inherit; }
.kbtn { background: var(--bg3); border: 1px solid var(--line); padding: 0 6px; cursor: pointer; color: var(--dim); }
.kbtn:hover { color: var(--fg); border-color: var(--green2); }

/* tabs */
#tabs { display: flex; gap: 1px; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#tabs .tab { padding: 3px 10px; cursor: pointer; color: var(--dim); background: var(--bg2); border: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
#tabs .tab .k { color: var(--yellow); margin-right: 5px; }
#tabs .tab:hover { color: var(--fg); }
#tabs .tab.on { color: var(--green); background: var(--bg3); border-bottom-color: var(--green); }
#tabs .tab.view { color: var(--magenta); }
#tabs .tab.view.on { border-bottom-color: var(--magenta); }
#tabs .tab .x { margin-left: 6px; color: var(--faint); }
#tabs .tab .x:hover { color: var(--red); }

/* filter */
#filterbar { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-bottom: 1px solid var(--line); background: var(--bg); }
#filterbar .prompt { color: var(--yellow); }
#filter { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font: inherit; padding: 0; }
#filter::placeholder { color: var(--faint); }
#filter.bad { color: var(--red); }
#rowinfo { color: var(--dim); white-space: nowrap; }
#rowinfo b { color: var(--fg); font-weight: 400; }

/* table */
#main { flex: 1; display: flex; min-height: 0; }
#tablewrap { flex: 1; overflow: auto; outline: 0; position: relative; }
#grid { border-collapse: collapse; width: max-content; min-width: 100%; table-layout: auto; }
#grid th, #grid td { padding: 0 8px; height: var(--row); white-space: nowrap; text-align: right; border-right: 1px solid #141a15; }
#grid th { position: sticky; top: 0; z-index: 2; background: var(--bg2); color: var(--dim); font-weight: 400; cursor: pointer; user-select: none; border-bottom: 1px solid var(--line); }
#grid th:hover { color: var(--fg); }
#grid th.sorted { color: var(--green); }
#grid th.colcur { box-shadow: inset 0 -2px 0 var(--yellow); color: var(--yellow); }
#grid th.l, #grid td.l { text-align: left; }
#grid tbody tr { cursor: default; }
#grid tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }
#grid tbody tr:hover td { background: #141c16; }
#grid tbody tr.cur td { background: var(--cur); }
#grid td.name { color: #e6ede7; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
#grid td.why { color: var(--dim); text-align: left; }
#grid td.pin { width: 18px; text-align: center; color: var(--faint); cursor: pointer; padding: 0 2px; }
#grid td.pin.on { color: var(--yellow); }
#grid td.pin:hover { color: var(--yellow); }
.spacer-row td { padding: 0 !important; border: 0 !important; background: transparent !important; }
#empty { padding: 24px; color: var(--dim); white-space: pre-wrap; }

/* semantic colors */
.pos { color: var(--green); }
.pos2 { color: #9dffbf; font-weight: 700; }
.neg { color: var(--red); }
.warn { color: var(--yellow); }
.hot { color: var(--orange); }
.cy { color: var(--cyan); }
.mg { color: var(--magenta); }
.bl { color: var(--blue); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.tag { display: inline-block; padding: 0 4px; border: 1px solid currentColor; border-radius: 2px; line-height: 13px; font-size: 10px; }
.bar { display: inline-block; height: 7px; background: var(--green2); vertical-align: 0; margin-right: 4px; }

/* detail pane */
#detail { width: 430px; min-width: 300px; border-left: 1px solid var(--line); background: var(--bg2); overflow: auto; padding: 6px 10px 20px; }
#detail h2 { margin: 2px 0 2px; font-size: 13px; color: #fff; font-weight: 700; }
#detail .sub { color: var(--dim); margin-bottom: 8px; }
#detail h3 { margin: 10px 0 3px; font-size: 11px; color: var(--yellow); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dashed var(--line); }
#detail table { border-collapse: collapse; width: 100%; }
#detail td { padding: 0 4px; text-align: right; white-space: nowrap; }
#detail td.l { text-align: left; }
#detail td.wrap { white-space: normal; padding-bottom: 2px; }
#detail .kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0 10px; }
#detail .kv span:nth-child(odd) { color: var(--dim); }
#detail .kv span:nth-child(even) { text-align: right; }
#detail svg { width: 100%; height: 70px; display: block; background: var(--bg); border: 1px solid var(--line); }
#detail .cmd { display: inline-block; margin: 6px 6px 0 0; padding: 1px 6px; border: 1px solid var(--line); background: var(--bg3); cursor: pointer; }
#detail .cmd:hover { border-color: var(--green2); color: var(--green); }

/* status bar */
#statusbar { padding: 2px 8px; background: var(--bg2); border-top: 1px solid var(--line); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#statusbar kbd { color: var(--yellow); font: inherit; }

/* modal */
#modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
#modal[hidden] { display: none; }
#modal .box { background: var(--bg2); border: 1px solid var(--green2); padding: 12px 16px; min-width: 420px; max-width: min(1100px, 96vw); max-height: 85vh; overflow: auto; box-shadow: 0 0 40px rgba(76,242,138,0.08); }
#modal h2 { margin: 0 0 8px; font-size: 13px; color: var(--green); }
#modal h3 { margin: 10px 0 4px; font-size: 11px; color: var(--yellow); font-weight: 400; text-transform: uppercase; }
#modal table { border-collapse: collapse; }
#modal td { padding: 1px 12px 1px 0; vertical-align: top; }
#modal kbd { color: var(--yellow); font: inherit; }
#modal label { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 8px; margin: 4px 0; }
#modal label small { grid-column: 2; color: var(--dim); margin-top: -3px; }
#modal input, #modal select { background: var(--bg); border: 1px solid var(--line); color: var(--fg); font: inherit; padding: 2px 4px; }
#modal input:focus, #modal select:focus { outline: 0; border-color: var(--green); }
#modal .btns { margin-top: 10px; text-align: right; color: var(--dim); }

#toast { position: fixed; bottom: 26px; right: 12px; background: var(--bg3); border: 1px solid var(--green2); padding: 4px 10px; z-index: 20; color: var(--green); }

@media (max-width: 900px) {
  #detail { position: fixed; inset: auto 0 22px 0; width: auto; max-height: 50vh; border-left: 0; border-top: 1px solid var(--line); z-index: 5; }
  #calcinfo { display: none; }
}

/* simulation */
.simbar { display: flex; height: 14px; margin-top: 6px; border: 1px solid var(--line); }
.simseg { font-size: 10px; line-height: 12px; color: var(--bg); padding: 0 3px; overflow: hidden; white-space: nowrap; }
.simseg.b { background: var(--cyan); }
.simseg.p { background: var(--orange); }
.simseg.s { background: var(--green); }
.simtbl td { padding: 1px 8px 1px 0 !important; text-align: right; white-space: nowrap; }
.simtbl td.l { text-align: left; }
.simtbl td.wrap { white-space: normal; min-width: 180px; }
#modal .kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1px 14px; }
#modal .kv span:nth-child(odd) { color: var(--dim); }
#modal .kv span:nth-child(even) { text-align: right; }