:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:#fafafa}.electric-app{min-height:100vh;padding:2rem;max-width:900px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.header-left{display:flex;align-items:center;gap:.75rem}.logo{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:#00e5ff14;border:1px solid rgba(0,229,255,.15)}h1{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#00e5ff,#7c4dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:.8rem;color:#fff6;margin-top:2px}.toggle-group{display:flex;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}.toggle-btn{padding:.5rem 1.2rem;border:none;background:none;color:#fff6;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.toggle-btn:hover{color:#ffffffb3}.toggle-btn.active{background:#00e5ff1f;color:#00e5ff}.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}.stat-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;gap:.3rem}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffff59}.stat-value{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:#fafafa}.stat-value small{font-size:.7rem;font-weight:400;color:#ffffff59}.stat-value.peak{color:#7c4dff}.stat-value.min{color:#00e5ff}.chart-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.5rem}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.chart-header h2{font-size:1rem;font-weight:600;color:#fffc}.legend{display:flex;gap:1.2rem}.legend-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#ffffff80}.dot{width:8px;height:8px;border-radius:50%}.dot.usage{background:#00e5ff;box-shadow:0 0 6px #00e5ff80}.dot.peak{background:#7c4dff;box-shadow:0 0 6px #7c4dff80}.chart-svg{width:100%;height:auto}.axis-label{fill:#ffffff4d;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tooltip-text{fill:#00e5ff;font-size:12px;font-weight:600;font-family:ui-sans-serif,system-ui,sans-serif}