:root{--bg: #0D1117;--surface: #161B22;--surface-hover: #1C2129;--fg: #E6EDF3;--muted: #8B949E;--border: #21262D;--accent: #00F0FF;--accent-dim: rgba(0, 240, 255, .15);--accent-glow: rgba(0, 240, 255, .3);--danger: #FF6B00;--danger-dim: rgba(255, 107, 0, .15);--danger-glow: rgba(255, 107, 0, .3);--warning: #F0C000;--warning-dim: rgba(240, 192, 0, .15);--success: #3FB950;--success-dim: rgba(63, 185, 80, .15);--ultramarine: #1B2A4A;--font-display: "JetBrains Mono", "Courier New", monospace;--font-body: "IBM Plex Sans", system-ui, sans-serif;--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-lg: 18px;--text-xl: 24px;--text-2xl: 32px;--text-3xl: 44px;--text-4xl: 56px;--leading-body: 1.55;--radius: 8px;--radius-lg: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes breathe{0%,to{box-shadow:0 0 0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 6px transparent;opacity:.6}}@keyframes breathe-slow{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:0}}@keyframes breathe-fast{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.6);opacity:0}}@keyframes pulse-danger{0%,to{opacity:1}50%{opacity:.4}}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes snap-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.status-led{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.status-led:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;animation:breathe-slow 3s ease-in-out infinite}.status-led.operational{background:var(--success);color:var(--success)}.status-led.operational:after{box-shadow:0 0 0 2px var(--success)}.status-led.degraded{background:var(--warning);color:var(--warning)}.status-led.degraded:after{animation:breathe-slow 2s ease-in-out infinite;box-shadow:0 0 0 2px var(--warning)}.status-led.critical,.status-led.offline{background:var(--danger);color:var(--danger)}.status-led.critical:after,.status-led.offline:after{animation:breathe-fast 1.2s ease-in-out infinite;box-shadow:0 0 0 2px var(--danger)}.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:4px;font-family:var(--font-display);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.badge-operational{background:var(--success-dim);color:var(--success);border:1px solid rgba(63,185,80,.3)}.badge-degraded{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(240,192,0,.3)}.badge-critical,.badge-offline{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(255,107,0,.3)}.badge-info{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,240,255,.3)}.badge-warning{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(240,192,0,.3)}.badge-resolved{background:#8b949e26;color:var(--muted);border:1px solid var(--border)}.badge-active{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(255,107,0,.3);animation:pulse-danger 2s ease-in-out infinite}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color .2s,background .2s}.card:hover{border-color:var(--accent-dim)}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);position:relative;overflow:hidden;transition:border-color .3s}.metric-card:hover{border-color:var(--accent-dim)}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}.metric-card:hover:before{opacity:1}.metric-value{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;color:var(--accent);line-height:1;margin:var(--space-2) 0}.metric-label{font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--fg);transition:all .2s}.btn:hover{border-color:var(--accent);background:var(--surface-hover)}.btn-accent{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.btn-accent:hover{background:#00f0ff40}.btn-sm{padding:4px 10px;font-size:var(--text-xs)}.section-heading{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--fg);display:flex;align-items:center;gap:var(--space-2)}.section-heading:before{content:"";width:3px;height:18px;background:var(--accent);border-radius:2px}.sensor-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.sensor-table th{text-align:left;padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-size:var(--text-xs);font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}.sensor-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}.sensor-table tbody tr:nth-child(2n){background:#ffffff04}.sensor-table tbody tr:hover{background:var(--surface-hover)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}.app-container{max-width:1600px;margin:0 auto;padding:var(--space-6)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}.grid-60-40{display:grid;grid-template-columns:3fr 2fr;gap:var(--space-6)}@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-60-40{grid-template-columns:1fr}}@media(max-width:640px){.grid-4{grid-template-columns:1fr}.app-container{padding:var(--space-4)}}.fade-in{animation:slide-up .4s ease-out forwards;opacity:0}.fade-in:nth-child(1){animation-delay:0ms}.fade-in:nth-child(2){animation-delay:50ms}.fade-in:nth-child(3){animation-delay:.1s}.fade-in:nth-child(4){animation-delay:.15s}.alert-banner{animation:snap-in .3s ease-out forwards}
