*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{color:#e8e8e8;word-break:keep-all;overflow-wrap:break-word;background:#202226;font-family:-apple-system,SF Pro KR,Apple SD Gothic Neo,Pretendard,sans-serif}button,input,select{font:inherit}button{cursor:pointer;white-space:nowrap}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:2px solid #1f6feb}[hidden]{display:none!important}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}.shell-bar{align-items:center;gap:16px;height:44px;padding:0 20px;font-size:12px;display:flex}.shell-bar h1{font-size:15px}.shell-bar>span{color:#b8bdc5}#progress{margin-left:auto}#demo-error{bottom:8px;left:calc(40px + 390px * var(--phone-scale,1));z-index:20;color:#714714;background:#fff3dd;border-radius:8px;padding:8px 12px;font-size:12px;position:fixed;right:16px}.demo-layout{grid-template-columns:auto minmax(540px,1fr);gap:20px;padding:0 16px 12px;display:grid}#rider{zoom:var(--phone-scale,1);width:390px}.scale-pick{color:#b8bdc5;white-space:nowrap}.scale-pick select{color:#e8e8e8;background:#2c2f35;border:1px solid #444a53;border-radius:6px;margin-left:6px;padding:2px 4px}#control{color:#111418;background:#f2f1ec;border-radius:20px;height:max(480px,100vh - 56px);position:relative;overflow:hidden}.control-map{position:absolute;inset:0}.phone{background:var(--canvas);width:390px;height:844px;color:var(--tx1);border:8px solid #0b0b0c;border-radius:44px;flex-direction:column;flex:none;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 60px #00000080}.statusbar{background:var(--canvas);z-index:3;flex:none;justify-content:space-between;align-items:center;height:44px;padding:0 24px;font-size:13px;font-weight:700;display:flex;position:relative}.app{flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.app::-webkit-scrollbar{display:none}.phone{--canvas:#f4f5f7;--card-bg:#fff;--hairline:#e3e5e8;--tx1:#111418;--tx2:#5f6670;--tx3:#9aa1aa;--bus:#1f6feb;--shuttle:#0f9d8a;--mc:var(--bus);--ok:#12a150;--muted-bg:#eef0f3;--map-land:#eef0ea;--map-road:#fff;--map-road2:#dde0e4;--map-water:#cde2f4;--map-park:#d9ecd4;--map-ink:#4a5058;--shadow:#10182824}.phone.m-shuttle{--mc:var(--shuttle)}.map{width:100%;height:100%;display:block}.map .lbl{fill:var(--map-ink);font:700 12px -apple-system,Apple SD Gothic Neo,sans-serif}.mini .map .lbl{display:none}.mapfill{position:absolute;inset:0}.mini{border:1px solid var(--hairline);border-radius:14px;flex:none;height:170px;position:relative;overflow:hidden}.sheet{z-index:1;background:var(--card-bg);box-shadow:0 -6px 24px var(--shadow);border-radius:22px 22px 0 0;padding:10px 16px 22px;position:absolute;bottom:0;left:0;right:0}.grab{background:var(--hairline);border-radius:2px;width:36px;height:4px;margin:0 auto 12px}.pad{flex-direction:column;gap:12px;padding:8px 16px 24px;display:flex}.card{background:var(--card-bg);border:1px solid var(--hairline);border-radius:16px;padding:14px}.h{text-wrap:balance;font-size:20px;font-weight:800;line-height:1.35}.h-sm{text-wrap:balance;font-size:15px;font-weight:800}.sub{color:var(--tx2);text-wrap:pretty;font-size:13px;line-height:1.5}.tiny{color:var(--tx3);font-size:11.5px}.field{border:1px solid var(--hairline);background:var(--canvas);border-radius:12px;align-items:center;gap:10px;padding:12px;display:flex}.field+.field{margin-top:8px}.field .t{font-size:15px;font-weight:700}.field .grow{flex:1;min-width:0}.ph{color:var(--tx3);font-weight:600}.dot{border-radius:50%;flex:none;width:10px;height:10px}.dot.o{background:var(--tx1)}.dot.d{background:#e8590c}.linkish{color:var(--mc);white-space:nowrap;font-size:13px;font-weight:700}.row{align-items:center;gap:10px;display:flex}.row.between{justify-content:space-between}.list>div{border-top:1px solid var(--hairline);padding:10px 0}.list>div:first-child{border-top:0}.btn{background:var(--mc);color:#fff;white-space:nowrap;cursor:pointer;border:0;border-radius:14px;width:100%;height:52px;font-family:inherit;font-size:16px;font-weight:800;display:block}.btn.big{border-radius:18px;height:68px;font-size:20px}.btn.ghost{color:var(--tx2);border:1px solid var(--hairline);background:0 0;height:44px;font-size:14px}.route{background:var(--bus);color:#fff;white-space:nowrap;border-radius:7px;justify-content:center;align-items:center;min-width:44px;height:26px;padding:0 8px;font-size:14px;font-weight:800;display:inline-flex}.route.sh{background:var(--shuttle)}.tag{color:var(--tx2);background:var(--muted-bg);white-space:nowrap;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:700;display:inline-block}.opt{border:1.5px solid var(--hairline);background:var(--card-bg);border-radius:14px;padding:12px}.opt+.opt{margin-top:8px}.opt.on{border-color:var(--mc);box-shadow:0 0 0 1px var(--mc) inset}.big-n{letter-spacing:-.5px;font-size:30px;font-weight:900;line-height:1}.big-n small{margin-left:2px;font-size:15px;font-weight:700}.kv{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.kv>div{background:var(--muted-bg);border-radius:12px;padding:10px}.kv .k{color:var(--tx2);white-space:nowrap;font-size:11.5px}.kv .v{white-space:nowrap;margin-top:2px;font-size:18px;font-weight:800}.bar{background:var(--muted-bg);border-radius:3px;height:6px;overflow:hidden}.bar>i{background:var(--mc);border-radius:3px;height:100%;display:block}.tl{padding-left:22px;position:relative}.tl>div{padding:7px 0;font-size:14px;position:relative}.tl>div:before{content:"";border:2px solid var(--mc);background:var(--card-bg);border-radius:50%;width:10px;height:10px;position:absolute;top:12px;left:-18px}.tl>div.done{color:var(--tx3)}.tl>div.done:before{background:var(--tx3);border-color:var(--tx3)}.tl>div.now{font-weight:800}.tl>div.now:before{background:var(--mc)}.tl>div.me:before{background:#e8590c;border-color:#e8590c}.tl:before{content:"";background:var(--hairline);width:2px;position:absolute;top:14px;bottom:14px;left:8px}.check{background:var(--ok);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:28px;font-weight:900;display:flex}.pin-hint{z-index:1;background:var(--card-bg);color:var(--tx1);box-shadow:0 4px 14px var(--shadow);white-space:nowrap;border-radius:10px;padding:6px 10px;font-size:12.5px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.top-chip{z-index:1;background:var(--card-bg);box-shadow:0 4px 16px var(--shadow);border-radius:14px;padding:10px 12px;position:absolute;top:10px;left:16px;right:16px}.phone{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.app{min-height:0;overflow:hidden}.app.card-screen{overflow-y:auto}.rider-map{width:100%;height:100%}.rider-map.mapfill{position:absolute;inset:0}.phone .maplibregl-ctrl-attrib{font-size:9px}.phone .maplibregl-ctrl-bottom-right{top:0;bottom:auto}.phone .pad{padding-top:8px}.phone .field input{width:100%;color:var(--tx1);background:0 0;border:0;padding:3px 0;font-size:14px;font-weight:700;display:block}.phone .field .linkish{background:0 0;border:0;font-size:11px}.phone .search-results+.field{margin-top:8px}.phone .linkish{background:0 0;border:0}.phone .search-results{border:1px solid var(--hairline);border-radius:8px;max-height:166px;overflow-y:auto}.phone .search-results button{text-align:left;border:0;border-bottom:1px solid var(--hairline);background:#fff;width:100%;padding:9px;font-size:12px;display:block}.phone .search-results .sub{padding:10px}.phone .presets{flex-direction:column;gap:4px;display:flex}.phone .presets button{text-align:left;background:var(--muted-bg);color:var(--tx2);text-overflow:ellipsis;border:0;border-radius:8px;padding:7px 9px;font-size:11px;overflow:hidden}.phone .sheet{max-height:calc(100% - 72px);overflow-y:auto}.phone .opt{width:100%;color:var(--tx1);text-align:left;white-space:normal;font-size:14px;display:block}.phone .opt .sub{max-width:216px}.phone .opt .estimate-time{text-align:right;flex:none;max-width:78px;font-size:12px}.phone .opt[data-mode=auto].on{border-color:var(--shuttle);box-shadow:0 0 0 1px var(--shuttle) inset}.phone .timeline-card{max-height:236px;overflow-y:auto}.phone .check{flex:none}.phone .list .between>span:last-child{text-align:right}.phone .list .between>span:first-child{flex:none}.rider-toast{z-index:10;color:#fff;background:#111418;border-radius:12px;padding:13px;font-size:13px;line-height:1.5;position:absolute;bottom:20px;left:12px;right:12px}.rider-banner{color:#815300;text-align:center;background:#fff1cf;flex:none;padding:12px;font-size:15px;font-weight:800}.destination-backdrop{z-index:5;background:#11141855;position:absolute;inset:0}.destination-backdrop .sub{margin:12px 0}.map-caption{z-index:1;pointer-events:none;flex-direction:column;gap:8px;max-width:calc(100% - 380px);display:flex;position:absolute;top:18px;left:18px}.map-caption b{background:#fffd;border-radius:8px;align-self:flex-start;padding:4px 10px;font-size:18px}.map-caption span{background:#fffd;border-radius:8px;padding:7px;font-size:11px;line-height:1.7}.legend-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.legend-dot.blue{background:#1f6feb}.legend-dot.green{background:#0f9d8a}.legend-dot.orange{background:#ee9e24}.legend-dot.red{background:#da3e3b}.control-panel{z-index:2;background:#fffffff5;border:1px solid #e3e5e8;border-radius:16px;width:340px;max-height:calc(100% - 32px);padding:14px;font-size:12px;position:absolute;top:12px;right:12px;overflow:auto;box-shadow:0 8px 28px #10182820}.panel-heading,.clock-readout,.clock-controls,.fleet-row,.mode-buttons{justify-content:space-between;align-items:center;gap:6px;display:flex}.panel-heading{margin-bottom:10px}.panel-heading b{font-size:15px}.control-panel button,.control-panel select{color:#111418;background:#f4f5f7;border:1px solid #e3e5e8;border-radius:7px;padding:5px 7px;font-size:11px}.control-panel button[aria-pressed=true]{color:#fff;background:#1f6feb;border-color:#1f6feb}.clock-readout strong{font-variant-numeric:tabular-nums;font-size:30px}.clock-readout span{color:#5f6670}.clock-controls{margin-top:8px}.clock-controls label{white-space:nowrap}.fleet-row{margin:10px 0}.fleet-row span{color:#5f6670}.mode-buttons button{flex:1}.panel-note{color:#5f6670;margin:6px 0;font-size:10px}.metric-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.metric-grid>div{background:#f4f5f7;border-radius:9px;padding:8px}.metric-grid small{color:#5f6670;font-size:10px;display:block}.metric-grid b{margin-top:3px;font-size:18px;display:block}.hist{align-items:flex-end;gap:5px;height:52px;display:flex}.hist>div{text-align:center;flex:1}.hist i{background:#8cafe4;border-radius:3px 3px 0 0;display:block}.hist small{color:#5f6670;white-space:nowrap;font-size:8px}.curve{margin-top:12px}.curve svg{width:100%;height:138px;display:block}.curve svg text{fill:#5f6670;font-size:9px}.curve-legend{justify-content:space-between;font-size:10px;display:flex}.vehicle-detail{background:#f4f5f7;border-radius:9px;margin-top:12px;padding:10px;line-height:1.7}.vehicle-detail ol{max-height:110px;padding-left:17px;overflow-y:auto}.recent-events{margin-top:12px;font-size:10px}.recent-events ol{max-height:170px;margin-top:6px;line-height:1.65;list-style:none;overflow-y:auto}.perf{color:#7b8490;margin-top:10px;font-size:9px}@media (width<=1020px){.demo-layout{gap:12px;padding-left:8px;padding-right:8px}.shell-bar{min-width:958px}}