:root{--bg: #0b0f14;--bg-elev: #131a22;--bg-elev-2: #1a232e;--border: #233140;--text: #e6edf3;--text-dim: #94a3b8;--accent: #6ee7b7;--accent-2: #38bdf8;--user: #f472b6;--ref: #38bdf8;--danger: #ef4444;--warning: #f59e0b;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text)}button{font-family:inherit;font-size:14px;background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border);padding:8px 14px;border-radius:8px;cursor:pointer;transition:all .15s ease}button:hover:not(:disabled){background:#243240;border-color:#2f4151}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#062b1f;border-color:var(--accent);font-weight:600}button.primary:hover:not(:disabled){background:#5dd5a4}button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}button.ghost{background:transparent}input[type=text],select{font-family:inherit;font-size:14px;background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:8px;outline:none}input[type=text]:focus,select:focus{border-color:var(--accent-2)}.app{display:flex;flex-direction:column;height:100vh;max-width:1400px;margin:0 auto;padding:16px;gap:16px}header{display:flex;justify-content:space-between;align-items:baseline;gap:16px}header h1{margin:0;font-size:22px;font-weight:600}header .sub{color:var(--text-dim);font-size:13px}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}.tabs button{border:none;border-radius:0;background:transparent;padding:10px 16px;border-bottom:2px solid transparent;color:var(--text-dim)}.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px}.grow{flex:1}.live-view{display:grid;grid-template-columns:280px 1fr;gap:16px;flex:1;min-height:0}.viz-wrap{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}.viz-wrap canvas{flex:1;width:100%;min-height:0;border-radius:6px}.legend{display:flex;gap:16px;font-size:13px;color:var(--text-dim)}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}.ref-list{display:flex;flex-direction:column;gap:8px;max-height:100%;overflow-y:auto}.ref-item{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer}.ref-item.active{border-color:var(--accent-2);background:#1e2c3a}.ref-item .name{font-size:14px;font-weight:500;word-break:break-word}.ref-item .meta{font-size:11px;color:var(--text-dim)}.ref-item .actions{display:flex;gap:6px;margin-top:4px}.ref-item .actions button{padding:3px 8px;font-size:11px}.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#1e3a5f;color:#93c5fd;border:1px solid #2c4f7d}.uploader{border:2px dashed var(--border);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s}.uploader:hover{border-color:var(--accent-2)}.uploader.over{border-color:var(--accent);background:#0f1e16}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.stat .label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.stat .value{font-size:20px;font-weight:600;margin-top:2px}.empty{color:var(--text-dim);font-size:13px;text-align:center;padding:24px}.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-elev-2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:12px 16px;border-radius:8px;font-size:13px;max-width:360px}.recording-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--danger);margin-right:8px;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.progress{height:4px;background:var(--bg-elev-2);border-radius:2px;overflow:hidden}.progress>div{height:100%;background:var(--accent-2);transition:width .2s}