.za-demo-intro{padding:54px 0 34px;background:radial-gradient(circle at 70% 10%,#083d35,#07131f 55%);border-bottom:1px solid #16352f}
.za-demo-intro-inner{display:flex;justify-content:space-between;gap:40px;align-items:end}
.za-demo-intro h1{font-size:clamp(34px,5vw,64px);max-width:800px;margin:8px 0 14px}
.za-demo-intro p{color:#a6b9c7;max-width:780px;line-height:1.7}
.za-demo-intro-actions{display:grid;gap:12px;justify-items:end}.za-demo-intro-actions span{font-size:13px;color:#6ee7b7;font-weight:800}
.za-shell{padding:30px 20px 60px;background:#040d13}
.za-app{width:min(1480px,100%);margin:auto;background:#06141a;border:1px solid #174036;border-radius:22px;overflow:hidden;box-shadow:0 30px 90px #000a;color:#eafff6;position:relative}
.za-topbar{height:76px;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid #174036;background:#07181f}
.za-brand{display:flex;align-items:center;gap:12px}.za-leaf{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#0bcf7b;color:#001d11;font-weight:900}
.za-brand strong,.za-brand small{display:block}.za-brand small{color:#6d8c82;font-size:11px;margin-top:2px}.za-status{margin-left:auto;color:#72c9a7;font-size:12px}.online-dot{display:inline-block;width:7px;height:7px;background:#13e68b;border-radius:50%;margin-right:5px}.za-profile{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0d3c32;margin-left:16px;font-weight:800}
.za-layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:720px}
.za-sidebar{background:#061117;border-right:1px solid #15362e;padding:18px 13px;display:flex;flex-direction:column}
.za-sidebar nav{display:grid;gap:6px}.za-sidebar nav button{border:0;background:transparent;color:#8eaea2;border-radius:10px;padding:11px;text-align:left;font:inherit;cursor:pointer}.za-sidebar nav button:hover,.za-sidebar nav button.active{background:#0c3228;color:#eafff6}
.za-source{margin-top:auto;border-top:1px solid #15362e;padding:15px 8px 3px}.za-source small{display:block;color:#55786c;font-size:9px;letter-spacing:.12em;margin-bottom:7px}.za-source select{width:100%;background:#0a231d;border:1px solid #205244;color:#c8eee0;border-radius:9px;padding:9px}.za-source span{display:block;color:#55786c;font-size:10px;margin-top:7px}
.za-main{padding:24px;background:#07171d}.za-view{display:none}.za-view.active{display:block}
.za-page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.za-page-head>div>span{color:#4ddaa4;font-size:9px;font-weight:900;letter-spacing:.13em}.za-page-head h2{font-size:29px;margin:4px 0}.za-page-head p{margin:0;color:#78978c;font-size:12px}.za-tempo{border:1px solid #1d5142;border-radius:11px;background:#0a2b23;padding:10px 12px;color:#7fa79a;font-size:10px}.za-tempo b{display:block;color:#64c8ff;font-size:15px;margin-top:3px}
.za-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.za-kpis article{background:#0a1d22;border:1px solid #164138;border-radius:14px;padding:16px}.za-kpis span,.za-kpis em{display:block}.za-kpis span{font-size:10px;color:#709489}.za-kpis strong{display:block;font-size:30px;margin:7px 0;color:#effff9}.za-kpis strong small{font-size:13px;color:#7d9b91}.za-kpis em{font-size:10px;color:#46d69f;font-style:normal}
.za-dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}.za-energy-card,.za-control-card,.za-chart-card{background:#091d22;border:1px solid #17463b;border-radius:15px;padding:17px}
.za-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.za-card-head span:first-child{font-size:9px;letter-spacing:.11em;color:#5e887a}.za-card-head h3{margin:3px 0 0;font-size:20px}.za-live{color:#49dfaa!important}.za-pill{border-radius:999px;background:#0d4937;color:#65e7b4!important;padding:5px 8px;font-size:9px!important}
.za-energy-map{height:360px;position:relative;display:grid;place-items:center}.za-node{position:absolute;width:125px;height:92px;border-radius:16px;border:1px solid #1a5444;background:#09271f;display:grid;place-items:center;padding:10px;z-index:2}.za-node b{font-size:22px}.za-node span{font-size:9px;color:#769d90}.za-node strong{font-size:14px}.za-node.solar{top:20px;left:50%;transform:translateX(-50%)}.za-node.home{top:50%;left:50%;transform:translate(-50%,-50%);background:#0d342a;border-color:#2c755f}.za-node.battery{bottom:20px;left:55px}.za-node.grid{bottom:20px;right:55px}.za-line{position:absolute;background:#1e8b68;opacity:.75}.za-line.l1{width:2px;height:70px;top:110px}.za-line.l2{width:150px;height:2px;bottom:112px;left:34%}.za-line.l3{width:150px;height:2px;bottom:112px;right:34%}
.za-battery-ring{width:170px;height:170px;border-radius:50%;margin:25px auto 15px;background:conic-gradient(#18dc8a 0 72%,#12372d 72%);display:grid;place-items:center;position:relative}.za-battery-ring:before{content:"";position:absolute;inset:13px;border-radius:50%;background:#091d22}.za-battery-ring>div{z-index:1;text-align:center}.za-battery-ring strong{display:block;font-size:35px}.za-battery-ring span{color:#668d80;font-size:10px}.za-power{text-align:center;margin-bottom:12px}.za-power span{display:block;color:#688f83;font-size:10px}.za-power strong{font-size:24px}
.za-command-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.za-command-buttons button{background:#0b2921;border:1px solid #1c5544;color:#a8cabe;border-radius:9px;padding:9px 5px;cursor:pointer;font-size:11px}.za-command-buttons button.active{background:#0d5a42;color:#d8fff0;border-color:#1dc483}.za-control-card label{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:13px;color:#77998e;font-size:10px}.za-control-card input[type=range],.za-control-card select{grid-column:1/-1;width:100%}.za-control-card select{background:#0a241d;border:1px solid #205244;color:#d5f7ea;border-radius:8px;padding:8px}
.za-chart-card{padding:24px}.za-chart-legend{display:flex;gap:20px;font-size:10px;color:#7e9b91}.za-chart-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.solar-dot{background:#19db86}.home-dot{background:#3a9aff}.battery-dot{background:#bd79ff}.za-bars{height:310px;display:flex;gap:10px;align-items:end;padding:25px 10px 0;border-bottom:1px solid #1d473c}.za-bar-group{height:100%;flex:1;display:flex;align-items:end;gap:3px}.za-bar-group i{display:block;flex:1;border-radius:4px 4px 0 0;min-width:3px}.za-bar-group .solar{background:#18d685}.za-bar-group .home{background:#3188e7}.za-bar-group .battery{background:#9f62df}.za-chart-axis{display:flex;justify-content:space-between;color:#59796e;font-size:9px;margin-top:8px}.za-energy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.za-energy-stats article{background:#091d22;border:1px solid #17463b;border-radius:13px;padding:15px}.za-energy-stats span{display:block;color:#6b8f82;font-size:10px}.za-energy-stats strong{font-size:22px;display:block;margin-top:6px}
.za-primary{border:0;background:#16d484;color:#002418;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}
.za-scenes{display:grid;gap:10px}.za-scenes article{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;background:#091d22;border:1px solid #17463b;border-radius:14px;padding:14px}.za-scenes article>div:nth-child(2){display:grid;gap:4px}.za-scenes article span{color:#749589;font-size:11px}.za-scene-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-weight:900}.za-scene-icon.red{background:#4a2020;color:#ff8b8b}.za-scene-icon.sun{background:#433515;color:#ffd36a}.za-scene-icon.night{background:#192d4d;color:#8db7ff}.za-switch input{display:none}.za-switch span{display:block;width:42px;height:22px;background:#263b34;border-radius:999px;position:relative;cursor:pointer}.za-switch span:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#839c93;top:3px;left:3px;transition:.2s}.za-switch input:checked+span{background:#126a4d}.za-switch input:checked+span:after{left:23px;background:#60eab8}
.za-device-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.za-device-card{background:#091d22;border:1px solid #17463b;border-radius:14px;padding:16px;cursor:pointer}.za-device-card.active{border-color:#1bd68a;box-shadow:0 0 0 1px #1bd68a inset}.za-device-card header{display:flex;justify-content:space-between;align-items:center}.za-device-card h3{margin:8px 0 3px}.za-device-card p{color:#6f9185;font-size:11px}.za-device-card .za-device-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.za-device-stats div{background:#07171b;border-radius:9px;padding:10px}.za-device-stats span{display:block;color:#5f8277;font-size:9px}.za-device-stats strong{display:block;font-size:17px;margin-top:3px}
.za-tariff-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.za-tariff-cards article{border-radius:15px;padding:18px;border:1px solid #24483f;background:#091d22}.za-tariff-cards article>span{font-size:10px;color:#718f85}.za-tariff-cards strong,.za-tariff-cards b{display:block}.za-tariff-cards strong{font-size:25px;margin:8px 0 18px}.za-tariff-cards b{font-size:11px;margin:5px 0}.za-tariff-cards .blue{box-shadow:inset 0 3px #42a5ff}.za-tariff-cards .white{box-shadow:inset 0 3px #e9f3ff}.za-tariff-cards .red{box-shadow:inset 0 3px #ff5656}.za-tariff-cards p{color:#79988d;font-size:11px}.za-tariff-note{margin-top:12px;color:#617f75;font-size:10px}
.za-toast{position:absolute;right:20px;bottom:20px;background:#0d4a38;border:1px solid #21966f;color:#d7fff0;padding:11px 14px;border-radius:10px;font-size:11px;opacity:0;transform:translateY(8px);transition:.2s}.za-toast.show{opacity:1;transform:none}
.za-modal{position:absolute;inset:0;background:#00100abf;display:grid;place-items:center;padding:20px;z-index:20}.za-modal[hidden]{display:none}.za-modal>div{width:min(440px,100%);background:#09221a;border:1px solid #1b634c;border-radius:18px;padding:26px;position:relative}.za-modal>div>button:first-child{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#779b8e;font-size:23px;cursor:pointer}.za-modal h3{font-size:25px;margin:7px 0}.za-modal p{color:#82a398;line-height:1.6}
@media(max-width:1050px){.za-kpis{grid-template-columns:1fr 1fr}.za-dashboard-grid{grid-template-columns:1fr}.za-device-list{grid-template-columns:1fr 1fr}.za-tariff-cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.za-demo-intro-inner{display:grid}.za-demo-intro-actions{justify-items:start}.za-shell{padding:15px 7px 40px}.za-layout{display:block}.za-sidebar{border-right:0;border-bottom:1px solid #15362e}.za-sidebar nav{display:flex;overflow:auto}.za-sidebar nav button{white-space:nowrap}.za-source{display:none}.za-main{padding:14px}.za-kpis{grid-template-columns:1fr 1fr}.za-device-list,.za-tariff-cards,.za-energy-stats{grid-template-columns:1fr}.za-page-head{display:grid}.za-energy-map{height:330px}.za-node.battery{left:15px}.za-node.grid{right:15px}}