:root{--bg:#f4f6fa;--ink:#252b36;--muted:#8a909c;--line:#edf0f5;--blue:#2776ef;--solar:#f4b94a;--home:#4b8df6;--grid:#a289dd;--battery:#4ac69e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px "Segoe UI",Arial,sans-serif}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7aacf8;outline-offset:3px}[hidden]{display:none!important}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.app-header{background:#fff;border-bottom:1px solid #e9edf4;padding:0 40px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:sticky;top:0;z-index:10}.brand{font-size:22px;color:#23324d;font-weight:650;display:flex;align-items:center;gap:5px;text-decoration:none;letter-spacing:-.7px;white-space:nowrap}.brand>span:last-child{font-weight:400;color:#5891e7}.brand-symbol{display:grid;place-items:center;background:var(--blue);color:white;font-size:29px;width:32px;height:34px;border-radius:9px;margin-right:5px}.app-header nav{height:100%;display:flex;gap:32px}.nav{position:relative;border:0;background:none;color:#9298a4;display:flex;align-items:center;gap:9px;padding:0 8px;font-size:13px}.nav svg{width:19px;height:19px}.nav.active{color:var(--blue);font-weight:600}.nav.active:after{content:"";position:absolute;bottom:0;height:3px;background:var(--blue);left:6px;right:6px;border-radius:3px 3px 0 0}.local-badge{font-size:11px;color:#8f97a4;white-space:nowrap}.local-badge i,.live-label i{display:inline-block;width:6px;height:6px;background:#4bc89b;border-radius:50%;margin-right:5px}main{max-width:1450px;margin:auto;padding:0 40px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 24px}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#a2a9b4;font-weight:600;margin:0 0 8px}h1{font-size:29px;letter-spacing:-.9px;font-weight:600;margin:0 0 9px}.plant-caret{font-size:22px;color:#b3bdcc;font-weight:400}.page-heading p:not(.eyebrow){font-size:11px;color:#8f97a4;margin:0}.separator{color:#d0d7e1;padding:0 9px}.header-right{display:flex;align-items:center;gap:15px;font-size:11px;color:#a0a7b3}.status-pill{background:#e9f7f1;color:#43a780;border-radius:20px;padding:7px 11px;font-size:10px;white-space:nowrap}.status-pill.warn{background:#fff4df;color:#b68a36}.panel{border-radius:16px;background:#fff;padding:24px;border:1px solid #edf0f6;box-shadow:0 2px 6px #39517b02}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.2px}.panel-heading p,.card-subtitle{color:#a3aab6;font-size:10px;margin:7px 0 0}.live-label{color:#99a2b0;font-size:10px}.mini-tag{font-size:9px;color:#8b9ab2;background:#f3f6fb;padding:5px 8px;border-radius:5px}.overview-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:20px}.flow-panel{background:linear-gradient(180deg,#fff 0,#f9fcff 70%,#fff 100%);padding-bottom:13px}.energy-flow{height:409px;position:relative;margin:1px 0 5px}.flow-wires{position:absolute;width:100%;height:100%;inset:0;stroke-width:1.4;overflow:visible}.wire-base{stroke:#e0e7f0;stroke-width:3}.wire-active{stroke-dasharray:4 8;animation:current 1.4s linear infinite;stroke-width:2.6}.pv-wire{stroke:#f1c161}.grid-wire{stroke:#aa94dc}.home-wire{stroke:#7cabed}.battery-wire{stroke:#66cfb2}.energy-flow.exporting .grid-wire{animation-direction:reverse}.energy-flow.discharging .battery-wire{animation-direction:reverse}.energy-flow.no-data .wire-active,.energy-flow.no-battery .battery-wire,.energy-flow.no-grid .grid-wire{animation:none;stroke:#d9e2ed;stroke-dasharray:none}.flow-node{position:absolute;text-align:center;transform:translate(-50%,-50%);width:142px}.pv-node{left:50%;top:20.2%;--node-color:var(--solar);--node-bg:#fffdf5}.grid-node{left:18.89%;top:51.06%;--node-color:var(--grid);--node-bg:#fcfaff}.house-node{left:81.11%;top:51.06%;--node-color:var(--home);--node-bg:#f7fbff}.battery-node{left:50%;top:79.79%;--node-color:var(--battery);--node-bg:#f6fdfa}.node-circle{background:var(--node-bg);border:3px solid var(--node-color);border-radius:50%;width:96px;height:96px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:auto;box-shadow:0 0 0 6px #fff,0 5px 14px #798cac0b}.node-circle svg{width:28px;height:28px;color:var(--node-color);stroke-width:1.6}.node-circle>span{font-size:18px;color:#394151;font-weight:600;letter-spacing:-.5px}.flow-node>strong{font-size:11px;font-weight:500;display:block;margin-top:11px;color:#788292}.flow-node>small{font-size:9px;color:var(--node-color);display:block;margin-top:4px;height:11px}.inverter-node{position:absolute;left:50%;top:51.06%;transform:translate(-50%,-50%);text-align:center;background:#fbfdff;padding:8px}.inverter-art{border:1px solid #dae1eb;border-radius:10px;background:linear-gradient(110deg,#fff,#edf1f6);width:61px;height:85px;box-shadow:4px 5px 8px #2947710b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.inverter-art svg{width:35px;height:40px;color:#a5b2c7;stroke-width:1}.inverter-art span{font-size:6px;letter-spacing:1px;color:#9ca4b1}.inverter-art i{width:4px;height:4px;background:#62c6a7;border-radius:50%}.inverter-node>small{font-size:9px;color:#a7afbd;display:block;margin-top:7px}.flow-telemetry{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;border-top:1px solid #edf1f7;padding-top:17px;text-align:center}.flow-telemetry span{font-size:9px;color:#a3acb9;display:block;margin-bottom:7px}.flow-telemetry strong{font-size:12px;font-weight:500;color:#6d7f98}.flow-foot{font-size:9px;color:#a1adbd;text-align:center;margin-top:16px;line-height:1.6}.overview-side{display:flex;flex-direction:column;gap:20px}.day-panel{flex:1}.day-main{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:23px 0 20px;margin-bottom:18px}.day-main>svg{width:39px;height:39px;color:#e9ba57;stroke-width:1.3}.day-main span{font-size:10px;color:#9aa3b0;display:block;margin-bottom:7px}.day-main strong{font-size:27px;color:#dba33a;font-weight:500;letter-spacing:-.7px}.day-stat{display:flex;align-items:center;justify-content:space-between;margin:15px 0;font-size:11px;color:#939ca9}.day-stat strong{font-size:12px;font-weight:500;color:#5d6c80}.coverage{font-size:9px;line-height:1.6;color:#aab2bd;border-top:1px solid var(--line);padding-top:13px;margin:17px 0 0}.power-panel{padding:21px 24px}.metric-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-top:22px}.metric{min-width:0}.metric-label{font-size:9px;color:#9aa3b0;white-space:nowrap}.metric-label i{width:5px;height:5px;border-radius:50%;background:var(--solar);display:inline-block;margin-right:5px}.metric:nth-child(2) .metric-label i{background:var(--home)}.metric:nth-child(3) .metric-label i{background:var(--grid)}.metric-label small{display:none}.metric-value{font-size:23px;color:#526178;letter-spacing:-.6px;white-space:nowrap;margin-top:9px}.metric-value small{font-size:9px;color:#a2acbb;margin-left:4px;letter-spacing:0}.metric-note{font-size:9px;color:#abb3c0;margin-top:5px}.meter-track{height:2px;background:#f7f0e0;margin-top:10px;max-width:80px}.meter-track>div{height:100%;background:var(--solar)}.chart-panel{margin-top:20px;padding-bottom:0}.periods{display:flex;gap:5px;padding:3px;background:#f4f7fb;border-radius:7px}.periods button{padding:7px 15px;border:0;background:none;color:#9aa5b7;font-size:10px;border-radius:5px}.periods .selected{color:var(--blue);background:#fff;box-shadow:0 1px 4px #2d65b012}.legend{display:flex;flex-wrap:wrap;gap:25px;color:#99a3b2;font-size:10px;margin:22px 0 10px}.legend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--solar);margin-right:7px}.legend .home-dot:before{background:var(--home)}.legend .grid-dot:before{background:var(--grid)}.chart-container{height:230px;position:relative}canvas{display:block;width:100%;height:100%}.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#8e9db3;font-size:13px;pointer-events:none}.chart-empty small{font-size:10px;color:#acb6c5;margin-top:8px}.chart-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:15px 0;font-size:10px;color:#a3adbd}.chart-footer a{color:#6b98df;text-decoration:none}.devices-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}.device{display:flex;gap:12px;align-items:center;padding:20px 18px}.device-symbol{background:#f0f5fd;color:#8daee0;border-radius:10px;display:grid;place-items:center;width:36px;height:42px;flex-shrink:0}.device-symbol svg{width:26px;height:26px;stroke-width:1.3}.proxy-symbol{font-size:25px}.device h3{font-size:11px;margin:0;font-weight:600;color:#6a778c}.device p{color:#a5aebc;font-size:9px;margin:6px 0}.device-address{font:9px Consolas,monospace;color:#a2adbe}.device-status{margin-left:auto;padding:5px 7px;border-radius:10px;background:#eaf8f2;color:#5eb795;font-size:8px;white-space:nowrap}.device-status.offline{background:#fff6e7;color:#c7a167}footer{display:flex;align-items:center;justify-content:space-between;padding:22px 0;color:#b1b9c5;font-size:9px}.banner{border:1px solid #f1dfbc;background:#fff9ef;color:#b39259;border-radius:9px;padding:11px 15px;font-size:11px;line-height:1.6;margin-bottom:18px}.primary-button{display:inline-block;background:var(--blue);border:0;color:white;border-radius:8px;padding:11px 18px;text-decoration:none;font-size:12px;white-space:nowrap}.settings-panel,.proxy-panel{max-width:1030px;margin-bottom:20px}.settings-panel h2{margin:6px 0 17px}.settings-panel p,.proxy-panel p{font-size:12px;color:#909dad;line-height:1.85}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 30px}label{font-size:11px;color:#8190a5}input,select{display:block;width:100%;border:1px solid #e1e7f0;border-radius:7px;padding:11px 12px;background:#fafcff;color:#5d7394;margin-top:8px}.form-actions{display:flex;align-items:center;gap:15px;font-size:11px;color:#7590b5}.proxy-address{display:flex;flex-wrap:wrap;gap:15px 35px;background:#f4f8ff;padding:18px;border-radius:10px;margin:23px 0}.proxy-address span{font-size:10px;color:#92a4bd}.proxy-address strong{display:block;margin-top:6px;color:#397bdf;font-size:17px;font-weight:500}.proxy-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);padding-top:18px;gap:20px}.proxy-stats span{font-size:10px;color:#a1adbd;display:block}.proxy-stats strong{display:block;margin-top:8px;font-size:15px;font-weight:500;color:#6c86a9}.diagnostic{color:#b1905b!important;overflow-wrap:anywhere}.proxy-note{font-size:10px!important}.history-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:24px}.history-totals>div{border-radius:10px;background:#f5f8fd;padding:20px;color:#93a3b9;font-size:11px}.history-totals strong{display:block;color:#507dbb;font-size:24px;font-weight:500;margin-top:13px}#history-period{width:170px}.table-wrap{overflow:auto;max-height:580px;margin-top:23px}table{border-collapse:collapse;width:100%;text-align:left;font-size:11px}th,td{padding:13px;border-bottom:1px solid var(--line);white-space:nowrap}th{position:sticky;top:0;font-weight:500;color:#94a2b6;background:#f8faff}td{color:#72849f}td.empty{text-align:center;padding:50px;color:#a4b0c2}@keyframes current{to{stroke-dashoffset:-24}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:1400px){.energy-flow{height:435px}.chart-container{height:260px}}@media(max-width:1150px){.app-header{padding:0 25px}main{padding:0 25px}.overview-grid{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr)}.device-symbol{display:none}.device{flex-wrap:wrap}.device-status{margin-left:0}.energy-flow{height:410px}.node-circle{width:85px;height:85px}.node-circle>span{font-size:16px}.flow-node{width:118px}.metric-value{font-size:21px}.metric-label{font-size:8px}}@media(max-width:860px){.overview-grid{grid-template-columns:1fr}.overview-side{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}.power-panel .metric-grid{grid-template-columns:1fr;gap:16px;margin-top:20px}.power-panel .metric{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap}.metric-value{margin-top:0}.metric-label{font-size:10px}.metric-note{width:100%;text-align:right}.meter-track{display:none}.devices-grid{grid-template-columns:1fr 1fr}.device{flex-wrap:nowrap}.device-status{margin-left:auto}.app-header nav{gap:16px}.brand{font-size:20px}.header-right #clock{display:none}.energy-flow{height:380px}.node-circle{width:94px;height:94px}.page-heading{margin:26px 0 20px}h1{font-size:26px}.local-badge{font-size:10px}.device-symbol{display:grid}.devices-grid>.device:last-child{grid-column:span 2}}@media(max-width:600px){.app-header{height:64px;padding:0 20px}.app-header nav{position:fixed;bottom:0;left:0;right:0;background:#fff;height:65px;border-top:1px solid #e8edf5;display:flex;justify-content:space-around;gap:0;padding-bottom:env(safe-area-inset-bottom);z-index:20}.nav{display:flex;flex-direction:column;justify-content:center;gap:5px;font-size:10px;min-width:80px;padding:6px}.nav svg{width:22px;height:22px}.nav.active:after{display:none}main{padding:0 14px 66px}.page-heading{margin:24px 3px 20px;gap:8px}h1{font-size:24px}.eyebrow{font-size:8px}.page-heading p:not(.eyebrow){font-size:9px}.header-right{align-self:flex-start;margin-top:27px}.status-pill{font-size:8px;padding:6px 8px}.panel{padding:19px 16px;border-radius:14px}h2{font-size:14px}.energy-flow{height:345px;margin:7px -9px 0}.node-circle{width:77px;height:77px;border-width:2px;gap:5px;box-shadow:0 0 0 5px #fff}.node-circle svg{width:24px;height:24px}.node-circle>span{font-size:14px}.flow-node{width:102px}.flow-node>strong{font-size:9px;margin-top:8px}.flow-node>small{font-size:8px}.grid-node{left:16%}.house-node{left:84%}.flow-wires{left:-4%;width:108%}.inverter-art{width:46px;height:69px;border-radius:8px}.inverter-art svg{width:28px;height:32px}.inverter-art span{font-size:5px}.inverter-node{padding:6px}.inverter-node>small{font-size:8px}.overview-side{display:flex;gap:16px}.overview-grid{gap:16px}.day-main{padding:17px 0 15px;margin-bottom:14px}.day-main strong{font-size:28px}.day-stat{margin:13px 0}.coverage{font-size:9px}.power-panel .metric-grid{grid-template-columns:1fr 1fr 1fr;gap:13px;margin-top:18px}.power-panel .metric{display:block}.metric-label{font-size:8px}.metric-value{font-size:24px;margin-top:8px}.metric-value small{font-size:9px}.metric-note{text-align:left;font-size:8px}.flow-telemetry span{font-size:8px}.flow-telemetry strong{font-size:10px}.flow-foot{font-size:8px}.chart-panel{margin-top:16px;padding-bottom:0}.periods{gap:0}.periods button{padding:6px 9px;font-size:9px}.legend{font-size:8px;gap:13px;margin-top:19px}.legend span:before{width:5px;height:5px;margin-right:5px}.chart-container{height:200px}.chart-footer{font-size:8px}.devices-grid{grid-template-columns:1fr;gap:12px;margin-top:16px}.devices-grid>.device:last-child{grid-column:auto}.device{padding:15px}.device h3{font-size:11px}.device-status{font-size:9px}.device-symbol{width:35px;height:38px}.device p{font-size:9px}footer{font-size:8px;gap:12px;line-height:1.6;align-items:flex-start}.form-grid{grid-template-columns:1fr;gap:16px}.settings-panel p,.proxy-panel p{font-size:11px}.proxy-address{gap:19px 25px;padding:14px}.proxy-address strong{font-size:15px}.proxy-stats{gap:12px}.proxy-stats span{font-size:9px}.proxy-stats strong{font-size:12px}.history-totals{grid-template-columns:1fr 1fr;gap:10px}.history-totals>div{padding:15px;font-size:10px}.history-totals strong{font-size:21px}#history-period{width:135px;font-size:10px}.page-heading:has(.primary-button){flex-wrap:wrap}.primary-button{font-size:11px}.banner{font-size:10px}.chart-empty{font-size:11px}.chart-empty small{font-size:9px;text-align:center}}@media(max-width:355px){.node-circle{width:70px;height:70px}.node-circle>span{font-size:12px}.energy-flow{height:315px}.flow-node{width:90px}.metric-value{font-size:20px}.flow-telemetry{gap:6px}.flow-telemetry span{font-size:7px}.page-heading p:not(.eyebrow){font-size:8px}}