*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#071b2e;--surface:#0a101a;--card:#111827;--border:#1e293b;--green:#1b7b3f;--red:#b91c1c;--amber:#c07300;--blue:#09c;--violet:#6a1b9a;--text:#e2e8f0;--text-dim:#64748b;--text-bright:#f8fafc;--glass:#ffffff0d;--glass-border:#ffffff14;--font:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",monospace}html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden}#app{width:100vw;height:100vh;display:flex;overflow:hidden}.login-container{background:var(--bg);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.login-box{background:var(--card);border:1px solid var(--border);text-align:center;border-radius:12px;width:380px;padding:40px;box-shadow:0 10px 30px #00000080}.login-box h2{color:var(--blue);font-family:"Space Grotesk", var(--font);margin-bottom:8px}.login-box p{color:var(--text-dim);margin-bottom:24px;font-size:14px}.login-form{flex-direction:column;gap:16px;display:flex}.login-input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;padding:12px;font-size:14px}.login-input:focus{border-color:var(--blue)}.login-btn{background:var(--blue);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:14px;font-size:16px;font-weight:600;transition:all .3s}.login-btn:hover{background:#007fae}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:220px;display:flex}.sidebar-header{align-items:center;gap:12px;padding:24px 20px;display:flex}.sidebar-header h1{color:var(--blue);font-size:16px;font-weight:700;line-height:1.2}.sidebar-header span{color:var(--text-dim);font-size:10px}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:0 12px;display:flex;overflow-y:auto}.nav-item{color:var(--text-dim);cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:12px;font-size:13px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{background:var(--glass);color:var(--text)}.nav-item.active{color:var(--blue);background:#0099cc1a}.sidebar-footer{border-top:1px solid var(--border);align-items:center;gap:12px;padding:20px;display:flex}.user-avatar{background:var(--blue);color:#fff;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;display:flex}.main-content{background:var(--bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.top-bar{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;height:60px;padding:0 24px;display:flex}.page-title{color:var(--text-bright);font-size:18px;font-weight:600}.dashboard-scroll{flex:1;padding:24px;overflow-y:auto}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;align-items:center;gap:16px;padding:20px;display:flex}.stat-icon{border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.stat-icon.trusted{color:var(--green);background:#1b7b3f33}.stat-icon.degraded{color:var(--amber);background:#c0730033}.stat-icon.threat{color:var(--red);background:#b91c1c33}.stat-info h3{color:var(--text-bright);font-size:24px}.stat-info p{color:var(--text-dim);font-size:13px}.data-table{background:var(--card);border:1px solid var(--border);border-collapse:collapse;border-radius:12px;width:100%;margin-bottom:24px;overflow:hidden}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--border);padding:16px}.data-table th{text-transform:uppercase;color:var(--text-dim);letter-spacing:.05em;font-size:11px;font-weight:600}.data-table td{font-size:13px}.data-table tr:last-child td{border-bottom:none}.badge{text-transform:uppercase;border:1px solid #0000;border-radius:4px;padding:4px 8px;font-size:10px;font-weight:700}.badge.active{color:var(--green);background:#1b7b3f26;border-color:#1b7b3f4d}.badge.isolated{color:var(--red);background:#b91c1c26;border-color:#b91c1c4d}.speedometer-card{background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;margin-bottom:24px;padding:20px;display:flex}.speedometer-card h3{color:var(--text-bright);align-self:flex-start;margin-bottom:16px;font-size:16px}.speedometer-svg{width:100%;max-width:300px;height:auto}.phone-demo-container{transform-origin:0 0;align-items:flex-start;gap:24px;margin-top:24px;display:flex;transform:scale(.9)}.phone-frame{background:#000;border-radius:48px;flex-shrink:0;width:380px;height:780px;padding:12px;position:relative;box-shadow:0 0 0 2px #333,0 0 60px #00c85326,0 20px 60px #0009}.phone-notch{z-index:10;background:#000;border-radius:0 0 16px 16px;width:120px;height:28px;position:absolute;top:0;left:50%;transform:translate(-50%)}.phone-screen{background:var(--surface);border-radius:38px;width:100%;height:100%;position:relative;overflow:hidden}.phone-home-bar{background:#555;border-radius:2px;width:120px;height:4px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.screen{opacity:0;flex-direction:column;padding:48px 20px 20px;transition:opacity .5s;display:none;position:absolute;inset:0}.screen.active{opacity:1;display:flex}.status-bar{color:var(--text-dim);justify-content:space-between;align-items:center;padding:0 4px 8px;font-size:12px;display:flex}.status-icons{gap:4px;font-size:10px;display:flex}.header-banner{border-radius:16px;align-items:center;gap:12px;margin-bottom:12px;padding:14px 16px;transition:all .5s;display:flex}.header-banner.protected{background:linear-gradient(135deg,#00c85326,#00c8530d);border:1px solid #00c8534d}.header-banner.alert-state{background:linear-gradient(135deg,#ff174433,#ff17440d);border:1px solid #ff174466}.status-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.status-dot.green{background:var(--green);box-shadow:0 0 12px var(--green)}.status-dot.red{background:var(--red);box-shadow:0 0 12px var(--red)}.pulse{animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.status-text h2{color:var(--text-bright);font-size:15px;font-weight:700}.status-text p{color:var(--text-dim);font-size:11px}.shield-icon{margin-left:auto;font-size:28px}.patient-card{background:var(--card);border:1px solid var(--border);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:10px 14px;display:flex}.patient-label{color:var(--text-dim);font-size:11px}.patient-id{color:var(--blue);font-size:12px;font-weight:600}.sparkline-container{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;padding:12px}.sparkline-container h3{align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:600;display:flex}.live-badge{color:var(--green);font-size:9px;animation:1.5s infinite pulse}.feature-labels{color:var(--text-dim);justify-content:space-between;margin-top:4px;padding:0 4px;font-size:9px;display:flex}.module-cards{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.module-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;align-items:center;gap:10px;padding:8px 12px;transition:all .4s;display:flex}.module-card.alert{background:#ff174414;border-color:#ff174466}.module-icon{font-size:20px}.module-info h4{font-size:11px;font-weight:600}.module-status{color:var(--text-dim);font-size:10px}.module-status.online{color:var(--green)}.module-status.warning{color:var(--amber)}.module-status.danger{color:var(--red)}.btn-simulate{width:100%;color:var(--red);font-family:var(--font);cursor:pointer;background:linear-gradient(135deg,#ff17441f,#ff17440a);border:1px solid #ff17444d;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:13px;font-weight:600;transition:all .3s;display:flex}.btn-simulate:hover{background:linear-gradient(135deg,#ff174440,#ff17441a);transform:scale(1.02)}.btn-simulate:disabled{opacity:.5;pointer-events:none}.console-panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;flex-direction:column;gap:14px;width:480px;height:780px;padding:20px;display:flex;overflow-y:auto;box-shadow:0 20px 60px #0006}.console-header{justify-content:space-between;align-items:center;display:flex}.console-header h2{font-size:16px;font-weight:700}.console-badge{letter-spacing:1px;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:700;transition:all .4s}.console-badge.protected-badge{color:var(--green);background:#00c85326;border:1px solid #00c8534d}.console-badge.alert-badge{color:var(--red);background:#ff174426;border:1px solid #ff17444d;animation:1s infinite alertPulse}.console-badge.quarantine-badge{color:var(--amber);background:#ffd60026;border:1px solid #ffd6004d}.console-badge.recovery-badge{color:var(--blue);background:#2979ff26;border:1px solid #2979ff4d}.console-section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px}.console-section h3{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-size:11px;font-weight:700}.tel-item{align-items:center;gap:8px;margin-bottom:6px;display:flex}.tel-label{font-size:10px;font-weight:600;font-family:var(--mono);width:36px;color:var(--text-dim)}.tel-bar{background:#ffffff14;border-radius:3px;flex:1;height:6px;overflow:hidden}.tel-fill{background:linear-gradient(90deg,var(--blue),var(--green));border-radius:3px;height:100%;transition:width .3s}.tel-fill.danger{background:linear-gradient(90deg,var(--amber),var(--red))!important}.tel-fill.bat{background:linear-gradient(90deg,var(--green),#66bb6a)}.tel-fill.temp{background:linear-gradient(90deg,#ff9800,var(--red))}.tel-val{font-size:10px;font-family:var(--mono);color:var(--text-dim);text-align:right;width:64px}.pipeline-stages{gap:8px;display:flex}.pipe-stage{text-align:center;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;flex:1;padding:8px 4px;transition:all .4s}.pipe-stage.triggered{background:#ff174426;border-color:#ff174480}.pipe-stage.triggered .pipe-indicator{background:var(--red);box-shadow:0 0 10px var(--red)}.pipe-label{font-size:10px;font-weight:700;font-family:var(--mono);margin-bottom:4px;display:block}.pipe-indicator{background:var(--border);border-radius:50%;width:8px;height:8px;margin:0 auto;transition:all .4s}.event-log-section{flex-direction:column;flex:1;min-height:0;display:flex}.event-log{flex-direction:column;flex:1;gap:3px;max-height:200px;display:flex;overflow-y:auto}.log-entry{font-size:10px;font-family:var(--mono);background:#ffffff08;border-radius:4px;padding:4px 8px;line-height:1.4;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.decision-json{font-size:10px;font-family:var(--mono);color:var(--text);white-space:pre;background:#0000004d;border-radius:8px;padding:10px;line-height:1.5;transition:color .3s}.top-bar{justify-content:space-between}.top-bar-right{align-items:center;gap:16px;display:flex}.connection-indicator{border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:11px;font-weight:600;transition:all .3s;display:flex}.connection-indicator.live{color:var(--green);background:#1b7b3f1f;border:1px solid #1b7b3f4d}.connection-indicator.simulated{color:var(--amber);background:#c073001f;border:1px solid #c073004d}.connection-indicator.none{color:var(--text-dim);background:#64748b1f;border:1px solid #64748b4d}.connection-text{text-overflow:ellipsis;white-space:nowrap;max-width:200px;overflow:hidden}.live-pulse-dot{background:var(--green);width:6px;height:6px;box-shadow:0 0 8px var(--green);border-radius:50%;animation:1.5s ease-in-out infinite livePulse}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.cpu-live-readout{background:#0099cc14;border:1px solid #0099cc26;border-radius:8px;align-items:center;gap:6px;padding:4px 10px;font-size:13px;transition:color .3s,border-color .3s;display:flex}.data-source-badge{letter-spacing:1px;text-transform:uppercase;border-radius:12px;flex-shrink:0;align-items:center;gap:6px;padding:4px 12px;font-size:10px;font-weight:700;display:inline-flex}.data-source-badge.live{color:var(--green);background:#1b7b3f26;border:1px solid #1b7b3f59;box-shadow:0 0 12px #1b7b3f1a}.data-source-badge.simulated{color:var(--amber);background:#c0730026;border:1px solid #c0730059}.data-source-badge.offline{color:var(--text-dim);background:#64748b26;border:1px solid #64748b4d}.pulse-dot{background:var(--green);width:6px;height:6px;box-shadow:0 0 6px var(--green);border-radius:50%;animation:1.5s ease-in-out infinite livePulse}.cpu-chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.mini-chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;overflow:hidden}.mini-chart-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.mini-chart-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}.mini-chart-value{font-size:16px;font-weight:700;font-family:var(--mono)}.chart-tooltip{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:0 8px 24px #0006}.chart-tooltip-time{color:var(--text-dim);font-size:10px;font-family:var(--mono);margin-bottom:4px}.cpu-stat-card{transition:all .3s}.cpu-stat-card .stat-info h3{transition:color .3s}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:#ffffff0a}.recharts-text{fill:var(--text-dim)!important}