:root{--bg: #f5f7f9;--surface: #ffffff;--text: #17222b;--muted: #64748b;--border: #e3e8ee;--card-head: #ccd7e2;--brand: #0b7285;--brand-dark: #095c6b;--accent: #0ca678;--danger: #e03131;--on: #0ca678;--off: #adb5bd;--shadow: 0 1px 2px rgba(16, 30, 43, .06), 0 4px 16px rgba(16, 30, 43, .05);--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}h1{font-size:1.5rem;margin:.2rem 0 .4rem}h2{margin:0}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.muted{color:var(--muted)}.small{font-size:.82rem}.screen-center{padding:3rem 0;text-align:center}.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.15rem;color:var(--text)}.brand:hover{text-decoration:none}.brand-mark{font-size:1.25rem}.brand-name{letter-spacing:-.02em}.brand-sm{font-size:1rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem}.auth-shell{min-height:100%;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(1200px 500px at 50% -10%,#e6f2f4 0%,var(--bg) 55%)}.auth-card{width:100%;max-width:400px;padding:1.6rem}.onboarding-card{width:100%;max-width:520px;padding:1.6rem}.auth-card h1,.onboarding-card h1{margin-top:.8rem}.form{display:flex;flex-direction:column;gap:.85rem;margin-top:1.1rem}label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--text)}input,select{font:inherit;padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-weight:400;outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0b72851f}.row{display:flex;gap:.6rem}.grow{flex:1}.state-field{width:84px}.zip-field{width:110px}.btn{font:inherit;font-weight:600;border:1px solid transparent;border-radius:10px;padding:.6rem .9rem;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}.btn:disabled{opacity:.6;cursor:default}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover:not(:disabled){background:var(--brand-dark)}.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}.btn-ghost:hover{background:#f1f4f7}.btn-sm{padding:.4rem .7rem;font-size:.85rem}.hint{margin-top:.9rem;font-size:.82rem;color:var(--muted);background:#f1f6f7;border:1px solid #dbe9ec;padding:.55rem .7rem;border-radius:10px}.switch-line{margin-top:1rem;text-align:center;font-size:.88rem}.alert{background:#fdeceb;color:#b02523;border:1px solid #f7cdca;padding:.55rem .7rem;border-radius:10px;font-size:.85rem}.notice{background:#eef7f1;color:#14663f;border:1px solid #cfe9d9;padding:.55rem .7rem;border-radius:10px;font-size:.85rem}.app{min-height:100%}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:#ffffffe6;-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}.topbar-right{display:flex;align-items:center;gap:.6rem}.container{max-width:860px;margin:0 auto;padding:1.1rem 1rem 3rem;display:flex;flex-direction:column;gap:1.1rem}.section-title{font-size:1rem;margin-bottom:.6rem;color:var(--text)}.region-card{display:flex;align-items:center;justify-content:space-between;gap:1rem}.region-utility{font-size:1.15rem;font-weight:700;margin:.1rem 0}.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.8rem .9rem}.stat-accent{background:linear-gradient(180deg,#0b7285,#0a6373);border-color:transparent}.stat-accent .stat-value,.stat-accent .stat-label{color:#fff}.stat-value{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}.stat-label{font-size:.76rem;color:var(--muted);margin-top:.15rem}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}.device-card{color:var(--text);display:flex;flex-direction:column;padding:0;overflow:hidden}.device-card:hover{text-decoration:none;border-color:#cfd8e0}.device-top{display:flex;flex-direction:column;gap:.7rem;background:var(--card-head);padding:1.05rem 1.2rem;border-bottom:1px solid var(--border)}.device-head{display:flex;align-items:flex-start;justify-content:space-between}.device-name{font-weight:700}.device-now{display:flex;align-items:baseline;justify-content:space-between}.device-watts{font-size:1.5rem;font-weight:700;color:var(--brand);letter-spacing:-.02em}.device-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:.8rem 1.2rem 1rem}.metric-value{font-weight:600;font-size:.9rem}.metric-label{font-size:.7rem;color:var(--muted)}.badge{font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;letter-spacing:.04em}.badge-on{background:#e6f6ef;color:var(--on)}.badge-off{background:#eef1f4;color:#7b8794}.pill{display:inline-block;font-size:.72rem;font-weight:600;background:#eef6f7;color:var(--brand-dark);border:1px solid #d8ebee;padding:.12rem .5rem;border-radius:999px}.pill-demo{background:#fff4e6;color:#b45309;border-color:#ffe3bf}.pill-live{background:#e6f6ef;color:var(--on);border-color:#bfe6d3}.pill-src{background:#f1f4f7;color:var(--muted);border-color:var(--border);text-transform:capitalize}.picker{border:1px dashed var(--border);border-radius:var(--radius);padding:.9rem}.picker-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.9rem;margin-bottom:.6rem}.utility-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}.utility-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-weight:500}.utility-option.selected{border-color:var(--brand);background:#f2f9fa}.utility-option input{width:auto;accent-color:var(--brand)}.u-name{font-weight:600}.u-meta{font-size:.76rem;color:var(--muted)}.back-link{font-size:.88rem;font-weight:600}.detail-head{display:flex;align-items:flex-start;justify-content:space-between}.detail-title{margin:0}.chart{display:flex;align-items:flex-end;gap:3px;height:140px}.chart-col{flex:1;height:100%;display:flex;align-items:flex-end}.chart-bar{width:100%;background:linear-gradient(180deg,#16a394,#0b7285);border-radius:3px 3px 0 0;min-height:3px}.chart-axis{display:flex;justify-content:space-between;margin-top:.5rem}.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.timeline-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--border)}.timeline-item:last-child{border-bottom:none}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.dot-on{background:var(--on);box-shadow:0 0 0 3px #e6f6ef}.dot-off{background:var(--off);box-shadow:0 0 0 3px #eef1f4}.timeline-body{display:flex;align-items:center;gap:.5rem}.timeline-state{font-weight:600;font-size:.9rem}@media (max-width: 560px){.totals{grid-template-columns:repeat(2,1fr)}.hide-sm{display:none}.device-grid{grid-template-columns:1fr}}.gauge-card{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:20px 24px}.gauge-ring{flex:0 0 auto;line-height:0}.gauge-num{fill:var(--text);font-size:26px;font-weight:700}.gauge-unit{fill:var(--muted);font-size:8.5px;font-weight:500}.gauge-side{flex:1 1 auto;min-width:0}.gauge-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px}.gauge-stats{display:flex;flex-wrap:wrap;gap:20px 32px}.gauge-stat-val{font-size:22px;font-weight:700;color:var(--text)}.gauge-stat-unit{font-size:13px;font-weight:600;color:var(--muted)}.gauge-stat-label{font-size:12px;color:var(--muted);margin-top:2px}.gauge-foot{margin-top:14px}.gauge-mostused{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#ecf7f1;border:1px solid #d3ecdf;border-radius:10px}.gauge-mostused-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.gauge-mostused-name{font-size:15px;font-weight:700;color:var(--brand-dark);margin-top:1px}.gauge-mostused-val{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}@media (max-width: 560px){.gauge-card{flex-direction:column;align-items:flex-start}.gauge-ring{align-self:center}}.watt-row{display:flex;flex-wrap:wrap;gap:.5rem}.watt-note{margin:.7rem 0 0}