@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0b1016;--panel:#111820;--line:#25303a;--text:#e8edf2;--muted:#7c8b9a;--accent:#f0a35b;--green:#70c7ad;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Microsoft YaHei',sans-serif;font-size:13px}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{outline-offset:4px}button{font:inherit;cursor:pointer;color:inherit;background:#1a2530;border:1px solid #34414d;border-radius:5px;padding:10px 12px;transition:background .15s,transform .15s}button:hover:enabled{background:#293947}button:active:enabled{transform:translateY(1px)}button:disabled{opacity:.36;cursor:not-allowed}a{color:inherit;text-decoration:none}header{height:88px;border-bottom:1px solid var(--line);padding:0 36px;display:flex;align-items:center;gap:62px;background:#0e141b}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:700;letter-spacing:.6px}.brand svg{fill:none;stroke:var(--accent);stroke-width:1.6}.brand small{font:8px var(--mono);letter-spacing:2.8px;display:block;margin-top:5px;color:var(--muted)}.accent{color:var(--accent)}.header-context{border-left:1px solid var(--line);padding-left:30px;line-height:1.9}.tiny{font:9px var(--mono);color:var(--muted);letter-spacing:1.7px}.muted{color:var(--muted);font-size:11px}.header-right{display:flex;align-items:center;gap:24px;margin-left:auto}.badge{font-size:11px;color:var(--accent);background:#291f18;border:1px solid #504032;border-radius:20px;padding:7px 12px;white-space:nowrap}.badge i,.engine i,.log-footer i{display:inline-block;width:6px;height:6px;background:currentColor;border-radius:50%;margin-right:6px}.badge.online{color:var(--green);background:#152620;border-color:#29493d}.clock{font:11px var(--mono);color:var(--muted)}.api-link{font-size:11px;padding:8px 0}main{max-width:1740px;margin:auto;padding:30px 36px 28px}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font:10px var(--mono);letter-spacing:2px;color:var(--muted)}.eyebrow b{color:var(--accent);font-weight:400;margin-left:8px}h1{font-size:27px;letter-spacing:.3px;font-weight:600;margin:10px 0 0}h1 span{color:#5f707e;font-weight:400;font-size:16px;margin-left:15px}.engine{display:flex;align-items:center;color:#a6b8c5;font-size:12px;gap:9px}.engine i{color:var(--green)}.engine small{display:block;font:8px var(--mono);letter-spacing:1.5px;color:var(--muted);margin-top:5px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:22px}.visual-column{min-width:0}.panel,.camera-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}.panel-top{padding:12px 17px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.4px}.panel-top .muted{font:9px var(--mono);margin-left:10px}.live-dot{display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:8px;border-radius:50%}.camera-actions{display:flex;align-items:center;gap:8px}.camera-actions>span{font:9px var(--mono);color:var(--muted);margin-right:8px}.camera-actions button{border:0;background:transparent;padding:0 3px;font-size:18px}.camera-view{position:relative;aspect-ratio:16/9;min-height:280px;overflow:hidden;background:#060a0e}.camera-view>img{width:100%;height:100%;position:absolute;object-fit:contain;display:none}.camera-view.has-video>img{display:block}.camera-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#18232c 0,#0c131a 64%)}.camera-empty svg{stroke:#526474;fill:none;stroke-width:1.3;margin-bottom:10px}.camera-empty h2{font-size:17px;font-weight:500;color:#b5c2ce;margin:8px}.camera-empty p{font-size:11px;color:var(--muted);margin:6px 30px 19px;max-width:80%;text-align:center}.camera-empty>span{font:8px var(--mono);color:#50616f;letter-spacing:1.8px}.camera-view.has-video .camera-empty{display:none}.camera-hud{position:absolute;bottom:22px;left:24px;display:flex;gap:32px;z-index:2;text-shadow:0 1px 4px #000}.camera-hud span{font-size:9px;letter-spacing:1px;color:#abbcc7;display:block;margin-bottom:7px}.camera-hud strong{font:26px var(--mono);font-weight:400}.camera-hud em{font:10px var(--mono);font-style:normal;color:#a4b4be}.camera-label{position:absolute;top:19px;left:22px;font:10px var(--mono);letter-spacing:2px;color:#adbdc7}.camera-label span{margin-left:13px;font-size:8px;color:var(--accent);border:1px solid #756044;padding:3px 5px;letter-spacing:1px}.reticle{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border:1px solid #fff3;z-index:1;pointer-events:none}.camera-view:not(.has-video) .reticle{display:none}.reticle:before,.reticle:after{content:'';position:absolute;background:#fffc}.reticle:before{width:1px;height:9px;left:14px;top:10px}.reticle:after{height:1px;width:9px;top:14px;left:10px}.camera-footer{display:flex;justify-content:space-between;padding:13px 17px;font-size:9px;color:var(--muted)}.camera-footer>span:first-child{color:var(--green)}.camera-footer b{color:#485360;margin:0 5px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.panel-heading{padding:17px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202b35}.panel-heading h2{font-size:12px;font-weight:500;margin:0}.panel-heading h2 span{font:8px var(--mono);letter-spacing:1px;color:#637684;margin-left:8px}.tag{font:9px var(--mono);color:#90a0ae;border:1px solid #303d49;border-radius:3px;padding:3px 6px;white-space:nowrap}.map-wrap{height:198px;position:relative;background:#0d151b}#map{height:100%;width:100%;display:block}.map-north{position:absolute;top:12px;right:15px;font:10px var(--mono);color:#9baebd}.map-legend{position:absolute;bottom:12px;left:16px;font-size:8px;color:#9baebd}.map-legend i,.map-legend b{display:inline-block;width:7px;height:7px;border:1px solid #507c75;margin-right:4px}.map-legend b{background:var(--accent);border:0;margin-left:12px}.map-footer{display:flex;justify-content:space-between;padding:12px 17px;font:9px var(--mono);color:var(--muted);border-top:1px solid #202b35}.events{height:198px;overflow:auto;padding:6px 17px}.event{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #202a34;font-size:10px;line-height:1.6}.event time{font:9px var(--mono);color:#728695;white-space:nowrap;padding-top:3px}.event span{color:#bdcad4}.event-empty{color:#647582;font-size:11px;padding-top:30px;text-align:center}.log-footer{border-top:1px solid #202b35;padding:12px 17px;font-size:9px;color:var(--green)}.log-footer span{float:right;color:var(--muted);font:8px var(--mono)}aside{display:flex;flex-direction:column;gap:17px}.vehicle-title{display:flex;align-items:center;gap:12px;padding:18px}.vehicle-icon{font-size:32px;color:#819aa8;line-height:1}.vehicle-title h3{font-size:14px;font-weight:500;margin:0 0 5px}.vehicle-title>div>span{font:8px var(--mono);color:var(--muted)}.vehicle-status{font-size:9px;margin-left:auto;color:var(--accent)}.metrics{display:grid;grid-template-columns:1fr 1fr;padding:0 18px;gap:18px 8px}.metrics>div>span{font-size:9px;color:var(--muted);display:block;margin-bottom:6px}.metrics strong{font:18px var(--mono);font-weight:400}.metrics small{font-size:9px;color:var(--muted)}.coordinates{margin:17px 18px 10px;padding-top:8px;border-top:1px solid var(--line)}.coordinates>div{display:flex;justify-content:space-between;font:9px var(--mono);padding:6px 0}.coordinates span{color:var(--muted)}.coordinates b{font-weight:400;color:#bdcbd4}.control-panel{padding:0 18px 14px}.control-panel .panel-heading{padding:16px 0;border-bottom:0}.primary{background:var(--accent);color:#211b14;border-color:var(--accent);font-weight:600}.primary:hover:enabled{background:#ffc181}.wide{width:100%;text-align:center}.wide>span{float:right}.control-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}.control-row button{font-size:11px;padding:9px 3px;background:#17222b}.keyboard-heading{display:flex;justify-content:space-between;color:#718391;font-size:9px;margin-top:23px}.keyboard-heading label{color:#aab8c2;display:flex;align-items:center;gap:4px}input[type=checkbox]{accent-color:var(--accent);margin:0;width:12px;height:12px}.control-pad{display:flex;justify-content:space-between;align-items:center;margin:13px 0 20px;gap:8px}.control-pad button{width:37px;height:35px;font:12px var(--mono);padding:5px;background:#17212b;border-color:#35424e}.control-pad button.pressed{background:var(--accent);color:#151b20;border-color:var(--accent)}.wasd{text-align:center}.wasd>div{display:flex;gap:5px;margin-top:5px}.yaw-pad,.alt-pad{display:flex;flex-direction:column;gap:5px}.control-pad small{display:block;font:7px sans-serif;color:#869ba9;margin-top:2px}.speed-setting>label{display:flex;justify-content:space-between;font-size:10px;color:#8ea0ae}.speed-setting strong{font:11px var(--mono);color:#d6e0e5}.speed-setting small{font-size:9px;color:var(--muted)}input[type=range]{width:100%;height:3px;accent-color:var(--accent);margin:18px 0 12px;cursor:pointer}.speed-setting>div{display:flex;justify-content:space-between;font-size:8px;color:#5e7483}.control-note{font-size:9px;line-height:1.8;color:#637785;margin:20px 0 0;padding-top:12px;border-top:1px solid #25313a}.map-source{background:linear-gradient(115deg,#1a2229,#111a22);border:1px solid #34404a;border-radius:7px;padding:17px 18px}.map-source .eyebrow{font-size:8px;color:var(--accent);letter-spacing:1.5px}.map-source h3{font-size:13px;font-weight:500;margin:12px 0 8px}.map-source h3 span{float:right;color:var(--accent)}.map-source p{font-size:9px;color:#7f929e;margin:0 0 18px}.map-source>div{display:flex;justify-content:space-between;font:9px var(--mono);color:#a9bcc8}footer{border-top:1px solid var(--line);padding:18px 36px;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#5c6e7e}footer b{margin:0 9px;color:#364654}footer a{color:#98aab6;margin-left:8px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90vw;background:#29323b;border:1px solid #6c6359;border-radius:6px;padding:13px 24px;font-size:12px;box-shadow:0 5px 30px #0008;z-index:20;display:none}dialog{width:420px;max-width:90vw;padding:30px;background:#121c25;border:1px solid #3c4a54;border-radius:9px;color:var(--text)}dialog::backdrop{background:#04090fdc;backdrop-filter:blur(4px)}dialog h2{font-size:22px;margin:14px 0}dialog p{font-size:12px;line-height:1.8;color:var(--muted)}dialog label{font-size:11px;display:block;margin-top:20px}dialog input{display:block;width:100%;padding:12px;border-radius:4px;background:#0a1118;border:1px solid #3a4a56;margin:8px 0 18px;font:13px var(--mono)}#login-error{color:var(--accent)}.camera-panel:fullscreen{display:flex;flex-direction:column;background:#080c10}.camera-panel:fullscreen .camera-view{flex:1;aspect-ratio:auto}.camera-panel:fullscreen .camera-footer{padding:20px}@media(min-width:1450px){.workspace{grid-template-columns:minmax(0,1fr) 360px}.camera-view{max-height:640px}.control-pad button{width:42px}.control-pad{padding:0 12px}.vehicle-panel .metrics{gap:24px}.map-wrap,.events{height:230px}}@media(max-width:1050px){header{gap:20px;padding:0 22px}.header-context{display:none}.clock{display:none}main{padding:25px 22px}.workspace{grid-template-columns:minmax(0,1fr) 290px;gap:16px}.bottom-grid{grid-template-columns:1fr}.log-panel{display:none}.camera-footer>span:last-child{display:none}.camera-hud{gap:18px}.camera-hud strong{font-size:20px}.panel-heading h2 span{font-size:7px}.control-pad{gap:3px}.control-pad button{width:32px}.wasd>div{gap:4px}footer{padding:18px 22px}}@media(max-width:760px){header{height:72px;padding:0 16px}.brand{font-size:20px}.brand svg{width:29px}.header-right{gap:12px}.api-link{font-size:10px}.badge{font-size:10px;padding:6px 9px}main{padding:24px 16px}.page-title{margin-bottom:20px}h1{font-size:23px}h1 span{display:none}.engine{font-size:10px}.workspace{grid-template-columns:1fr}.camera-view{min-height:230px}.bottom-grid{grid-template-columns:1fr 1fr;gap:12px}.log-panel{display:block}.panel-heading{padding:13px 12px}.panel-heading h2 span{display:none}.map-wrap,.events{height:172px}.map-footer,.log-footer{font-size:8px;padding:10px}.log-footer span{display:none}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-panel{grid-column:2;grid-row:1 / span 2;padding:0 12px 12px}.map-source{padding:14px}.vehicle-panel .metrics{grid-template-columns:1fr;gap:12px}.vehicle-title{padding:14px 12px;gap:8px}.vehicle-icon{display:none}.vehicle-title h3{font-size:12px}.vehicle-title>div>span{font-size:7px}.coordinates{margin:13px 12px 7px}.metrics{padding:0 12px}.metrics strong{font-size:17px}.control-pad{flex-wrap:wrap;justify-content:center;gap:12px}.yaw-pad,.alt-pad{flex-direction:row}.wasd{order:-1;width:100%}.wasd>div{justify-content:center}.control-pad button{width:36px}.control-row{gap:4px}.control-row button{font-size:10px}.control-note{font-size:8px}.map-source h3{font-size:11px}.map-source p{line-height:1.8}.map-source>div{font-size:8px}.keyboard-heading{flex-direction:column;gap:9px}footer{padding:15px 16px;flex-direction:column;font-size:8px}.camera-hud{bottom:17px;left:17px;gap:23px}.camera-hud span{font-size:8px}.camera-label{left:17px;top:14px;font-size:8px}}

.session-bar{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:16px 18px;margin-bottom:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.session-picker,.session-actions{display:flex;align-items:center;gap:12px}.session-picker{flex:1;min-width:280px}.session-picker label{font-size:11px;color:var(--muted);white-space:nowrap}
.session-picker select{font:inherit;color:var(--text);background:#18232d;border:1px solid #34414d;padding:9px 30px 9px 10px;border-radius:5px;min-width:180px;max-width:340px;width:100%}
.session-actions button{white-space:nowrap;font-size:11px}.session-bar>p{width:100%;margin:0;font-size:10px;color:var(--muted);line-height:1.7}.session-actions .muted{white-space:nowrap}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}#session-error{color:var(--accent)}
.danger{color:#efb0a5;background:#322124;border-color:#714341}.danger:hover:enabled{background:#4a282b}#end-error{color:#efb0a5}
.map-picker{display:block;width:100%;padding:11px;margin-top:9px;border:1px solid #3a4a56;background:#0a1118;color:var(--text);border-radius:4px}
@media(max-width:760px){.session-bar{padding:14px}.session-picker{min-width:0;width:100%}.session-actions{width:100%;justify-content:flex-end}.session-picker select{min-width:0}.session-actions .muted{margin-right:auto;font-size:9px}}