:root{color-scheme:dark;--bg:#090e16;--panel:#111a26;--stroke:#263442;--accent:#5de3cd;--muted:#9aaebc;--text:#eef6f9;--low:#5de3cd;--medium:#f1bd69;--high:#ef8584;font-family:"D-DIN","苹方","PingFang SC",system-ui,sans-serif;font-variant-numeric:tabular-nums}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.topbar{height:74px;display:grid;grid-template-columns:minmax(215px,1fr) auto minmax(145px,1fr);align-items:center;gap:22px;padding:0 26px;background:#0d1420;border-bottom:1px solid #243242}.brand,.header-end,.live,.scene-sub,.path,.panel-head,.destination,.status-row,.timeline-header,.bottom-title,.playback,.legend,.legend span{display:flex;align-items:center}.brand{gap:12px}.brandmark{width:40px;height:40px;background:#132c36;border:1px solid #2a6870;color:var(--accent);border-radius:10px;display:grid;place-items:center}.brandmark svg{width:26px;fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;stroke-width:2.3}.brand strong{display:block;font-family:"D-DIN","苹方","PingFang SC",sans-serif;font-size:17px;font-weight:400;letter-spacing:0}.brand span{display:block;color:var(--muted);font-size:11px;letter-spacing:.16em;margin-top:3px}.views{display:flex;gap:4px;padding:4px;border:1px solid #283545;background:#0a111c;border-radius:9px}.views button{padding:9px 17px;white-space:nowrap;border:1px solid transparent;border-radius:6px;background:transparent;color:#aebdc9;font-size:13px}.views button:hover{color:#fff;background:#182635}.views button[aria-current=true]{border-color:#386a70;background:#153237;color:#a0f6e6}.header-end{justify-content:flex-end;gap:13px}.live{gap:7px;font-size:12px;color:#adc2c9;white-space:nowrap}.live i,.status-dot,.bottom-title>i{width:7px;height:7px;display:inline-block;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #5de3cd58}.icon-btn{width:37px;height:37px;display:grid;place-items:center;border-radius:7px;background:#141f2c;border:1px solid #344355;color:#d5e2e9}.icon-btn:hover,.icon-btn[aria-pressed=true]{border-color:#64c9bc;color:#b4fff0}.workspace{height:calc(100dvh - 256px);min-height:500px;position:relative;overflow:hidden;background:#151e27}#viewport,#viewport canvas,.vignette{position:absolute;inset:0;width:100%;height:100%;display:block}#viewport{touch-action:none}.vignette{pointer-events:none;background:linear-gradient(90deg,#08101a55,transparent 39%,transparent 67%,#08101a31),linear-gradient(0deg,#0a111a9e,transparent 17%,transparent 82%,#0a111a4a)}.scene-heading{position:absolute;top:27px;left:28px;text-shadow:0 1px 10px #07101a,0 2px 22px #07101a;pointer-events:none}.path,.scene-sub{gap:8px;font-size:12px;color:#e4edf1}.path>span:nth-child(2){opacity:.5}.line-symbol{background:#b94569;color:white;display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:4px;font-weight:700;font-size:13px;text-shadow:none}.scene-heading h1{font-size:33px;letter-spacing:.05em;margin:10px 0 7px;line-height:1.15}.scene-sub i{width:4px;height:4px;background:var(--accent);border-radius:50%}.tools{position:absolute;left:28px;bottom:21px;display:flex;gap:7px}.tools .icon-btn{background:#0b1722df}.monitor{position:absolute;right:24px;top:24px;width:243px;display:grid;gap:11px}.panel{background:#101b29ef;border:1px solid #3a4b5a;border-radius:10px;padding:14px 15px;box-shadow:0 10px 32px #02070c58}.panel-head{justify-content:space-between;gap:6px;margin-bottom:15px}.panel-head h2,.bottom-title h2{font-size:13px;letter-spacing:.035em;margin:0;font-weight:700;white-space:nowrap}.panel-head>span,.panel-foot,.metric-row small,.legend,.bottom-title span{font-size:11px;color:var(--muted)}.panel-head .phase-tag{border:1px solid #35615c;background:#17312f;color:#a1efdd;border-radius:4px;padding:3px 6px}.destination{gap:7px;font-size:12px}.destination>span:last-child{margin-left:auto;color:#a5b7c1;font-size:11px}.timer{font-size:45px;font-variant-numeric:tabular-nums;letter-spacing:.035em;color:#a2fae8;font-weight:600;margin:4px 0 7px}.progress{height:4px;border-radius:8px;background:#2a3c48;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .15s}.panel-foot{display:flex;justify-content:space-between;margin-top:8px}.metric-row{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}.metric-row>div+div{border-left:1px solid #354451;padding-left:15px}.metric-row strong{font-size:28px;font-variant-numeric:tabular-nums;font-weight:600}.metric-row span{font-size:11px;color:var(--muted);margin-left:4px}.metric-row small{display:block;margin-top:2px}.status-row{gap:7px;padding-top:10px;border-top:1px solid #354451;color:#c4d4dc;font-size:11px}.orientation{position:absolute;right:29px;bottom:23px;width:38px;height:38px;border:1px solid #cce0e05a;background:#0b172299;border-radius:50%;display:grid;place-items:center;color:#e4f1f1;pointer-events:none}.orientation svg{width:21px;fill:#bff2e9;grid-area:1/1}.orientation span{grid-area:1/1;font-size:9px;transform:translateY(-25px)}.viewport-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;color:#e0edf4;background:#0a1422b0;border:1px solid #b6d8e33d;border-radius:100px;padding:6px 11px;white-space:nowrap;pointer-events:none}.bottom{min-height:182px;display:grid;grid-template-columns:minmax(340px,1.05fr) minmax(425px,1fr);gap:16px;padding:14px 24px 16px;border-top:1px solid #314151;background:#0b121c}.timeline,.carriages{background:#101926;border:1px solid var(--stroke);border-radius:9px;padding:13px 15px}.timeline-header{justify-content:space-between;gap:6px}.bottom-title{gap:8px}.bottom-title>i{border-radius:2px}.bottom-title span{margin-left:3px;white-space:nowrap}.playback{gap:6px}.playback .icon-btn{width:30px;height:30px}.playback svg{width:15px;height:15px}.playback .primary{background:#1a3b3d;color:#a5fae6;border-color:#396c6b}.speed select{height:30px;border:1px solid #344355;border-radius:6px;background:#141f2c;color:#e4eef5;padding:0 4px;font-size:11px}.seek{display:block;margin-top:14px}.seek input{width:100%;height:14px;margin:0;cursor:pointer;accent-color:var(--accent)}.stage-buttons{display:flex;justify-content:space-between;gap:2px;margin-top:7px}.stage-buttons button{color:#acbfcb;font-size:11px;background:none;border:0;padding:4px 1px;display:flex;align-items:center;gap:4px;white-space:nowrap}.stage-buttons i{width:5px;height:5px;background:#718597;border-radius:50%}.stage-buttons .selected{color:var(--accent)}.stage-buttons .selected i{background:var(--accent)}.car-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:11px}.car-list button{min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px;background:#162332;border:1px solid #2a3b4d;border-radius:5px;padding:6px 5px 5px;text-align:left;color:#d4e1eb}.car-list button:hover,.car-list button[aria-current=true]{border-color:#5cb7ac;background:#1a373b}.car-list strong{font-size:10px;white-space:nowrap}.car-list b{font-size:11px;font-variant-numeric:tabular-nums;text-align:right}.car-shape{height:11px;border:1px solid #64808e80;border-radius:4px;grid-column:1/-1;display:flex;align-items:center;justify-content:space-evenly;margin-top:2px}.car-shape i{height:4px;width:15%;background:currentColor;opacity:.7;border-radius:1px}.low{color:var(--low)}.medium{color:var(--medium)}.high{color:var(--high)}.legend{gap:12px;margin-top:10px}.legend span{gap:4px}.legend i{width:6px;height:6px;background:currentColor;border-radius:50%}.loading{position:absolute;inset:0;display:flex;gap:10px;align-items:center;justify-content:center;background:#121d29;color:#cfe3eb;z-index:4}.loading i{border:2px solid #457076;border-top-color:#a2fae8;width:19px;height:19px;border-radius:50%;animation:spin 1s linear infinite}.loading.error i{display:none}@keyframes spin{to{transform:rotate(360deg)}}dialog{max-width:min(460px,calc(100% - 30px));color:var(--text);background:#141f2c;border:1px solid #445766;border-radius:12px;padding:18px;font-size:13px;line-height:1.65}dialog::backdrop{background:#050a11a6}dialog a{color:#8cf0dd}dialog ul{padding-left:20px}dialog li+li{margin-top:5px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1050px){.car-list button{grid-template-columns:1fr}.car-list b{text-align:left}.bottom{grid-template-columns:1fr 1fr}.car-shape{grid-column:1}.workspace{height:calc(100dvh - 254px)}}
@media(max-width:780px){.topbar{height:auto;min-height:104px;padding:10px 13px;gap:8px 10px;grid-template-columns:1fr auto}.views{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,1fr)}.views button{padding:7px 3px;font-size:12px}.header-end{grid-column:2;grid-row:1}.workspace{height:65dvh;min-height:470px}.monitor{right:10px;top:12px;width:153px;gap:6px}.panel{padding:8px}.panel-head{margin-bottom:7px}.panel-head h2{font-size:11px}.panel-head>span{font-size:9px}.destination{font-size:10px;gap:4px}.destination>span:last-child{display:none}.timer{font-size:34px}.metric-row strong{font-size:22px}.metric-row>div+div{padding-left:6px}.metric-row small,.panel-foot,.status-row{font-size:9px}.scene-heading{top:13px;left:12px}.scene-heading h1{font-size:24px}.scene-sub,.path{font-size:10px}.tools{left:11px;bottom:13px}.orientation{right:12px;bottom:13px}.viewport-hint{display:none}.bottom{grid-template-columns:1fr;padding:10px;gap:10px}.car-list button{grid-template-columns:1fr auto}.car-shape{grid-column:1/-1}}
@media(max-width:410px){.car-list button{grid-template-columns:1fr}.car-shape{grid-column:1}.stage-buttons button{font-size:10px}.live{font-size:10px}.header-end{gap:6px}.timeline,.carriages{padding:11px}}
.maximized .workspace{height:calc(100dvh - 74px)}.maximized .bottom{display:none}
.car-list button{position:relative;padding-bottom:7px}.car-shape{height:18px;border:1px solid #91a5ae;background:linear-gradient(180deg,#9daeb5 0%,#657984 31%,#304855 32%,#435967 67%,#a9b6b9 68%,#71838c 82%,#b94569 83%,#b94569 92%,#394854 93%);border-radius:3px;position:relative}.car-list button:first-child .car-shape{border-radius:23px 3px 2px 5px}.car-list button:last-child .car-shape{border-radius:3px 23px 5px 2px}.car-shape i{background:#122c3b;border:1px solid #87acb561;height:5px;margin-top:-2px;opacity:1}.car-list button:not(:last-child) .car-shape::after{content:"";position:absolute;top:9px;left:100%;width:12px;height:3px;background:#71818b;z-index:2}.car-list button:first-child .car-shape i:first-child,.car-list button:last-child .car-shape i:last-child{background:#84a6ae}
.fare-gate-panel{position:absolute;bottom:58px;left:28px;z-index:2;min-width:270px;padding:11px 12px;background:rgba(10,18,27,.94);border:1px solid #354b56;border-radius:10px;color:#eaf5f4;box-shadow:0 5px 20px #09111b45}
.fare-gate-heading,.fare-gate-actions{display:flex;align-items:center;gap:8px}
.fare-gate-heading{justify-content:space-between;margin-bottom:10px;font-size:13px}
#fare-gate-status{font-size:12px;color:var(--gate-color,#e19a70)}
.fare-gate-actions label{font-size:12px;color:#b9c9d1}
.fare-gate-actions button,.fare-gate-actions select{border:1px solid #46606b;color:#e6f4f2;background:#172831;border-radius:6px;padding:6px 8px;font-size:12px;font-family:inherit}
#fare-gate-scan{background:#153c35;border-color:#317366;color:#9bf2d2}
.fare-gate-actions button:disabled{opacity:.56;cursor:default}
.fare-gate-actions :focus-visible{outline:2px solid #7fdbca;outline-offset:2px}
@media(max-width:640px){.fare-gate-panel{left:14px;bottom:58px;min-width:0;max-width:calc(100% - 28px)}}
.tools .people-toggle{width:auto;min-width:102px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:12px}
.people-toggle svg{width:17px;height:17px;flex:0 0 17px}
.people-slash{display:none}
.tools .people-toggle[aria-checked="false"]{border-color:#57a39b;color:#b3fff1;background:#102e34}
.people-toggle[aria-checked="false"] .people-slash{display:inline}
.people-toggle:focus-visible{outline:2px solid #7fdbca;outline-offset:2px}

.tools #toggle-cctv[aria-expanded="true"]{border-color:#57a39b;color:#b3fff1;background:#102e34}
.cctv-panel{position:absolute;z-index:3;left:28px;top:122px;width:294px;padding:9px;color:#e6f1f2;background:#0b1722f2;border:1px solid #3c525e;border-radius:11px;box-shadow:0 9px 27px #07121c5c}
.cctv-header,.cctv-actions,.cctv-source,.cctv-sim{display:flex;align-items:center}
.cctv-header{justify-content:space-between;gap:6px;margin-bottom:7px}
.cctv-header h2{font-size:13px;margin:0;white-space:nowrap}
.cctv-actions{gap:3px}
.cctv-actions .icon-btn{width:27px;height:27px;background:#142632}
.cctv-actions svg{width:14px;height:14px}
.cctv-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #324855;border-radius:6px;background:#152632}
#cctv-feed{display:block;width:100%;height:100%;object-fit:fill}
.cctv-overlay{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:end;gap:4px;padding:6px 7px;pointer-events:none;background:linear-gradient(transparent 70%,#071119c9)}
.cctv-overlay span,.cctv-overlay time{font-size:10px;white-space:nowrap;text-shadow:0 1px 4px #000}
.cctv-overlay time{font-variant-numeric:tabular-nums;color:#d2e0e4}
.cctv-source{justify-content:space-between;gap:5px;margin-top:8px}
.cctv-source select{min-width:0;flex:1;padding:5px 6px;border:1px solid #3c525e;border-radius:6px;background:#142632;color:#e6f1f2;font:inherit;font-size:11px}
.cctv-sim{gap:4px;padding-left:3px;font-size:10px;white-space:nowrap;color:#a8dcd4}
.cctv-sim i{width:5px;height:5px;border-radius:100%;background:#6adfc0}
.cctv-panel.is-expanded{top:50%;left:50%;width:min(760px,calc(100% - 26px),calc((100% - 108px) * 16 / 9));transform:translate(-50%,-50%);z-index:4;padding:12px}
#cctv-panel:fullscreen{position:fixed!important;inset:0!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:clamp(12px,2vw,28px)!important;transform:none!important;z-index:2147483647!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;border:0!important;border-radius:0!important;background:#0d171ff7!important;box-shadow:none!important;backdrop-filter:none!important}
#cctv-panel:fullscreen .cctv-header{margin:0}
#cctv-panel:fullscreen .cctv-header h2{font-size:18px}
#cctv-panel:fullscreen .cctv-actions .icon-btn{width:42px;height:42px}
#cctv-panel:fullscreen .cctv-actions svg{width:19px;height:19px}
#cctv-panel:fullscreen .cctv-frame{width:100%;height:auto;min-height:0;align-self:stretch;aspect-ratio:auto;display:grid;place-items:center;border-radius:10px;background:#071119}
#cctv-panel:fullscreen #cctv-feed{width:100%;height:100%;object-fit:contain}
#cctv-panel:fullscreen .cctv-overlay{padding:14px 16px}
#cctv-panel:fullscreen .cctv-overlay span,#cctv-panel:fullscreen .cctv-overlay time{font-size:14px}
#cctv-panel:fullscreen .cctv-source{margin:0;gap:12px}
#cctv-panel:fullscreen .cctv-source select{padding:10px 12px;font-size:14px}
#cctv-panel:fullscreen .cctv-sim{font-size:13px}
@media(max-width:780px){.cctv-panel{top:111px;left:11px;width:min(258px,calc(100% - 178px));padding:6px}.cctv-header{margin-bottom:5px}.cctv-header h2{font-size:11px}.cctv-actions .icon-btn{width:23px;height:23px}.cctv-source{margin-top:5px;flex-wrap:wrap}.cctv-sim{font-size:9px}.cctv-overlay{padding:3px}.cctv-overlay span,.cctv-overlay time{font-size:8px}}
.workspace[data-scene=city] .vignette{opacity:.35}
.workspace[data-scene=city] .scene-heading{color:#172e39;text-shadow:none}
.workspace[data-scene=city] .path,.workspace[data-scene=city] .scene-sub{color:#314d5a;text-shadow:none}
.workspace[data-scene=city] .scene-heading h1{text-shadow:0 1px 10px #f7fafce0}
.workspace[data-scene=city] .monitor{display:none}
.city-pin{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 19px));display:flex;align-items:center;gap:7px;white-space:nowrap;background:#183240;color:#f4fbfb;border:1px solid #9bd9d4;border-radius:7px;padding:7px 10px;box-shadow:0 4px 13px #19323a4f;font-size:13px;font-weight:700}
.city-pin:hover{background:#235263}
.city-pin::before{content:"";position:absolute;width:1px;height:19px;background:#183240;top:100%;left:50%;pointer-events:none}
.city-pin::after{content:"";position:absolute;width:7px;height:7px;border:2px solid #edf9f7;border-radius:50%;background:#25746e;top:calc(100% + 16px);left:50%;transform:translateX(-50%);pointer-events:none}
.city-pin .line-symbol{font-size:11px;width:17px;height:17px}
@media(max-width:780px){.views{grid-template-columns:repeat(5,minmax(0,1fr))}.views button{padding-inline:2px}}

/* Immersive full-screen scene with floating controls */
html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
body{min-width:320px}
main{position:static}
.workspace{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;z-index:0}
.topbar{position:fixed;inset:0 0 auto;z-index:10;height:68px;grid-template-columns:minmax(190px,1fr) auto minmax(130px,1fr);gap:16px;padding:0 22px;background:linear-gradient(180deg,rgba(8,15,24,.96),rgba(11,20,31,.82));border-bottom:1px solid #69808b36;backdrop-filter:blur(16px) saturate(1.2)}
.views{box-shadow:0 6px 24px #02060a45}
.scene-heading{top:91px;left:25px}
.monitor{z-index:6;top:87px;right:18px;width:min(242px,calc(100vw - 32px))}
.panel{background:rgba(13,24,36,.82);backdrop-filter:blur(14px) saturate(1.15);box-shadow:0 12px 34px #02060c5c}
.tools{z-index:7;left:22px;bottom:153px}
.tools .icon-btn{background:rgba(9,20,31,.86);backdrop-filter:blur(10px)}
.orientation{z-index:3;right:22px;bottom:153px;background:rgba(9,20,31,.72);backdrop-filter:blur(10px)}
.viewport-hint{z-index:3;bottom:159px;background:rgba(8,17,28,.72);backdrop-filter:blur(8px)}
.bottom{position:fixed;z-index:8;left:20px;right:20px;bottom:16px;min-height:0;grid-template-columns:minmax(340px,1.18fr) minmax(360px,.82fr);gap:12px;padding:0;border:0;background:transparent;pointer-events:none}
.bottom>*{min-width:0;pointer-events:auto}
.timeline,.carriages{background:linear-gradient(145deg,rgba(12,22,34,.91),rgba(13,24,36,.84));border-color:#8195a23b;box-shadow:0 14px 42px #02060c70;backdrop-filter:blur(18px) saturate(1.15)}
.timeline{padding:11px 14px 10px}
.carriages{padding:11px 13px 10px}
.seek{margin-top:9px}
.car-list{margin-top:7px}
.legend{margin-top:7px}
.fare-gate-panel{z-index:8;bottom:205px;left:22px;background:rgba(10,18,27,.88);backdrop-filter:blur(14px)}
.cctv-panel{z-index:9;top:87px;left:22px;background:rgba(9,20,31,.91);backdrop-filter:blur(16px)}
.cctv-panel.is-expanded{z-index:11}
.city-pin{z-index:5}
.maximized .workspace{height:100dvh}
.maximized .bottom{display:grid}
@media(max-width:1050px){
  .topbar{grid-template-columns:minmax(170px,1fr) auto minmax(108px,.7fr);gap:9px;padding-inline:15px}
  .views button{padding-inline:11px}
  .bottom{grid-template-columns:minmax(300px,1.12fr) minmax(330px,.88fr);left:14px;right:14px}
  .monitor{right:14px}
}
@media(max-width:780px){
  .topbar{height:96px;min-height:0;padding:5px 10px 7px;gap:4px 8px;grid-template-columns:1fr auto;grid-template-rows:42px 38px}
  .brand{gap:8px}
  .brandmark{width:34px;height:34px}
  .brand strong{font-size:14px}
  .brand span{font-size:9px;margin-top:1px}
  .header-end{grid-column:2;grid-row:1;gap:7px}
  .views{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:3px}
  .views button{padding:6px 2px;font-size:11px}
  .scene-heading{top:108px;left:12px}
  .scene-heading h1{font-size:24px;margin:7px 0 4px}
  .monitor{top:103px;right:10px;width:151px;gap:6px}
  .panel{padding:8px}
  .panel-head{margin-bottom:7px}
  .panel-head h2{font-size:11px}
  .panel-head>span{font-size:9px}
  .destination{font-size:10px;gap:4px}
  .destination>span:last-child{display:none}
  .timer{font-size:32px;margin:2px 0 5px}
  .metric-row{margin-bottom:6px}
  .metric-row strong{font-size:21px}
  .metric-row>div+div{padding-left:6px}
  .metric-row small,.panel-foot,.status-row{font-size:9px}
  .status-row{padding-top:6px}
  .bottom{display:contents}
  .bottom .timeline{position:fixed;z-index:8;left:10px;right:10px;bottom:9px;pointer-events:auto}
  .bottom .carriages{position:fixed;z-index:8;left:10px;right:10px;bottom:127px;pointer-events:auto}
  .timeline,.carriages{padding:9px 10px 8px}
  .bottom-title h2{font-size:12px}
  .seek{margin-top:7px}
  .stage-buttons{margin-top:4px}
  .stage-buttons button{font-size:10px}
  .car-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:6px}
  .car-list button{grid-template-columns:1fr auto;padding:4px 3px}
  .car-list strong,.car-list b{font-size:9px}
  .car-shape{grid-column:1/-1;height:14px}
  .legend{margin-top:5px;font-size:9px}
  .tools{left:10px;bottom:225px;gap:5px}
  .tools>.icon-btn{width:33px;height:33px}
  .tools .people-toggle{min-width:92px;padding-inline:7px;font-size:11px}
  .orientation{right:11px;bottom:225px;width:34px;height:34px}
  .viewport-hint{bottom:229px;font-size:10px;padding:5px 8px}
  .fare-gate-panel{left:10px;bottom:275px;max-width:calc(100% - 20px)}
  .cctv-panel{top:101px;left:10px;width:min(258px,calc(100% - 174px));padding:6px}
  .cctv-header{margin-bottom:5px}
  .cctv-header h2{font-size:11px}
  .cctv-actions .icon-btn{width:23px;height:23px}
  .cctv-source{margin-top:5px;flex-wrap:wrap}
  .cctv-sim{font-size:9px}
  .cctv-overlay{padding:3px}
  .cctv-overlay span,.cctv-overlay time{font-size:8px}
}
@media(max-width:460px){
  .topbar{height:92px;grid-template-rows:39px 37px}
  .brandmark{width:31px;height:31px}
  .brand strong{font-size:13px}
  .live{font-size:9px}
  .header-end{gap:5px}
  .header-end .icon-btn{width:32px;height:32px}
  .views button{font-size:10px}
  .scene-heading{top:102px}
  .monitor{top:98px;width:143px}
  .tools{bottom:220px}
  .orientation{bottom:220px}
  .viewport-hint{display:none}
  .fare-gate-panel{bottom:270px}
}
@media(max-height:650px) and (min-width:781px){
  .topbar{height:58px}
  .scene-heading{top:76px}
  .monitor,.cctv-panel{top:74px}
  .bottom{bottom:8px}
  .timeline,.carriages{padding-top:7px;padding-bottom:6px}
  .seek{margin-top:5px}
  .stage-buttons{margin-top:2px}
  .tools,.orientation{bottom:126px}
  .viewport-hint{bottom:130px}
  .fare-gate-panel{bottom:180px}
}
.path>span:nth-child(2){opacity:1}.path .separator{opacity:.5}
.city-pin:disabled{cursor:default}.city-pin:disabled #city-pin-action{display:none!important}

/* Let the three-dimensional scene continue behind the floating top navigation. */
.topbar{
  background:linear-gradient(180deg,rgba(7,13,21,.12) 0%,rgba(7,13,21,.045) 62%,transparent 100%);
  border-bottom-color:transparent;
  backdrop-filter:blur(4px) saturate(1.12);
  box-shadow:none;
}
.topbar .brand strong,.topbar .brand span,.topbar .live{ text-shadow:0 1px 8px rgba(1,6,12,.7) }
.topbar .brandmark{
  background:rgba(19,44,54,.72);
  border-color:rgba(86,184,181,.52);
  box-shadow:0 4px 18px rgba(1,8,13,.22);
  backdrop-filter:blur(12px) saturate(1.25);
}
.topbar .views{
  background:rgba(8,17,28,.54);
  border-color:rgba(151,179,192,.27);
  box-shadow:0 5px 20px rgba(1,6,12,.24);
  backdrop-filter:blur(14px) saturate(1.3);
}
.topbar .views button{ text-shadow:0 1px 6px rgba(1,6,12,.55); transition:background .18s ease,border-color .18s ease,color .18s ease }
.topbar .views button:hover{ background:rgba(31,48,62,.66) }
.topbar .views button[aria-current=true]{
  background:rgba(21,50,55,.78);
  border-color:rgba(103,218,202,.56);
  box-shadow:inset 0 0 16px rgba(72,209,188,.09),0 2px 10px rgba(1,7,13,.2);
}
.topbar .icon-btn{ background:rgba(20,31,44,.62);backdrop-filter:blur(10px) }

.scene-transition{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(8,18,29,.28),rgba(4,10,18,.56));backdrop-filter:blur(1px) saturate(.82)}
.views button,.car-list button,.stage-buttons button,.icon-btn,.fare-gate-actions button,.speed select{will-change:transform,opacity}
.views button,.car-list button,.stage-buttons button,.fare-gate-actions button,.speed select{transition:color .24s ease,background-color .24s ease,border-color .24s ease,box-shadow .24s ease}

body.panels-hiding .topbar,body.panels-hiding .scene-heading,body.panels-hiding #monitor,body.panels-hiding .bottom,body.panels-hiding .orientation,body.panels-hiding #viewport-hint,body.panels-hiding #city-pin,body.panels-hiding #layer-control,body.panels-hiding #fare-gate-panel,body.panels-hiding #cctv-panel,body.panels-hiding .tools>*:not(#hide){pointer-events:none!important}
body.panels-hidden .topbar,body.panels-hidden .scene-heading,body.panels-hidden #monitor,body.panels-hidden .bottom,body.panels-hidden .orientation,body.panels-hidden #viewport-hint,body.panels-hidden #city-pin,body.panels-hidden #layer-control,body.panels-hidden #fare-gate-panel,body.panels-hidden #cctv-panel,body.panels-hidden .tools>*:not(#hide){opacity:0!important;visibility:hidden!important;pointer-events:none!important}

.topbar{background:linear-gradient(180deg,rgba(7,14,23,.96),rgba(9,18,29,.90));border-bottom-color:rgba(135,164,178,.28);backdrop-filter:blur(14px) saturate(1.18);box-shadow:0 5px 22px rgba(1,6,12,.28)}
.topbar .brand strong{color:#f4f9fb}
.topbar .brand span{color:#d2e1e8;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.topbar .live{color:#d7e5e9;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.topbar .views button{color:#c8d6dd}

/* Light operations-dashboard palette inspired by the supplied reference. */
:root{
  color-scheme:light;
  --bg:#edf1f3;
  --panel:#f8fafb;
  --stroke:#d7e0e4;
  --accent:#eb7046;
  --muted:#74838c;
  --text:#263740;
  --low:#4d9b6b;
  --medium:#dca344;
  --high:#d65f59;
}
body{background:#edf1f3;color:#263740}
button{color:#30424c}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline-color:#eb7046}
.workspace{background:#e8edf0}
.vignette{background:linear-gradient(90deg,rgba(41,58,66,.08),transparent 32%,transparent 70%,rgba(41,58,66,.055)),linear-gradient(0deg,rgba(36,52,60,.08),transparent 24%,transparent 78%,rgba(255,255,255,.08))}

.topbar{
  background:rgba(248,250,251,.415);
  border-bottom:1px solid rgba(169,183,190,.42);
  box-shadow:0 5px 24px rgba(46,65,75,.08);
  backdrop-filter:blur(16px) saturate(1.1);
}
.topbar .brand strong,.topbar .brand span,.topbar .live{color:#2d3d46;text-shadow:none}
.topbar .brand span{color:#71808a}
.topbar .live i{background:#51a77a;box-shadow:0 0 9px rgba(81,167,122,.28)}
.topbar .views{
  background:rgba(255,255,255,.37);
  border-color:#d7e0e4;
  box-shadow:0 4px 16px rgba(43,61,70,.08);
  backdrop-filter:blur(12px);
}
.topbar .views button{color:#5e6c74;text-shadow:none}
.topbar .views button:hover{color:#263740;background:#f0f3f4}
.topbar .views button[aria-current=true]{
  color:#fff;
  background:#eb7046;
  border-color:#eb7046;
  box-shadow:0 3px 9px rgba(211,95,56,.2);
}
.topbar .icon-btn,.icon-btn{
  color:#51636d;
  background:rgba(255,255,255,.82);
  border-color:#d2dce1;
  box-shadow:0 3px 12px rgba(43,61,70,.08);
  backdrop-filter:blur(10px);
}
.icon-btn:hover,.icon-btn[aria-pressed=true],.tools #toggle-cctv[aria-expanded=true]{
  color:#c75a35;
  border-color:#ee966e;
  background:#fff8f4;
}

.scene-heading{
  color:#293b45;
  background:rgba(248,250,251,.416);
  border:0;
  border-radius:11px;
  padding:11px 15px 12px;
  box-shadow:0 8px 24px rgba(41,59,69,.11);
  backdrop-filter:blur(15px) saturate(1.08);
  text-shadow:none;
}
.scene-heading h1{color:#263740;text-shadow:none}
.path,.scene-sub,.workspace[data-scene=city] .path,.workspace[data-scene=city] .scene-sub{color:#5c707b;text-shadow:none}
.workspace[data-scene=city] .scene-heading{color:#293b45;background:rgba(248,250,251,.416);box-shadow:0 8px 24px rgba(41,59,69,.09)}
.workspace[data-scene=city] .scene-heading h1{color:#263740;text-shadow:none}
.line-symbol{background:#d45c61;color:#fff}
.scene-sub i{background:#eb7046}

.panel{
  color:#2b3d47;
  background:rgba(250,252,253,.89);
  border-color:rgba(205,217,222,.94);
  box-shadow:0 10px 26px rgba(37,56,66,.12);
  backdrop-filter:blur(16px) saturate(1.08);
}
.panel-head h2,.bottom-title h2{color:#2d3e47}
.panel-head>span,.panel-foot,.metric-row small,.legend,.bottom-title span{color:#77868f}
.panel-head .phase-tag{background:#eaf5ed;border-color:#c5e1cc;color:#4a8e60}
.destination{color:#4c606a}
.destination>span:last-child{color:#788790}
.timer{color:#de7045}
.progress{background:#e4e9eb}
.progress i{background:#eb7046}
.metric-row>div+div{border-left-color:#dce3e6}
.metric-row strong{color:#30424c}
.metric-row span{color:#71808a}
.status-row{color:#536872;border-top-color:#dce3e6}
.status-dot{background:#58a777;box-shadow:0 0 9px rgba(88,167,119,.28)}

.bottom{border:0;background:transparent}
.timeline,.carriages{
  color:#2d3e47;
  background:rgba(250,252,253,.91);
  border:1px solid rgba(205,217,222,.95);
  box-shadow:0 9px 25px rgba(37,56,66,.13);
  backdrop-filter:blur(18px) saturate(1.08);
}
.bottom-title>i{background:#eb7046;box-shadow:0 0 8px rgba(235,112,70,.22)}
.playback .icon-btn.primary{color:#fff;background:#eb7046;border-color:#eb7046}
.speed select,.fare-gate-actions button,.fare-gate-actions select,.cctv-source select{
  color:#40545e;background:#fff;border-color:#d0dbe0;
}
.seek input{accent-color:#eb7046}
.stage-buttons button{color:#6d7c84}
.stage-buttons i{background:#b8c3c8}
.stage-buttons .selected{color:#c95b36}
.stage-buttons .selected i{background:#eb7046}
.car-list button{color:#40525c;background:rgba(246,248,249,.88);border-color:#dce3e6}
.car-list button:hover{border-color:#efaa8d;background:#fff8f4}
.car-list button[aria-current=true]{color:#b95534;border-color:#eb7046;background:#fff2ec;box-shadow:inset 0 0 0 1px rgba(235,112,70,.12)}
.car-shape{
  border-color:#aebbc1;
  background:linear-gradient(180deg,#f8fafb 0%,#d8e0e3 26%,#aebbc1 27%,#e8edef 69%,#c5d0d4 70%,#f3f6f7 81%,#eb7046 82%,#eb7046 92%,#bbc7cc 93%);
}
.car-shape i{background:#657780;border:1px solid #fff;height:5px;opacity:.92}
.car-list button:not(:last-child) .car-shape::after{background:#9aaab1}
.car-list button:first-child .car-shape i:first-child,.car-list button:last-child .car-shape i:last-child{background:#5a8569}
.low{color:#4d9b6b}.medium{color:#d09a3c}.high{color:#cf5d58}
.legend i.low{background:#4d9b6b}.legend i.medium{background:#d09a3c}.legend i.high{background:#cf5d58}

.tools .icon-btn{background:rgba(250,252,253,.9)}
.tools .people-toggle[aria-checked=false]{color:#bd5937;background:#fff3ed;border-color:#eb9a76}
.people-slash{stroke:#d96743}
.orientation{color:#536771;background:rgba(250,252,253,.86);border-color:#d4dee2;box-shadow:0 4px 12px rgba(43,61,70,.09)}
.orientation svg{fill:#eb7046}
.viewport-hint{color:#4b606a;background:rgba(250,252,253,.89);border-color:#d7e0e4;box-shadow:0 3px 12px rgba(43,61,70,.08);backdrop-filter:blur(10px)}
.city-pin{color:#33464f;background:rgba(250,252,253,.94);border-color:#d0dce0;box-shadow:0 5px 16px rgba(37,56,66,.15)}
.city-pin:hover{color:#ae4f30;background:#fff5f0}
.city-pin::before{background:#aab9bf}
.city-pin::after{border-color:#fff;background:#eb7046}
.city-pin .line-symbol{background:#eb7046}
.floor-pin{z-index:4;transform:translate(-50%,-50%);gap:6px;padding:7px 9px;background:rgba(250,252,253,.96);color:#33464f;border-color:#d0dce0;box-shadow:0 5px 16px rgba(37,56,66,.18);transition:background .18s,color .18s,box-shadow .18s}
.floor-pin:hover{background:#fff5f0;color:#ae4f30;box-shadow:0 7px 18px rgba(37,56,66,.22)}
.floor-pin::before,.floor-pin::after{display:none}
.floor-pin strong{font-weight:700}
body.panels-hiding .floor-pin{pointer-events:none!important}
body.panels-hidden .floor-pin{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

.fare-gate-panel,.cctv-panel{
  color:#30434d;
  background:rgba(250,252,253,.92);
  border-color:#d1dde1;
  box-shadow:0 8px 24px rgba(37,56,66,.14);
  backdrop-filter:blur(16px) saturate(1.08);
}
.fare-gate-heading,.cctv-header h2{color:#334650}
#fare-gate-status{color:#c87243}
.fare-gate-actions label,.cctv-sim{color:#708089}
#fare-gate-scan{color:#4d8e62;background:#edf7ef;border-color:#c7e2ce}
.fare-gate-actions :focus-visible{outline-color:#eb7046}
.cctv-frame{border-color:#d8e1e4;background:#edf1f3}
.cctv-source select{color:#455a64}
.cctv-overlay{background:linear-gradient(transparent 70%,rgba(21,35,43,.65))}
.cctv-overlay span,.cctv-overlay time{color:#fff}
.cctv-sim i{background:#54a276}
.loading{color:#415862;background:rgba(239,243,245,.95)}
.loading i{border-color:#d0dce0;border-top-color:#eb7046}
dialog{color:#30424c;background:#fbfcfc;border-color:#d2dde1;box-shadow:0 12px 40px rgba(35,54,64,.2)}
dialog a{color:#c75b36}
.scene-transition{background:radial-gradient(ellipse at center,rgba(255,255,255,.24),rgba(227,234,237,.43));backdrop-filter:blur(1px) saturate(.98)}
#countdown{filter:none!important}
#fare-gate-status{display:inline-flex;align-items:center;gap:5px;color:var(--gate-color,#c87243)}
#fare-gate-status::before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--gate-color,#c87243);box-shadow:0 0 7px color-mix(in srgb,var(--gate-color,#c87243) 45%,transparent)}
#fare-gate-status[data-phase="checking"]::before,#fare-gate-status[data-phase="opening"]::before,#fare-gate-status[data-phase="open"]::before,#fare-gate-status[data-phase="closing"]::before{animation:fare-gate-pulse .9s ease-in-out infinite alternate}
@keyframes fare-gate-pulse{from{transform:scale(.82);opacity:.58}to{transform:scale(1.34);opacity:1}}

@media(max-width:780px){
  .topbar{background:rgba(248,250,251,.46);box-shadow:0 4px 16px rgba(43,61,70,.09)}
  .scene-heading{padding:8px 10px;border-radius:9px}
  .monitor .panel{background:rgba(250,252,253,.93)}
  .bottom .timeline,.bottom .carriages{background:rgba(250,252,253,.95)}
  .tools .people-toggle{color:#51636d}
  .fare-gate-panel{background:rgba(250,252,253,.96)}
  .cctv-panel{background:rgba(250,252,253,.96)}
}
@media(min-width:781px){
  .tools{
    left:auto;
    right:19px;
    bottom:178px;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:5px;
    border:1px solid rgba(205,217,222,.95);
    border-radius:13px;
    background:rgba(250,252,253,.82);
    box-shadow:0 7px 20px rgba(37,56,66,.13);
    backdrop-filter:blur(15px);
  }
  .tools>.icon-btn,.tools .people-toggle{width:37px;height:37px;min-width:37px;padding:0}
  .tools .people-toggle span{display:none}
  .tools .people-toggle{gap:0}
}
@media(max-width:780px){
  .tools{left:10px;right:auto;bottom:225px;flex-direction:row;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
  .tools .people-toggle span{display:inline}
}
@media(min-width:781px){
  .monitor{right:80px}
  .orientation{right:19px}
}

.tools{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}

.monitor .panel,.bottom .timeline,.bottom .carriages{background:rgba(248,250,251,.416);border-color:rgba(169,183,190,.42);box-shadow:0 8px 22px rgba(46,65,75,.08);backdrop-filter:blur(16px) saturate(1.1)}

.layer-control{position:absolute;z-index:6;top:86px;right:340px;width:226px;padding:12px 13px;border:1px solid rgba(169,183,190,.56);border-radius:11px;background:rgba(248,250,251,.80);box-shadow:0 8px 24px rgba(46,65,75,.11);backdrop-filter:blur(16px) saturate(1.12);color:#2e414a}
.layer-control-head,.layer-range-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.layer-control-head strong{display:flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap;font-size:12px;letter-spacing:.03em}
.layer-control-head strong i{width:7px;height:7px;border-radius:2px;background:#eb7046;box-shadow:0 0 8px #eb704640}
.layer-control-head output{margin-left:auto;color:#bf5d3a;font-family:"D-DIN",sans-serif;font-size:11px;font-variant-numeric:tabular-nums}
.layer-control-head button{border:0;background:transparent;color:#74858d;font-size:10px;padding:3px 5px}
.layer-control-head button:hover:not(:disabled){color:#bc5736}
.layer-control-head button:disabled{opacity:.45;cursor:default}
.layer-control-head .layer-panel-toggle{display:none;width:24px;height:24px;place-items:center;padding:2px;border:1px solid #d4dfe2;border-radius:5px;background:rgba(255,255,255,.56)}
.layer-panel-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s}
.layer-panel-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.layer-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:7px 0 8px}
.layer-stack span{display:grid;justify-items:center;gap:3px;min-width:0;color:#60717a;font-size:9px;white-space:nowrap}
.layer-stack b{display:grid;place-items:center;width:27px;height:20px;border:1px solid #cbd8dc;border-radius:5px;background:rgba(255,255,255,.7);color:#b45335;font-family:"D-DIN",sans-serif;font-size:10px}
.layer-range-label{font-size:10px;color:#6b7d85}
.layer-range-label output{color:#bf5d3a;font-family:"D-DIN",sans-serif;font-size:11px;font-variant-numeric:tabular-nums}
#layer-spread{display:block;width:100%;height:13px;margin:3px 0 7px;accent-color:#eb7046;cursor:pointer}
.layer-actions{display:flex;gap:6px}
.layer-toggle{flex:1;min-height:30px;border:1px solid #e08a68;border-radius:6px;background:linear-gradient(135deg,#f07c51,#e76542);box-shadow:0 3px 8px #d7603b38;color:white;font-size:11px;font-weight:700;transition:filter .16s,box-shadow .16s}
.layer-toggle:hover{filter:brightness(1.04);box-shadow:0 5px 12px #d7603b52}
.layer-toggle[aria-pressed=true]{background:rgba(255,245,240,.88);color:#b55235}
.layer-reset{min-width:43px;padding:0 8px;border:1px solid #d1dde0;border-radius:6px;background:rgba(255,255,255,.62);color:#74858d;font-size:10px}
.layer-reset:hover:not(:disabled){border-color:#e29a7d;color:#bd5736}
.layer-reset:disabled{opacity:.45;cursor:default}
@media(max-width:780px){.layer-control{top:210px;right:auto;bottom:auto;left:10px;width:min(226px,calc(50vw - 15px));padding:7px 9px}.layer-control-head{margin-bottom:0}.layer-control-head .layer-panel-toggle{display:grid;flex:0 0 24px}.layer-control:not(.is-open) .layer-stack,.layer-control:not(.is-open) .layer-range-label,.layer-control:not(.is-open) #layer-spread,.layer-control:not(.is-open) .layer-actions{display:none}.layer-control.is-open .layer-control-head{margin-bottom:3px}.layer-stack{margin:4px 0 6px}.layer-stack span{font-size:8px}.layer-actions{gap:5px}.layer-toggle{min-height:28px}}
@media(min-width:781px){.monitor{left:var(--scene-panel-left,25px);right:auto;top:var(--scene-monitor-top,238px);width:var(--scene-panel-width,242px);gap:8px}.monitor .panel{min-width:0;padding:7px 10px}.monitor .panel-head{margin-bottom:4px}.monitor .panel-head h2{font-size:12px}.monitor .panel-head>span{font-size:10px;padding:2px 5px}.monitor .destination{gap:5px;font-size:11px}.monitor .destination .line-symbol{flex-basis:17px;width:17px;height:17px;font-size:11px}.monitor .timer{margin:1px 0 3px;font-size:36px;line-height:1}.monitor .progress{height:3px}.monitor .panel-foot{margin-top:3px;font-size:10px}.monitor .metric-row{margin-bottom:5px}.monitor .metric-row strong{font-size:24px}.monitor .metric-row span,.monitor .status-row{font-size:10px}.monitor .metric-row small{margin-top:1px;font-size:9px}.monitor .status-row{padding-top:5px}}