@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap";
:root{--bg:#f0f4f8;--surface:#fff;--surface-subtle:#f8fafc;--brand:#1a237e;--brand-mid:#283593;--brand-light:#3949ab;--accent:#1565c0;--accent-soft:#e8eaf6;--accent-border:#c5cae9;--text:#0d1117;--text-2:#374151;--text-3:#6b7280;--text-4:#9ca3af;--success:#1b5e20;--success-bg:#e8f5e9;--success-light:#4caf50;--warning:#e65100;--warning-bg:#fff3e0;--warning-light:#ff9800;--danger:#c62828;--danger-bg:#ffebee;--danger-light:#ef5350;--border:#e5e7eb;--border-strong:#d1d5db;--shadow-sm:0 1px 2px #0000000d;--shadow:0 1px 4px #00000014, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #1a237e1a, 0 1px 4px #0000000f;--shadow-lg:0 8px 24px #1a237e24, 0 2px 8px #00000014;--radius:12px;--radius-sm:8px;--radius-lg:16px;--font-display:"Space Grotesk", system-ui, sans-serif;--font-body:"Outfit", system-ui, sans-serif;--font-data:"Space Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;height:100%}html,body{max-width:100vw;overflow-x:hidden}body{background:var(--bg);min-height:100%;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.55}a{color:inherit;text-decoration:none}img,svg{display:block}.app-shell{flex-direction:column;min-height:100vh;display:flex}.page-content{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:32px 24px 64px}.navbar{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#ffffffeb;position:sticky;top:0}.navbar-inner{align-items:center;gap:0;max-width:1280px;height:60px;margin:0 auto;padding:0 24px;display:flex}.navbar-brand{font-family:var(--font-display);color:var(--brand);letter-spacing:-.02em;flex-shrink:0;align-items:center;gap:10px;margin-right:40px;font-size:1.15rem;font-weight:700;display:flex}.navbar-brand-dot{background:var(--brand-light);border-radius:50%;width:10px;height:10px;animation:2.5s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.navbar-nav{flex:1;align-items:center;gap:4px;display:flex}.nav-link{color:var(--text-3);white-space:nowrap;border-radius:8px;padding:6px 14px;font-size:.875rem;font-weight:500;transition:color .15s,background .15s}.nav-link:hover{color:var(--text);background:var(--bg)}.nav-link.active{color:var(--brand);background:var(--accent-soft);font-weight:600}.navbar-status{color:var(--text-3);align-items:center;gap:8px;margin-left:auto;font-size:.78rem;display:flex}.status-dot{background:var(--success-light);border-radius:50%;width:7px;height:7px;animation:2.5s ease-in-out infinite pulse-dot}.status-dot.demo{background:var(--warning-light)}.status-dot.offline{background:var(--danger-light);animation:none}.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:24px;transition:box-shadow .2s,transform .2s}.card:hover{box-shadow:var(--shadow-md)}.card-sm{padding:16px 20px}.card-lg{padding:32px}.card-brand{background:var(--brand);color:#fff;border-color:#0000}.card-brand-soft{background:var(--accent-soft);border-color:var(--accent-border)}.metric-card{position:relative;overflow:hidden}.metric-card:before{content:"";background:var(--brand-light);border-radius:3px 3px 0 0;height:3px;position:absolute;top:0;left:0;right:0}.metric-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;font-size:.72rem;font-weight:600}.metric-value{font-family:var(--font-display);color:var(--text);margin-bottom:6px;font-weight:700;line-height:1}.metric-value.xl{letter-spacing:-.03em;font-size:clamp(2.5rem,6vw,4rem)}.metric-value.lg{letter-spacing:-.02em;font-size:clamp(1.8rem,4vw,2.4rem)}.metric-value.md{letter-spacing:-.01em;font-size:1.5rem}.metric-value.sm{font-size:1.25rem}.metric-unit{font-family:var(--font-body);color:var(--text-3);margin-left:3px;font-size:.75em;font-weight:400}.metric-delta{border-radius:20px;align-items:center;gap:3px;padding:2px 8px;font-size:.8rem;font-weight:500;display:inline-flex}.metric-delta.up{color:var(--warning);background:var(--warning-bg)}.metric-delta.down{color:var(--success);background:var(--success-bg)}.metric-delta.flat{color:var(--text-3);background:var(--bg)}.hero-number{font-family:var(--font-display);color:var(--brand);letter-spacing:-.04em;font-size:clamp(4rem,10vw,7.5rem);font-weight:700;line-height:.9}.hero-unit{font-family:var(--font-body);color:var(--text-3);vertical-align:middle;margin-left:8px;font-size:clamp(1.2rem,3vw,2rem);font-weight:400}.hero-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-bottom:12px;font-size:.8rem;font-weight:600}.section-title{font-family:var(--font-display);color:var(--text);letter-spacing:-.02em;margin-bottom:4px;font-size:1.35rem;font-weight:700}.section-sub{color:var(--text-3);margin-bottom:24px;font-size:.875rem}.divider{background:var(--border);height:1px;margin:32px 0}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid-hero{grid-template-columns:1.6fr 1fr;align-items:start;gap:20px;display:grid}.progress-wrap{background:var(--bg);border:1px solid var(--border);border-radius:4px;height:8px;overflow:hidden}.progress-bar{background:var(--brand-light);border-radius:4px;height:100%;transition:width .6s}.progress-bar.warning{background:var(--warning-light)}.progress-bar.danger{background:var(--danger-light)}.progress-bar.success{background:var(--success-light)}.appliance-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px;padding:16px 20px;transition:box-shadow .15s,border-color .15s;display:grid}.appliance-row:hover{box-shadow:var(--shadow-md);border-color:var(--accent-border)}.appliance-icon{background:var(--accent-soft);border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.6rem;display:flex}.appliance-name{color:var(--text);font-size:.95rem;font-weight:600}.appliance-meta{color:var(--text-3);margin-top:2px;font-size:.8rem}.appliance-cost{text-align:right}.appliance-kwh{font-family:var(--font-data);color:var(--text-2);font-size:.85rem}.appliance-brl{font-family:var(--font-display);color:var(--brand);font-size:1.1rem;font-weight:700}.status-badge{letter-spacing:.03em;border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:.72rem;font-weight:600;display:inline-flex}.status-badge.on{background:var(--success-bg);color:var(--success)}.status-badge.off{background:var(--bg);color:var(--text-4);border:1px solid var(--border)}.status-badge.unknown{background:var(--warning-bg);color:var(--warning)}.source-badge{letter-spacing:.04em;text-transform:uppercase;border-radius:4px;align-items:center;gap:3px;padding:2px 8px;font-size:.68rem;font-weight:600;display:inline-flex}.source-badge.ml{background:var(--accent-soft);color:var(--brand)}.source-badge.heuristic{color:#92400e;background:#fef3c7}.source-badge.demo{background:var(--bg);color:var(--text-4);border:1px solid var(--border)}.billing-ring-wrap{align-items:center;gap:24px;display:flex}.demo-banner{background:linear-gradient(135deg, var(--warning-bg), #fffbf0);border:1px solid var(--warning-light);border-radius:var(--radius);color:var(--warning);align-items:center;gap:10px;margin-bottom:24px;padding:12px 20px;font-size:.85rem;font-weight:500;display:flex}.whatif-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);align-items:flex-start;gap:16px;padding:20px;transition:box-shadow .15s;display:flex}.whatif-card:hover{box-shadow:var(--shadow-md)}.whatif-saving{font-family:var(--font-display);color:var(--success);white-space:nowrap;font-size:1.4rem;font-weight:700}.whatif-icon{flex-shrink:0;margin-top:2px;font-size:1.6rem}.event-row{border-radius:var(--radius-sm);background:var(--surface-subtle);border:1px solid var(--border);align-items:center;gap:12px;padding:10px 16px;font-size:.85rem;display:flex}.event-row+.event-row{margin-top:6px}.event-type-on{color:var(--success);font-weight:600}.event-type-off{color:var(--danger-light);font-weight:600}.chart-wrap{width:100%;min-height:220px}.confidence-bar{color:var(--text-3);align-items:center;gap:10px;font-size:.8rem;display:flex}.confidence-track{background:var(--bg);border:1px solid var(--border);border-radius:3px;flex:1;height:6px;overflow:hidden}.confidence-fill{background:var(--brand-light);border-radius:3px;height:100%}@media (max-width:900px){.grid-4{grid-template-columns:1fr 1fr}.grid-hero{grid-template-columns:1fr}}@media (max-width:640px){.page-content{padding:20px 16px 48px}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.navbar-inner{padding:0 16px}.hero-number{font-size:clamp(3rem,15vw,5rem)}.appliance-row{grid-template-columns:40px 1fr auto}.appliance-cost{display:none}}