@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-0:#0a0a14;--bg-1:#0f1020;--card:#161629;--card-2:#1b1b33;--border:#ffffff0f;--border-hover:#818cf873;--text:#f4f5fb;--text-dim:#a4a7c0;--text-faint:#6b6e8a;--indigo:#6366f1;--indigo-light:#818cf8;--indigo-deep:#4f46e5;--solar:#f5b53d;--grid-c:#38bdf8;--home-c:#34d399;--battery-c:#818cf8;--green:#34d399;--orange:#fb923c;--radius:16px;--radius-sm:12px;--shadow:0 8px 30px #00000059;--font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);background:linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 100%);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh}#root{min-height:100vh}.shell{min-height:100vh;font-family:var(--font);color:var(--text);background:linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 100%)}.sidebar{border-right:1px solid var(--border);z-index:50;background:#0d0e1ceb;flex-direction:column;width:192px;padding:28px 18px 24px;display:flex;position:fixed;top:0;bottom:0;left:0}.brand{align-items:center;gap:12px;padding:4px 10px 28px;display:flex}.brand-mark{background:linear-gradient(145deg, var(--indigo) 0%, var(--indigo-deep) 100%);border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:0 6px 16px #4f46e566}.brand-mark svg{color:#fff;width:22px;height:22px}.brand-title{letter-spacing:-.01em;font-size:19px;font-weight:700}.brand-sub{color:var(--text-faint);margin-top:1px;font-size:11px}.nav{flex-direction:column;gap:4px;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:13px;width:100%;padding:12px 14px;font-family:inherit;font-size:14.5px;font-weight:500;transition:background .2s,color .2s;display:flex}.nav-item svg{opacity:.9;flex-shrink:0;width:19px;height:19px}.nav-item:hover{color:var(--text);background:#ffffff0a}.nav-item.active{color:#fff;background:#6366f129;font-weight:600}.nav-item.active svg{color:var(--indigo-light);opacity:1}.sidebar-foot{margin-top:auto;padding:18px 14px 0}.clock{letter-spacing:-.02em;font-size:38px;font-weight:700;line-height:1}.clock-date{color:var(--text-dim);text-transform:capitalize;margin-top:7px;font-size:13px}.main{max-width:1500px;margin-left:192px;padding:32px 36px 64px}.page-head{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:30px;display:flex}.page-title{letter-spacing:-.02em;font-size:32px;font-weight:700}.page-sub{color:var(--text-dim);margin-top:5px;font-size:14px}.head-actions{flex-shrink:0;gap:12px;display:flex}.btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;align-items:center;gap:8px;padding:11px 18px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn svg{width:17px;height:17px}.btn-primary{background:linear-gradient(145deg, var(--indigo) 0%, var(--indigo-deep) 100%);color:#fff;box-shadow:0 4px 14px #4f46e559}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #4f46e580}.btn-outline{color:var(--text-dim);border:1px solid var(--border);background:0 0}.btn-outline:hover{border-color:var(--border-hover);color:var(--text)}.section{content-visibility:auto;contain-intrinsic-size:auto 420px;margin-top:36px;scroll-margin-top:16px}.section-label{letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:15px;padding-left:2px;font-size:11.5px;font-weight:600}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);transition:transform .2s,border-color .2s,background .2s}.card.hoverable:hover{border-color:var(--border-hover);background:var(--card-2);transform:scale(1.02)}.weather{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;padding:26px 32px;display:flex}.weather-left{align-items:center;gap:26px;display:flex}.weather-icon{width:76px;height:76px;color:var(--solar);filter:drop-shadow(0 4px 12px #f5b53d40);flex-shrink:0}.weather-temp{letter-spacing:-.03em;font-size:52px;font-weight:700;line-height:1}.weather-cond{color:var(--text-dim);text-transform:capitalize;margin-top:6px;font-size:15px}.weather-loc{color:var(--text-faint);margin-top:4px;font-size:13px}.weather-metrics{gap:38px;display:flex}.wmetric{align-items:center;gap:12px;display:flex}.wmetric svg{width:24px;height:24px;color:var(--indigo-light);flex-shrink:0}.wmetric-val{white-space:nowrap;font-size:19px;font-weight:700}.wmetric-label{color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;font-size:11px}.top-row{grid-template-columns:minmax(320px,1.6fr) minmax(220px,1fr) minmax(220px,1fr);align-items:stretch;gap:16px;display:grid}.live-energy{flex-direction:column;padding:20px 22px;display:flex}.live-head{letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);align-items:center;gap:7px;margin-bottom:16px;font-size:11px;font-weight:600;display:flex}.live-dot{background:var(--green);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #34d3992e}.live-list{flex-direction:column;flex:1;justify-content:center;gap:14px;display:flex}.live-item{align-items:center;gap:13px;display:flex}.live-icon{border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.live-icon svg{width:20px;height:20px}.live-info{flex:1;min-width:0}.live-label{color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;font-size:11px}.live-val{letter-spacing:-.01em;white-space:nowrap;margin-top:1px;font-size:22px;font-weight:700}.rooms-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.room-card{cursor:pointer;text-align:left;width:100%;color:var(--text);align-items:center;gap:15px;padding:18px;font-family:inherit;display:flex}.room-icon{background:#6366f121;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.room-icon svg{width:22px;height:22px;color:var(--indigo-light)}.room-info{flex:1;min-width:0}.room-name{font-size:15px;font-weight:600}.room-meta{color:var(--text-faint);margin-top:2px;font-size:12.5px}.room-arrow{color:var(--text-faint);flex-shrink:0;transition:transform .2s,color .2s;display:flex}.room-card:hover .room-arrow{color:var(--indigo-light);transform:translate(3px)}.room-arrow svg{width:18px;height:18px;display:block}.energy-row{grid-template-columns:minmax(360px,1fr) minmax(440px,1.05fr);align-items:stretch;gap:18px;display:grid}.energy-flow{justify-content:center;align-items:center;height:100%;padding:30px;display:flex}.flow-stage{aspect-ratio:560/440;width:100%;max-width:500px;position:relative}.flow-svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.node{flex-direction:column;align-items:center;gap:7px;width:104px;display:flex;position:absolute;transform:translate(-50%,-50%)}.node-circle{background:var(--card-2);border:2px solid var(--nc,var(--indigo));border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;display:flex;box-shadow:0 0 0 6px #0000002e,inset 0 0 22px #0000004d}.node-circle svg{width:31px;height:31px;color:var(--nc,var(--indigo))}.node-val{text-align:center;white-space:nowrap;font-size:14px;font-weight:700}.node-name{color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;text-align:center;font-size:10px}.node-solar{--nc:var(--solar);top:19%;left:50%}.node-grid{--nc:var(--grid-c);top:50%;left:19%}.node-home{--nc:var(--home-c);top:50%;left:81%}.node-battery{--nc:var(--battery-c);top:81%;left:50%}.flow-line{fill:none;stroke-width:2.5px;stroke-linecap:round;opacity:.25}@keyframes flow-move{0%{offset-distance:0%}to{offset-distance:100%}}.flow-dot{will-change:transform;animation:1.6s linear infinite flow-move}.energy-stats{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:14px;display:grid}.stat-card{flex-direction:column;padding:17px 16px;display:flex}.stat-top{align-items:center;gap:9px;display:flex}.stat-icon{border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.stat-icon svg{width:17px;height:17px}.stat-label{color:var(--text-faint);text-transform:uppercase;letter-spacing:.07em;font-size:10.5px}.stat-val{letter-spacing:-.01em;white-space:nowrap;margin-top:11px;font-size:25px;font-weight:700}.stat-val.small{font-size:18px}.sec-grid{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.sec-card{align-items:center;gap:14px;padding:16px;display:flex}.sec-icon{border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.sec-icon svg{width:21px;height:21px}.sec-icon.closed{color:var(--green);background:#34d39921}.sec-icon.open{color:var(--orange);background:#fb923c24}.sec-info{min-width:0}.sec-name{font-size:14px;font-weight:600}.sec-state{margin-top:2px;font-size:12.5px;font-weight:500}.sec-state.closed{color:var(--green)}.sec-state.open{color:var(--orange)}.consumer-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;display:grid}.consumer-card{align-items:center;gap:14px;padding:16px;display:flex}.consumer-icon{width:40px;height:40px;color:var(--indigo-light);background:#6366f121;border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.consumer-icon svg{width:21px;height:21px}.consumer-info{flex:1;min-width:0}.consumer-name{font-size:14px;font-weight:600}.consumer-vals{gap:28px;margin-top:8px;display:flex}.consumer-val{flex-direction:column;gap:2px;display:flex}.consumer-val .k{color:var(--text-faint);text-transform:uppercase;letter-spacing:.07em;font-size:10.5px}.consumer-val .v{letter-spacing:-.01em;white-space:nowrap;font-size:18px;font-weight:700}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:100;background:#05050c8c;justify-content:center;align-items:center;padding:28px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--card);border:1px solid #ffffff17;border-radius:20px;width:100%;max-width:720px;margin:auto;position:relative;overflow:hidden;box-shadow:0 30px 80px #0009}.modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:22px 26px;display:flex}.modal-head-left{align-items:center;gap:15px;display:flex}.modal-room-icon{background:#6366f126;border-radius:13px;justify-content:center;align-items:center;width:46px;height:46px;display:flex}.modal-room-icon svg{width:24px;height:24px;color:var(--indigo-light)}.modal-title{letter-spacing:-.01em;font-size:21px;font-weight:700}.modal-subtitle{color:var(--text-faint);margin-top:2px;font-size:13px}.modal-close{border:1px solid var(--border);width:38px;height:38px;color:var(--text-dim);cursor:pointer;background:0 0;border-radius:11px;justify-content:center;align-items:center;transition:all .2s;display:flex}.modal-close:hover{border-color:var(--border-hover);color:#fff;background:#ffffff0a}.modal-close svg{width:18px;height:18px}.modal-body{padding:24px 26px 28px}.modal-group-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:13px;font-size:11px;font-weight:600}.device-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;display:grid}.device-grid:last-child{margin-bottom:0}.device-card{background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;text-align:left;width:100%;color:var(--text);flex-direction:column;gap:14px;padding:17px 16px;font-family:inherit;transition:border-color .2s,transform .15s;display:flex}.device-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}.device-top{align-items:center;gap:12px;display:flex}.device-icon{border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.device-icon.on{color:var(--solar);background:#f5b53d29;box-shadow:0 0 20px #f5b53d26}.device-icon.off{color:var(--text-faint);background:#ffffff0d}.device-icon svg{width:21px;height:21px}.device-info{flex:1;min-width:0}.device-name{font-size:14.5px;font-weight:600}.device-state{margin-top:2px;font-size:12.5px}.device-state.on{color:var(--solar)}.device-state.off{color:var(--text-faint)}.device-bottom{justify-content:space-between;align-items:center;display:flex}.device-bottom-label{color:var(--text-faint);font-size:12px}.toggle{border-radius:13px;flex-shrink:0;width:46px;height:26px;transition:background .25s;position:relative}.toggle.on{background:var(--indigo);box-shadow:0 0 14px #6366f166}.toggle.off{background:#ffffff1f}.toggle-knob{background:#fff;border-radius:50%;width:20px;height:20px;transition:left .25s;position:absolute;top:3px;box-shadow:0 2px 4px #0000004d}.toggle.on .toggle-knob{left:23px}.toggle.off .toggle-knob{left:3px}.sensor-row{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.sensor-card{background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:13px;padding:16px;display:flex}.sensor-card .sec-icon{width:38px;height:38px}.confirm-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#05050c99;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.confirm{text-align:center;background:var(--card);border:1px solid #ffffff1a;border-radius:18px;width:100%;max-width:420px;padding:30px 28px 26px;position:relative;box-shadow:0 30px 80px #0009}.confirm-icon{background:#6366f126;border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 18px;display:flex}.confirm-icon svg{width:28px;height:28px;color:var(--indigo-light)}.confirm-title{font-size:18px;font-weight:700;line-height:1.4}.confirm-text{color:var(--text-dim);margin-top:8px;font-size:14px;line-height:1.5}.confirm-actions{gap:12px;margin-top:24px;display:flex}.confirm-actions .btn{flex:1;justify-content:center}.btn-group{color:var(--text);border:1px solid var(--border);background:#ffffff08}.btn-group:hover{border-color:var(--border-hover)}.btn-group.on{border-color:var(--border-hover);background:#6366f11f}.btn-group .toggle{margin-left:2px}.nav-sep{border:none;border-top:1px solid #ffffff12;margin:14px 6px}.batt-alert{color:var(--orange);background:#fb923c1f;border:1px solid #fb923c47;border-radius:10px;margin:2px 6px 0;padding:9px 12px;font-size:12px;font-weight:600;line-height:1.35}.toast-wrap{z-index:300;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:20px;right:20px}.toast{color:#fff;background:#16162a;border:1px solid #818cf866;border-radius:12px;align-items:center;gap:10px;min-width:210px;max-width:320px;padding:11px 14px;font-size:13.5px;font-weight:600;animation:.22s both toast-in;display:flex;box-shadow:0 10px 30px #00000073}.toast-out{opacity:0;transition:opacity .24s,transform .24s;transform:translateY(8px)}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.toast-ico{border-radius:8px;flex:none;place-items:center;width:26px;height:26px;display:grid}.toast-ico svg{width:16px;height:16px}.toast-ico.on{color:var(--solar);background:#f5b53d2e}.toast-ico.off{color:var(--text-faint);background:#ffffff0f}.toast-msg{line-height:1.3}.brand{cursor:pointer}.brand:hover .brand-title{color:var(--indigo-light)}.alarm-btn{cursor:pointer;border:1px solid #0000;border-radius:12px;align-items:center;gap:10px;margin-top:12px;padding:11px 14px;font-family:inherit;font-size:14px;font-weight:600;transition:background .2s,border-color .2s,filter .2s;display:flex}.alarm-btn svg{flex:none;width:18px;height:18px}.alarm-btn.armed{color:#f87171;background:#ef444424;border-color:#ef44446b}.alarm-btn.disarmed{color:var(--green);background:#34d3991f;border-color:#34d39952}.alarm-btn:hover{filter:brightness(1.12)}.alarm-warn{color:var(--orange);text-align:left;background:#fb923c1f;border:1px solid #fb923c4d;border-radius:11px;margin-top:14px;padding:11px 13px;font-size:13px;line-height:1.45}.alarm-warn b{color:#fff;font-weight:700}.alarm-ok{color:var(--green);margin-top:14px;font-size:13px}.pin-input{border:1px solid var(--border);color:#fff;text-align:center;letter-spacing:6px;background:#ffffff0d;border-radius:11px;width:100%;margin-top:16px;padding:12px 14px;font-family:inherit;font-size:18px}.pin-input::placeholder{letter-spacing:normal;color:var(--text-faint)}.pin-input:focus{border-color:var(--border-hover);outline:none}@media (width<=1120px){.rooms-grid,.sec-grid{grid-template-columns:repeat(3,1fr)}.energy-row,.top-row{grid-template-columns:1fr}}@media (width<=720px){.main{margin-left:0;padding:20px 16px 48px}.sidebar{flex-flow:wrap;align-items:center;width:100%;height:auto;padding:12px 16px;position:static}.sidebar-foot,.brand-sub{display:none}.nav{flex-flow:wrap}.rooms-grid,.sec-grid{grid-template-columns:repeat(2,1fr)}.device-grid,.sensor-row{grid-template-columns:1fr}}