:root {
  color-scheme: light;
  --bg: #f4f3f0;
  --surface: #fcfcfb;
  --border: #dedcd5;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #8a887f;
  --inv: #2a78d6;
  --dev: #eb6834;
  --prod: #1baf7a;
  --critical: #d03b3b;
  --grid: #e8e6df;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #111110;
    --surface: #1a1a19;
    --border: #33332f;
    --text: #ffffff;
    --text-2: #c3c2b7;
    --text-3: #85847b;
    --inv: #3987e5;
    --dev: #d95926;
    --prod: #199e70;
    --critical: #e66767;
    --grid: #2a2a27;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
h1 { font-size: 18px; margin: 0; letter-spacing: 0.02em; font-family: ui-monospace, monospace; }
.sub { color: var(--text-2); }
#controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
#controls label { color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.sep { width: 1px; height: 20px; background: var(--border); }
input, select, button {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
}
input[type=number] { width: 62px; }
button { cursor: pointer; padding: 4px 12px; }
button:hover { border-color: var(--text-3); }
button.primary { background: var(--text); color: var(--surface); border-color: var(--text); min-width: 68px; }

main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
#stage { position: relative; min-height: 320px; }
#graph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
aside {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--border);
}

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-2); }
#stage > .legend {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  pointer-events: none;
}
.legend li { display: flex; align-items: center; gap: 6px; }
.mark { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mark.inv { background: var(--inv); border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.mark.dev { background: var(--dev); }
.mark.dev.dormant { background: transparent; border: 2px solid var(--dev); }
.mark.prod { background: var(--prod); width: 12px; height: 12px; }
.line { width: 18px; height: 0; border-top: 2px solid var(--text-3); display: inline-block; }
.line.stake { border-top: 1px solid var(--inv); }
.line.tree { border-top: 2px solid var(--dev); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.tile b { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile span { color: var(--text-2); font-size: 11px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: 0 0 8px; font-weight: 600; }
.card h3 { font-size: 12px; color: var(--text-2); margin: 12px 0 4px; font-weight: 600; }
.muted { color: var(--text-3); margin: 0; }

.chartwrap { position: relative; margin-top: 6px; }
#chart { width: 100%; height: 150px; display: block; }

.tip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  z-index: 5;
  font-size: 12px;
}
.tip .row { display: flex; align-items: center; gap: 6px; }
.tip .row b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

.who { cursor: pointer; font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.who:hover { text-decoration: underline; }
.who .mark { margin-right: 4px; width: 8px; height: 8px; vertical-align: baseline; }

.idhead { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 2px; }
.addr { font-family: ui-monospace, monospace; color: var(--text-3); font-size: 11px; }
.badge { font-size: 11px; border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; color: var(--text-2); }
.badge.bad { color: var(--critical); border-color: var(--critical); }
dl.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 8px 0 0; }
dl.kv div { display: flex; justify-content: space-between; gap: 8px; }
dl.kv dt { color: var(--text-2); }
dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; }
td { padding: 1px 0; vertical-align: middle; }
td.num { text-align: right; font-variant-numeric: tabular-nums; width: 56px; color: var(--text-2); }
td.bar { width: 34%; padding: 0 8px; }
td.bar i { display: block; height: 6px; border-radius: 3px; background: var(--text-3); min-width: 2px; }
td.bar i.k0 { background: var(--inv); }
td.bar i.k1 { background: var(--dev); }
td.bar i.k2 { background: var(--prod); }
ul.tree { list-style: none; margin: 0; padding: 0; }
ul.tree ul { list-style: none; margin: 0; padding-left: 14px; border-left: 1px solid var(--border); margin-left: 4px; }
.progress { height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; margin-top: 4px; }
.progress i { display: block; height: 100%; background: var(--dev); }
.progress i.prod { background: var(--prod); }

#events { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
#events li { padding: 2px 0; border-bottom: 1px solid var(--grid); color: var(--text-2); }
#events li time { color: var(--text-3); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 11px; }

#error { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--critical); }
#error[hidden] { display: none; }

@media (max-width: 900px) {
  body { height: auto; }
  main { grid-template-columns: 1fr; }
  #stage { height: 60vh; }
  aside { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
  #controls { margin-left: 0; }
}