*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080a0c;--surface:#0d1117;--border:#1a2030;--text-primary:#e2e8f0;--text-dim:#4a5568;--text-mono:#94a3b8;--clear:#1a2535;--clear-text:#4a6080;--high:#f59e0b;--high-glow:#f59e0b26;--critical:#ef4444;--critical-glow:#ef444426;--accent:#3b82f6}html,body{background:var(--bg);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Space Mono,monospace;font-size:13px}#app{flex-direction:column;min-height:100vh;display:flex}.hdr{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:20px 32px;display:flex}.hdr-logo{letter-spacing:.15em;font-family:Syne,sans-serif;font-size:22px;font-weight:800}.hdr-logo span{color:var(--critical)}.hdr-meta{align-items:center;gap:24px;display:flex}.hdr-status{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;font-size:11px;display:flex}.pulse{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse}.pulse.hot{background:var(--critical)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.hdr-time{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:11px}.threat-bar{border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:12px 32px;display:flex}.threat-label{letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;font-size:10px}.threat-track{background:var(--border);flex:1;height:2px;overflow:hidden}.threat-fill{background:var(--critical);width:0%;height:100%;transition:width 1s}.threat-value{color:var(--text-mono);text-align:right;font-variant-numeric:tabular-nums;min-width:40px;font-size:11px}.grid{flex:1;grid-template-columns:repeat(5,1fr);display:grid}.phase{border-right:1px solid var(--border);flex-direction:column;transition:background .4s;display:flex;position:relative;overflow:hidden}.phase:last-child{border-right:none}.phase:before{content:"";background:var(--border);height:2px;transition:background .4s,box-shadow .4s;position:absolute;top:0;left:0;right:0}.phase.status-active:before{background:var(--high);box-shadow:0 0 12px var(--high-glow)}.phase.status-critical:before{background:var(--critical);box-shadow:0 0 16px var(--critical-glow)}.phase-head{border-bottom:1px solid var(--border);padding:20px 20px 14px}.phase-index{letter-spacing:.15em;color:var(--text-dim);margin-bottom:6px;font-size:10px}.phase-name{letter-spacing:.08em;margin-bottom:4px;font-family:Syne,sans-serif;font-size:14px;font-weight:700}.phase-signal{letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;font-size:10px}.phase-count{padding:24px 20px 20px}.count-value{color:var(--text-dim);font-variant-numeric:tabular-nums;font-family:Syne,sans-serif;font-size:48px;font-weight:800;line-height:1;transition:color .4s}.status-active .count-value{color:var(--high)}.status-critical .count-value{color:var(--critical)}.count-label{letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;margin-top:4px;font-size:10px}.phase-badge{letter-spacing:.12em;text-transform:uppercase;background:var(--clear);color:var(--clear-text);border-radius:2px;margin:0 20px 20px;padding:6px 10px;font-size:10px;font-weight:700;transition:background .4s,color .4s;display:inline-block}.status-active .phase-badge{background:var(--high-glow);color:var(--high)}.status-critical .phase-badge{background:var(--critical-glow);color:var(--critical)}.phase-events{flex-direction:column;flex:1;gap:8px;padding:0 20px 20px;display:flex;overflow-y:auto}.event-item{background:var(--surface);border:1px solid var(--border);color:var(--text-mono);opacity:0;border-radius:2px;padding:8px 10px;font-size:11px;transition:opacity .3s,transform .3s;transform:translateY(4px)}.event-item.visible{opacity:1;transform:translateY(0)}.event-ip{color:var(--text-primary);margin-bottom:2px;font-weight:700}.event-detail{color:var(--text-dim);font-size:10px}.footer{border-top:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:12px 32px;display:flex}.footer-left,.footer-right{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:10px}.loading-overlay{background:var(--bg);z-index:100;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:fixed;inset:0}.loading-logo{letter-spacing:.2em;font-family:Syne,sans-serif;font-size:32px;font-weight:800}.loading-logo span{color:var(--critical)}.loading-text{letter-spacing:.15em;color:var(--text-dim);text-transform:uppercase;font-size:11px}.loading-bar{background:var(--border);width:200px;height:1px;overflow:hidden}.loading-bar:after{content:"";background:var(--accent);width:40%;height:100%;animation:1.2s ease-in-out infinite scan;position:absolute;left:-40%}@keyframes scan{to{left:100%}}.error-banner{color:var(--critical);background:#ef444414;border-bottom:1px solid #ef444433;padding:8px 32px;font-size:11px;display:none}.error-banner.visible{display:block}