:root{--bg:#101b25;--panel:rgba(12,24,32,.92);--border:rgba(122,155,164,.2);--text:#e6efef;--muted:#91a4ae;--teal:#3bd8cf;--amber:#f2aa5c}*{box-sizing:border-box}html,body{margin:0;overflow:hidden;height:100%;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text)}button,input{font:inherit}button{cursor:pointer}#app{width:100vw;height:100vh;position:relative;overflow:hidden}#viewport{position:absolute;inset:0;width:100%;height:100%;display:block;outline:0}#vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,30,.53),transparent 26%,transparent 74%,rgba(4,15,24,.72)),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,11,18,.27) 100%)}.header{position:absolute;top:0;left:0;right:0;height:78px;display:flex;align-items:center;padding:0 26px;gap:15px;background:linear-gradient(180deg,rgba(8,16,23,.96),rgba(8,16,23,.83));border-bottom:1px solid var(--border);z-index:10}.brand-icon{width:41px;height:41px;display:grid;place-items:center;border:1px solid var(--teal);clip-path:polygon(0 0,100% 0,100% 73%,73% 100%,0 100%);color:var(--teal);font-size:14px;font-weight:900;letter-spacing:-1px;background:#132a30}.eyebrow,.overline{font-size:9px;letter-spacing:2px;color:var(--teal);font-weight:750}.header h1{font-weight:850;letter-spacing:1.8px;font-size:20px;margin:2px 0 0;line-height:1}.header h1 small{font-weight:600;font-size:12px;color:#90a3aa;margin-left:7px}.separator{width:1px;height:38px;background:var(--border);margin:0 8px}.live-indicator{font-size:10px;letter-spacing:1.1px;color:#b5c7c8;white-space:nowrap}.pulse,.teal-dot{width:7px;height:7px;background:#52e4c8;border-radius:50%;display:inline-block;margin-right:7px;box-shadow:0 0 12px #52e4c8}.header-spacer{flex:1}.pill{border:1px solid var(--border);background:#1c2e3a88;color:#d9e6e8;padding:10px 14px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:1px}.pill:hover,.zone:hover{background:#25424f;border-color:#2e9c9f}.panel{position:absolute;top:96px;bottom:77px;width:280px;border:1px solid var(--border);border-radius:6px;background:var(--panel);backdrop-filter:blur(12px);padding:19px 18px;overflow-y:auto;scrollbar-color:#36505a transparent;scrollbar-width:thin;z-index:5;box-shadow:0 12px 50px rgba(0,0,0,.19)}#left-panel{left:20px}#right-panel{right:20px;width:286px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.chip{border:1px solid #496e58;background:#20392e;color:#81e3a8;font-size:9px;letter-spacing:.6px;padding:4px 7px}.site-title{margin-top:19px;font-weight:780;font-size:21px;letter-spacing:-.65px}.muted{color:var(--teal)}.subtext{color:#879da8;font-size:11px;line-height:1.65;margin:6px 0 21px}.section-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#99b5bd;font-weight:750;margin:19px 0 11px}.section-title span{font-size:9px;letter-spacing:.1px;color:#607f8b}.zone-list{display:flex;flex-direction:column;gap:3px}.zone{display:flex;align-items:center;gap:9px;border:1px solid transparent;text-align:left;border-radius:3px;padding:9px 8px;background:transparent;color:#aebfc5;font-size:10.7px;line-height:1.25;width:100%}.zone .num{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;font-size:9px;color:#59727d;border:1px solid #36515c}.zone .chev{margin-left:auto;color:#496672}.zone.active{border-color:#36777e;background:#1b3a43;color:#ebffff}.zone.active .num{color:var(--teal);border-color:#2da5a7}.control-row{margin:16px 0 19px}.control-row>div{display:flex;justify-content:space-between;margin-bottom:9px;font-size:11px}.control-row span{color:var(--teal);font-size:10px}.control-row label{color:#bdd0d2}input[type=range]{appearance:none;width:100%;height:3px;background:#34515d;accent-color:var(--teal);outline:0}input[type=range]::-webkit-slider-thumb{appearance:none;border-radius:50%;width:11px;height:11px;background:var(--teal);border:2px solid #1c4b52}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:11px;color:#bdd0d2}.switch{position:relative;display:inline-block;width:32px;height:18px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#35505a;border-radius:20px;transition:.2s}.switch span:before{content:'';position:absolute;height:12px;width:12px;left:3px;top:3px;background:#becfd0;border-radius:50%;transition:.2s}.switch input:checked+span{background:#166c74}.switch input:checked+span:before{transform:translateX(14px);background:var(--teal)}.footnote{font-size:9px;color:#6b8994;line-height:1.65;margin-top:18px}.lower-left{position:absolute;bottom:22px;left:22px;display:flex;gap:12px;align-items:center;z-index:3}.scale-tag,.cam-hint{border:1px solid var(--border);background:#101e2ac9;padding:10px 12px;border-radius:3px;font-size:9px;letter-spacing:1.1px;color:#8eabb5}.scale-tag strong{color:#e7f5f3;margin-left:6px}.cam-hint{color:#718e98}.signal{font-size:9px;color:#5dddaf}.stat-card{margin-top:19px;padding:14px;background:linear-gradient(155deg,#18323b,#14252e);border:1px solid #234a51}.stat-card>div:first-child{font-size:10px;color:#b6c9cd;letter-spacing:.8px}.stat-card>div:first-child span{float:right;color:#779aa2}.stat-card strong{font-size:37px;font-variant-numeric:tabular-nums;line-height:1.6;font-weight:780;letter-spacing:-2px}.spark{display:flex;gap:4px;align-items:end;height:25px}.spark i{flex:1;background:linear-gradient(#37cfc5,#16646f);height:48%}.spark i:nth-child(2){height:70%}.spark i:nth-child(3){height:60%}.spark i:nth-child(4){height:83%}.spark i:nth-child(5){height:51%}.spark i:nth-child(6){height:100%}.spark i:nth-child(7){height:76%}.spark i:nth-child(8){height:87%}.spark i:nth-child(9){height:72%}.spark i:nth-child(10){height:93%}.spark i:nth-child(11){height:78%}.spark i:nth-child(12){height:89%}.two-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.two-stats>div{border:1px solid var(--border);padding:11px 9px;background:#142631}.two-stats span{display:block;font-size:8px;letter-spacing:1px;color:#7e9ba4}.two-stats strong{display:block;font-size:18px;margin-top:7px;font-weight:750}.two-stats small{font-size:9px;color:#93aeb5;font-weight:500}.minimap{position:relative;border:1px solid #2b444e;background:#111f28;height:174px;overflow:hidden}.minimap canvas{width:100%;height:100%;object-fit:fill;cursor:crosshair}.map-n,.map-scale{position:absolute;font-size:8px;color:#9cb5bb;pointer-events:none}.map-n{right:10px;top:7px}.map-scale{bottom:6px;left:10px}.inspection{display:flex;gap:9px;min-height:86px}.inspect-icon{font-size:22px;color:var(--teal);margin-top:-5px}.inspection strong{font-size:12px}.inspection p{color:#86a0aa;font-size:10px;line-height:1.6;margin:6px 0}.hr{height:1px;background:var(--border);margin:12px 0}.diagnostics{display:grid;gap:8px}.diagnostics div{display:flex;justify-content:space-between;color:#78939e;font-size:9px;letter-spacing:.65px}.diagnostics strong{color:#c1d4d8;font-weight:600}#markers{position:absolute;inset:0;pointer-events:none;z-index:4}.marker{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);border:1px solid #8bece7;box-shadow:0 0 0 5px #0ab6ad33,0 0 30px #0ab6ad55;background:#1c4b54b8;width:14px;height:14px;border-radius:50%;font-size:0;transition:transform .15s}.marker:hover,.marker.active{transform:translate(-50%,-50%) scale(1.45);background:#34dcce}.marker .marker-label{position:absolute;left:19px;top:-12px;white-space:nowrap;background:#122933df;border:1px solid #40616a;padding:6px 8px;color:#d2f1ef;font-size:9px;letter-spacing:.5px;display:none}.marker:hover .marker-label,.marker.active .marker-label{display:block}.tip{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#142833cc;border:1px solid var(--border);padding:10px 16px;font-size:9px;letter-spacing:1.3px;color:#92b0b9;pointer-events:none}.boot{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0c1821;transition:opacity .6s}.boot.hidden{opacity:0;pointer-events:none}.boot-logo{font-size:35px;font-weight:900;letter-spacing:4px;color:#e5f0f0}.boot-logo span{display:block;text-align:center;color:var(--teal);font-size:11px;margin-top:8px;letter-spacing:5px}.boot-bar{width:250px;height:2px;background:#285362;margin-top:33px;overflow:hidden}.boot-bar i{display:block;width:70%;height:100%;background:var(--teal);animation:load 1.4s ease-in-out infinite alternate}@keyframes load{to{transform:translateX(110px)}}.boot p{font-size:9px;color:#7197a2;letter-spacing:2px;margin-top:18px}.modal{position:absolute;inset:0;background:#06101bcc;display:grid;place-items:center;z-index:50}.modal.hidden{display:none}.modal-card{position:relative;max-width:500px;background:#152833;border:1px solid #3f6972;padding:34px 38px;box-shadow:0 18px 80px #0009}.modal-card h2{font-size:23px}.modal-card p{color:#a3bbc4;font-size:12px;line-height:1.8}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#aac3c9;font-size:25px}.modal-actions{margin-top:20px}.button-primary{background:var(--teal);border:0;padding:12px 18px;color:#05232b;font-weight:800;letter-spacing:1px;font-size:10px}@media(max-width:1100px){#left-panel{width:233px;left:9px}#right-panel{width:239px;right:9px}.header{padding:0 12px}.cam-hint{display:none}}@media(max-width:750px){.header{height:65px}.header .separator,.header .live-indicator{display:none}.header .pill{font-size:0;padding:8px}.panel{top:73px;width:190px!important;bottom:66px;padding:11px}#left-panel{left:6px}#right-panel{right:6px}.panel .site-title{font-size:15px}.control-row{margin:10px 0}.zone{padding:6px 5px}.lower-left{left:7px;bottom:8px}.tip{display:none}}