:root{--bg:#030a0d;--panel:rgba(7,23,27,.88);--line:rgba(93,229,218,.14);--line2:rgba(93,229,218,.3);--cyan:#57e5d8;--blue:#39aaf5;--text:#e8f7f5;--muted:#789693;--orange:#ffb23e;--purple:#9b8cff;--red:#e57272}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 72% 0,#0a2d31 0,transparent 32%),linear-gradient(135deg,#030a0d,#06171b);color:var(--text);font-family:Inter,sans-serif;min-height:100vh}.ambient{position:fixed;border-radius:50%;filter:blur(130px);opacity:.1;pointer-events:none}.ambient-one{width:480px;height:480px;background:var(--cyan);right:-220px;top:16%}.ambient-two{width:380px;height:380px;background:var(--blue);left:15%;bottom:-260px}.app-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;background:rgba(3,13,16,.86);backdrop-filter:blur(20px);position:sticky;top:0;height:100vh;z-index:5}.brand{display:flex;gap:11px;align-items:center;color:var(--text);text-decoration:none;margin:0 9px 38px}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--cyan);border-radius:10px;color:var(--cyan);box-shadow:0 0 24px #57e5d333;font:700 15px "Space Grotesk"}.brand b,.brand small{display:block}.brand b{font:600 14px "Space Grotesk"}.brand small{font-size:7px;letter-spacing:1.7px;color:var(--cyan);margin-top:3px}nav{display:grid;gap:7px}nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:12px}nav a span{font-size:18px;width:20px;text-align:center}nav a b{font-weight:500}nav a:hover,nav a.active{background:linear-gradient(90deg,#57e5d819,transparent);color:var(--cyan);box-shadow:inset 2px 0 var(--cyan)}.source-legend{display:grid;gap:9px;border-top:1px solid var(--line);margin-top:24px;padding:20px 8px}.source-legend small{font-size:7px;letter-spacing:1.2px;color:var(--muted);margin-bottom:3px}.source-legend span{display:flex;align-items:center;gap:8px;font-size:9px;color:#9ab0ae}.source-legend i{width:7px;height:7px;border-radius:50%}.source-real{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.source-demo{background:var(--purple)}.system-card{margin-top:auto;padding:13px;background:#0b292b;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:9px}.status-dot,.demo-pill i,.live i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.system-card small,.system-card strong{display:block}.system-card small{font-size:7px;letter-spacing:1px;color:var(--muted)}.system-card strong{font-size:9px;margin-top:4px}main{padding:27px 34px;min-width:0;max-width:1800px;width:100%;margin:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.eyebrow,.section-label{font-size:8px;font-weight:700;letter-spacing:2px;color:var(--cyan);margin:0 0 7px}h1{font:600 25px "Space Grotesk";margin:0}h2{font:600 14px "Space Grotesk";margin:5px 0 0}.subtitle{font-size:11px;color:var(--muted);margin:7px 0 0}.header-actions{display:flex;align-items:center;gap:14px}.demo-pill,.live{display:flex;align-items:center;gap:7px;color:var(--cyan);font-size:7px;letter-spacing:1px;border:1px solid var(--line);padding:8px 10px;border-radius:20px;background:#0a292a}.clock{text-align:right}.clock strong,.clock small{display:block}.clock strong{font:600 17px "Space Grotesk"}.clock small{font-size:7px;color:var(--muted);margin-top:3px}.panel,.metric-card{background:linear-gradient(145deg,rgba(10,35,39,.93),rgba(4,18,22,.9));border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 42px #0005,inset 0 1px #ffffff08;position:relative;overflow:hidden}.panel:before,.metric-card:before{content:"";position:absolute;left:20%;right:20%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.45}.panel{padding:18px}.panel-head,.inspector-head{display:flex;justify-content:space-between;align-items:flex-start}.twin-layout{display:grid;grid-template-columns:minmax(560px,1.75fr) minmax(300px,.75fr);gap:15px;margin-bottom:15px}.twin-stage{min-height:510px}.view-tools{display:flex;border:1px solid var(--line);background:#06171a;border-radius:8px;padding:3px}.view-button{border:0;background:transparent;color:var(--muted);font:600 7px Inter;letter-spacing:.7px;padding:7px 10px;border-radius:5px;cursor:pointer}.view-button.active{background:#123b3d;color:var(--cyan)}.scene{height:430px;margin-top:13px;border:1px solid #57e5d812;border-radius:11px;background:radial-gradient(circle at 50% 42%,#103c4066,transparent 42%),linear-gradient(#06161a99,#030c0f);position:relative;overflow:hidden;perspective:900px}.scene:before{content:"";position:absolute;inset:0;background:linear-gradient(#57e5d809 1px,transparent 1px),linear-gradient(90deg,#57e5d809 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}.scene-grid{position:absolute;width:620px;height:260px;left:50%;bottom:-108px;transform:translateX(-50%) rotateX(64deg);background:linear-gradient(#57e5d81b 1px,transparent 1px),linear-gradient(90deg,#57e5d81b 1px,transparent 1px);background-size:30px 30px;border:1px solid var(--line);box-shadow:0 0 50px #57e5d812}.scan-line{position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 15px var(--cyan);animation:scan 5s linear infinite;opacity:.38;z-index:4}@keyframes scan{0%{top:12%}50%{top:84%}100%{top:12%}}.twin-building{position:absolute;width:430px;height:330px;left:50%;top:46%;transform:translate(-50%,-50%);filter:drop-shadow(0 25px 35px #000a)}.twin-floor{appearance:none;position:absolute;left:45px;width:340px;height:86px;border:0;background:transparent;color:var(--text);padding:0;cursor:pointer;text-align:left;transition:transform .25s,filter .25s}.floor-1{bottom:17px}.floor-2{bottom:105px}.floor-3{bottom:193px}.floor-face{position:absolute;inset:0 30px 0 0;border:1px solid #57e5d842;background:linear-gradient(110deg,#0b3b3fdd,#071c21e8);clip-path:polygon(0 15%,88% 0,100% 18%,100% 100%,0 100%);display:flex;align-items:center;gap:12px;padding:30px 20px 12px}.floor-face i{display:block;width:42px;height:30px;border:1px solid #57e5d844;background:linear-gradient(135deg,#57e5d814,#07191c);box-shadow:inset 0 0 12px #57e5d809}.floor-side{position:absolute;right:0;top:15px;width:31px;height:71px;background:linear-gradient(90deg,#0c3438,#051619);clip-path:polygon(0 0,100% 20%,100% 100%,0 100%);border-right:1px solid #57e5d833}.twin-floor:hover,.twin-floor.selected{transform:translateX(-10px);filter:brightness(1.25) drop-shadow(0 0 16px #57e5d820)}.twin-floor.selected .floor-face{border-color:var(--cyan);background:linear-gradient(110deg,#105155e8,#08272be8);box-shadow:inset 0 0 30px #57e5d815}.floor-label{position:absolute;right:-81px;top:30px;display:block;padding-left:23px}.floor-label:before{content:"";position:absolute;left:0;top:9px;width:17px;border-top:1px solid #57e5d866}.floor-label b,.floor-label small{display:block;white-space:nowrap}.floor-label b{font-size:8px;letter-spacing:1px;color:var(--cyan)}.floor-label small{font-size:7px;color:var(--muted);margin-top:3px}.entrance{position:absolute;width:45px;height:48px;bottom:0;left:140px;border:1px solid #57e5d855;background:#57e5d810;clip-path:polygon(10% 14%,50% 0,90% 14%,90% 100%,10% 100%)}.building-roof{position:absolute;left:46px;bottom:279px;width:310px;height:37px;background:linear-gradient(120deg,#17494c,#082125);clip-path:polygon(0 45%,88% 0,100% 44%,11% 100%);border-top:1px solid var(--cyan)}.building-roof span{position:absolute;width:35px;height:40px;background:#0b2f33;left:135px;top:-21px;border:1px solid var(--line)}.building-roof i{position:absolute;width:5px;height:50px;background:#57e5d8aa;left:152px;top:-67px;box-shadow:0 0 8px var(--cyan)}.device-node{position:absolute;width:31px;height:31px;border-radius:50%;background:#092326;border:1px solid var(--line2);display:grid;place-items:center;z-index:4;box-shadow:0 0 0 5px #57e5d809}.device-node i{position:absolute;width:7px;height:7px;border-radius:50%;background:#496a68}.device-node b{position:absolute;font-size:6px;color:var(--muted);top:33px}.device-node.on{border-color:#ffe37b;box-shadow:0 0 20px #ffe37b55,0 0 0 5px #ffe37b11}.device-node.on i{background:#ffe37b;box-shadow:0 0 9px #ffe37b}.light-one{left:88px;top:37px}.light-two{left:225px;top:26px}.orientation{position:absolute;left:18px;bottom:18px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.orientation span{font:700 8px Inter;color:var(--cyan);transform:translateY(-7px)}.orientation i{position:absolute;height:20px;border-left:1px solid var(--cyan);transform:translateY(4px)}.orientation i:before{content:"";position:absolute;left:-3px;top:-1px;border:3px solid transparent;border-bottom-color:var(--cyan);transform:translateY(-5px)}.model-status{position:absolute;right:14px;bottom:13px;display:grid;grid-template-columns:7px auto;gap:3px 7px;align-items:center;text-align:right}.model-status i{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan)}.model-status span{font-size:7px;letter-spacing:1px;color:var(--cyan)}.model-status small{grid-column:2;color:var(--muted);font-size:7px}.inspector{min-height:510px}.inspector-head{padding-bottom:15px;border-bottom:1px solid var(--line)}.zone-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 19px}.zone-summary>div{padding:12px;border:1px solid var(--line);background:#06191c;border-radius:9px}.zone-summary span,.zone-summary strong{display:block}.zone-summary span{font-size:6px;letter-spacing:.8px;color:var(--muted)}.zone-summary span em{font-style:normal;color:var(--purple);font-size:5px;margin-left:3px}.zone-summary strong{font:600 15px "Space Grotesk";margin-top:7px}.zone-summary strong small{font:400 7px Inter;color:var(--muted)}.actuator-head{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 9px}.actuator-head>div>span,.actuator-head small{display:block}.actuator-head>div>span{font-size:7px;letter-spacing:1px;color:var(--muted)}.actuator-head small{font-size:7px;color:#9ab0ae;margin-top:5px;max-width:155px;overflow-wrap:anywhere}.source-tag,.source-inline{font-style:normal!important;font-size:6px!important;font-weight:700;letter-spacing:.7px;padding:5px 6px;border-radius:4px;border:1px solid}.source-tag.real,.source-inline.real{color:var(--cyan)!important;border-color:#57e5d82e;background:#57e5d80b}.source-tag.mixed{color:var(--purple);border-color:#9b8cff30;background:#9b8cff0d}.light-controls{display:grid;gap:8px}.zone-note{display:flex;gap:9px;margin-top:16px;padding:11px;border:1px solid #39aaf525;background:#39aaf509;border-radius:9px}.zone-note>i{font-style:normal;flex:0 0 19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#39aaf522;color:var(--blue);font-size:9px}.zone-note p{font-size:7px;line-height:1.6;color:var(--muted);margin:0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:15px}.metric-card{padding:16px;display:flex;align-items:center;gap:12px;min-height:104px}.metric-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:#57e5d819;color:var(--cyan);font-size:18px}.metric-icon.neutral{color:var(--orange);background:#ffb23e14}.metric-icon.voltage{color:var(--blue);background:#39aaf514;font:700 12px Inter}.metric-icon.current{color:var(--purple);background:#9b8cff14;font:700 12px Inter}.metric-card>div>span{font-size:7px;letter-spacing:1px;color:var(--muted)}.metric-card strong{font:600 25px "Space Grotesk"}.metric-card em{font-style:normal;font-size:9px;color:var(--muted);margin-left:4px}.metric-card small{display:block;margin-top:5px}.spark{position:absolute;width:75px;height:35px;right:8px;bottom:10px;opacity:.5}.spark svg{width:100%;height:100%}.dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:15px}.chart-panel{grid-column:1/-1}.chart-panel .chart-wrap{height:280px}.energy-total{text-align:right;border:1px solid var(--line);border-radius:9px;background:#061b1dbd;padding:8px 11px;min-width:135px}.energy-total span{display:block;color:var(--muted);font-size:6px;letter-spacing:1px;margin-bottom:3px}.energy-total strong{font:600 19px "Space Grotesk";color:var(--cyan)}.energy-total em{font-style:normal;color:var(--muted);font-size:7px;margin-left:4px}.axis-title{margin-top:12px;color:var(--muted);font-size:6px;letter-spacing:.8px}.chart-wrap{display:flex;margin-top:10px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,var(--line) 55px)}.axis{display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:var(--muted);padding-right:9px}#energyChart{width:100%;height:100%;overflow:visible}.chart-labels{display:flex;justify-content:space-between;margin-left:24px;color:var(--muted);font-size:7px}.systems-map,.alerts{min-height:285px}.systems-flow{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:center;margin-top:38px}.system-node{min-width:0;height:145px;padding:15px 12px;border:1px solid var(--line);background:#06191c;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}.system-node>i{font-style:normal;width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:8px;color:var(--cyan)}.system-node span{margin-top:16px}.system-node b,.system-node small{display:block}.system-node b{font-size:8px}.system-node small{font-size:6px;color:var(--muted);margin-top:4px}.system-node>em{font-style:normal;font-size:6px;letter-spacing:.7px;color:var(--purple);margin-top:auto}.system-node>em.ok{color:var(--cyan)}.system-node.core{box-shadow:inset 0 0 30px #57e5d80b;border-color:#57e5d833}.system-line{height:1px;background:var(--line2);position:relative}.system-line:after{content:"";position:absolute;right:0;top:-3px;border:3px solid transparent;border-left-color:var(--cyan)}.system-line.active:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--cyan);top:-2px;animation:flow 2s linear infinite}@keyframes flow{from{left:0}to{left:100%}}.system-line.demo{border-top:1px dashed var(--purple);background:none}.event{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.event:last-child{border:0}.event>i{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:10px}.event .ok{color:var(--cyan);background:#57e5d817}.event .info{color:var(--blue);background:#39aaf517}.event .demo-event{color:var(--purple);background:#9b8cff17}.event b,.event small{display:block;font-size:8px}.event small{color:var(--muted);margin-top:5px}.count{font-size:8px;background:#173638;color:var(--cyan);padding:5px 8px;border-radius:10px}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:7px;padding:17px 3px 0}@media(max-width:1250px){.twin-layout{grid-template-columns:1.45fr .8fr}.twin-building{transform:translate(-53%,-50%) scale(.88)}.metrics{grid-template-columns:1fr 1fr}.systems-flow{grid-template-columns:1fr}.system-node{height:auto;min-height:90px}.system-line{height:18px;width:1px;margin:auto}.system-line:after{right:-3px;top:13px;border-left-color:transparent;border-top-color:var(--cyan)}.systems-map{min-height:580px}}@media(max-width:950px){.app-shell{grid-template-columns:72px 1fr}.sidebar{padding:23px 9px}.brand{margin:0 auto 30px}.brand>span:last-child,nav a b,.source-legend,.system-card div{display:none}.brand-mark{flex:none}nav a{justify-content:center}.system-card{justify-content:center}.twin-layout{grid-template-columns:1fr}.twin-building{transform:translate(-50%,-50%)}.inspector{min-height:auto}.dashboard-grid{grid-template-columns:1fr}.chart-panel{grid-column:auto}.systems-map{min-height:580px}}@media(max-width:650px){.app-shell{display:block}.sidebar{position:fixed;z-index:10;bottom:0;top:auto;width:100%;height:61px;flex-direction:row;padding:7px 12px;border-top:1px solid var(--line);border-right:0}.brand,.system-card{display:none}nav{display:flex;width:100%;justify-content:space-around}nav a{padding:10px 20px}main{padding:20px 13px 82px}header{align-items:flex-start}.demo-pill{display:none}.subtitle{max-width:230px}.twin-stage{min-height:auto;padding:13px}.scene{height:365px}.twin-building{transform:translate(-52%,-50%) scale(.68)}.floor-label{display:none}.view-tools{display:none}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metric-card{min-height:92px;padding:12px}.metric-card strong{font-size:20px}.metric-icon{display:none}.chart-panel .chart-wrap{height:225px}.electric-readings{grid-template-columns:1fr 1fr!important}.systems-map{min-height:580px}footer{gap:15px}}