*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#06080f; --sidebar:#0b0f1e; --card:#0f1525; --border:#1e2a45; --border-hi:#2d3f6e;
  --text:#e2e8f0; --muted:#94a3b8; --faint:#475569;
  --red:#ef4444; --green:#22c55e; --blue:#3b82f6; --amber:#f59e0b; --purple:#a855f7;
  --bg-red:rgba(239,68,68,.1); --bg-green:rgba(34,197,94,.1);
  --bg-blue:rgba(59,130,246,.12); --bg-amber:rgba(245,158,11,.1);
  --bd-red:rgba(239,68,68,.3); --bd-green:rgba(34,197,94,.3);
  --bd-blue:rgba(59,130,246,.3); --bd-amber:rgba(245,158,11,.3);
  --mono: 'JetBrains Mono','Fira Code','Cascadia Code',monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --radius:8px;
}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;min-height:100vh}
#app{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
#sidebar{width:216px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.brand{padding:16px 14px 12px;border-bottom:1px solid var(--border)}
.brand .es{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text)}
.brand .n35{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--red)}
.brand-tag{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
#nav{flex:1;overflow-y:auto;padding:6px 0}
#nav::-webkit-scrollbar{width:3px}
#nav::-webkit-scrollbar-thumb{background:var(--border)}
.nav-section{font-size:9px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;padding:10px 14px 3px}
.nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:6px 14px;background:transparent;border:none;border-left:2px solid transparent;cursor:pointer;text-align:left;color:var(--muted);font-size:12px;line-height:1;transition:background .1s,color .1s}
.nav-btn i{font-size:15px;flex-shrink:0}
.nav-btn:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-btn.active{background:rgba(59,130,246,.08);border-left-color:var(--blue);color:var(--text)}
.nav-badge{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:9px;background:var(--card);border:1px solid var(--border);color:var(--faint);font-weight:500}
.nav-badge.green{background:var(--bg-green);border-color:var(--bd-green);color:var(--green)}
.nav-badge.red{background:var(--bg-red);border-color:var(--bd-red);color:var(--red)}
.nav-badge.blue{background:var(--bg-blue);border-color:var(--bd-blue);color:var(--blue)}
.user-row{padding:10px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-blue);border:1px solid var(--bd-blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--blue);flex-shrink:0}
.user-name{font-size:11px;font-weight:500;color:var(--text)}
.user-role{font-size:10px;color:var(--faint)}
.icon-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;margin-left:auto;font-size:16px}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* Main */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
#topbar{padding:10px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--sidebar)}
.topbar-title{font-size:13px;font-weight:500;color:var(--text)}
.topbar-right{display:flex;align-items:center;gap:12px}
.live-indicator{display:flex;align-items:center;gap:6px;font-size:11px;font-family:var(--mono)}
#content{flex:1;overflow-y:auto;padding:20px}
#content::-webkit-scrollbar{width:4px}
#content::-webkit-scrollbar-thumb{background:var(--border)}
.view{display:none}
.view.active{display:block}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.card+.card,.card+.row,.row+.card{margin-top:12px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:500}

/* Grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:4px}
.stat-value{font-size:22px;font-weight:500;color:var(--text)}
.stat-sub{font-size:11px;color:var(--muted);margin-top:2px}
.stat.danger .stat-value{color:var(--red)}
.stat.success .stat-value{color:var(--green)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row.three{grid-template-columns:1fr 1fr 1fr}

/* Tables */
table{width:100%;border-collapse:collapse}
th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:7px 10px;border-bottom:1px solid var(--border);text-align:left;font-weight:500}
td{padding:9px 10px;font-size:12px;color:var(--text);border-bottom:1px solid rgba(30,42,69,.7)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.mono{font-family:var(--mono);font-size:11px}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;border:1px solid;white-space:nowrap}
.badge-red{background:var(--bg-red);border-color:var(--bd-red);color:var(--red)}
.badge-green{background:var(--bg-green);border-color:var(--bd-green);color:var(--green)}
.badge-blue{background:var(--bg-blue);border-color:var(--bd-blue);color:var(--blue)}
.badge-amber{background:var(--bg-amber);border-color:var(--bd-amber);color:var(--amber)}
.badge-muted{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--muted)}
.badge-purple{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.3);color:var(--purple)}

