:root{--bg: #08090a;--bg-elevated: #0e1014;--surface: #15171b;--surface-2: #1c1e23;--surface-3: #24272d;--border: #20232a;--border-soft: #181a1f;--border-strong:#2c3038;--text: #f7f8f8;--text-dim: #a1a4a8;--text-mute: #6e7178;--primary: #00d2ff;--primary-2: #7c3aed;--primary-dim: rgba(0, 210, 255, .12);--primary-glow: rgba(0, 210, 255, .25);--success: #21d672;--success-dim: rgba(33, 214, 114, .14);--warning: #f5a524;--warning-dim: rgba(245, 165, 36, .14);--danger: #ef4444;--danger-dim: rgba(239, 68, 68, .14);--shadow-sm: 0 1px 2px rgba(0,0,0,.4);--shadow: 0 4px 14px rgba(0,0,0,.35);--shadow-lg: 0 12px 32px rgba(0,0,0,.5);--gradient-accent: linear-gradient(135deg, rgba(0,210,255,.12), rgba(124,58,237,.08));--sidebar-w: 240px;--topbar-h: 56px;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--radius-xl: 18px;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Inter,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;color-scheme:dark}html[data-theme=light]{--bg: #fafbfc;--bg-elevated: #ffffff;--surface: #ffffff;--surface-2: #f4f5f7;--surface-3: #eaecef;--border: #e3e6ea;--border-soft: #eef0f3;--border-strong:#d6d9de;--text: #0d1117;--text-dim: #3f4348;--text-mute: #6b7178;--primary: #0072c6;--primary-2: #6938d6;--primary-dim: rgba(0, 114, 198, .1);--primary-glow: rgba(0, 114, 198, .2);--success: #0a8c4a;--success-dim: rgba(10, 140, 74, .1);--warning: #c47700;--warning-dim: rgba(196, 119, 0, .1);--danger: #cb2030;--danger-dim: rgba(203, 32, 48, .1);--shadow-sm: 0 1px 2px rgba(15,20,30,.06);--shadow: 0 2px 12px rgba(15,20,30,.08);--shadow-lg: 0 12px 32px rgba(15,20,30,.12);--gradient-accent: linear-gradient(135deg, rgba(0,114,198,.1), rgba(105,56,214,.06));color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;transition:background-color .15s ease,color .15s ease}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}code,pre,.mono{font-family:ui-monospace,SF Mono,JetBrains Mono,Cascadia Code,Menlo,Consolas,monospace}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}.sidebar{background:var(--bg-elevated);border-right:1px solid var(--border);padding:0 0 8px;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar .brand{padding:0;margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em;display:block}.sidebar .brand img{display:block;width:100%;height:56px;object-fit:cover;object-position:center center;border-radius:0}.sidebar .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary-glow)}.sidebar h2{font-size:11px;text-transform:uppercase;color:var(--text-mute);padding:14px 20px 6px;margin:0;letter-spacing:.1em;font-weight:600}.sidebar a{display:flex;align-items:center;gap:10px;padding:7px 20px;color:var(--text-dim);font-size:13.5px;border-left:2px solid transparent;transition:color .15s,background .15s}.sidebar a:hover{color:var(--text);background:var(--surface-2)}.sidebar a.active{color:var(--text);background:var(--surface-2);border-left-color:var(--primary);font-weight:500}.sidebar a .icon{width:16px;height:16px;opacity:.8;flex-shrink:0}.sidebar a.active .icon{opacity:1;color:var(--primary)}.main{display:flex;flex-direction:column;min-height:100vh;min-width:0}.topbar{height:var(--topbar-h);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--bg-elevated);position:sticky;top:0;z-index:10}.topbar .breadcrumbs{color:var(--text-mute);font-size:13px}.topbar .actions{display:flex;align-items:center;gap:14px}.content{padding:32px;flex:1;max-width:1240px;margin:0 auto;width:100%}.h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}.subtitle{color:var(--text-dim);margin:0 0 28px;font-size:14px}.muted{color:var(--text-mute)}.dim{color:var(--text-dim)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .15s,transform .15s,box-shadow .15s}.card.hover:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow)}.card h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text)}.btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#001a26;border:1px solid transparent;padding:9px 16px;border-radius:var(--radius-sm);font-weight:500;font-size:13px;transition:opacity .15s,transform .05s,background .15s,color .15s}html[data-theme=light] .btn:not(.outline):not(.ghost){color:#fff}.btn:hover{opacity:.9}.btn:active{transform:scale(.98)}.btn.outline{background:transparent;color:var(--text);border-color:var(--border)}.btn.outline:hover{background:var(--surface-2);border-color:var(--border-strong)}.btn.ghost{background:transparent;color:var(--text-dim);border-color:transparent;padding:6px 10px}.btn.ghost:hover{color:var(--text);background:var(--surface-2)}.btn.danger{background:var(--danger);color:#fff}.btn.lg{padding:12px 20px;font-size:14px}.btn.sm{padding:5px 11px;font-size:12px}.btn[disabled],.btn:disabled{cursor:not-allowed;background:var(--surface-2);color:var(--text-mute);border-color:var(--border);opacity:1}.btn.outline[disabled],.btn.outline:disabled{background:transparent;color:var(--text-mute);border-color:var(--border)}.btn.ghost[disabled],.btn.ghost:disabled{background:transparent;color:var(--text-mute)}.input,.select,textarea.input{background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:9px 12px;border-radius:var(--radius-sm);width:100%;font-size:13.5px;transition:border-color .15s}.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--primary)}.label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;font-weight:500}textarea.input{font-family:inherit;resize:vertical;min-height:80px}.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;background:var(--surface-2);border:1px solid var(--border);letter-spacing:.02em}.badge.live{background:var(--danger-dim);color:var(--danger);border-color:#ef444466}.badge.live .pulse{width:6px;height:6px;border-radius:50%;background:var(--danger);animation:pulse 1.6s infinite}.badge.success{background:var(--success-dim);color:var(--success);border-color:#21d67266}.badge.warn{background:var(--warning-dim);color:var(--warning);border-color:#f5a52466}.badge.info{background:var(--primary-dim);color:var(--primary);border-color:#00d2ff66}.badge.idle{color:var(--text-dim)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}table{width:100%;border-collapse:collapse;font-size:13px}table th,table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-soft)}table th{color:var(--text-mute);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em}table tr:hover td{background:var(--surface-2)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:28px}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden;transition:border-color .15s,transform .15s}.kpi:hover{border-color:var(--border-strong);transform:translateY(-1px)}.kpi .kpi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.kpi .kpi-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);color:var(--text-dim)}.kpi .kpi-icon .icon{width:16px;height:16px}.kpi .label{font-size:11.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:500}.kpi .value{font-size:28px;font-weight:600;margin-top:6px;letter-spacing:-.02em}.kpi .sub{font-size:12px;color:var(--text-dim);margin-top:4px}.kpi .trend{font-size:11px;padding:2px 7px;border-radius:999px;font-weight:500}.kpi .trend.up{background:var(--success-dim);color:var(--success)}.kpi .trend.down{background:var(--danger-dim);color:var(--danger)}.kpi .trend.flat{background:var(--surface-2);color:var(--text-mute)}.kpi.accent{background:var(--gradient-accent),var(--surface)}.kpi.accent .kpi-icon{background:var(--primary-dim);color:var(--primary)}.code{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-family:ui-monospace,SF Mono,monospace;font-size:12.5px;display:flex;align-items:center;gap:12px;overflow-x:auto}.code .val{flex:1;word-break:break-all;-webkit-user-select:all;user-select:all;color:var(--text)}.code .copy{font-size:11px;color:var(--text-dim);background:transparent;border:0;padding:4px 8px;border-radius:4px;cursor:pointer;flex-shrink:0}.code .copy:hover{color:var(--text);background:var(--surface-2)}.code.lg{padding:14px 18px;font-size:13px}pre.code{display:block;white-space:pre;line-height:1.55}.stream-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.stream-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .15s,transform .15s;cursor:pointer;display:flex;flex-direction:column;gap:12px}.stream-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}.stream-card .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.stream-card .name{font-size:15px;font-weight:600;letter-spacing:-.01em}.stream-card .meta{font-size:12px;color:var(--text-mute);display:flex;gap:12px;flex-wrap:wrap}.scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.scenario-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;transition:border-color .18s,transform .18s,box-shadow .18s;cursor:pointer;display:flex;flex-direction:column;gap:12px;min-height:240px;position:relative;overflow:hidden}.scenario-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-accent);opacity:0;transition:opacity .2s;pointer-events:none}.scenario-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow)}.scenario-card:hover:before{opacity:1}.scenario-card>*{position:relative;z-index:1}.scenario-icon-wrap{width:48px;height:48px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--primary);transition:transform .2s}.scenario-card:hover .scenario-icon-wrap{transform:scale(1.05)}.scenario-icon-wrap .icon{width:24px;height:24px}.scenario-name{font-size:16px;font-weight:600;letter-spacing:-.01em}.scenario-usecase{font-size:11.5px;color:var(--text-mute);margin-top:3px}.scenario-blurb{font-size:13px;color:var(--text-dim);line-height:1.5}.scenario-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}.scenario-tag{font-size:10.5px;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border-soft)}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px}.tab{padding:10px 16px;color:var(--text-dim);font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;border-top:0;border-left:0;border-right:0;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--primary)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:20px}html[data-theme=light] .modal-backdrop{background:#0f141e59}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal h2{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em}.modal .modal-subtitle{color:var(--text-dim);margin:0 0 24px;font-size:13.5px}.mode-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:20px}.mode-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:all .15s;background:var(--surface-2)}.mode-card:hover{border-color:var(--border-strong)}.mode-card.selected{border-color:var(--primary);background:var(--primary-dim)}.mode-card .mode-head{display:flex;justify-content:space-between;align-items:center}.mode-card .mode-name{font-weight:600;font-size:14px}.mode-card .mode-latency{font-size:12px;color:var(--text-dim);font-family:ui-monospace,monospace}.mode-card .mode-desc{font-size:12px;color:var(--text-mute);margin-top:4px}.empty{border:1px dashed var(--border);border-radius:var(--radius-lg);padding:48px 32px;text-align:center;background:var(--bg-elevated)}.empty .icon-big{font-size:32px;opacity:.4;margin-bottom:12px;color:var(--text-mute)}.empty h3{font-size:16px;font-weight:600;margin:0 0 8px}.empty p{color:var(--text-dim);font-size:13.5px;max-width:380px;margin:0 auto 20px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-soft)}.toggle-row:last-child{border-bottom:0}.toggle-row .label-block{display:flex;flex-direction:column;gap:2px}.toggle-row .label-block .name{font-size:13.5px;font-weight:500;color:var(--text)}.toggle-row .label-block .desc{font-size:12px;color:var(--text-mute)}.toggle{width:36px;height:20px;background:var(--surface-2);border-radius:999px;border:1px solid var(--border);position:relative;cursor:pointer;transition:background .15s}.toggle:after{content:"";position:absolute;left:2px;top:1px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:left .15s,background .15s}.toggle.on{background:var(--primary-dim);border-color:var(--primary)}.toggle.on:after{left:18px;background:var(--primary)}.theme-toggle{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--text-dim);cursor:pointer;transition:all .15s}.theme-toggle:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}.theme-toggle .icon{width:16px;height:16px}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,var(--primary-glow),transparent 50%),radial-gradient(circle at 70% 80%,rgba(124,58,237,.08),transparent 50%),var(--bg)}.login .card{width:380px;padding:32px;border-radius:var(--radius-lg)}.login .brand-stack{text-align:center;margin-bottom:28px}.login .brand-stack .word{font-size:22px;font-weight:600;letter-spacing:-.02em}.login .brand-stack .tag{font-size:12px;color:var(--text-mute);margin-top:4px}.error{color:var(--danger);font-size:13px;margin-top:10px}.flex{display:flex;align-items:center}.gap{gap:8px}.gap-md{gap:12px}.gap-lg{gap:16px}.gap-xl{gap:24px}.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:700px){.grid-2,.layout{grid-template-columns:1fr}.sidebar{display:none}}