*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:"Microsoft YaHei","Segoe UI",sans-serif;color:#e1f9ff;font-size:12px;background:#96b8ca}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #39c2df55;background:#0e4b6155;border-radius:3px}button:hover{background:#0d9ab16b;border-color:#37e7f4}button.active{color:#2afff7;background:#16c9e529;border-color:#1be7ed}#scene,#labels,.vignette{position:absolute;inset:0}#scene canvas{display:block}.vignette{pointer-events:none;background:linear-gradient(90deg,#08384c17,transparent 28%,transparent 72%,#08384c17)}.cockpit-header{position:absolute;top:0;left:0;right:0;height:58px;background:rgba(4,103,141,.88);border-bottom:1px solid #40ecff9c;z-index:8;padding:0 25px;box-shadow:0 3px 20px #0579a144}.header-main{height:56px;display:flex;align-items:center;gap:30px}.cockpit-title{display:flex;align-items:center;gap:9px;min-width:310px}.title-mark{display:none}.cockpit-title h1{font-size:23px;letter-spacing:1px;margin:0;color:white;font-weight:600;text-shadow:0 1px 5px #71eaff88}.cockpit-title small{font-size:7px;letter-spacing:2.2px;display:block;margin-top:4px;color:#b8e5f4}.cockpit-nav{display:flex;align-items:stretch;gap:6px;flex:1;height:100%}.cockpit-nav button{flex:1;border:0;background:transparent;border-radius:0;font-size:11px;white-space:nowrap;color:#d4e8f0}.cockpit-nav button.active{color:#fff;background:#04cfea30;box-shadow:inset 0 -3px #28f6ff;text-shadow:0 0 12px #25f1ff}.header-time{font-size:9px;text-align:right;white-space:nowrap;color:#d0e7ef}.header-time small{display:block;font-size:8px;margin-top:5px}.header-rail{display:none}.live{color:#4af3d4;margin-right:8px}#metrics{position:absolute;left:27%;right:25%;top:89px;display:flex;gap:20px;pointer-events:none;z-index:3}#metrics article{position:relative;flex:1;padding:0 0 0 12px;border-left:2px solid #27eeff;min-width:0;text-shadow:0 1px 4px #2a759288}#metrics article small{display:block;font-size:10px;color:#f1ffff;white-space:nowrap}#metrics strong{display:block;color:#00ffe9;font-size:27px;font-weight:600;line-height:1.3;margin:3px 0}#metrics strong span{font-size:10px;margin-left:4px;color:#d7f8ff}#metrics i{font-style:normal;font-size:8px;color:#f0ffff;white-space:nowrap}.panel{position:absolute;top:82px;bottom:86px;width:242px;padding:16px 18px;background:rgba(14,53,70,.64);backdrop-filter:blur(3px);border:1px solid #1e5b7050;border-radius:5px;z-index:4;overflow:auto;scrollbar-width:thin;scrollbar-color:#64c3d555 transparent;box-shadow:inset 0 1px 0 #8fc1d328}.left{left:28px}.right{right:28px;width:258px}.heading{display:flex;align-items:center;padding-bottom:9px;border-bottom:1px solid #28d8eb66;margin-bottom:8px;position:relative;font-weight:600;font-size:12px;letter-spacing:1px}.heading:before{content:"";width:3px;height:12px;background:#35f4fa;margin-right:8px;transform:skew(25deg)}.heading small{font-size:6px;color:#8fb3c3;font-weight:400;letter-spacing:1px;margin-left:auto}.second{margin-top:17px}.dir{display:flex;width:100%;align-items:center;justify-content:space-between;padding:8px 7px;margin:3px 0;border:0;border-left:2px solid transparent;background:#093c5144;font-size:10px;text-align:left;line-height:1.25}.dir.active{border-left-color:#23eaf4;background:#0a8ba047}.dir small{font-size:8px;color:#a6d5de}.dot{font-size:8px;color:#27df9f;margin-right:8px}.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.layers button{padding:8px 2px;font-size:9px}.health{margin-top:18px;font-size:10px}.health>div{display:flex;justify-content:space-between}.health b{font-size:9px;color:#2bf1cc}.healthbar{height:4px;background:#38899a44;margin:10px 0}.healthbar i{width:92%;background:#29e4de}.health small{font-size:8px;color:#a5cbd6}.breadcrumb{position:absolute;top:149px;left:294px;font-size:9px;z-index:3;color:#bceaf1}.breadcrumb button{padding:4px 7px;font-size:9px;background:#104b6399;border-color:#30c7df55}.scene-tag{position:absolute;bottom:102px;left:295px;display:flex;gap:8px;align-items:center;z-index:3}.scene-tag b{font-size:17px;letter-spacing:2px;color:#e7fdff;text-shadow:0 2px 6px #184a60}.scene-tag small{font-size:8px;color:#e1f7ff;text-shadow:0 1px 3px #245e76}.scene-tag>span{color:#15f5dd}.toolbar{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;background:#0b465ec4;border:1px solid #25d5e166;z-index:7;white-space:nowrap;border-radius:4px;backdrop-filter:blur(5px)}.toolbar button{font-size:9px;padding:8px 9px;background:transparent;border-color:#38bed655}.toolbar button.active{background:#04bdcd44}footer{position:absolute;bottom:0;left:0;right:0;height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:8px;background:#0646649e;color:#b4dce5;z-index:7}footer b{font-weight:400;color:#d1f3f5;margin-left:8px}#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:80px;padding:5px 12px;background:#17495d88;color:#e4f4f7;font-size:8px;border-radius:20px;z-index:3}#labels{pointer-events:none;z-index:2}.label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;white-space:nowrap;font-size:9px;background:#138549df;border:1px solid #68f4a599;border-radius:3px;color:#fff;padding:5px 8px;box-shadow:0 2px 8px #063d3922}.label:after{content:"";position:absolute;left:50%;top:100%;height:17px;border-left:2px solid #3fd9a6}.label.selected{background:#b99100ec;border-color:#f3e85e}.label.alert{background:#c72d24ed;border-color:#ffb795}.label.alert:after{border-color:#ff5a33}#toast{position:absolute;top:171px;left:50%;transform:translateX(-50%);padding:10px 18px;border:1px solid #1be0e8;background:#075574ed;color:#dcffff;font-size:11px;opacity:0;transition:.2s;z-index:10;pointer-events:none}.row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #93c0d322;font-size:10px}.row small,.muted{font-size:9px;color:#afcdd7}.row b{font-weight:500}.status{color:#23f0ca}.warning{color:#ffce32}.caption{font-size:10px;color:#d0e8ef;letter-spacing:.3px;margin-top:15px}.spark{width:100%;height:80px;margin:10px 0;overflow:visible}.bigval{font-size:30px;color:#00f5e4;margin:14px 0 5px}.bigval small{font-size:10px;margin-left:7px;color:#c7e3eb}.action{width:100%;padding:8px;margin-top:9px;font-size:10px}.primary{background:#078aaacc;border-color:#36d7ef}.card{padding:10px;background:#07648133;border-left:2px solid #1eece9;margin-top:10px;font-size:9px;line-height:1.8}.card.warn{border-color:#ffe65a}.card button{font-size:9px;padding:4px 8px;margin-top:5px}.zones{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.zones button{font-size:9px;padding:6px}.tabset{display:flex;gap:4px;margin-top:10px}.tabset button{flex:1;font-size:9px;padding:7px 2px}.chartlegend{display:flex;gap:8px;font-size:9px}.chartlegend button{padding:4px}.record{font-size:10px;line-height:1.9;padding:10px 0;border-bottom:1px solid #239abb66}.form{display:grid;gap:9px;font-size:10px;margin-top:12px}input,select,textarea{width:100%;background:#063953;color:#d7faff;border:1px solid #53a2b766;padding:7px;font:inherit}textarea{min-height:65px}.video{height:100px;background:#376875;display:grid;place-content:center;font-size:10px;position:relative;margin-top:10px}.video small{position:absolute;bottom:5px;left:5px;font-size:8px}.thermal{background:#465d7e}.clean .panel,.clean #metrics{display:none}.time-switch{display:none}.health-strip{display:flex;gap:8px;margin-top:14px}.health-strip div{flex:1;padding:8px 2px;text-align:center;background:#13536766;border-top:1px solid #23d9e8aa}.health-strip b{display:block;color:#12f6ec;font-size:18px;font-weight:500}.health-strip small{font-size:8px;color:#b2d7e0}.hud-section{margin-top:18px}.mini-bars{height:75px;width:100%}.mini-rings{display:flex;justify-content:space-around;gap:8px;margin-top:10px}.mini-rings div{text-align:center;font-size:8px;color:#c7e8ed}.mini-rings b{display:block;color:#1af3ed;font-size:19px;font-weight:400;margin-top:5px}
@media(min-width:1600px){.panel{width:285px}.right{width:285px}.breadcrumb,.scene-tag{left:340px}.cockpit-title h1{font-size:26px}.cockpit-nav button{font-size:13px}.dir{font-size:12px;padding:10px}.heading{font-size:14px}.caption,.row{font-size:12px}.card{font-size:11px}#metrics strong{font-size:31px}}
@media(max-width:1100px){.panel{width:211px;padding:13px}.right{width:218px}.left{left:18px}.right{right:18px}.header-time{display:none}.header-main{gap:15px}.cockpit-title{min-width:280px}.cockpit-title h1{font-size:20px}.cockpit-nav button{font-size:9px}.breadcrumb,.scene-tag{left:247px}#metrics{left:25%;right:24%;gap:10px}#metrics article{padding-left:8px}#metrics strong{font-size:23px}.toolbar button{padding:7px;font-size:8px}.scene-tag small{display:none}}

/* Reference-aligned daytime HUD */
:root{--cyan:#22edee;--ink:#d9edf3;--muted:#9dc3d2;--panel:rgba(19,55,73,.74);--line:rgba(37,207,230,.37);--side:clamp(232px,18vw,280px)}
body{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;font-size:12px;color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #f3d954;outline-offset:2px}
.cockpit-header{height:53px;padding:0 27px;background:rgba(0,113,153,.92);box-shadow:0 3px 18px #0283a54a;border-bottom:1px solid #60eaf1a8}
.header-main{height:51px;gap:23px}.cockpit-title{min-width:310px;gap:11px}.cockpit-title h1{font-size:22px;letter-spacing:1.4px;font-weight:700}.cockpit-title small{font-size:7px;letter-spacing:2.9px;opacity:.8;margin-top:3px}.title-mark{display:block;width:29px;height:29px;filter:invert(1);opacity:.9}
.cockpit-nav{gap:2px}.cockpit-nav button{font-size:12px;letter-spacing:1px;padding:0 9px;position:relative;font-weight:500}.cockpit-nav button.active{color:#fff;background:#1ccde321;box-shadow:inset 0 -2px #2cf5ff}.cockpit-nav button:hover{background:#13cbe72b}.header-time{font-size:9px;min-width:140px}.header-time small{font-size:8px}
#metrics{top:79px;left:calc(var(--side) + 66px);right:calc(var(--side) + 57px);gap:20px;z-index:3}#metrics article{padding-left:42px;border-left:2px solid var(--cyan);text-shadow:0 2px 5px #063c5777}#metrics article:before{content:"";position:absolute;left:7px;top:6px;width:27px;height:33px;background:url('assets/icons/buildings.svg') center/21px no-repeat #0d719077;filter:brightness(0) saturate(100%) invert(87%) sepia(65%) saturate(1516%) hue-rotate(122deg) brightness(108%) contrast(100%)}#metrics article small{font-size:10px;position:absolute;bottom:-2px;color:#edfaff}#metrics strong{font-family:"Arial",sans-serif;font-size:27px;letter-spacing:.6px;line-height:1.1;margin:0 0 15px;font-weight:600;color:#00f7ef}#metrics strong span{font-size:10px;color:#d7ffff;font-weight:400}#metrics i{display:none}
.panel{top:74px;bottom:54px;width:var(--side);padding:15px 20px;border-radius:5px;background:var(--panel);border:1px solid #a3cfdf24;backdrop-filter:blur(3px);box-shadow:inset 0 1px 0 #c3e9f621;overflow:auto;scrollbar-width:thin;scrollbar-color:#65c5d450 transparent}.left{left:26px}.right{right:26px;width:var(--side)}
.heading{height:22px;font-size:12px;font-weight:600;letter-spacing:1px;padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--line)}.heading:before{width:3px;height:11px;background:#26e9f0;box-shadow:5px 0 0 #26e9f055}.heading:after{content:"";position:absolute;bottom:-1px;left:8px;width:49%;height:2px;background:#3be0ed;box-shadow:0 0 7px #21e2f099}.heading small{font-size:6px;letter-spacing:.6px;color:#92b8c8}.second{margin-top:17px}
.dir{background:#083f555c;padding:8px 8px;font-size:11px;border-radius:2px;margin:3px 0;line-height:1.1;min-height:29px}.dir small{font-size:8px;opacity:.8}.dir .dot{display:inline-block;width:5px;height:5px;background:#21d89d;border-radius:50%;font-size:0;vertical-align:middle}.dir:hover,.dir.active{background:#07839b58}.dir.active{border-left-color:#27f3e9;color:#64ffff}
#deviceChart{height:85px!important;width:100%!important;max-height:85px;margin-top:10px}.layer-heading{margin-top:13px}.layers{gap:5px;margin-top:9px}.layers button{padding:7px 2px;font-size:9px;display:flex;gap:4px;align-items:center;justify-content:center}.ui-icon{width:13px;height:13px;filter:invert(91%) sepia(15%) saturate(711%) hue-rotate(141deg) brightness(99%);vertical-align:middle;object-fit:contain}.layers button.active .ui-icon{filter:invert(84%) sepia(73%) saturate(1300%) hue-rotate(113deg)}#toggleLabels{font-size:8px;margin-top:6px;padding:5px}.health-strip{margin-top:12px;gap:8px}.health-strip div{background:none;border:0;border-right:1px solid #71b9c740;padding:2px}.health-strip div:last-child{border:0}.health-strip b{font-family:Arial;font-size:22px;color:#17efe6}.health-strip small{font-size:8px}.health{display:none}
.row{font-size:10px;padding:7px 0;border-color:#95d2e61d}.caption{margin-top:12px;font-size:10px}.spark{height:72px;margin:8px 0}.status{color:#28e6d1}.warning{color:#f1de36}.card{padding:9px;background:#0c718224;font-size:10px;line-height:1.7;margin-top:9px}.card b{font-weight:500}.card button{font-size:9px;border-color:#28cbd18c}.action{padding:7px;font-size:10px;background:#0c63813b}.action.primary{background:#087b9a9c}.hud-section{margin-top:15px}.hud-section .row{font-size:9px}.hud-section .spark{height:59px;margin:5px 0}.healthbar{height:3px;display:flex;margin:8px 0;background:#27a7ae38}.healthbar i{display:block;height:3px;background:#36e6e7;box-shadow:0 0 6px #00dfe688}
.breadcrumb{left:calc(var(--side) + 51px);top:139px;opacity:.9}.breadcrumb button{background:#0d547f80;border:1px solid #a1e1e95e;color:#e6f9fa;border-radius:2px;font-size:9px}.scene-tag{left:calc(var(--side) + 51px);bottom:65px;gap:7px}.scene-tag b{font-size:16px;letter-spacing:2px}.scene-tag small{font-size:8px}.scene-tag>span{display:none}
.toolbar{bottom:27px;padding:5px 8px;background:#174b64d6;gap:4px;border-radius:3px;border:1px solid #58c8dc66;backdrop-filter:blur(8px)}.toolbar button{font-size:9px;border:0;border-radius:2px;padding:7px 8px;display:flex;gap:5px;align-items:center;line-height:1}.toolbar button:hover{background:#15b8c940}.toolbar button.active{background:#16c8db44;color:#61ffff}.toolbar .ui-icon{width:12px;height:12px}#hint{bottom:65px;font-size:8px;background:#19516d80;padding:4px 10px;opacity:.85}
footer{height:19px;background:#074663bc;font-size:8px;padding:0 26px;color:#bddbe5}footer .live{color:#78e3d9}.label{font-size:10px;padding:5px 9px 5px 7px;background:#1a9a57e8;border:1px solid #9cffa3aa;box-shadow:0 3px 10px #084c304a;border-radius:3px;text-shadow:0 1px 2px #07502855;display:flex;gap:5px;align-items:center}.label .ui-icon{filter:invert(1);width:12px;height:12px;margin-right:4px}.label:after{height:12px;border-left:2px solid #62ef91}.label[data-kind="gas"]{background:#b29112e8;border-color:#fae26a}.label[data-kind="gas"]:after{border-color:#efdd4e}.label[data-kind="danger"]{background:#cf4031e8;border-color:#ffa780}.label[data-kind="danger"]:after{border-color:#ff7e55}.label.alert{background:#d54328e8}.label.sensor{font-size:9px;padding:4px 7px;background:#08768de8;border-color:#1df1e5}.label.sensor.selected{background:#b68e0bea;border-color:#ffe24c}.label.zone{background:#15547ed9;border-color:#65cbeb}
#toast{top:140px;font-size:11px;background:#0b5278e8}.bigval{font-family:Arial;color:#29f5e4}.video{background:#26576c;border:1px solid #6bdce04c}.thermal{background:#304b75}.tabset button{font-size:9px}input,select,textarea{background:#143f56;color:#e2f8fb}#inspectRecords{font-size:10px;line-height:1.7;margin-top:14px;color:#80ead7}.clean .panel,.clean #metrics{display:none}.time-switch{display:none}
@media(min-width:1600px){.cockpit-title h1{font-size:25px}.cockpit-title{min-width:360px}.cockpit-nav button{font-size:14px}.header-time{font-size:11px}.panel{padding:19px 21px}.heading{font-size:14px;height:26px}.dir{font-size:12px;padding:10px;min-height:35px}.caption,.row{font-size:12px}.card{font-size:11px}#deviceChart{height:110px!important;max-height:110px}.spark{height:90px}.hud-section .spark{height:80px}.hud-section .row{font-size:11px}.layers button{font-size:11px}#metrics strong{font-size:33px}#metrics article small{font-size:12px}.health-strip{margin-top:18px}.toolbar button{font-size:11px;padding:8px 11px}}
@media(max-width:1200px){:root{--side:220px}.cockpit-title{min-width:280px}.cockpit-title h1{font-size:19px}.cockpit-title small{letter-spacing:1.8px}.cockpit-nav button{font-size:10px;padding:0 5px}.header-time{display:none}.header-main{gap:15px}.panel{padding:13px 15px}.left{left:18px}.right{right:18px}#metrics{left:270px;right:265px;gap:12px}#metrics article{padding-left:8px}#metrics article:before{display:none}#metrics strong{font-size:25px}.scene-tag small{display:none}.toolbar button{font-size:8px;padding:7px 5px}.toolbar .ui-icon{width:11px;height:11px}}
@media(max-width:900px){:root{--side:196px}.header-main{gap:8px}.cockpit-title{min-width:238px}.cockpit-title h1{font-size:16px}.title-mark{width:22px;height:22px}.cockpit-title small{font-size:6px}.cockpit-nav{overflow-x:auto}.cockpit-nav button{font-size:9px}.panel{padding:12px}.left{left:12px}.right{right:12px}#metrics{left:228px;right:220px;gap:8px}#metrics strong{font-size:20px}#metrics article small{font-size:8px}.toolbar .ui-icon{display:none}.toolbar button{font-size:8px;padding:7px 4px}.breadcrumb,.scene-tag{left:223px}}

@media(max-height:700px){.cockpit-header{height:44px}.header-main{height:42px}.cockpit-title h1{font-size:20px}.cockpit-title small{font-size:6px}.cockpit-nav button{font-size:11px}.panel{top:59px;bottom:28px;padding:12px 18px}.dir{min-height:23px;padding:5px 7px;margin:2px 0;font-size:10px}.heading{height:21px;margin-bottom:6px}.second{margin-top:12px}#deviceChart{height:74px!important;max-height:74px;margin-top:5px}.layer-heading{margin-top:10px}.layers{gap:4px;margin-top:6px}.layers button{padding:6px 2px;font-size:9px}#toggleLabels{padding:4px;margin-top:4px}.health-strip{margin-top:9px}.health-strip b{font-size:20px}.row{padding:5px 0;font-size:10px}.caption{margin-top:9px}.spark{height:57px;margin:5px 0}.card{padding:7px;font-size:9px;line-height:1.6;margin-top:7px}.card button{padding:3px 7px}.action{padding:6px;margin-top:6px}.hud-section{margin-top:12px}.hud-section .spark{height:47px;margin:4px 0}.hud-section .row{font-size:9px;padding:4px 0}.healthbar{margin:6px 0}#metrics{top:81px}.toolbar{bottom:23px;padding:4px 8px}.toolbar button{padding:6px 7px}.scene-tag{bottom:68px}#hint{bottom:59px;font-size:7px}.breadcrumb{top:142px}}

#metrics article:before{background-color:transparent;filter:invert(85%) sepia(86%) saturate(2234%) hue-rotate(119deg) brightness(105%)}.sensor-picker-label{display:block;font-size:10px;color:#bcd8e3;margin:8px 0}#sensorPicker{font-size:10px;max-width:100%}