:root{color-scheme:light;--bg:#f2f4f6;--panel:#fff;--muted:#6c7782;--line:#dce2e7;--green:#218d60;--purple:#0876ba;--amber:#ba6c0b;--blue:#006eb6;--ink:#27333e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font:14px Arial,Helvetica,sans-serif}main{max-width:1320px;margin:auto;padding:0 28px 28px}header{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--blue);color:white;padding:25px 28px;margin:0 -28px 22px;border-radius:0 0 4px 4px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;opacity:.8;margin-bottom:8px}h1{font-size:25px;font-weight:500;margin:0}h1 span{font-size:15px;opacity:.8}header p{font-size:12px;color:#d6ebf9;margin:8px 0 0;line-height:1.5}p{color:var(--muted);line-height:1.6}.status{font-size:12px;line-height:1.5;color:#fff;padding:8px 11px;border:1px solid #ffffff50;border-radius:4px;background:#ffffff14;white-space:nowrap}.status.bad{color:#fff0d5;background:#a85f15;border-color:#a85f15}#notice{font-size:13px;color:#a35115;line-height:1.5;margin-bottom:14px}#notice:empty{display:none}.energy-grid{display:grid;grid-template-columns:1fr 160px 1fr;gap:35px;align-items:center;margin:22px 0}.flow-card{padding:20px 22px;background:white;border:1px solid var(--line);border-radius:5px;position:relative;min-height:125px}.flow-card:first-child:after{content:'';position:absolute;width:36px;height:2px;right:-36px;top:50%;background:#e4ab4b}.flow-card:last-child:before{content:'';position:absolute;width:36px;height:2px;left:-36px;top:50%;background:#e4ab4b}.flow-label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}.flow-label svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.6}.flow-value{font-size:29px;margin:12px 0 5px}.flow-sub{font-size:12px;color:var(--muted)}.inverter{background:var(--blue);color:#fff;text-align:center;border-radius:5px;overflow:hidden;box-shadow:0 2px 4px #23405b15}.inverter-icon{display:block;margin:15px auto 10px;width:39px;height:39px;fill:none;stroke:#fff;stroke-width:1.5}.inverter-name{font-size:13px;line-height:1.4;padding:0 5px 13px}.inverter-state{border-top:3px solid #eda848;background:#e5f2fb;color:#08649e;padding:9px 4px;font-size:12px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 30px}.card,.chart,.box{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:19px 20px;box-shadow:0 1px 2px #19304705}.card{border-top:3px solid #0875ba}.card:first-child{border-top-color:#37a271}.label{color:var(--muted);font-size:12px}.value{font-size:31px;font-weight:400;margin:12px 0 8px;letter-spacing:-.6px;color:#263845}.sub{font-size:12px;color:var(--muted);line-height:1.5}.unit{font-size:16px;color:var(--muted)}.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:26px 0 12px}.toolbar strong{font-size:19px;font-weight:400}.toolbar button,button{font:inherit;font-size:12px;background:#fff;border:1px solid #ccd5dd;color:#667480;padding:9px 13px;border-radius:3px;cursor:pointer}button:hover{background:#eaf3fa}button.active{background:var(--blue);color:#fff;border-color:var(--blue)}#ranges{display:flex;gap:5px}.history-note{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:15px}.charts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.chart{position:relative}.chart h2,.box h2{font-size:15px;font-weight:500;margin:0 0 12px;color:#334b5e}.legend{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:12px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 3px}.legend i.blue{background:#0876ba}.legend i.orange{background:#e59732}.legend i.green{background:#218d60}canvas{width:100%;height:210px;display:block}.chart-tip{display:none;position:fixed;z-index:10;max-width:300px;padding:10px 12px;border:1px solid #cbd6df;border-radius:5px;background:#fffffff5;box-shadow:0 3px 14px #1f405b24;color:var(--ink);font-size:12px;line-height:1.7;pointer-events:none;white-space:pre-line}.lower{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.row{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #e8edf1;font-size:12px;line-height:1.45}.row:last-child{border-bottom:0}.row span:first-child{color:var(--muted)}.row span:last-child{text-align:right}.warning{color:#b86a0d}.event-link{width:100%;text-align:left;padding:0;border:0;background:none;color:inherit}.event-link:hover{background:#edf5fb}.event-link .row{cursor:pointer}details{margin-top:20px}summary{color:#17699d;cursor:pointer;font-size:13px}table{width:100%;border-collapse:collapse;font-size:12px}td{padding:10px 0;border-bottom:1px solid var(--line)}td:first-child{color:var(--muted)}td:last-child{text-align:right}footer{font-size:11px;color:var(--muted);line-height:1.7;margin:24px 0}.app-nav{display:none}a{color:var(--blue)}
.device-form{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.device-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);flex:1;min-width:160px}.device-form input{font:inherit;color:var(--ink);border:1px solid #ccd5dd;border-radius:3px;padding:10px;background:white;width:100%}.device-form button{align-self:flex-end;background:var(--blue);color:white;border-color:var(--blue)}.device-item{padding:15px 0;border-top:1px solid var(--line);font-size:13px}.device-meta{font-size:11px;color:var(--muted);margin:7px 0;overflow-wrap:anywhere}.device-item button{margin-top:5px}.device-message{color:#17699d;font-size:12px;line-height:1.6}.devices-box p{font-size:12px}.device-form[hidden]{display:none}
.pair-page{max-width:650px}.pair-card{margin-top:35px;padding:28px}.pair-card h2{font-size:21px}.pair-card p{font-size:14px}.pair-code{text-align:center;font-size:clamp(30px,8vw,44px);letter-spacing:5px;font-weight:bold;color:var(--blue);font-variant-numeric:tabular-nums;background:#edf5fb;border:1px solid #d4e6f3;padding:22px 6px;margin:24px 0}.pair-hint{color:var(--muted);line-height:1.7}.pair-admin{margin:25px 0;text-align:center;font-size:13px}.pair-admin a{text-decoration:none}.pair-page header h1{font-size:24px}.pair-page #pairStatus{color:#276e9d}.pair-page button[hidden]{display:none}
.autonomy-box{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:15px 0}.autonomy-box>div{flex:1;min-width:200px}.autonomy-box label{font-size:12px;color:var(--muted)}.autonomy-box input{width:65px;padding:8px;border:1px solid var(--line);border-radius:3px;font:inherit}.autonomy-box p{width:100%;font-size:11px;margin:0}.notification-box{margin-top:18px}.notification-box p{font-size:12px}.notification-box button[hidden]{display:none}.button-link{display:inline-block;font-size:12px;color:var(--blue);text-decoration:none;border:1px solid #ccd5dd;border-radius:3px;padding:9px 12px;background:white}.button-link:hover{background:#edf5fb}.table-scroll{overflow-x:auto;max-width:100%;margin:15px 0}.incident-table{min-width:530px}.incident-table th{text-align:left;font-size:11px;color:var(--muted);padding:10px 8px}.incident-table td{padding:10px 8px}#incident{margin-bottom:18px}#incident[hidden]{display:none}#incident p{font-size:12px}.notification-box button{margin-bottom:5px}
@media(min-width:1320px){header{border-radius:0 0 6px 6px}}
@media(max-width:850px){main{padding:0 18px 24px}header{margin:0 -18px 18px;padding:20px 18px}.cards{grid-template-columns:repeat(2,1fr)}.charts,.lower{grid-template-columns:1fr}.value{font-size:28px}.energy-grid{grid-template-columns:1fr 125px 1fr;gap:20px}.flow-card{padding:15px;min-height:120px}.flow-card:first-child:after{width:21px;right:-21px}.flow-card:last-child:before{width:21px;left:-21px}.flow-value{font-size:24px}}
@media(max-width:520px){main{padding:0 12px 78px}header{margin:0 -12px 15px;padding:19px 16px;gap:8px;align-items:flex-start}h1{font-size:21px}h1 span{font-size:13px}header p{max-width:215px;font-size:11px}.eyebrow{font-size:9px;letter-spacing:1.1px}.status{font-size:10px;padding:6px;white-space:normal;max-width:113px}.energy-grid{grid-template-columns:1fr 92px 1fr;gap:11px;margin:18px 0}.flow-card{padding:12px 9px;min-height:115px}.flow-label{font-size:11px;gap:4px;line-height:1.3}.flow-label svg{width:17px;min-width:17px;height:17px}.flow-value{font-size:23px;margin:14px 0 6px}.flow-sub{font-size:10px}.flow-card:first-child:after{width:12px;right:-12px}.flow-card:last-child:before{width:12px;left:-12px}.inverter-icon{width:31px;height:31px;margin:12px auto 8px}.inverter-name{font-size:10px;padding-bottom:10px}.inverter-state{font-size:10px;padding:8px 3px}.cards{gap:10px;margin:15px 0 24px}.card{padding:14px}.label{font-size:11px}.value{font-size:27px;margin:10px 0 6px}.sub{font-size:11px}.chart,.box{padding:16px 13px}.toolbar strong{font-size:17px}#ranges{gap:3px}#ranges button{font-size:11px;padding:8px 9px}.row{font-size:11px}.legend{font-size:10px}.app-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:8;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:10px 0 max(10px,env(safe-area-inset-bottom))}.app-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#607281;text-decoration:none;font-size:10px;min-width:80px}.app-nav svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.7}}