*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:     #0a0a0f;
  --surf:   #0f0f1a;
  --surf2:  #13131e;
  --border: #1c1c2e;
  --accent: #7c6af7;
  --green:  #3ecf8e;
  --warn:   #f7a84a;
  --danger: #f76a6a;
  --info:   #4ab8f7;
  --text:   #ddddf0;
  --muted:  #52526e;
  --dim:    #1e1e32;
  --mono:   ui-monospace, Consolas, monospace;
  --sans:   -apple-system, 'Segoe UI', Ubuntu, sans-serif;
}
html, body { width:1280px; height:720px; overflow:hidden;
  background:var(--bg); color:var(--text); font-family:var(--sans); font-size:12px; }
body { display:grid; grid-template-rows:34px 1fr 28px; }

header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:var(--surf); border-bottom:1px solid var(--border);
}
h1 { font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.header-r { display:flex; align-items:center; gap:16px; }
#cast-pill { display:flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:9px; background:var(--dim);
  border:1px solid var(--border); border-radius:20px; padding:2px 8px 2px 6px; color:var(--muted); }
#cast-pill.ready  { border-color:var(--green);  color:var(--green);  background:rgba(62,207,142,.08); }
#cast-pill.active { border-color:var(--accent); color:var(--accent); background:rgba(124,106,247,.08); }
.pdot { width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0; }
#cast-pill.active .pdot { animation:blink 1.4s infinite; }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
#clock { font-family:var(--mono); font-size:12px; color:var(--muted); }

main {
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(4,1fr); gap:7px; padding:7px 12px; min-height:0;
}
.card {
  background:var(--surf); border:1px solid var(--border); border-radius:6px;
  padding:9px 12px; display:flex; flex-direction:column; gap:6px; overflow:hidden; min-height:0;
}
.c2 { grid-column:span 2; }
.c3 { grid-column:span 3; }
.lbl { font-size:8.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); flex-shrink:0; display:flex; align-items:center; gap:6px; }
.badge { font-size:8px; font-family:var(--mono); padding:1px 5px; border-radius:3px; border:1px solid; }
.bw { color:var(--warn);   border-color:rgba(247,168,74,.35); background:rgba(247,168,74,.07); }
.bi { color:var(--info);   border-color:rgba(74,184,247,.35);  background:rgba(74,184,247,.07); }

/* FPS */
.fps-hero { display:flex; align-items:flex-end; gap:8px; flex-shrink:0; }
#fps-val  { font-family:var(--mono); font-size:48px; font-weight:700;
  line-height:1; color:var(--green); transition:color .4s; }
.fps-side { display:flex; flex-direction:column; gap:1px; padding-bottom:3px; }
.fps-unit { font-family:var(--mono); font-size:12px; color:var(--muted); }
#fps-rate { font-size:10px; font-weight:600; color:var(--green); }
.fps-mini { display:grid; grid-template-columns:1fr 1fr; gap:1px 10px; }
.fps-m { font-size:10px; color:var(--muted); }
.fps-m span { font-family:var(--mono); color:var(--text); margin-left:3px; }

/* Sparkline */
#sparkline { width:100%; display:block; flex:1; min-height:0; }
.spark-ends { display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:8px; color:var(--dim); flex-shrink:0; }

/* Bars */
.bars { display:flex; flex-direction:column; gap:6px; }
.bar-row { display:grid; grid-template-columns:56px 1fr 60px; align-items:center; gap:7px; }
.blbl { font-family:var(--mono); font-size:9.5px; color:var(--muted); }
.track { height:4px; background:var(--dim); border-radius:2px; overflow:hidden; }
.fill  { height:100%; border-radius:2px; transition:width .7s; }
.fu{background:var(--accent);} .fa{background:var(--green);} .fl{background:var(--warn);width:100%!important;}
.bval { font-family:var(--mono); font-size:10px; font-weight:600; text-align:right; }

/* KV */
.kvs { display:flex; flex-direction:column; flex:1; justify-content:space-evenly; }
.kv  { display:flex; justify-content:space-between; align-items:baseline;
  padding:3px 0; border-bottom:1px solid var(--border); gap:8px; min-height:0; }
