:root {
  --good:#3ecf6b; --degraded:#e3b341; --dead:#f25c54;
  --bg:#0d1117; --card:#161b22; --line:#2a3038; --fg:#e6edf3; --dim:#8b949e; --accent:#4493f8;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
header { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { font-size:16px; margin:0; font-weight:600; letter-spacing:.3px; }
#conn { font-size:12px; padding:2px 8px; border-radius:10px; border:1px solid var(--line); color:var(--dim); }
#conn.live { color:var(--good); border-color:var(--good); }
#conn.down { color:var(--dead); border-color:var(--dead); }
.spacer { margin-left:auto; }
.hdr-active { color:var(--dim); font-size:12px; }
main { padding:20px; display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
#cards { display:flex; flex-direction:column; gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-left-width:4px; border-radius:8px; padding:12px 16px; }
.card.GOOD { border-left-color:var(--good); }
.card.DEGRADED { border-left-color:var(--degraded); }
.card.DEAD { border-left-color:var(--dead); opacity:.7; }
.card.active { box-shadow:0 0 0 1px var(--accent) inset; }
.row1 { display:flex; align-items:center; gap:10px; }
.name { font-size:15px; font-weight:600; }
.badge { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; }
.badge.GOOD { background:rgba(62,207,107,.15); color:var(--good); }
.badge.DEGRADED { background:rgba(227,179,65,.15); color:var(--degraded); }
.badge.DEAD { background:rgba(242,92,84,.15); color:var(--dead); }
.active-pill { margin-left:auto; font-size:11px; color:var(--accent); font-weight:600; }
.metrics { margin-top:8px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px 4px; font-size:12px; color:var(--dim); }
.metrics b { display:block; color:var(--fg); font-size:14px; font-weight:600; }
aside h2 { font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px; }
#log { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; height:60vh; overflow:auto; font-size:12px; }
#log div { padding:2px 0; border-bottom:1px solid #1c2128; }
#log .t { color:var(--dim); }
.empty { color:var(--dim); padding:20px; text-align:center; }

/* replay controls */
.controls { display:flex; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.controls button, .controls select {
  background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:6px;
  padding:5px 12px; font:inherit; cursor:pointer;
}
.controls button:hover { border-color:var(--accent); }
.controls input[type=range] { flex:1; min-width:160px; accent-color:var(--accent); }
.controls .time { color:var(--dim); font-size:12px; min-width:130px; text-align:right; }
.note { padding:8px 20px; color:var(--dim); font-size:12px; }