:root {
  --bg:#0f1115; --panel:#1a1d24; --panel-2:#12151b; --fg:#e6e6e6;
  --muted:#8a8f98; --faint:#5b626d; --line:#2a2e37; --line-soft:#20242c;
  --ok:#3fb950; --busy:#db6d28; --ring:#58a6ff; --warn:#d29922;
  --off:#6e7681; --crit:#f85149; --xfer:#a371f7; --accent:#58a6ff;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:radial-gradient(1100px 560px at 82% -12%, #14181f 0%, var(--bg) 58%);
}
.wrap { max-width:1040px; margin:0 auto; padding:1.1rem 1.25rem 3rem; }
.mono { font-family:var(--mono); }
.dim { color:var(--faint); font-style:italic; font-size:.8rem; }
.empty { color:var(--muted); font-style:italic; padding:.4rem 0; }

/* ---- header ---- */
header { display:flex; align-items:center; gap:.65rem; padding:.2rem 0 .9rem; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--off); flex:none; }
.live-dot.on { background:var(--ok); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(63,185,80,.45);} 70%{box-shadow:0 0 0 7px rgba(63,185,80,0);} 100%{box-shadow:0 0 0 0 rgba(63,185,80,0);} }
h1 { margin:0; font-size:.98rem; font-weight:650; letter-spacing:.01em; }
h1 .plane { color:var(--muted); font-weight:500; }
.conn { font-size:.72rem; color:var(--muted); font-family:var(--mono);
  border:1px solid var(--line); padding:.12rem .45rem; border-radius:5px; }
.broker { margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--faint); }
.broker b { color:var(--muted); font-weight:500; }

/* ---- tabs (CSS radio) ---- */
.tabin { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tabbar { display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem; }
.tabbar label { font-size:.8rem; font-weight:550; color:var(--muted); cursor:pointer;
  padding:.5rem .85rem; border-bottom:2px solid transparent; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:.45rem; }
.tabbar label:hover { color:var(--fg); }
.tabbar .badge { font-family:var(--mono); font-size:.66rem; color:var(--warn);
  background:rgba(210,153,34,.12); border:1px solid rgba(210,153,34,.3);
  border-radius:20px; padding:0 .38rem; }
.tabbar .badge[hidden] { display:none; }
.panel { display:none; }
#t-ov:checked ~ .tabbar label[for=t-ov],
#t-q:checked  ~ .tabbar label[for=t-q],
#t-c:checked  ~ .tabbar label[for=t-c],
#t-l:checked  ~ .tabbar label[for=t-l]  { color:var(--fg); border-bottom-color:var(--accent); }
#t-ov:checked ~ .panels .p-ov,
#t-q:checked  ~ .panels .p-q,
#t-c:checked  ~ .panels .p-c,
#t-l:checked  ~ .panels .p-l   { display:block; }
#t-ov:focus-visible ~ .tabbar label[for=t-ov],
#t-q:focus-visible  ~ .tabbar label[for=t-q],
#t-c:focus-visible  ~ .tabbar label[for=t-c],
#t-l:focus-visible  ~ .tabbar label[for=t-l]  { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---- summary strip ---- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.5rem; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:.7rem .85rem; }
.stat .k { font-size:.63rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.stat .v { font-family:var(--mono); font-size:1.5rem; font-weight:500; margin-top:.15rem;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.stat .v small { font-size:.8rem; color:var(--faint); font-weight:400; }
.stat .v.warn { color:var(--warn); }
@media (max-width:720px){ .stats{grid-template-columns:repeat(2,1fr);} }

h2 { margin:0 0 .7rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:650; }
h2 .q { color:var(--fg); font-family:var(--mono); }
h2 .cap { color:var(--faint); font-weight:400; text-transform:none; letter-spacing:0;
  font-family:var(--mono); font-size:.72rem; }
section { margin-bottom:1.6rem; }

/* ---- overview plane cards ---- */
.planes { display:grid; grid-template-columns:1.3fr 1fr; gap:.9rem; }
@media (max-width:720px){ .planes{grid-template-columns:1fr;} }
.plane-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; }
.plane-card .top { display:flex; align-items:baseline; gap:.5rem; }
.plane-card .big { font-family:var(--mono); font-size:1.15rem; font-weight:550; }
.plane-card .meta { margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--faint); }
.plane-card .go { display:block; margin-top:.9rem; font-size:.74rem; color:var(--accent); cursor:pointer; }
.plane-card .go:hover { text-decoration:underline; }

/* queue glance: counts, not a cryptic histogram */
.qstat { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.9rem;
  font-family:var(--mono); font-size:.8rem; color:var(--muted); }
.qstat b { color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; }
.qstat .warn b { color:var(--warn); }

/* System card — Asterisk + Box stats from /stats (full width across the planes grid) */
.syscard { grid-column:1 / -1; }
.sysgrid { display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2.2rem; margin-top:.85rem; }
@media (max-width:720px){ .sysgrid{grid-template-columns:1fr;} }
.syscol .colhd { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding-bottom:.35rem; margin-bottom:.2rem; border-bottom:1px solid var(--line-soft); }
.sline { display:flex; align-items:baseline; gap:.6rem; padding:.24rem 0;
  font-family:var(--mono); font-size:.77rem; }
.sline + .sline { border-top:1px solid var(--line-soft); }
.sline .sk { color:var(--muted); }
.sline .sv { margin-left:auto; color:var(--fg); font-variant-numeric:tabular-nums; }
.sline .sv.ok { color:var(--ok); } .sline .sv.warn { color:var(--warn); }
.sline .sv.crit { color:var(--crit); } .sline .sv.off { color:var(--faint); }

.dots-row { display:flex; gap:.55rem; margin-top:.7rem; flex-wrap:wrap; }
.devpill { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--mono);
  font-size:.72rem; color:var(--muted); }
