:root{
  --bg:#0b0d12; --panel:rgba(16,19,26,.82); --line:rgba(255,255,255,.08);
  --ink:#e8ecf4; --muted:#7c8698; --accent:#4fc3f7; --ok:#4ade80; --warn:#fbbf24;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font:13px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
#scene{position:fixed;inset:0;display:block}

#hud-top{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;background:linear-gradient(180deg,rgba(11,13,18,.95),transparent);
  pointer-events:none;z-index:5}
.brand{font-weight:700;letter-spacing:.22em;font-size:12px;display:flex;align-items:center;gap:9px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.status{font-size:11px;font-family:ui-monospace,monospace;color:var(--muted);
  padding:4px 10px;border:1px solid var(--line);border-radius:99px;background:var(--panel)}
.status.on{color:var(--ok);border-color:rgba(74,222,128,.35)}
.status.off{color:#ef4444;border-color:rgba(239,68,68,.35)}

#hud-left,#hud-right{position:fixed;top:66px;width:232px;padding:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(14px);z-index:5;max-height:calc(100% - 90px);overflow:auto}
#hud-left{left:16px}
#hud-right{right:16px;width:250px}
h2{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px;font-weight:600}
.row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}
.row span{color:var(--muted)}
.row b{font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now{margin-top:4px;padding:9px 11px;border-radius:9px;background:rgba(79,195,247,.1);
  border:1px solid rgba(79,195,247,.25);font-family:ui-monospace,monospace;font-size:11px;
  color:var(--accent);word-break:break-word}

.agent{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:8px;
  transition:background .18s;margin-bottom:2px}
.agent.active{background:rgba(255,255,255,.07)}
.agent .swatch{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.agent .nm{flex:1;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent .st{font-size:9.5px;font-family:ui-monospace,monospace;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.agent.active .st{color:var(--accent)}

#feed{max-height:210px;overflow:auto;font-family:ui-monospace,monospace;font-size:10.5px}
.ev{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted);
  word-break:break-word}
.ev b{color:var(--ink);font-weight:600}
.ev .t{color:#4b5563;margin-right:6px}

#gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,13,18,.94);backdrop-filter:blur(8px);z-index:20}
#gate.hidden{display:none}
#gate form{width:320px;padding:26px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);text-align:center}
#gate h1{margin:0 0 6px;font-size:15px;letter-spacing:.16em}
#gate p{margin:0 0 16px;color:var(--muted);font-size:11.5px}
#gate input{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);
  background:#0b0d12;color:var(--ink);font-size:12px;outline:none}
#gate input:focus{border-color:var(--accent)}
#gate button{width:100%;margin-top:10px;padding:10px;border-radius:9px;border:0;
  background:var(--accent);color:#06222e;font-weight:700;font-size:12px;cursor:pointer}
#gate button:hover{filter:brightness(1.1)}
.err{color:#ef4444;font-size:11px;margin-top:9px;min-height:14px}