@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}:root{--color-bg: #0a0f14;--color-surface: #111820;--color-surface-elevated: #1a232e;--color-border: #2a3744;--color-text: #e0e8f0;--color-text-dim: #6a7a8a;--color-accent-green: #00ff88;--color-accent-cyan: #00d4ff;--color-accent-green-dim: rgba(0, 255, 136, .15);--color-accent-cyan-dim: rgba(0, 212, 255, .15);--color-error: #ff4444;--color-success: #00ff88;--glow-green: 0 0 20px rgba(0, 255, 136, .3);--glow-cyan: 0 0 20px rgba(0, 212, 255, .3)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,sans-serif;background-color:var(--color-bg);color:var(--color-text);background-image:radial-gradient(ellipse at 50% 0%,rgba(0,255,136,.03) 0%,transparent 50%),linear-gradient(180deg,var(--color-bg) 0%,#080c10 100%);min-height:100vh}.app{min-height:100vh;padding:32px;max-width:1200px;margin:0 auto}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--color-border);position:relative}.app-header:after{content:"";position:absolute;bottom:-1px;left:0;width:120px;height:1px;background:linear-gradient(90deg,var(--color-accent-green),transparent)}.app-header h1{margin:0;font-size:24px;font-weight:600;font-family:JetBrains Mono,monospace;color:var(--color-accent-green);text-transform:uppercase;letter-spacing:2px;text-shadow:var(--glow-green)}.connection-indicator{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;font-family:JetBrains Mono,monospace;text-transform:uppercase;letter-spacing:1px}.indicator-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.connection-indicator.connected{color:var(--color-success)}.connection-indicator.connected .indicator-dot{background-color:var(--color-success);box-shadow:var(--glow-green)}.connection-indicator.disconnected{color:var(--color-error)}.connection-indicator.disconnected .indicator-dot{background-color:var(--color-error);box-shadow:0 0 20px #f446}.error-banner{background-color:#ff44441a;color:var(--color-error);padding:14px 18px;border-radius:8px;border:1px solid rgba(255,68,68,.3);margin-bottom:24px;font-size:13px;font-family:JetBrains Mono,monospace}.dashboard{display:flex;flex-direction:column;gap:32px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.status-card{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-elevated) 100%);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--color-border);position:relative;overflow:hidden;transition:all .3s ease}.status-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-accent-green),var(--color-accent-cyan));opacity:0;transition:opacity .3s ease}.status-card:hover{border-color:var(--color-accent-green);transform:translateY(-2px);box-shadow:var(--glow-green)}.status-card:hover:before{opacity:1}.status-card-title{font-size:11px;font-weight:500;font-family:JetBrains Mono,monospace;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:2px}.status-card-value{font-size:36px;font-weight:600;font-family:JetBrains Mono,monospace;color:var(--color-accent-green);text-shadow:var(--glow-green)}.status-card-subtitle{font-size:11px;font-family:JetBrains Mono,monospace;color:var(--color-text-dim)}.status-card md-linear-progress{margin-top:8px;--md-linear-progress-active-indicator-color: var(--color-accent-green);--md-linear-progress-track-color: var(--color-accent-green-dim);--md-linear-progress-track-height: 4px;--md-linear-progress-active-indicator-height: 4px;border-radius:2px}.metrics-chart{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-elevated) 100%);border-radius:12px;border:1px solid var(--color-border);overflow:hidden;position:relative}.chart-header{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:baseline}.chart-title{font-family:JetBrains Mono,monospace;font-size:14px;font-weight:500;color:var(--color-accent-green);letter-spacing:1px}.terminal-prompt{color:var(--color-accent-cyan);margin-right:8px}.blink{animation:blink 1s step-end infinite;color:var(--color-accent-green)}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.chart-subtitle{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--color-text-dim);letter-spacing:.5px}.chart-container{padding:20px 24px 24px;height:300px}.chart-empty{height:100%;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:14px;color:var(--color-text-dim)}.chart-scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none}.last-updated{text-align:center;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--color-text-dim);padding:8px;background:var(--color-surface);border-radius:6px;border:1px solid var(--color-border)}@media(max-width:768px){.app{padding:20px}.app-header{flex-direction:column;gap:16px;align-items:flex-start}.app-header h1{font-size:20px}.chart-container{height:250px}}