:root{--bg:#040b16;--panel:rgba(7,18,32,.86);--edge:rgba(139,183,211,.18);--border:rgba(124,191,232,.12);--cyan:#76deed;--blue:#388ec0;--muted:#758b9c;--white:#e5f2f7;--amber:#ecb578;--critical:#fa7e71}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--white);font:12px/1.5 Inter,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button{color:inherit}
#viewport{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 54% 47%,transparent 28%,rgba(2,5,13,.35) 90%),linear-gradient(to bottom,rgba(3,8,17,.37),transparent 23%,transparent 78%,rgba(2,5,13,.44))}
.glass{background:var(--panel);border:1px solid var(--edge);backdrop-filter:blur(17px);box-shadow:0 18px 66px rgba(0,0,0,.13)}.overline,.mono,.section-title,.group-heading,.mini,.small,.licence,.state-badge,.key-hint,.ticks,.bottom-stats,.focus-panel h3,.metric>span,.mode,.camera-list,.nodes,.idtext{font-family:'DM Mono',Consolas,monospace}.overline{font-size:9px;letter-spacing:.19em;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:10px}.mini{font-size:9px}
.topbar{position:absolute;left:25px;right:25px;top:22px;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-radius:4px;z-index:4}.brand{display:flex;gap:12px;align-items:center}.brand-icon{width:38px;height:38px;display:grid;place-content:center;border:1px solid #4e9dc2;color:#b8edfa;font:700 22px 'Barlow Condensed';letter-spacing:-3px;transform:skew(-7deg)}.brand-icon span{color:#ffba72}.brand-name{font:700 24px 'Barlow Condensed',Arial;letter-spacing:.065em;line-height:1.12}.brand-name span{font-weight:500;color:#8aa9c3}.top-center{font:10px 'DM Mono';letter-spacing:.15em;color:#8da0af}.dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#6cdbaf;box-shadow:0 0 12px #6cdbaf;margin-right:10px}.top-separator{margin:0 13px}.top-actions{display:flex;gap:7px}.icon-btn{width:32px;height:31px;border:1px solid var(--edge);background:rgba(255,255,255,.025);font:600 19px 'DM Mono';color:#b8d0da}.icon-btn:hover,.subtle:hover,.camera-list button:hover,.nodes button:hover{color:#fff;background:rgba(118,222,237,.11);border-color:var(--cyan)}
.rail{position:absolute;left:25px;top:103px;bottom:113px;width:254px;border-radius:4px;display:flex;flex-direction:column;z-index:3;overflow:auto;scrollbar-width:thin;scrollbar-color:#244357 transparent}.rail-section{padding:22px 19px 17px;border-bottom:1px solid var(--border)}.section-title{font-size:10px;letter-spacing:.14em;color:#a2b7c7;display:flex;align-items:center;gap:12px;margin-bottom:13px}.tiny-line{flex:1;background:var(--edge);height:1px}.hero-number{font:700 54px/1 'Barlow Condensed';letter-spacing:.02em;color:#dcf8fe}.hero-number span{font:500 21px 'Barlow Condensed';color:#5db4e1}.overview-grid{margin-top:19px;display:grid;grid-template-columns:1fr 1fr;gap:10px;font:9px 'DM Mono';color:#7c94a7}.overview-grid span{font-size:17px;color:#c3e8f4;margin-right:6px}.camera-list,.nodes{display:flex;flex-direction:column;gap:4px}.camera-list button,.nodes button{width:100%;text-align:left;color:#91a6b8;background:transparent;border:1px solid transparent;padding:7px 8px;font-size:10px;display:flex;align-items:center;gap:9px}.camera-list button:before{content:'◇';font-size:14px;color:#568aa9}.camera-list button.selected{border-color:#417d96;color:#cbf5f9;background:rgba(72,177,209,.095)}.nodes button:before{content:'+';font-size:14px;color:#ecb578}.camera-list button span{margin-left:auto;color:#5c7e92;font-size:9px}.station-section{padding-top:19px}.rail-bottom{margin-top:auto;padding:18px 19px}.idtext{font-size:9px;color:#70c0db;word-break:break-all;margin:5px 0 11px}.licence{color:#607a8f;font-size:8px;line-height:1.8}
.inspector{position:absolute;top:103px;right:25px;bottom:113px;width:296px;z-index:4;display:flex;flex-direction:column;border-radius:4px}.inspector-head{height:82px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 19px;border-bottom:1px solid var(--edge)}h2,h3,p{margin:0}h2{font:600 27px 'Barlow Condensed';letter-spacing:.04em}.state-badge{border:1px solid #467f75;background:rgba(89,202,174,.07);padding:5px 7px;font-size:8px;letter-spacing:.08em;color:#78e3c2}.state-badge.warning{color:#e9b174;border-color:#b08049}.state-badge.critical{color:#ff887c;border-color:#b95350}.inspector-scroll{padding:14px 20px 22px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#28485c transparent}.group-heading{font-size:10px;color:#a6c4d5;letter-spacing:.1em;display:flex;align-items:center;gap:9px;margin:16px 0 17px}.group-heading span{color:#5aa8cd}.group-heading i{height:1px;background:var(--edge);flex:1}.control{margin:0 0 18px}.control label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#a2b4c1;font-size:11px}.control output{font:500 11px 'DM Mono';color:#c0e7f4}.control input[type=range]{appearance:none;width:100%;height:3px;background:#244155;cursor:pointer;display:block;outline:none}.control input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid #102534;border-radius:100%;background:#83dcec;box-shadow:0 0 0 1px #7bb7d2}.control input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;background:#83dcec;border-radius:50%}.ticks{display:flex;justify-content:space-between;color:#506b7f;font-size:8px;margin-top:8px}.switch-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:10px}.switch-row span b{display:block;font-size:11px;font-weight:500;color:#adc1cb}.switch-row span small{display:block;font-size:9px;color:#58778d;margin-top:2px}.switch-row input{position:absolute;opacity:0;width:1px;height:1px}.switch{position:relative;display:block;width:36px;height:19px;flex-shrink:0;background:#1f3847;border:1px solid #385466;border-radius:20px;cursor:pointer}.switch:before{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#718b99;transition:all .18s}.switch-row input:checked+.switch{background:#285c6d;border-color:#559fb6}.switch-row input:checked+.switch:before{left:20px;background:#87e5f3}.switch-row input:focus-visible+.switch{outline:2px solid white}.quality-control{margin:10px 0 19px}.quality-control .small{color:var(--muted);letter-spacing:.11em;font-family:'DM Mono';font-size:9px;margin-bottom:9px}.segmented{display:flex;border:1px solid #2b465a;padding:3px;gap:2px}.segmented button{flex:1;color:#7f97aa;border:none;background:transparent;padding:7px 3px;font:9px 'DM Mono'}.segmented .active{background:#27556b;color:#d4f9fc}.subtle{background:transparent;border:1px solid #385165;min-height:35px;font:9px 'DM Mono';letter-spacing:.1em;color:#91b3c4}.full{width:100%}
.statusbar{position:absolute;bottom:31px;left:25px;right:25px;min-height:69px;display:flex;align-items:center;gap:15px;z-index:4;border-radius:4px;padding:0 18px}.telemetry{display:flex;flex:1;max-width:740px;gap:24px}.metric{flex:1;min-width:92px}.metric>span{font-size:8px;letter-spacing:.06em;color:#7290a4}.metric strong{display:block;font:600 22px 'Barlow Condensed';letter-spacing:.04em;color:#e5f8ff;line-height:1.3}.metric strong small{font-size:11px;color:#829bac;font-weight:400}.meter{height:2px;background:#253d4d;margin-top:5px}.meter i{display:block;background:linear-gradient(90deg,#2883a6,#6be0ee);width:55%;height:100%;transition:width .3s}.meter i.hot{background:linear-gradient(90deg,#d9884a,#ff6f59)}.view-commands{display:flex;align-items:center;gap:5px;margin-left:auto}.mode{border:1px solid transparent;background:transparent;color:#8ba8b9;white-space:nowrap;font-size:10px;padding:8px 9px}.mode:hover{color:#fff}.mode.active{color:#9dedf7;background:#173d52;border-color:#37647d}.vertical-line{width:1px;height:23px;background:#25445a;margin:0 5px}.bottom-stats{font-size:9px;color:#647f93;text-align:right;min-width:75px;line-height:1.6}.key-hint{position:absolute;bottom:8px;left:27px;right:27px;font-size:9px;color:#71889b;letter-spacing:.06em;text-align:center;z-index:3}.key-hint kbd{border:1px solid #416074;padding:1px 4px;border-radius:3px;color:#b9dde7}
.focus-panel{position:absolute;z-index:4;bottom:115px;left:calc(50% - 173px);width:346px;padding:15px 18px;border-radius:4px;display:none}.focus-panel.show{display:block}.focus-panel h3{font:600 16px 'Barlow Condensed';letter-spacing:.08em;color:#c5f5ff;margin:8px 0}.focus-panel p{font-size:11px;color:#90a8b7;line-height:1.65}.text-link{border:none;background:none;color:#78d4eb;font:10px 'DM Mono';padding:11px 0 0}.close-focus{float:right;border:0;background:none;color:#8ca5bb;font-size:17px}.view-crosshair{position:absolute;z-index:2;left:50%;top:50%;color:rgba(129,235,255,.6);font:23px 'DM Mono';transform:translate(-50%,-50%);pointer-events:none;display:none}
#labelsLayer{position:absolute;inset:0;z-index:2;pointer-events:none}.world-label{position:absolute;transform:translate(-50%,-50%);font:9px 'DM Mono';letter-spacing:.1em;white-space:nowrap;padding:5px 9px;background:rgba(4,19,34,.69);border:1px solid rgba(91,197,230,.34);color:#b8e4f1;text-shadow:0 1px 3px #061124;transition:opacity .13s}.world-label:before{content:'◈';color:#85dff1;margin-right:6px}
#toast{position:absolute;top:105px;left:50%;transform:translateX(-50%);z-index:7;background:rgba(9,30,45,.93);border:1px solid #4686a2;color:#c7eefb;padding:9px 17px;font:10px 'DM Mono';opacity:0;pointer-events:none;transition:opacity .25s}#toast.show{opacity:1}
.loading{position:absolute;z-index:15;inset:0;display:grid;place-items:center;background:#040a14;transition:opacity .65s;pointer-events:none}.loading.done{opacity:0}.loading-content{text-align:center}.loading-mark{font:800 89px/.9 'Barlow Condensed';letter-spacing:-7px;color:#d9f3ff}.loading-mark span{color:#c78e54}.loading-bar{width:220px;height:2px;background:#15334a;margin:27px auto 11px;overflow:hidden}.loading-bar i{display:block;width:35%;height:100%;background:#76ddef;animation:load 1.4s ease-in-out infinite}.loading .mono{letter-spacing:.13em;color:#6f94b1}@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}
.modal-overlay{position:absolute;z-index:20;inset:0;background:rgba(1,6,12,.7);display:grid;place-items:center;backdrop-filter:blur(5px)}.modal-overlay[hidden]{display:none}.help-modal{width:min(650px,calc(100vw - 32px));padding:36px;max-height:90vh;overflow:auto}.help-modal h2{font:700 36px 'Barlow Condensed';margin:6px 0 12px}.help-modal>p,.help-grid p{color:#a1b5c3;line-height:1.8}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}.help-grid>div{border-top:1px solid var(--edge);padding-top:12px}.help-grid b{color:#aeeaf4}.help-grid p{font-size:11px;margin-top:5px}.primary{background:#76dce8;color:#04151e;border:0;padding:12px 23px;font:600 11px 'DM Mono';letter-spacing:.06em}.modal-close{float:right;border:0;background:transparent;font-size:23px;color:#a9b8c5}
@media(max-width:1150px){.rail{width:210px}.inspector{width:253px}.top-center{display:none}.rail-section{padding:17px 13px}.inspector-scroll{padding:11px 14px}.telemetry{gap:11px}.view-commands{gap:0}.mode{font-size:9px;padding:7px 5px}.bottom-stats{display:none}}
@media(max-width:840px){.topbar{top:10px;left:10px;right:10px;height:58px;padding:0 11px}.brand-name{font-size:20px}.overline{font-size:8px}.rail{top:79px;left:10px;bottom:auto;max-height:46vh;width:180px}.rail-section{padding:11px}.camera-list button{padding:3px}.hero-number{font-size:37px}.overview-grid{display:none}.station-section,.rail-bottom{display:none}.inspector{top:79px;right:10px;bottom:104px;width:214px}.inspector-head{height:62px;padding:0 10px}.inspector-head h2{font-size:23px}.state-badge{font-size:7px}.statusbar{bottom:10px;left:10px;right:10px;min-height:70px;padding:8px}.telemetry{gap:6px}.metric>span{font-size:7px}.metric strong{font-size:18px}.view-commands{flex-wrap:wrap;max-width:140px}.key-hint{display:none}.focus-panel{left:calc(50% - 140px);width:280px;bottom:93px}}
@media(max-width:560px){.rail{display:none}.inspector{width:188px;max-height:61vh;bottom:auto;background:rgba(7,18,32,.91)}.inspector-head{height:53px}.inspector-head h2{font-size:18px}.state-badge{display:none}.inspector-scroll{padding:7px 10px}.group-heading{margin:11px 0}.control{margin-bottom:13px}.switch-row{margin-bottom:10px}.statusbar{align-items:flex-start}.telemetry{display:grid;grid-template-columns:1fr 1fr;flex:1;gap:4px}.metric>span{font-size:6px}.metric strong{font-size:17px}.view-commands{max-width:128px}.mode{padding:5px;font-size:8px}.bottom-stats{display:none}.world-label{font-size:7px}.brand-icon{display:none}}