:root{--bg:#09151f;--pane:#0a1b27;--border:#1c3442;--muted:#7895a2;--text:#d7e7ea;--accent:#5ee4c6;--warn:#f3be70;--sky:#8cbbd2;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--bg);font:13px 'Inter',system-ui,sans-serif;color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{height:100dvh;display:flex;flex-direction:column}.topbar{height:71px;display:flex;flex-shrink:0;background:#091924;border-bottom:1px solid var(--border);align-items:center;justify-content:space-between;padding:0 24px;gap:26px;z-index:5}.brand{display:flex;align-items:center;gap:15px;min-width:296px}.brand-icon{font-family:'Barlow Condensed';font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1px solid #417e80;width:43px;height:43px;color:#d8fef5;line-height:1}.brand-icon span{color:var(--accent)}.brand-title{font-family:'Barlow Condensed';font-size:24px;font-weight:700;line-height:1.05;letter-spacing:1.3px}.brand-title em{font-style:normal;color:var(--accent)}.brand-sub{font:9px 'DM Mono',monospace;letter-spacing:.6px;color:#6e95a0;margin-top:5px}.top-stats{display:flex;gap:30px;align-items:center}.top-stat{display:flex;flex-direction:column;gap:6px;min-width:97px}.top-stat>span{font:9px 'DM Mono';color:#7893a0;letter-spacing:.5px;text-transform:uppercase}.top-stat b{font-family:'Barlow Condensed';font-size:19px;font-weight:600;letter-spacing:.7px}.top-stat small{font:9px 'DM Mono';color:#7696a3}.header-actions{display:flex;align-items:center;gap:20px}.live{font:10px 'DM Mono';font-weight:600;color:var(--accent);white-space:nowrap}.icon-btn{width:30px;height:30px;border:1px solid #436373;border-radius:50%;background:transparent;color:var(--text)}
.app-grid{display:grid;grid-template-columns:294px minmax(320px,1fr) 300px;min-height:0;flex:1}.sidebar,.rightbar{background:#091a25;min-height:0;display:flex;flex-direction:column;z-index:2}.sidebar{border-right:1px solid var(--border)}.rightbar{border-left:1px solid var(--border)}.sidebar-scroll,.panel-scroller{padding:24px 21px;overflow-y:auto;min-height:0;flex:1}.sidebar-scroll::-webkit-scrollbar,.panel-scroller::-webkit-scrollbar{width:4px}.sidebar-scroll::-webkit-scrollbar-thumb,.panel-scroller::-webkit-scrollbar-thumb{background:#335061}.eyebrow,.section-head{font:10px 'DM Mono';font-weight:500;letter-spacing:1px;color:#80b7bd}.eyebrow{color:var(--accent)}.sidebar-title{font-family:'Barlow Condensed';font-size:27px;margin:10px 0 5px;letter-spacing:.6px}.muted{color:var(--muted)}.small{font-size:11px;line-height:1.75}.tiny{font-size:10px;line-height:1.7}.camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:20px}.cam{background:#102632;color:#91aeba;border:1px solid #224252;border-radius:5px;min-height:62px;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.cam span{font:10px 'Inter';font-weight:600}.cam:hover,.cam.active{border-color:#51c5b1;background:#153b40;color:#9bf1da}.hr{height:1px;background:var(--border);margin:23px 0}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.status-tag{color:#e4b569;background:#443c28;border:1px solid #604c2e;padding:4px 5px;border-radius:3px;font:9px 'DM Mono';letter-spacing:.5px}.status-tag.cyan{color:#5fdac7;background:#163d39;border-color:#27675d}.field-label{display:block;color:#a7bac4;font-size:11px;margin-bottom:7px}.select{background:#102631;color:#cee9e8;border:1px solid #315064;border-radius:4px;width:100%;padding:10px 9px;font-size:10px;font-weight:700;letter-spacing:.4px}.range-label{display:flex;justify-content:space-between;align-items:center;color:#a8c0c9;font-size:11px;margin:18px 0 10px}.range-label strong{font-family:'DM Mono';color:#9ee4d4}.sidebar input[type=range]{width:100%;height:5px;accent-color:#5ee4c6;cursor:pointer}.mode-banner{display:flex;align-items:center;gap:12px;border:1px solid #245e54;background:#12332e;border-radius:5px;padding:12px;margin-top:22px}.mode-banner .pulse,.green-dot{height:7px;width:7px;display:block;border-radius:50%;background:#5de3c5;box-shadow:0 0 12px #4cd4b7}.mode-banner b{display:block;font:10px 'DM Mono';color:#a0e9d2}.mode-banner span:last-child{display:block;font-size:10px;color:#9abcb5;margin-top:4px}.mode-banner.warning{background:#362720;border-color:#945d43}.mode-banner.warning .pulse{background:#ff856f}.mode-banner.warning b{color:#ffb491}.layers{display:flex;flex-direction:column;gap:15px}.layers label{display:flex;gap:10px;align-items:center;color:#bad1da;font-size:11px;cursor:pointer}.layers input{accent-color:var(--accent);margin:0 2px 0 0}.swatch{width:6px;height:6px;background:var(--sw);border-radius:50%;display:block;margin-left:auto;order:2}.chips{display:flex;gap:5px}.chips button{flex:1;font:9px 'DM Mono';background:#122936;color:#9aafb9;border:1px solid #294354;padding:9px 0;border-radius:4px}.chips button.active{background:#174039;color:#8af3d8;border-color:#4abf9f}.side-footer,.right-footer{display:flex;justify-content:space-between;padding:15px 20px;color:#668c98;border-top:1px solid var(--border);font:9px 'DM Mono';letter-spacing:.35px}
.viewport{position:relative;min-height:0;overflow:hidden;background:linear-gradient(#557b90,#abbdb8 48%,#718c8b)}#webgl,#webgl canvas{width:100%;height:100%;display:block}.viewport-top{position:absolute;left:25px;right:25px;top:23px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.scene-tag,.glass-btn{background:rgba(9,27,39,.82);border:1px solid rgba(103,153,164,.42);color:#d8f0ee;backdrop-filter:blur(10px);border-radius:3px;padding:11px 12px;font:10px 'DM Mono';letter-spacing:.4px}.scene-tag{display:flex;align-items:center;gap:9px}.scene-tag .sep{color:#62848f}.right-controls{display:flex;gap:6px;pointer-events:auto}.glass-btn{cursor:pointer}.glass-btn:hover{border-color:#69dfc8;background:#16423d}.reticle{position:absolute;top:50%;left:50%;width:18px;height:18px;pointer-events:none;transform:translate(-50%,-50%);opacity:.65}.reticle:before,.reticle:after{content:'';position:absolute;background:#f2fbf8}.reticle:before{height:1px;width:18px;top:8px}.reticle:after{width:1px;height:18px;left:8px}.viewport-bottom{position:absolute;bottom:25px;left:24px;right:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:15px;pointer-events:none}.legend{display:flex;flex-wrap:wrap;gap:13px;background:rgba(9,27,39,.8);border:1px solid rgba(93,135,148,.4);padding:11px}.legend span{font:9px 'DM Mono';white-space:nowrap}.legend i{display:inline-block;width:6px;height:6px;vertical-align:middle;margin-right:5px;border-radius:50%}.viewport-hint{font:9px 'DM Mono';color:#eaf9f4;text-shadow:0 1px 5px #000;white-space:nowrap;letter-spacing:.5px}.loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#153846,#071925);transition:opacity .7s}.loading.hidden{opacity:0;pointer-events:none}.loading-mark{font:700 71px 'Barlow Condensed';color:#9cf3db}.loading-line{font:12px 'DM Mono';letter-spacing:2px;color:#dce8e7;margin-top:10px}.loadtrack{height:4px;width:310px;background:#1b3d48;overflow:hidden;border-radius:5px;margin:25px}.loadtrack div{width:70%;height:100%;background:var(--accent);animation:load 1.6s infinite}@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(160%)}}.loading p{font:11px 'DM Mono';color:#7da4ac}.help{position:absolute;z-index:11;right:18px;top:75px;background:#091d29ee;border:1px solid #3c847f;border-radius:8px;padding:20px 28px 15px;max-width:290px;box-shadow:0 15px 45px #0009}.help.hidden{display:none}.help strong{color:#86e6cf}.help p{font:11px/1.9 'DM Mono';color:#acc2cc}.help-close{position:absolute;top:9px;right:13px;background:none;border:0;color:#fff;font-size:22px}
.rightbar .panel-scroller{padding:22px 17px}.metric{background:#0e2531;border:1px solid #233d4b;padding:12px 12px 13px;min-width:0}.metric>span{font:9px 'DM Mono';color:#8daab5;letter-spacing:.5px}.metric>div{margin-top:8px}.metric strong{font:600 29px 'Barlow Condensed';color:#d8e7e9;letter-spacing:.25px}.metric small{font:11px 'DM Mono';color:#81a9b5}.metric.primary{padding:14px 16px;background:linear-gradient(135deg,#10383e,#10303d)}.metric.primary strong{font-size:40px;color:#9eedda}.bar{height:4px;background:#214851;margin-top:9px!important;border-radius:3px}.bar span{height:4px;background:linear-gradient(90deg,#389f9a,#87ead5);display:block;transition:width .25s}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.metrics-grid .metric strong{font-size:24px}.metrics-grid .metric span{font-size:8px}#minimap{display:block;width:100%;height:auto;border:1px solid #294654;background:#0b2633;cursor:crosshair}.map-footer{display:flex;justify-content:space-between;margin:9px 0;color:#7ca4b3;font:8px 'DM Mono'}.map-footer b{color:#d3eded}.inspector{border:1px solid #274151;background:#102732;min-height:210px;border-radius:5px;padding:15px}.inspector-empty{text-align:center;padding:13px 4px;color:#8cabba}.inspector-empty .radar{font-size:43px;color:#4ba7aa}.inspector-empty b{font:10px 'DM Mono';letter-spacing:.5px;color:#b8d0d6}.inspector-empty p{font-size:11px;line-height:1.7;margin:12px 4px 0}.inspect-id{font:9px 'DM Mono';color:#7bc9c3;margin-bottom:10px}.inspect-title{font:600 23px/1.15 'Barlow Condensed';letter-spacing:.4px;margin:0 0 11px}.inspect-type{display:inline-flex;color:#f2d38d;background:#3c3729;font:9px 'DM Mono';padding:5px 7px;border-radius:3px;margin-bottom:9px}.inspect-desc{color:#abc5cb;line-height:1.75;font-size:11px}.inspect-row{border-top:1px solid #254453;padding-top:12px;margin-top:12px;display:flex;flex-direction:column;gap:5px}.inspect-row span{font:9px 'DM Mono';color:#7297a3}.inspect-row b{font:12px 'DM Mono';font-weight:500;color:#96ebd7;line-height:1.5}.inspect-button{display:block;margin-top:17px;width:100%;background:#174138;border:1px solid #4ca993;color:#a6edda;border-radius:4px;padding:10px 6px;font:10px 'DM Mono';cursor:pointer}.inspect-button:hover{background:#205c50}
@media(max-width:1380px){.app-grid{grid-template-columns:260px minmax(320px,1fr) 260px}.top-stats{gap:17px}.brand{min-width:260px}.sidebar-scroll{padding:20px 16px}.rightbar .panel-scroller{padding:20px 12px}.viewport-hint{display:none}.topbar{padding:0 16px}}
@media(max-width:1060px){.app-grid{grid-template-columns:230px minmax(300px,1fr)}.rightbar{display:none}.top-stats .top-stat:nth-child(2),.top-stats .top-stat:nth-child(3){display:none}.sidebar-scroll{padding:16px 12px}.brand{min-width:225px}}
@media(max-width:700px){.topbar{height:60px}.app-grid{display:flex;flex-direction:column-reverse}.sidebar{height:210px;overflow:auto;border-top:1px solid var(--border)}.sidebar-scroll{display:block}.sidebar .sidebar-title,.sidebar .eyebrow,.sidebar .muted,.sidebar .hr,.sidebar .section-head,.sidebar .field-label,.sidebar .select,.sidebar .range-label,.sidebar input,.sidebar .mode-banner,.sidebar .layers,.sidebar .chips,.sidebar .tiny{display:none}.sidebar .camera-grid{display:flex;gap:5px;margin-top:8px;overflow:auto}.cam{min-width:77px}.viewport{flex:1}.side-footer,.top-stats,.brand-sub{display:none}.viewport-top{left:10px;right:10px;top:10px}.scene-tag{font-size:8px;padding:9px}.glass-btn{font-size:9px;padding:8px}.glass-btn span{display:none}.viewport-bottom{left:10px;right:10px;bottom:10px}.legend{gap:8px;padding:8px}.legend span{font-size:7px}}