:root{--bg:#040b12;--panel:#071520;--border:#2b3d49;--text:#eef4f8;--muted:#aab7bf;--green:#55d64c;--blue:#38a9ff;--yellow:#ffc21a;--red:#ff3d2e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#040b12;color:var(--text)}body{overflow-x:hidden}.app{min-height:100vh;display:grid;grid-template-columns:205px 1fr;grid-template-rows:1fr 48px}.sidebar{background:linear-gradient(180deg,#06111b,#07141e);border-right:1px solid #24333d;display:flex;flex-direction:column;min-height:100vh}.brand{height:185px;border-bottom:1px solid #263640;text-align:center;padding-top:16px}.brand img{width:142px;height:112px;object-fit:contain;display:block;margin:auto}.brand-name{color:#ff3428;font-size:24px;font-weight:800;line-height:22px}.brand-sub{font-size:9px;letter-spacing:3px;color:#fff;margin-top:8px}.nav{height:50px;width:100%;border:0;background:none;color:#e7edf0;text-align:left;padding:0 24px;font-size:15px;display:flex;gap:15px;align-items:center;cursor:pointer}.nav.active{background:linear-gradient(90deg,rgba(255,61,46,.38),rgba(255,61,46,.04));color:#ff3d2e}.side-status{margin:auto 12px 12px;padding:13px;border:1px solid #2a3d48;border-radius:10px;background:#07151f;display:grid;grid-template-columns:28px 1fr;gap:7px}.check{border:2px solid var(--green);color:var(--green);width:22px;height:22px;border-radius:50%;text-align:center}.side-status b{font-size:12px}.side-status strong{display:block;color:var(--green);font-size:12px;margin-top:2px}.side-status small{grid-column:1/-1;color:#aeb9c0;line-height:1.45}.side-status i{color:#fff;font-style:normal}main{min-width:0;overflow:auto;background:#07111a}header{height:87px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #22323e;background:#091826}.hello{font-size:20px}.sub{font-size:14px;color:#c3cdd4;margin-top:5px}.header-right{display:flex;align-items:center;gap:24px}.weather{display:grid;grid-template-columns:auto auto;gap:3px 8px;align-items:center}.weather small{grid-column:2;color:#9eabb4}.date{border-left:1px solid #263744;padding-left:20px;line-height:1.45}.bell,.avatar{width:44px;height:44px;border-radius:50%;background:#14212c;display:grid;place-items:center;position:relative}.bell i{position:absolute;right:-2px;top:-2px;background:#e33d31;color:#fff;width:20px;height:20px;border-radius:50%;font-size:11px;text-align:center;line-height:20px;font-style:normal}.view{display:none;padding:38px 24px 70px}.view.active{display:block}.dashboard-grid{display:grid;grid-template-columns:minmax(720px,1fr) 292px;gap:18px}.central{min-width:0}.house-stage{height:620px;position:relative;overflow:hidden;border-radius:13px;border:1px solid #2a3b46;background:#08131d;box-shadow:0 20px 50px rgba(0,0,0,.35)}.house-svg{position:absolute;inset:0;width:100%;height:100%}.flow{stroke-width:6;filter:url(#glow);stroke-dasharray:13 13;animation:flow 1s linear infinite}.flow.yellow{stroke:var(--yellow)}.flow.green{stroke:var(--green)}.flow.blue{stroke:var(--blue)}.flow.red{stroke:var(--red)}@keyframes flow{to{stroke-dashoffset:-26}}.particle.yellow{fill:var(--yellow);filter:url(#glow)}.particle.green{fill:var(--green);filter:url(#glow)}.particle.blue{fill:var(--blue);filter:url(#glow)}.tag{position:absolute;display:flex;align-items:center;gap:11px;background:rgba(5,14,22,.92);border:1px solid #354956;border-radius:12px;padding:14px 16px;box-shadow:0 10px 25px rgba(0,0,0,.3);backdrop-filter:blur(5px);font-size:12px}.tag strong{display:block;font-size:23px;margin-top:6px}.tag small{display:block;color:#d4dce0;margin-top:3px}.tag.pv{left:24px;top:22px}.tag.grid{left:20px;top:290px}.tag.home{left:42%;top:305px}.tag.wall{right:24px;top:286px}.tag.inverter{left:28%;bottom:24px}.tag.battery{left:56%;bottom:18px}.tag .sun{font-size:42px;color:var(--yellow)}.tag.grid strong{color:var(--green)}.tag.home strong,.tag.wall strong{color:var(--blue)}.tag.battery strong{color:var(--green)}.tag.battery em{display:block;font-style:normal;font-size:17px;margin-top:4px}.right-col{display:grid;gap:16px;align-content:start}.card,.section{background:linear-gradient(180deg,rgba(8,21,31,.97),rgba(5,15,23,.97));border:1px solid #2b3d49;border-radius:13px;padding:20px;box-shadow:0 12px 35px rgba(0,0,0,.18)}.card h3,.section h2{margin:0 0 16px;font-size:14px;letter-spacing:.3px}.card p{margin:0;padding:11px 0;border-bottom:1px solid #1d303c;color:#d1d9dd;font-size:13px}.card p:last-child{border-bottom:0}.card p b{float:right}.green{color:var(--green)}.blue{color:var(--blue)}.yellow{color:var(--yellow)}.red{color:var(--red)}.battery-row{display:grid;grid-template-columns:100px 1fr;gap:18px;align-items:center}.ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 82%,#2a3944 82% 100%);position:relative}.ring:after{content:"";position:absolute;inset:9px;background:#08151e;border-radius:50%}.ring span{position:relative;z-index:1;font-size:21px}.battery-row p{border:0;padding:5px 0}.battery-row p b{margin-left:18px}.status-line{display:flex;justify-content:space-between;padding:8px 0;font-size:13px}.status-line span:last-child{color:var(--green)}.bottom-grid{display:grid;grid-template-columns:minmax(500px,2fr) minmax(360px,1fr);gap:18px;margin-top:18px}.chart canvas,.section canvas{width:100%;height:230px;display:block}.tabs{display:flex;gap:4px;margin-bottom:14px}.tabs button,footer button,.device-form button,.modbus-form button,.upload button,.settings-btn{background:#101f2b;color:#dfe8ec;border:1px solid #263a47;border-radius:8px;padding:8px 12px;cursor:pointer}.tabs .active{background:#5c231c;color:#fff}.yield-body{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center}.donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--green) 0 57%,var(--yellow) 57% 100%);display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;inset:14px;background:#071520;border-radius:50%}.donut span{position:relative;z-index:1;text-align:center;font-size:18px}.donut small{display:block;font-size:11px;color:#aebbc2;margin-top:4px}.yield-body p{border:0;padding:8px 0}.yield-body p span{float:right;color:#aab7bf}.section{min-height:200px}.hint{color:#aebac1;line-height:1.6}.analysis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.analysis-grid div,.live-grid>div{background:#0a1b27;border:1px solid #263d4a;border-radius:10px;padding:20px}.analysis-grid strong,.live-grid strong{display:block;font-size:25px;margin-top:8px;color:var(--green)}.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.device-form,.modbus-form{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}.device-form input,.device-form select,.modbus-form input,.settings-form input{width:100%;background:#081723;border:1px solid #29404d;color:#fff;border-radius:8px;padding:10px}.device-form button{grid-column:auto}.device-list{display:grid;gap:10px}.device-row{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.2fr .5fr auto;gap:10px;align-items:center;background:#0a1b27;border:1px solid #263d4a;border-radius:10px;padding:12px}.device-row small{color:#9fb0ba}.device-row button{background:#30151a;color:#ff8f88;border:1px solid #6c2b31;border-radius:6px;padding:6px 10px}.settings-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.settings-form label{font-size:12px;color:#aab7bf}.settings-form input{margin-top:5px}.settings-form button{grid-column:1/-1;background:#153a22;border:1px solid #2c7d45;color:#c9f5d0;border-radius:8px;padding:11px}.save-state,.modbus-result{margin:10px 0;padding:10px;border-radius:8px;background:#081923;color:#aab7bf}.upload{display:flex;gap:10px;align-items:center}.modbus-form{grid-template-columns:1fr 180px auto auto}.modbus-form label{display:flex;align-items:center;gap:8px}.modbus-form input[type=checkbox]{width:auto}footer{grid-column:2;background:#08131d;border-top:1px solid #263744;display:flex;align-items:center;gap:8px;padding:6px 14px;overflow:auto;white-space:nowrap;font-size:12px}footer span:first-child{margin-right:auto;color:#9fb0ba}footer button{padding:7px 10px}code{color:#e7c86d}@media(max-width:1100px){.app{grid-template-columns:76px 1fr}.brand-sub,.brand-name,.nav span,.side-status{display:none}.brand img{width:58px;height:100px}.nav{justify-content:center;padding:0}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.right-col{grid-template-columns:repeat(3,1fr)}.settings-form{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.header-right .date,.header-right .bell,.header-right .avatar{display:none}.view{padding:18px 10px 60px}.right-col{grid-template-columns:1fr}.live-grid,.analysis-grid,.settings-form{grid-template-columns:1fr}.device-form,.modbus-form{grid-template-columns:1fr}.device-row{grid-template-columns:1fr}.house-stage{height:520px}.tag{transform:scale(.8);transform-origin:left top}.tag.wall{transform-origin:right top}.tag.home{left:34%}.tag.battery{left:48%}}