:root{--bg-color:#050505;--card-bg:#121214;--card-border:#1f1f23;--accent-cyan:#00f2ff;--accent-blue:#0062ff;--accent-purple:#9d00ff;--accent-orange:#ff9d00;--text-primary:#f5f5f7;--text-secondary:#86868b;--success:#00ff95;--danger:#ff3b30;--glass:#ffffff08}@keyframes pulse{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}.app-container{flex-direction:column;max-width:800px;min-height:100vh;margin:0 auto;padding:24px;display:flex}.header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.brand{flex-direction:column;display:flex}.brand h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:20px;font-weight:800}.brand span{text-transform:uppercase;letter-spacing:2px;color:var(--text-secondary);font-size:10px}.status-badge{background:var(--glass);border:1px solid var(--card-border);border-radius:100px;align-items:center;gap:8px;padding:8px 16px;font-size:12px;font-weight:600;display:flex}.status-dot{border-radius:50%;width:8px;height:8px;box-shadow:0 0 10px}.status-dot.connected{color:var(--success);background:var(--success);animation:2s infinite pulse}.status-dot.disconnected{color:var(--danger);background:var(--danger)}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px;display:grid}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:24px;padding:24px;transition:transform .2s,border-color .2s}.card:hover{border-color:#333}.card-header{justify-content:space-between;align-items:flex-start;margin-bottom:20px;display:flex}.card-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700}.card-value-group{align-items:baseline;gap:4px;display:flex}.card-value{letter-spacing:-2px;font-family:SF Mono,JetBrains Mono,monospace;font-size:44px;font-weight:700}.card-unit{color:var(--text-secondary);font-size:18px;font-weight:500}.chart-container{width:100%;height:120px;margin-top:16px}.chart-line{fill:none;stroke:var(--accent-cyan);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:url(#gradient);opacity:.15}.connect-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;text-align:center;background:#000c;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.connect-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:100px;padding:16px 40px;font-size:16px;font-weight:700;transition:transform .2s}.connect-btn:hover{transform:scale(1.05)}.unsupported-banner{border:1px solid var(--danger);color:var(--danger);background:#ff3b301a;border-radius:16px;margin-top:20px;padding:16px;font-size:14px}footer{text-align:center;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-top:auto;padding-top:40px;font-size:11px}