.devpill .d { width:8px; height:8px; border-radius:50%; background:var(--off); }
.mini-list { margin-top:.55rem; display:flex; flex-direction:column; gap:.3rem; }
.mini-list .l { font-family:var(--mono); font-size:.75rem; color:var(--muted); display:flex; gap:.4rem; align-items:center; }
.mini-list .arr { color:var(--faint); } .mini-list .q { color:var(--accent); }
.mini-list .dur { margin-left:auto; color:var(--faint); font-variant-numeric:tabular-nums; }

/* ---- queue members: a ladder, not cards ---- */
.ladder { border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.lrow { display:flex; align-items:center; gap:.7rem; padding:.55rem .85rem;
  background:var(--panel); border-top:1px solid var(--line-soft); }
.lrow:first-child { border-top:none; }
.lrow .dot { width:9px; height:9px; border-radius:50%; background:var(--off); flex:none; }
.lrow .name { font-family:var(--mono); font-size:.83rem; }
.lrow .state { font-family:var(--mono); font-size:.73rem; color:var(--muted); min-width:66px; }
.lrow .lcalls { margin-left:auto; font-family:var(--mono); font-size:.8rem;
  font-variant-numeric:tabular-nums; color:var(--fg); }
.lrow .lcalls small { color:var(--faint); }
.lrow .lbar { flex:0 0 96px; height:6px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
.lrow .lbar > span { display:block; height:100%; background:var(--accent); border-radius:3px; }
.lrow.s-avail .dot { background:var(--ok); }
.lrow.s-inuse .dot { background:var(--busy); } .lrow.s-inuse .lbar > span { background:var(--busy); }
.lrow.s-ringing .dot { background:var(--ring); }
.lrow.s-paused .dot { background:var(--warn); } .lrow.s-paused .lbar > span { background:var(--warn); }
.lrow.s-off .dot { background:var(--off); }
.waiting { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.chip { font-family:var(--mono); font-size:.72rem; color:var(--warn);
  border:1px solid rgba(210,153,34,.35); background:rgba(210,153,34,.08); padding:.16rem .5rem; border-radius:20px; }
.chip .w { color:var(--faint); }

/* ---- live calls ---- */
.grid { display:grid; gap:.6rem; grid-template-columns:1fr; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:.6rem .75rem; }
.callcard { display:flex; align-items:center; gap:.7rem; }
.callcard .dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--off); }
.callcard.st-busy .dot { background:var(--busy); }
.callcard.st-ring .dot { background:var(--ring); }
.callcard .route { font-family:var(--mono); font-size:.82rem; }
.callcard .route .q { color:var(--accent); } .callcard .route .arr { color:var(--faint); margin:0 .15rem; }
.callcard .dur { margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---- recent calls: compact rows that expand ---- */
.feed { display:flex; flex-direction:column; gap:.45rem; }
details.trace { background:var(--panel); border:1px solid var(--line); border-radius:9px; }
details.trace.abandoned { border-color:rgba(248,81,73,.35); }
details.trace[open] { background:var(--panel-2); }
summary.trace-row { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; }
summary.trace-row::-webkit-details-marker { display:none; }
summary.trace-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:9px; }
.id { font-family:var(--mono); font-size:.76rem; color:var(--faint); }
.pill { font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.1rem .42rem; border-radius:20px; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.pill.live { color:var(--ok); border:1px solid rgba(63,185,80,.35); }
.pill.live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 2.4s infinite; }
.pill.done { color:var(--muted); border:1px solid var(--line); }
.pill.xfer { color:var(--xfer); border:1px solid rgba(163,113,247,.4); }
.pill.abandoned { color:var(--crit); border:1px solid rgba(248,81,73,.4); }
.trace-route { font-family:var(--mono); font-size:.81rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trace-route .q { color:var(--accent); } .trace-route .arr { color:var(--faint); margin:0 .18rem; }
.trace-route .none { color:var(--crit); } .trace-route .x { color:var(--xfer); }
.trace-meta { margin-left:auto; font-family:var(--mono); font-size:.73rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.chev { color:var(--faint); transition:transform .15s; font-size:.9rem; }
details[open] .chev { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .chev{transition:none;} .live-dot.on,.pill.live::before{animation:none;} }

/* expanded detail: the full lifecycle scope */
.trace-detail { padding:.2rem 1rem 1rem; border-top:1px solid var(--line-soft); margin-top:.1rem; }
.tl { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:.9rem;
  overflow-x:auto; padding-bottom:.15rem; }
.tk { position:relative; padding:.9rem .5rem 0 0; min-width:104px; }
.tk::before { content:""; position:absolute; top:4px; left:5px; right:-50%; height:2px; background:var(--line); }
.tk:last-child::before { display:none; }
.tk .pt { position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; background:var(--off); }
.tk .lab { font-family:var(--mono); font-size:.75rem; color:var(--fg); }
.tk .t { font-family:var(--mono); font-size:.7rem; color:var(--faint); margin-top:.1rem; font-variant-numeric:tabular-nums; }
.tk.joined .pt{background:var(--ring);} .tk.ringing .pt{background:var(--warn);}
.tk.connected .pt{background:var(--ok);} .tk.completed .pt{background:var(--off);}
.tk.abandoned .pt{background:var(--crit);} .tk.transfer .pt{background:var(--xfer);}
.tk.transfer::before{background:var(--xfer);opacity:.4;}
.tk.pending .pt{background:transparent; border:2px solid var(--faint);}
.tk.pending::before{background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 7px);}
.tk.pending .lab{color:var(--faint);}
.tk.abandoned::before{background:repeating-linear-gradient(90deg,var(--crit) 0 4px,transparent 4px 8px);opacity:.5;}

.detail-foot { display:flex; gap:.7rem; align-items:center; margin-top:1rem; flex-wrap:wrap; }
.kv { font-family:var(--mono); font-size:.72rem; color:var(--faint); }
.kv b { color:var(--muted); font-weight:500; }

/* ---- event log (raw /events frames) ---- */
.log { border:1px solid var(--line); border-radius:9px; overflow:hidden;
  max-height:70vh; overflow-y:auto; font-family:var(--mono); }
.logrow { display:flex; align-items:baseline; gap:.6rem; padding:.32rem .8rem;
  border-top:1px solid var(--line-soft); font-size:.75rem; white-space:nowrap; }
.logrow:first-child { border-top:none; }
.logrow .lt { color:var(--faint); font-variant-numeric:tabular-nums; flex:none; }
.logrow .lev { flex:none; min-width:112px; font-size:.66rem; letter-spacing:.03em;
  color:var(--muted); }
.logrow .lev.ev-call_lifecycle { color:var(--accent); }
.logrow .lev.ev-agent_state_changed { color:var(--xfer); }
.logrow .lev.ev-call_ended { color:var(--crit); }
.logrow .lsum { color:var(--fg); overflow:hidden; text-overflow:ellipsis; }
.logrow .lsum .k { color:var(--muted); } .logrow .lsum .q { color:var(--accent); }
.logrow .lsum .parties { color:var(--ok); } .logrow .lsum .none { color:var(--faint); }
.logrow .lsum .reap { color:var(--warn); }

.hint { margin-top:1rem; font-size:.75rem; color:var(--faint); line-height:1.6; }
.hint code { font-family:var(--mono); color:var(--muted); background:var(--panel-2); padding:.05rem .3rem; border-radius:4px; }