.kv:last-child{border-bottom:none;padding-bottom:0;} .kv:first-child{padding-top:0;}
.kk  { font-size:10px; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.kv2 { font-family:var(--mono); font-size:10px; font-weight:600;
  text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Stats */
.stats{display:grid;gap:3px;flex-shrink:0;}
.s3{grid-template-columns:repeat(3,1fr);} .s2{grid-template-columns:repeat(2,1fr);}
.stat{text-align:center;}
.sv{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.1;margin-bottom:1px;}
.sl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

/* Codecs */
.codecs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1;min-height:0;}
.codec{border:1px solid var(--border);border-radius:4px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:3px;}
.codec.y{border-color:rgba(62,207,142,.4);background:rgba(62,207,142,.05);}
.codec.m{border-color:rgba(247,168,74,.4);background:rgba(247,168,74,.05);}
.codec.n{opacity:.4;}
.cn{font-family:var(--mono);font-size:10.5px;font-weight:700;}
.codec.y .cn{color:var(--green);} .codec.m .cn{color:var(--warn);} .codec.n .cn{color:var(--muted);}
.cs{font-size:8.5px;color:var(--muted);margin-top:1px;}
.codec.y .cs{color:var(--green);} .codec.m .cs{color:var(--warn);}

/* Caps */
.caps{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);
  gap:4px;flex:1;min-height:0;}
.cap{border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;
  gap:6px;padding:4px 8px;overflow:hidden;}
.cap.on{border-color:rgba(124,106,247,.35);background:rgba(124,106,247,.05);}
.cap.off{opacity:.35;}
.cdot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.cap.off .cdot{background:var(--muted);}
.cname{font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* WebGL */
.gl-box{font-family:var(--mono);font-size:9.5px;color:var(--info);
  background:var(--surf2);border:1px solid var(--border);border-radius:4px;
  padding:5px 8px;line-height:1.5;flex-shrink:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}

/* Storage bar */
.sto-track{height:4px;background:var(--dim);border-radius:2px;overflow:hidden;flex-shrink:0;}
.sto-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));
  border-radius:2px;transition:width .7s;}

/* Timing */
.timings{display:flex;flex-direction:column;flex:1;justify-content:space-evenly;}
.trow{display:flex;align-items:center;gap:6px;}
.tlbl{font-size:9.5px;color:var(--muted);width:44px;flex-shrink:0;}
.ttrack{flex:1;height:3px;background:var(--dim);border-radius:2px;overflow:hidden;}
.tfill{height:100%;background:var(--info);border-radius:2px;}
.tval{font-family:var(--mono);font-size:9.5px;font-weight:600;
  color:var(--info);width:44px;text-align:right;flex-shrink:0;}

.div{height:1px;background:var(--border);flex-shrink:0;}

/* Msg log */
.msg-log {
  display:flex; flex-direction:column; flex:1; min-height:0;
  overflow:hidden; gap:0;
}
.msg-entry {
  display:grid; grid-template-columns:14px 48px 1fr auto;
  align-items:baseline; gap:4px;
  padding:3px 0; border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:9px;
  animation: fadein .2s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.msg-entry:last-child{border-bottom:none;}
.msg-dir  { font-size:10px; }
.msg-dir.in  { color:var(--green); }
.msg-dir.out { color:var(--accent); }
.msg-type { color:var(--muted); font-size:9px; }
.msg-body { color:var(--text); font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-ts   { color:var(--dim); font-size:8px; flex-shrink:0; }

.senders-row {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.sender-count {
  font-family:var(--mono); font-size:20px; font-weight:700; color:var(--accent);
}
.sender-lbl { font-size:10px; color:var(--muted); }
.rtt-badge {
  margin-left:auto; font-family:var(--mono); font-size:10px;
  color:var(--green); background:rgba(62,207,142,.08);
  border:1px solid rgba(62,207,142,.3); border-radius:4px; padding:2px 7px;
}

/* Footer */
footer { display:flex; align-items:center; padding:0 20px; gap:12px;
  border-top:1px solid var(--border); background:var(--surf); }
#uptime { font-family:var(--mono); font-size:9px; color:var(--muted); }
.fnote  { margin-left:auto; font-size:9px; color:var(--dim); }

.ca{color:var(--accent);} .cg{color:var(--green);}
.cw{color:var(--warn);}   .ci{color:var(--info);}

/* Hide host UI during bare benchmark */
body.bench-running > header,
body.bench-running > main,
body.bench-running > footer { display: none; }

/* Benchmark overlay */
#bench-overlay {
  position:fixed; inset:0; z-index:999;
  display:none; background:#000;
  font-family:var(--mono);
}
#bench-canvas { width:100%; height:100%; display:block; }
#bench-hud {
  position:absolute; top:24px; left:24px;
  color:var(--green); font-size:18px; line-height:1.6;
  text-shadow:0 0 12px rgba(62,207,142,.25);
  pointer-events:none;
}
#bench-hud .dim { color:var(--muted); font-size:13px; }
#bench-results {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:#fff; pointer-events:none;
}
#bench-results h2 {
  font-size:32px; font-weight:300; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.br-row { font-size:18px; margin:6px 0; font-family:var(--mono); }
.br-row .val { color:var(--green); font-weight:700; }
.br-row .lbl { color:var(--muted); }