/* Pulse */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pulse.green{background:var(--green);box-shadow:0 0 0 3px var(--bg-green);animation:pulse-anim 2s infinite}
.pulse.red{background:var(--red);box-shadow:0 0 0 3px var(--bg-red);animation:pulse-anim 1s infinite}
@keyframes pulse-anim{0%,100%{opacity:1}50%{opacity:.5}}

/* Buttons */
button{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-family:var(--sans);transition:background .1s}
button:hover{background:rgba(255,255,255,.1)}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{background:#2563eb}
button.danger{background:var(--bg-red);border-color:var(--bd-red);color:var(--red)}
button.secondary{background:transparent;border:1px solid var(--border);color:var(--muted)}
button.secondary:hover{color:var(--text);border-color:var(--border-hi)}
button.small{padding:4px 10px;font-size:11px}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.section-header h2{font-size:14px;font-weight:500}

/* Forms */
input,select,textarea{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:6px;font-size:12px;font-family:var(--sans);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
input::placeholder{color:var(--faint)}
label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;margin-top:10px;text-transform:uppercase;letter-spacing:.04em}

/* Alerts */
.alert{padding:10px 12px;border-radius:6px;font-size:12px;margin-bottom:10px}
.alert.red{background:var(--bg-red);border:1px solid var(--bd-red);color:var(--red)}
.alert.green{background:var(--bg-green);border:1px solid var(--bd-green);color:var(--green)}
.alert.amber{background:var(--bg-amber);border:1px solid var(--bd-amber);color:var(--amber)}
.alert.blue{background:var(--bg-blue);border:1px solid var(--bd-blue);color:var(--blue)}

/* Session/device rows */
.session-row{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.session-row:hover{border-color:var(--border-hi)}
.session-row.active{border-color:var(--bd-green)}
.session-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px;font-size:11px;color:var(--muted)}
.session-meta span i{font-size:12px;margin-right:3px}

/* Warmup bar */
.warmup-bars{display:flex;gap:3px;align-items:flex-end;height:72px;margin-bottom:6px}
.warmup-bar{flex:1;border-radius:2px 2px 0 0;transition:background .2s;min-height:3px}
.warmup-bar.done{background:var(--green)}
.warmup-bar.current{background:var(--blue)}
.warmup-bar.future{background:var(--border)}
.warmup-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--faint)}

/* Findings */
.finding{padding:9px 10px;border-radius:6px;border:1px solid;margin-bottom:6px}
.finding.critical{background:var(--bg-red);border-color:var(--bd-red)}
.finding.high{background:var(--bg-amber);border-color:var(--bd-amber)}
.finding.medium{background:rgba(255,255,255,.04);border-color:var(--border)}
.finding-title{font-size:12px;font-weight:500;margin-bottom:2px}
.finding.critical .finding-title{color:var(--red)}
.finding.high .finding-title{color:var(--amber)}
.finding-detail{font-size:11px;color:var(--muted)}
.finding-fix{font-size:11px;color:var(--faint);margin-top:2px}

/* Modal */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:100}
#modal-overlay.hidden{display:none}
#modal-box{background:#0f1525;border:1px solid var(--border);border-radius:12px;padding:24px;width:100%;max-width:520px;max-height:85vh;overflow-y:auto}
#modal-box h3{font-size:15px;font-weight:500;margin-bottom:16px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* Pipeline funnel */
.pipeline{display:flex;gap:2px;align-items:flex-end;height:80px;margin-bottom:4px}
.pipeline-bar{flex:1;border-radius:3px 3px 0 0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;font-size:10px;font-weight:600;color:#fff;min-height:4px}
.pipeline-labels{display:flex;gap:2px;font-size:9px;color:var(--faint);text-align:center}
.pipeline-labels span{flex:1}

/* Tabs */
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab-btn{padding:7px 14px;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);font-size:12px;cursor:pointer;margin-bottom:-1px}
.tab-btn.active{border-bottom-color:var(--blue);color:var(--text)}

/* Subheadings */
.sub-section{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:14px 0 8px}