*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base: #0a0f1e;--bg-panel: #0f172a;--bg-card: #1e293b;--bg-hover: #273549;--border: #334155;--text: #e2e8f0;--text-muted: #64748b;--text-dim: #94a3b8;--blue: #3b82f6;--green: #22c55e;--red: #ef4444;--orange: #f97316;--yellow: #eab308}html,body,#root{height:100%;background:var(--bg-base);color:var(--text);font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:14px}.navbar{display:flex;align-items:center;gap:4px;padding:0 16px;height:48px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0}.navbar-brand{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-right:16px}.nav-link{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-muted);text-decoration:none;transition:background .15s,color .15s}.nav-link:hover{background:var(--bg-hover);color:var(--text)}.nav-link.active{background:var(--bg-card);color:var(--text)}.nav-spacer{flex:1}.conn-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.conn-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green)}.conn-dot.error{background:var(--red);box-shadow:0 0 6px var(--red)}.page{display:flex;flex-direction:column;height:100vh}.dashboard-body{display:grid;grid-template-columns:1fr 340px;grid-template-rows:1fr auto;gap:12px;padding:12px;flex:1;min-height:0}.scene-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;grid-row:1}.side-col{display:flex;flex-direction:column;gap:10px;grid-column:2;grid-row:1 / 3;min-height:0;overflow-y:auto}.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:14px 16px}.card-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}.telem-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.telem-item{background:var(--bg-card);border-radius:6px;padding:10px 12px}.telem-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}.telem-value{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);line-height:1}.telem-unit{font-size:11px;color:var(--text-muted);margin-left:3px}.rtt-value{color:var(--green)}.rtt-value.warn{color:var(--yellow)}.rtt-value.bad{color:var(--red)}.status-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.status-dot.live{background:var(--green);box-shadow:0 0 8px var(--green)}.status-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.status-label.live{color:var(--green)}.agent-name{font-size:18px;font-weight:700;margin-left:auto}.ctrl-sticks{display:flex;gap:16px;justify-content:center;align-items:flex-start;margin-bottom:12px}.joystick-outer{position:relative;width:140px;height:140px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.joystick-outer:active{cursor:grabbing}.joystick-cross-h{position:absolute;left:12%;right:12%;height:1px;background:var(--border);pointer-events:none}.joystick-cross-v{position:absolute;top:12%;bottom:12%;width:1px;background:var(--border);pointer-events:none}.joystick-knob{position:absolute;width:44px;height:44px;border-radius:50%;background:var(--blue);border:2px solid rgba(255,255,255,.18);box-shadow:0 0 14px #3b82f6a6;pointer-events:none;will-change:transform}.joystick-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.ctrl-stop-btn{width:100%;height:40px;background:#ef44441a;border:1px solid var(--red);border-radius:6px;color:var(--red);font-size:13px;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:background .1s}.ctrl-stop-btn:hover{background:#ef444433}.ctrl-stop-btn:active{background:#ef444459}.c2-label{background:#050814d1;border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:5px 9px;text-align:center;pointer-events:none;transform:translate(-50%);white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.c2-label-name{font-size:11px;font-weight:700;letter-spacing:.12em;margin-bottom:2px}.c2-label-rtt{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-muted)}.c2-label-rtt.rtt-ok{color:#0f8}.c2-label-rtt.rtt-warn{color:#fc0}.c2-label-rtt.rtt-bad{color:#f30}.c2-label-status{font-size:9px;font-weight:600;letter-spacing:.1em;color:#334155;text-transform:uppercase;margin-top:2px}.c2-label-status.active{color:#22c55e}.c2-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.055) 2px,rgba(0,0,0,.055) 4px);pointer-events:none;z-index:5}.c2-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,10,.72) 100%);pointer-events:none;z-index:4}.c2-corner{position:absolute;width:12px;height:12px;pointer-events:none;z-index:10}.c2-corner-tl{top:14px;left:14px;border-top:1px solid rgba(0,140,200,.28);border-left:1px solid rgba(0,140,200,.28)}.c2-corner-tr{top:14px;right:14px;border-top:1px solid rgba(0,140,200,.28);border-right:1px solid rgba(0,140,200,.28)}.c2-corner-bl{bottom:14px;left:14px;border-bottom:1px solid rgba(0,140,200,.28);border-left:1px solid rgba(0,140,200,.28)}.c2-corner-br{bottom:14px;right:14px;border-bottom:1px solid rgba(0,140,200,.28);border-right:1px solid rgba(0,140,200,.28)}.c2-hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;z-index:6}.c2-hud-top{display:flex;flex-direction:column;gap:10px}.c2-hud-header{display:flex;align-items:center;gap:9px}.c2-hud-dot{width:7px;height:7px;border-radius:50%;background:#09c;box-shadow:0 0 8px #09c,0 0 16px #09c4;animation:c2-pulse 2.8s ease-in-out infinite;flex-shrink:0}@keyframes c2-pulse{0%,to{opacity:1;box-shadow:0 0 8px #09c,0 0 16px #09c4}50%{opacity:.5;box-shadow:0 0 3px #09c}}.c2-hud-title{font-size:12px;font-weight:700;letter-spacing:.18em;color:#ffffff8c;text-transform:uppercase}.c2-hud-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.16em;color:#00aadc80;text-transform:uppercase;border:1px solid rgba(0,140,200,.2);border-radius:3px;padding:2px 8px;white-space:nowrap}.c2-agent-roster{display:flex;flex-direction:column;gap:5px}.c2-roster-card{background:#020410bf;border:1px solid rgba(255,255,255,.05);border-left:2px solid rgba(255,255,255,.08);border-radius:3px;padding:5px 10px;min-width:118px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-left-color .3s}.c2-roster-card.live{border-left-color:var(--agent-color)}.c2-roster-id{font-size:10px;font-weight:700;letter-spacing:.12em;margin-bottom:2px}.c2-roster-status{font-size:9px;font-weight:600;letter-spacing:.1em;color:#fff3;text-transform:uppercase}.c2-roster-status.live{color:#22c55e}.c2-roster-coords{font-size:9px;font-variant-numeric:tabular-nums;color:#ffffff40;margin-top:2px;letter-spacing:.04em}.c2-hud-footer{display:flex;align-items:center;pointer-events:all}.c2-footer-stat{font-size:11px;font-weight:600;letter-spacing:.1em;color:#ffffff4d;text-transform:uppercase;font-variant-numeric:tabular-nums}.c2-orbit-btn{margin-left:auto;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#ffffff73;font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 13px;cursor:pointer;transition:background .15s,color .15s}.c2-orbit-btn:hover{background:#ffffff1a;color:#ffffffd9}.video-feed-wrap{position:relative;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-feed-img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:crisp-edges}.video-feed-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;color:var(--text-muted);background:radial-gradient(ellipse at center,#0d1624,#050810)}.vfp-icon{font-size:40px;opacity:.25;margin-bottom:4px}.vfp-topic{font-size:11px;font-family:JetBrains Mono,Fira Code,monospace;color:var(--text-muted);opacity:.6}.vfp-status{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}.vfp-hint{font-size:12px;color:var(--text-muted);text-align:center;line-height:1.6;opacity:.7}.vfp-agent{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}.video-feed-label{position:absolute;bottom:10px;left:10px;display:flex;align-items:center;gap:6px;background:#050814c7;border:1px solid;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff9;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.vfl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.ev-btn{position:absolute;top:10px;right:10px;z-index:20;padding:5px 12px;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-family:JetBrains Mono,Fira Code,monospace;color:#00dcffbf;background:#000a14b8;border:1px solid rgba(0,200,230,.35);border-radius:3px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .2s,border-color .2s,box-shadow .2s,background .2s}.ev-btn:hover{color:#00e5ff;border-color:#00e5ff99;box-shadow:0 0 12px #00e5ff40}.ev-btn.active{color:#0fe;background:#001e28d9;border-color:#00ffeeb3;box-shadow:0 0 18px #0fe6,inset 0 0 8px #00ffee14;animation:ev-pulse 2.4s ease-in-out infinite}@keyframes ev-pulse{0%,to{box-shadow:0 0 18px #0fe6,inset 0 0 8px #00ffee14}50%{box-shadow:0 0 32px #00ffeeb3,inset 0 0 14px #00ffee2e}}.minimap-wrap{position:absolute;bottom:14px;right:14px;z-index:10;opacity:.88;border:1px solid var(--mm-color, #3b82f6);border-radius:6px;overflow:hidden;box-shadow:0 0 18px -4px var(--mm-color, #3b82f6),0 4px 24px #0009;transition:opacity .2s}.minimap-wrap:hover{opacity:1}.minimap-label{position:absolute;top:5px;left:0;right:0;text-align:center;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75;z-index:1;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.8)}