:root{--bg:#06101c;--panel:#0c1929;--panel2:#102238;--line:#20344b;--text:#edf5ff;--muted:#8ca2bb;--yellow:#ffd43b;--green:#43e39a;--blue:#56adff;--orange:#ffad4a}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(circle at 50% -10%,#183858 0,#07111f 38%,#040a12 100%);font:15px Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.topbar{height:78px;padding:0 4vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #182a40;background:#050c16dd;backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--yellow);color:#17202c;font-size:23px;box-shadow:0 0 28px #ffd43b44}.brand strong{display:block;letter-spacing:.4px}.brand small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.top-actions{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}.pill{padding:7px 11px;border-radius:999px;border:1px solid var(--line)}.pill.online{color:var(--green);border-color:#226c4e}.pill.offline{color:#ffb1b1}.logout{color:var(--muted);text-decoration:none}.wrap{width:min(1450px,92%);margin:auto;padding:42px 0 70px}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.eyebrow{color:var(--yellow);font-weight:800;letter-spacing:2px;font-size:11px}.hero h1{font-size:38px;margin:7px 0}.hero p{margin:0;color:var(--muted)}.refresh{color:var(--muted)}.home-panel{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#0d1c2e,#07111e);box-shadow:0 30px 80px #0005;overflow:hidden;margin-bottom:16px}.house-stage{height:620px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 75%,#1a3852 0,#0b1b2d 42%,#07111e 75%)}.house-stage:before{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(#0a1726,#07111e);clip-path:polygon(0 60%,12% 45%,25% 58%,40% 36%,55% 53%,72% 40%,86% 57%,100% 38%,100% 100%,0 100%);opacity:.8}.sun{position:absolute;left:8%;top:12%;text-align:center;color:var(--yellow);filter:drop-shadow(0 0 20px #ffd43b66)}.sun span{display:block;font-size:58px;line-height:1}.sun small{display:block;color:var(--muted);margin-top:5px}.sun b{display:block;font-size:20px;color:white;margin-top:3px}.roof{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:min(700px,62%);height:240px;background:linear-gradient(145deg,#3d5366,#253849);clip-path:polygon(50% 0,100% 70%,95% 100%,5% 100%,0 70%);box-shadow:0 25px 45px #0008}.panel-row{position:absolute;display:flex;gap:6px;left:13%;right:13%}.panel-row:first-child{top:58px}.panel-row:last-child{top:111px}.panel-row span{height:43px;flex:1;border:1px solid #78a5bf;background:linear-gradient(145deg,#12334c,#071c2d);box-shadow:inset 0 0 18px #54b7ff18}.house{position:absolute;left:50%;top:38%;transform:translateX(-50%);width:min(600px,58%);height:310px;background:linear-gradient(#e9edf0,#aab7c0);border:1px solid #c9d1d6;box-shadow:0 28px 70px #0009;border-radius:4px}.chimney{position:absolute;width:52px;height:92px;right:90px;top:-75px;background:#66737c}.window{position:absolute;width:82px;height:78px;background:linear-gradient(135deg,#2c6787,#0e2b42);border:7px solid #dfe6ea;top:80px}.window:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:#dfe6ea}.w1{left:80px}.w2{right:80px}.door{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:78px;height:132px;background:linear-gradient(90deg,#4c362b,#7d5a43);border:5px solid #d6dfe3}.room-label{position:absolute;left:50%;top:42px;transform:translateX(-50%);font-size:10px;letter-spacing:2px;color:#56636d}.house-power{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:#07111dcc;border:1px solid #294158;border-radius:12px;padding:9px 18px;text-align:center;min-width:180px}.house-power span{display:block;color:var(--muted);font-size:10px}.house-power strong{font-size:21px}.node-card{position:absolute;width:245px;padding:16px;border-radius:17px;background:#091625ee;border:1px solid var(--line);box-shadow:0 15px 40px #0007;display:flex;align-items:center;gap:12px}.node-icon{font-size:29px}.node-card span{display:block;color:var(--muted);font-size:11px}.node-card strong{display:block;font-size:21px;margin-top:3px}.node-card small{display:block;color:#7e95ad;margin-top:3px}.battery-card{left:5%;top:62%}.grid-card{right:5%;top:62%}.inverter-card{left:50%;transform:translateX(-50%);bottom:6%;width:280px}.mini-bar{position:absolute;left:16px;right:16px;bottom:7px;height:3px;background:#1b3045;border-radius:3px}.mini-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:3px}.energy-path{position:absolute;z-index:3;pointer-events:none}.energy-path i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px var(--yellow);animation:flow 2.4s linear infinite}.pv-path{left:50%;top:33%;height:70px;border-left:2px dashed #ffd43b77}.pv-path i{left:-5px;animation-name:down}.house-battery-path{left:30%;top:68%;width:22%;border-top:2px dashed #43e39a77}.house-grid-path{right:29%;top:68%;width:22%;border-top:2px dashed #56adff77}.house-battery-path i{top:-5px;animation-name:right}.house-grid-path i{top:-5px;animation-name:right}.energy-path i:nth-child(2){animation-delay:.8s}.energy-path i:nth-child(3){animation-delay:1.6s}@keyframes down{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(70px);opacity:0}}@keyframes right{from{transform:translateX(0);opacity:0}15%{opacity:1}to{transform:translateX(200px);opacity:0}}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.kpi,.panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#102137,#091523);box-shadow:0 14px 45px #0003}.kpi{padding:21px}.kpi span{color:var(--muted);font-size:13px}.kpi strong{display:block;font-size:30px;margin:7px 0 2px}.kpi small{color:#6d829a}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{padding:22px;margin-bottom:16px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel h2{font-size:17px;margin:0}.muted{color:var(--muted);font-size:13px}.energy-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.energy-stats div{padding:17px;border-radius:13px;background:#091625;border:1px solid var(--line)}.energy-stats span{display:block;color:var(--muted);font-size:12px}.energy-stats b{display:block;font-size:22px;margin-top:6px}.devices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.device{padding:13px;border-radius:13px;background:#091625;border:1px solid var(--line);display:flex;justify-content:space-between}.device small{display:block;color:var(--muted);margin-top:4px}.ok{color:var(--green)}.bad{color:#ff6b6b}.legend-line{color:var(--yellow);font-size:12px}.chart-wrap{height:300px}.chart-wrap canvas{width:100%;height:100%}@media(max-width:900px){.house-stage{height:680px}.roof{width:85%;top:18%}.house{width:76%;top:39%}.battery-card{left:3%;top:68%;width:220px}.grid-card{right:3%;top:68%;width:220px}.inverter-card{bottom:3%}.kpi-grid,.grid-2{grid-template-columns:1fr 1fr}.devices{grid-template-columns:1fr}.hero{flex-direction:column;align-items:start;gap:12px}}@media(max-width:600px){.brand small{display:none}.top-actions #clock,.logout{display:none}.wrap{width:94%;padding-top:25px}.hero h1{font-size:29px}.house-stage{height:690px}.sun{left:4%;top:5%}.roof{width:100%;top:17%;height:190px}.panel-row{left:17%;right:17%}.panel-row:first-child{top:45px}.panel-row:last-child{top:88px}.panel-row span{height:34px}.house{width:88%;height:260px;top:35%}.window{width:55px;height:58px;top:62px}.w1{left:35px}.w2{right:35px}.door{height:108px;width:64px}.house-power{bottom:13px}.battery-card,.grid-card{position:absolute;width:45%;padding:11px;top:66%;font-size:12px}.battery-card{left:2%}.grid-card{right:2%}.node-card strong{font-size:17px}.node-icon{font-size:22px}.inverter-card{width:70%;bottom:3%;padding:11px}.kpi-grid{grid-template-columns:1fr 1fr}.kpi{padding:15px}.kpi strong{font-size:23px}.energy-stats{grid-template-columns:1fr 1fr}}