/* Reference-derived HUD skin: presentation only. Three.js scene is unchanged. */
:root{--cyan:#58beff;--ink:#d6eaff;--muted:#7596b7;--panel:rgba(3,17,35,.9);--line:rgba(26,112,182,.52)}
/* Lightweight scene cards: CSS frames and breathing halos keep the live map interactive. */
#labels .label{--point-accent:#54c9ff;--point-glow:rgba(67,181,255,.3);background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 24px;color:#e3f5ff;font-size:11px;text-shadow:0 1px 3px #001629;overflow:visible;}
#labels .label::after{display:none}
.point-card{position:relative;display:block;padding:8px 13px 8px 10px;min-width:110px;background:linear-gradient(115deg,rgba(10,57,87,.96),rgba(4,25,47,.93));border:1px solid var(--point-accent);border-radius:2px 17px 2px 2px;box-shadow:inset 0 1px 0 #c5f4ff29,inset 0 -7px 14px #06253d88,0 3px 12px #00111a88;transition:box-shadow .2s,background .2s}
.point-card::before{content:"";position:absolute;top:-2px;left:7px;width:21px;height:3px;background:#ccf4ff;box-shadow:0 0 7px var(--point-accent)}
.point-title{display:flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.4px;line-height:16px}
#labels .label .ui-icon{width:13px;height:13px;margin:0;filter:invert(85%) sepia(23%) saturate(985%) hue-rotate(164deg)}
.point-anchor{position:absolute;left:50%;bottom:0;width:30px;height:23px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(var(--point-accent),transparent) center top/1px 16px no-repeat}
.point-anchor::before{content:"";position:absolute;left:11px;top:4px;width:8px;height:8px;background:var(--point-accent);transform:rotate(45deg);box-shadow:0 0 9px var(--point-accent)}
.point-anchor::after,.point-anchor i{content:"";position:absolute;left:3px;bottom:0;width:24px;height:8px;border:1px solid var(--point-accent);border-radius:50%;background:var(--point-glow);box-shadow:0 0 9px var(--point-glow)}
.point-anchor i{opacity:.25;transform:scale(1.4);background:transparent}
#labels .label[data-kind="gas"]{--point-accent:#ddb969;--point-glow:rgba(221,185,105,.25)}
#labels .label[data-kind="danger"]{--point-accent:#ea9985;--point-glow:rgba(234,153,133,.25)}
#labels .label.sensor{--point-accent:#45dfdb;--point-glow:rgba(69,223,219,.28);font-size:10px;padding:0 0 32px}
.label.sensor .point-card{min-width:130px;border-radius:2px 11px 2px 11px;padding:7px 11px}
.label.sensor .point-anchor{height:31px;background-size:2px 23px}
.label.sensor .point-anchor::before{top:15px}
.label.sensor .point-anchor::before{width:4px;height:4px;left:13px;top:19px}
.label.sensor .point-anchor::after,.label.sensor .point-anchor i{width:16px;height:5px;left:7px}
.point-reading{display:none;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #69c8e333;margin-top:6px;padding-top:6px;font-size:10px;font-weight:400;color:#98bfce}
.point-reading strong{font-family:Arial,sans-serif;font-size:14px;font-weight:600;color:#d9ffff;letter-spacing:.3px}
.point-status::before{content:"";display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--point-accent);box-shadow:0 0 5px var(--point-accent)}
#labels .label.selected .point-card,#labels .label:hover .point-card{box-shadow:inset 0 0 16px var(--point-glow),0 0 16px var(--point-glow);background:linear-gradient(115deg,#0b4663f5,#071e36f5)}
.label.sensor.selected .point-reading,.label.sensor.alert .point-reading,.label.sensor:hover .point-reading{display:flex}
#labels .label.alert{--point-accent:#ff8067;--point-glow:rgba(255,98,71,.42);z-index:3}
#labels .label.alert .point-card{background:linear-gradient(115deg,#542824f5,#261b2ef5);animation:point-breathe 2.4s ease-in-out infinite}
.label.alert .point-status,.label.alert .point-reading strong{color:#ffc4ad}
.label.park.alert .point-card::after{content:"设备告警";display:block;color:#ffc4ad;font-size:10px;text-align:left;margin-top:5px;padding-top:5px;border-top:1px solid #ff997744}
.label.alert .point-anchor i{animation:point-ripple 2.4s ease-out infinite}
.label.alert .point-anchor::before{animation:point-diamond 2.4s ease-in-out infinite}
@keyframes point-breathe{0%,100%{box-shadow:inset 0 0 8px #ff735c16,0 0 5px #ff624722}50%{box-shadow:inset 0 0 18px #ff735c38,0 0 21px #ff624780}}
@keyframes point-ripple{0%{transform:scale(.75);opacity:.8}100%{transform:scale(2.1);opacity:0}}
@keyframes point-diamond{0%,100%{box-shadow:0 0 5px #ff806755}50%{box-shadow:0 0 15px #ff8067}}
@media(prefers-reduced-motion:reduce){#labels .label.alert .point-card,.label.alert .point-anchor i,.label.alert .point-anchor::before{animation:none}}
/* Broad navy feathering sits below labels and controls and never captures map input. */
html,body{background:#04172a}
.vignette{z-index:1;pointer-events:none;background:linear-gradient(180deg,#04172a 0%,#04172af5 10%,#04172ab8 21%,#04172a45 34%,transparent 47%,transparent 77%,#04172a80 93%,#04172ae8 100%),linear-gradient(90deg,#04172af5 0%,#04172aba 15%,#04172a32 27%,transparent 38%,transparent 62%,#04172a32 73%,#04172aba 85%,#04172af5 100%)}
body:has(#penetrate.active) .vignette{opacity:.28}
.clean .vignette{opacity:.65}
.cockpit-header{height:88px;padding:0 22px;background:#020f1ff5;border:0;box-shadow:0 8px 23px #020c2166;overflow:hidden}
.header-main{height:74px;gap:12px;align-items:center;position:relative;z-index:2}
.cockpit-header:after{content:"";position:absolute;height:22px;left:0;right:0;bottom:0;background:url('assets/hud-reference.png') center -78px/1488px 147px no-repeat;opacity:.94;pointer-events:none}
.cockpit-title{position:relative;flex:0 0 424px;min-width:0;height:73px;display:block;overflow:hidden;gap:0}
.title-skin{position:absolute;left:0;top:0;width:515px;height:86px;overflow:hidden;transform:scale(.82);transform-origin:0 0;pointer-events:none}
.title-skin img{position:absolute;width:1488px;height:147px;max-width:none;left:-487px;top:-14px}
.title-copy{position:absolute;left:66px;right:49px;top:22px;height:29px;background:#06324e;text-align:center}
.cockpit-title h1{font-size:22px;letter-spacing:2px;line-height:29px;color:#d8f3ff;text-shadow:0 0 9px #32aaff99;font-weight:700;white-space:nowrap;margin:0;background:none}
.cockpit-title small{position:absolute;top:33px;left:-10px;right:-10px;font-size:6px;letter-spacing:2.5px;color:#5c9bbf;margin:0;line-height:10px;background:#032137}
.cockpit-nav{height:35px;gap:5px;align-self:center;margin-top:8px;min-width:0;flex:1}
.cockpit-nav button{position:relative;flex:1;min-width:0;height:35px;overflow:hidden;padding:0;background:transparent;border:0;box-shadow:none!important;letter-spacing:1px;font-size:11px;border-radius:0;isolation:isolate}
.nav-skin{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.nav-skin img{position:absolute;width:1144.615%;height:432.353%;left:-60.769%;top:-94.118%;max-width:none}
.nav-copy{display:inline-block;position:relative;background:#032033;min-width:61%;padding:3px 1px;color:#3ecbff;text-shadow:0 0 7px #079bff88;font-size:11px;line-height:14px;white-space:nowrap}
.cockpit-nav button.active,.cockpit-nav button:hover{background:transparent;color:#53ffe1;text-shadow:none}
.cockpit-nav button.active .nav-skin img{left:-254.615%}.cockpit-nav button.active .nav-copy{background:#022723;color:#54ffe4;text-shadow:0 0 8px #00dfb1b0}
.cockpit-nav button:hover .nav-copy{color:#c4edff}.cockpit-nav button:focus-visible{outline:1px solid #ecb93f;outline-offset:-3px}
.header-time{position:absolute;right:5px;top:3px;display:block;min-width:0;font-size:8px;color:#7298b6;line-height:12px}.header-time small{display:none}
.panel{top:104px;bottom:57px;background:var(--panel);backdrop-filter:blur(6px);border:1px solid #1a4266;border-radius:1px;box-shadow:inset 0 0 18px #0a2e4b55,0 5px 18px #00000030;color:#c3d9ee;padding:15px 18px}
.heading{font-size:12px;letter-spacing:1.4px;color:#d5eaff;height:24px;padding-bottom:8px;border-bottom:1px solid #174772;margin-bottom:11px;background:linear-gradient(90deg,#0d386277,transparent);text-shadow:0 0 9px #006bbb66}
.heading:before{width:3px;height:10px;box-shadow:5px 0 0 #2779ba55;background:#65c8ff;transform:skew(-25deg)}
.heading:after{left:0;bottom:-4px;width:100%;height:6px;background:url('assets/hud-reference.png') center -56px/1000px 99px no-repeat;box-shadow:none;opacity:.85}
.heading small{font-size:6px;color:#597b9b;letter-spacing:.7px}.second{margin-top:17px}
.dir{background:#071f3770;border:1px solid #143655;border-left:2px solid #1e507b;border-radius:0;color:#b9d3e9;margin:4px 0;padding:7px 8px;font-size:10px;min-height:28px}
.dir small{color:#5e8bb0;font-size:8px}.dir .dot{background:#328bd1;box-shadow:0 0 5px #268aca66}
.dir.active{border-color:#176eaa;border-left-color:#4ee5e3;background:linear-gradient(90deg,#0f4161c4,#07223970);color:#b1e8ff}.dir.active .dot{background:#58e4d5}.dir:hover{background:#0e2e4a;border-color:#3574a0}
.layers{gap:5px}.layers button{border-radius:0;border:1px solid #17446b;background:#091e35;color:#88b4d6;font-size:9px;padding:7px 2px}
.layers button.active{background:#103655;border-color:#338dc3;color:#8cd8ff;box-shadow:inset 0 -1px #55bbf5}
.ui-icon{filter:invert(79%) sepia(20%) saturate(1044%) hue-rotate(175deg) brightness(96%)}
#metrics{top:110px;gap:18px}#metrics article{border-left:1px solid #448ec98c;text-shadow:0 2px 7px #001b39ab}#metrics strong{color:#74c9ff;font-family:Arial,sans-serif;font-weight:600;text-shadow:0 0 10px #156ee85c;letter-spacing:1px}#metrics article small{color:#e0effa;font-size:10px;text-shadow:0 1px 5px #082747}#metrics strong span{color:#bddef5}
#metrics article:before{filter:invert(77%) sepia(24%) saturate(981%) hue-rotate(169deg) brightness(105%)}
#metrics article:nth-child(3) strong,#metrics article:nth-child(4) strong{color:#f0c159;text-shadow:0 0 10px #e6a00044}
.health-strip{padding-top:9px;border-top:1px solid #153c60}.health-strip div{border-color:#174168}.health-strip b{color:#75c6ff;font-family:Arial;font-weight:500;text-shadow:0 0 8px #0065c944}.health-strip small{color:#7295b5}
.caption{color:#85a8c8;font-size:10px;letter-spacing:.5px}.row{border-color:#173751;color:#a5c2de;padding:7px 0;font-size:10px}.row small,.muted{color:#7193b3}.status{color:#66bfff}.warning{color:#e8bc54}
.card{background:#0a25434d;border:1px solid #183b5c;border-left:2px solid #3d98de;border-radius:0;color:#b3cce2;font-size:10px;line-height:1.75;padding:9px;box-shadow:inset 0 0 12px #123b591a}.card b{color:#d0e4f7;font-weight:500}.card.warn{border-left-color:#e6b74b;background:#49321130}.card button{background:#0a2946;border-color:#2a6190;color:#96c9ec;font-size:9px;border-radius:0}
.action{border:1px solid #1c4c75;background:#09223b;color:#8eb9d9;border-radius:0;font-size:10px}.action:hover{background:#123b5d;border-color:#4c9cca;color:#d4eaff}.action.primary{background:linear-gradient(180deg,#0e4b79,#082b4e);border:1px solid #327eab;box-shadow:inset 0 1px #75cced22;color:#b8e6fc}
.tabset button,.zones button{background:#08233e;border-color:#184974;border-radius:0;color:#86b3d5}.tabset button.active{background:#0d416a;border-color:#3b95c9;color:#c1e9ff}
.spark{background:linear-gradient(180deg,#071c3333,#04132700);margin:8px 0}.spark text{fill:#688bac!important}.spark polyline{filter:drop-shadow(0 0 2px #289bf26b)}.hud-section{margin-top:16px}.hud-section .heading{margin-bottom:7px}.hud-section .row{font-size:9px}.healthbar{height:4px;background:#102b44;margin:8px 0;position:relative;overflow:visible}.healthbar i{height:4px;background:linear-gradient(90deg,#123f86,#55b3ff)!important;box-shadow:0 0 7px #3494ec44;position:relative}.healthbar i:after{content:"";position:absolute;right:0;top:-2px;width:3px;height:8px;background:#bfebff;box-shadow:0 0 6px #88dcff}.hud-section .healthbar:last-child i{background:linear-gradient(90deg,#846323,#e5bd54)!important;box-shadow:0 0 5px #a98e2a44}.hud-section .healthbar:last-child i:after{background:#fff0a6}
.bigval{color:#6abfff;text-shadow:0 0 10px #308ee74d}.bigval small{color:#8daec8}input,select,textarea{background:#061a31;border:1px solid #204b70;color:#c1dcf1}.record{border-color:#173c5d}.chartlegend button{background:#0b2643;border-color:#24557b;color:#8bbbdc}
.toolbar{background:#04172aed;border:1px solid #1e5a84;box-shadow:inset 0 1px #348db53b;border-radius:1px;backdrop-filter:blur(5px);bottom:27px}.toolbar button{color:#8eb8d7;border-radius:0}.toolbar button.active{background:#124162;color:#a9e7ff}.toolbar button:hover{background:#12324e}
footer{background:#031326ed;border-top:1px solid #183d5b;color:#577d9e}.live{color:#65aecc!important}.breadcrumb{top:167px}.breadcrumb button{background:#061d36d9;border:1px solid #376c91;color:#a8cce5;border-radius:0}.scene-tag b{color:#ddedff}.scene-tag small{color:#b4cce0}#hint{background:#06172dbd;color:#b5ccdf}#toast{background:#071f3df5;border-color:#357dad;color:#bde2ff;top:170px}
#toggleLabels{color:#6c98b9}.sensor-picker-label{color:#86acca}.video{background:#0c2942;border-color:#255077}.thermal{background:#182c47}
@media(min-width:1600px){.cockpit-title{flex-basis:480px}.title-skin{transform:scale(.92)}.title-copy{left:75px;right:70px;top:25px;height:32px}.cockpit-title h1{font-size:24px;line-height:32px}.cockpit-title small{top:36px;font-size:7px}.cockpit-nav{gap:9px;height:38px}.cockpit-nav button{height:38px}.nav-copy{font-size:13px;line-height:17px}.panel{top:110px;padding:19px 21px}.heading{font-size:14px}.dir{font-size:12px;min-height:34px;padding:9px}.row,.caption{font-size:12px}.card{font-size:11px}}
@media(max-width:1200px){.cockpit-header{padding:0 13px}.cockpit-title{flex-basis:338px}.title-skin{transform:scale(.66)}.title-copy{left:53px;right:36px;top:18px;height:23px}.cockpit-title h1{font-size:17px;line-height:23px;letter-spacing:1.4px}.cockpit-title small{top:27px;font-size:5px;letter-spacing:1.7px}.header-main{gap:7px}.cockpit-nav{gap:3px;margin-top:2px}.nav-copy{font-size:10px;letter-spacing:0;min-width:64%}.panel{padding:13px 15px}.header-time{display:block;font-size:7px}#metrics{gap:10px}#metrics article small{font-size:8px}}
@media(max-height:700px){.cockpit-header{height:80px}.header-main{height:69px}.panel{top:94px;bottom:30px;padding:11px 16px}.heading{height:21px;font-size:11px;margin-bottom:7px}.second{margin-top:11px}.dir{min-height:21px;padding:4px 7px;margin:3px 0;font-size:9px}.dir small{font-size:7px}#deviceChart{height:67px!important;max-height:67px;margin-top:5px}.layers{margin-top:4px;gap:4px}.layers button{padding:5px 2px;font-size:8px}#toggleLabels{padding:4px;font-size:8px}.health-strip{padding-top:6px;margin-top:7px}.health-strip b{font-size:18px}.health-strip small{font-size:7px}.caption{margin-top:8px;font-size:9px}.row{padding:4px 0;font-size:9px}.spark{height:49px;margin:4px 0}.card{padding:6px;font-size:9px;line-height:1.55;margin-top:6px}.action{padding:5px;margin-top:5px;font-size:9px}.hud-section{margin-top:11px}.hud-section .spark{height:42px;margin:3px 0}.hud-section .row{font-size:8px;padding:4px 0}.healthbar{height:3px;margin:6px 0}.healthbar i{height:3px}#metrics{top:103px}#metrics strong{font-size:25px}.breadcrumb{top:160px}.toolbar{bottom:23px}.scene-tag{bottom:66px}#hint{bottom:58px}}

.title-copy{top:18px;height:36px}.cockpit-title h1{line-height:36px}.cockpit-title small{top:37px}@media(min-width:1600px){.title-copy{top:21px;height:38px}.cockpit-title h1{line-height:38px}.cockpit-title small{top:40px}}@media(max-width:1200px){.title-copy{top:15px;height:29px}.cockpit-title h1{line-height:29px}.cockpit-title small{top:31px}}