:root{--navy:#07151d;--navy2:#0a1e28;--slate:#8099a7;--line:rgba(155,197,215,.19);--teal:#84cbd2;--bright:#cff5f0;--amber:#ffc15e;--off:#ecf2f5;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0a1c25;color:var(--off);font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:13px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:3px}#app{position:relative;width:100%;height:100%;background:linear-gradient(140deg,#101e25,#1d3442)}#scene{position:absolute;inset:0}#scene>canvas{display:block;width:100%;height:100%;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 190px 15px rgba(2,11,17,.5);background:linear-gradient(90deg,rgba(6,19,28,.36),transparent 41%,rgba(7,20,28,.14))}
.topbar{position:absolute;top:0;left:0;right:0;height:84px;display:flex;align-items:center;justify-content:space-between;padding:12px 30px;background:linear-gradient(180deg,rgba(5,14,22,.93),rgba(5,14,22,.50));border-bottom:1px solid var(--line);z-index:4;gap:20px}.brand{display:flex;align-items:center;gap:15px}.brand-mark{height:44px;width:44px;display:grid;place-content:center;border:1px solid #6f8f9b;font-size:31px;font-weight:900;color:#e4fbff;line-height:1}.brand-mark span{color:var(--amber)}.overline{font-size:9px;font-weight:700;letter-spacing:.28em;color:#94a9b5}.blue{color:#7bc4c8}.brand-name{font-weight:900;font-size:19px;letter-spacing:.1em;margin-top:5px}.brand-name span{font-weight:400;color:#92c7cf}.top-details{display:flex;align-items:center;gap:17px;letter-spacing:.14em;font-size:10px;color:#aec2ca}.top-details strong{font-weight:600;color:white}.top-tag{background:rgba(68,156,173,.15);padding:9px 12px;color:#9bdde2;border:1px solid #47717f}.dot{width:5px;height:5px;background:#70d9ae;border-radius:50%}.ui-button{background:rgba(3,20,29,.6);border:1px solid rgba(148,195,206,.3);color:#c8dce1;letter-spacing:.13em;font-size:10px;padding:12px 15px}.ui-button span{color:var(--amber);margin-left:13px}
.panel{background:rgba(6,21,30,.92);border:1px solid rgba(120,159,174,.23);box-shadow:0 22px 65px rgba(0,0,0,.22);backdrop-filter:blur(18px)}.control-panel{position:absolute;left:22px;top:102px;bottom:55px;width:322px;padding:21px 22px 10px;z-index:3;overflow:auto;scrollbar-width:thin;scrollbar-color:#29505c transparent}.panel-heading{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:9px;letter-spacing:.17em;font-weight:800;color:#7898a9}.status{font-size:9px;color:#cb978d;letter-spacing:.12em}.status.active{color:#81e4b1}.control-panel h1{font-weight:800;font-size:22px;line-height:1.1;letter-spacing:.06em;margin:23px 0 8px}.control-panel h1 span{color:#9ed2d9;font-weight:500}.subtitle{color:#98aeb9;font-size:10px;line-height:1.65;margin-bottom:24px}.control-label,.range-heading,.toggle-heading{font-size:10px;letter-spacing:.16em;color:#a7bac2;font-weight:700}.segmented{display:flex;margin-top:12px;border:1px solid #3a5664}.segment{width:50%;padding:12px 8px;background:transparent;color:#849eab;border:0;font-size:10px;letter-spacing:.13em;font-weight:800}.segment.chosen{background:#b2e4dd;color:#0a2830}.divider-line{height:1px;background:var(--line);margin:23px 0 21px}.range-heading{display:flex;justify-content:space-between;margin-bottom:17px}.range-heading span{color:#527482}.range-heading.part-two{margin-top:24px}.range-row{margin:15px 0 22px}.range-label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:#afc1cb}.range-label output{color:#d5f5e8;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:3px;border:0;appearance:none;background:linear-gradient(90deg,#8bd2cc 0%,#8bd2cc var(--fill,50%),#334954 var(--fill,50%),#334954 100%);outline:0;margin:13px 0 9px;cursor:ew-resize}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#defbf3;border:2px solid #4795a4;box-shadow:0 0 0 3px #09323e}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#defbf3;border:2px solid #4795a4;border-radius:50%}.range-ext{display:flex;justify-content:space-between;font-size:9px;color:#597787}.command-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.command{background:#132e3a;color:#beced3;padding:12px;border:1px solid #375665;font-weight:700;font-size:10px;letter-spacing:.11em}.command.primary{background:#b7e4db;color:#0a252b;border-color:#b7e4db}.command span{font-size:14px;margin-right:6px}.toggle-heading{margin:27px 0 10px}.switches{border-top:1px solid var(--line)}.switch{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;color:#a9bbc4;font-size:10.5px;cursor:pointer}.switch input{position:absolute;opacity:0}.switch i{display:block;position:relative;width:30px;height:16px;border:1px solid #4a6670;border-radius:20px;background:#1c333f}.switch i:after{content:'';position:absolute;left:3px;top:3px;width:8px;height:8px;background:#6e838d;border-radius:50%;transition:.16s}.switch input:checked+i{background:#356f70;border-color:#91d7cd}.switch input:checked+i:after{left:16px;background:#d9ffed}.sidebar-footer{display:flex;justify-content:space-between;margin-top:22px;color:#52707f;font-size:8px;letter-spacing:.09em}
.rightpanel{position:absolute;right:26px;top:104px;width:274px;z-index:3}.microheader{padding:14px 14px 12px;background:rgba(7,25,34,.85);border:1px solid var(--line);color:#a7c3cf;font-size:9px;letter-spacing:.15em;display:flex;justify-content:space-between}.microheader span{color:#7cdeb3}.metric{background:rgba(7,24,33,.82);padding:15px 14px;border:1px solid var(--line);border-top:0}.metric>div:first-child{color:#738e9a;font-size:9px;letter-spacing:.14em}.metric-value{display:flex;align-items:baseline;gap:7px;margin-top:8px}.metric-value strong{font-size:25px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.metric-value span{font-size:11px;color:#9db3be}.primary-metric .metric-value strong{font-size:36px;color:#d4f7ec}.meter{height:3px;background:#334751;margin-top:12px}.meter>div{background:#86d1b9;width:0;height:100%;transition:.15s}.metric-grid{display:grid;grid-template-columns:1fr 1fr}.metric-grid .metric:nth-child(2){border-left:0}.metric-grid .metric-value strong{font-size:19px}.metric-grid .metric-value span{font-size:9px}.data-note{font-size:8px;letter-spacing:.08em;color:#7894a0;text-align:center;padding:10px;background:rgba(4,18,25,.76);border:1px solid var(--line);border-top:0}
.cameras{position:absolute;bottom:68px;left:365px;width:420px;z-index:3;padding:16px 17px}.camera-top{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.14em;color:#a6c2cc}.camera-top span{font-size:8px;color:#729aa5}.camera-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:15px}.cam{background:#102b37;border:1px solid #36515c;color:#648b9a;padding:8px 4px;font-size:10px;text-align:left}.cam span{display:block;color:#c2d7df;font-size:9px;letter-spacing:.07em;margin-top:4px}.cam.selected{border-color:#8bdbd3;color:#e2fff9;background:#234550}.bottom-right{position:absolute;right:26px;bottom:76px;width:274px;z-index:3}.selection-info{background:rgba(5,20,29,.8);border-left:2px solid #6fc4c6;padding:16px 16px 13px}.selection-info>div{font-size:9px;color:#89a1ae;letter-spacing:.15em}.selection-info strong{font-size:12px;display:block;margin-top:9px;color:#c7f2ee;letter-spacing:.045em}.selection-info p{font-size:10px;color:#8ba6b2;line-height:1.6;margin:8px 0 0}.screen-action{width:100%;margin-top:9px;border:1px solid #527a82;background:rgba(14,41,52,.84);color:#acd3d6;letter-spacing:.1em;padding:11px;text-align:center;font-size:11px}.bottom-bar{position:absolute;bottom:0;left:0;right:0;z-index:4;min-height:42px;background:rgba(4,14,22,.89);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 29px;color:#8199a6;font-size:9px;letter-spacing:.1em}.bottom-bar>span:first-child{color:#c2dccf}.pulsing{display:inline-block;width:6px;height:6px;margin-right:7px;background:#65d9a0;border-radius:50%;box-shadow:0 0 10px #65d9a0}.hint{color:#67818e}#toast{position:absolute;z-index:20;left:50%;top:99px;transform:translate(-50%,-12px);background:#c1eee1;color:#073039;padding:13px 24px;font-size:11px;letter-spacing:.1em;font-weight:700;opacity:0;pointer-events:none;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}.loading-screen{position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 55% 50%,#193845,#07151c 74%);transition:opacity .65s,visibility .65s}.loading-screen.done{opacity:0;visibility:hidden;pointer-events:none}.loader-icon{font-size:52px;font-weight:900;color:#e4f8eb}.loader-title{font-size:13px;letter-spacing:.19em;font-weight:700;margin:21px 0}.loader-line{width:260px;height:3px;background:#294350}.loader-line>div{height:100%;width:100%;background:#a8e8cf;animation:load 1.4s ease-out}.loader-sub{font-size:8px;letter-spacing:.18em;color:#72929e;margin-top:19px}@keyframes load{from{width:0}to{width:100%}}.fatal-error{position:absolute;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);background:#061620;border:1px solid #f3aa8a;padding:30px;max-width:540px;line-height:1.7}.fatal-error[hidden]{display:none}.fatal-error code{color:#b7f6da}.hide-hud .control-panel,.hide-hud .rightpanel,.hide-hud .cameras,.hide-hud .bottom-right{display:none}
@media(max-width:1200px){.rightpanel{width:226px}.cameras{width:360px}.top-details{display:none}.hint{display:none}}
@media(max-width:900px){.control-panel{width:272px;padding:15px;left:10px;top:90px;bottom:52px}.control-panel h1{font-size:19px}.rightpanel{top:91px;right:9px;width:193px}.metric{padding:10px}.metric-value strong{font-size:19px}.primary-metric .metric-value strong{font-size:26px}.metric-grid .metric-value strong{font-size:14px}.cameras{left:293px;width:340px;bottom:55px}.bottom-right{right:9px;bottom:56px;width:193px}.selection-info{padding:10px}.topbar{height:76px;padding:10px}}
@media(max-width:650px){.topbar{height:66px}.brand-name{font-size:15px}.brand-mark{height:35px;width:35px;font-size:25px}.overline{font-size:7px}.control-panel{left:6px;top:auto;bottom:47px;width:min(87vw,300px);height:45%;opacity:.96}.rightpanel{top:73px;width:167px;right:7px}.rightpanel .metric-grid .metric{padding:7px}.rightpanel .metric>div:first-child{font-size:7px}.rightpanel .metric-value span{font-size:8px}.rightpanel .metric-value strong{font-size:15px}.rightpanel .data-note{display:none}.cameras{top:70px;bottom:auto;left:6px;width:calc(100% - 185px);min-width:165px;padding:8px}.camera-top{font-size:8px}.camera-buttons{grid-template-columns:repeat(5,1fr);gap:3px;margin-top:8px}.cam{font-size:7px;padding:5px 2px}.cam span{font-size:7px}.bottom-right{display:none}.bottom-bar{font-size:7px;padding:5px 10px}.bottom-bar #posReadout{display:none}}