:root{--bg: #0c0f14;--bg-card: #141923;--border: #1f2735;--text: #e6ecf2;--text-dim: #8b9aaf;--accent: #4fb3ff;--good: #5dd39e;--warn: #f4b942;--bad: #ef6f6c;font-family:ui-sans-serif,system-ui,Segoe UI,Helvetica,Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;background:var(--bg);color:var(--text);min-height:100vh}body{font-size:14px;line-height:1.45}a{color:var(--accent)}.layout{max-width:1200px;margin:0 auto;padding:16px 20px 48px}.header{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:8px 0 20px;border-bottom:1px solid var(--border);margin-bottom:20px}.header h1{font-size:18px;font-weight:600;margin:0;letter-spacing:.02em}.header .device-picker{display:inline-flex;align-items:center;gap:6px}.header select{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font:inherit}.live-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--text-dim)}.live-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim)}.live-pill.connected .dot{background:var(--good);box-shadow:0 0 #5dd39eb3;animation:pulse 1.6s infinite}@keyframes pulse{0%{box-shadow:0 0 #5dd39e99}to{box-shadow:0 0 0 8px #5dd39e00}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px}.card+.card{margin-top:16px}.card h2{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 12px}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.kpi{background:#ffffff05;border:1px solid var(--border);border-radius:8px;padding:10px 14px}.kpi .label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.kpi .value{font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}.kpi .sub{font-size:11px;color:var(--text-dim);margin-top:2px}.range-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.range-bar button{background:transparent;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font:inherit;cursor:pointer}.range-bar button:hover{color:var(--text);border-color:var(--text-dim)}.range-bar button.active{color:var(--text);background:#4fb3ff1f;border-color:var(--accent)}.range-bar .custom{display:inline-flex;align-items:center;gap:4px}.range-bar input[type=datetime-local]{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:3px 6px;font:inherit}.empty,.error{padding:32px;text-align:center;color:var(--text-dim)}.error{color:var(--bad)}.chart-grid{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 900px){.chart-grid{grid-template-columns:1fr 1fr}.chart-grid .full{grid-column:1 / -1}}