@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;600;700;800&display=swap";*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#0d1b3e;-webkit-font-smoothing:antialiased;background:#eef2f9;font-family:IBM Plex Sans Thai,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.crash{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:100vh;padding:2rem;display:flex}.crash__icon{font-size:3rem}.crash__title{font-size:1.25rem;font-weight:600}.crash__hint{color:#5b6472;max-width:34rem;font-size:.9rem}.crash__detail{color:#98a2b3;font-family:ui-monospace,monospace;font-size:.8rem}.crash__button{color:#fff;cursor:pointer;background:#2f6bff;border:0;border-radius:.75rem;margin-top:.5rem;padding:.6rem 1.2rem;font-size:.9rem}.map-view{position:absolute;inset:0}.bus-marker{width:44px;height:44px;position:relative}.bus-marker__icon{color:#fff;background:#1b5cff;border:3px solid #fff;border-radius:50%;place-items:center;display:grid;position:absolute;inset:0;box-shadow:0 4px 14px #1b5cff73}.bus-marker__icon svg{width:24px;height:24px}.bus-marker__pulse{opacity:.35;background:#17c8ff;border-radius:50%;animation:2s ease-out infinite bus-pulse;position:absolute;inset:-6px}@keyframes bus-pulse{0%{opacity:.45;transform:scale(.7)}to{opacity:0;transform:scale(1.6)}}.place-marker{pointer-events:none;flex-direction:column;align-items:center;gap:3px;display:flex}.place-marker__badge{border:3px solid var(--pin,#33d6a6);background:#fff;border-radius:50%;place-items:center;width:34px;height:34px;font-size:18px;line-height:1;display:grid;box-shadow:0 3px 10px #0000004d}.place-marker__label{background:var(--pin,#33d6a6);color:#fff;white-space:nowrap;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;box-shadow:0 2px 6px #00000040}@media (prefers-reduced-motion:reduce){.bus-marker__pulse{animation:none}}.replaybar{z-index:3;color:#fff;background:#0d1b3eeb;border-radius:14px;align-items:center;gap:14px;width:min(920px,100% - 48px);padding:12px 18px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0d1b3e59}.replaybar__btn{color:#fff;cursor:pointer;background:#1b5cff;border:0;border-radius:50%;flex:none;width:40px;height:40px;font-size:16px}.replaybar__time{font-variant-numeric:tabular-nums;color:#cfe0ff;flex:none;font-size:14px}.replaybar__range{accent-color:#17c8ff;cursor:pointer;flex:1}.replaybar__rates{flex:none;gap:4px;display:flex}.replaybar__rate{color:#cfe0ff;cursor:pointer;background:#ffffff1f;border:0;border-radius:8px;padding:5px 10px;font-size:13px}.replaybar__rate.is-active{color:#06214a;background:#17c8ff;font-weight:700}.replaybar__origin{color:#ffc94d;background:#ffc94d33;border-radius:999px;flex:none;padding:5px 10px;font-size:12px}.replaybar__origin.is-api{color:#33d6a6;background:#33d6a62e}.replaybar__msg{color:#cfe0ff;flex:1;font-size:14px}.replaybar__msg.is-error{color:#ff9aa1}.replaybar__exit{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:10px;flex:none;padding:8px 14px;font-size:13px}.replaybar__exit:hover{background:#ffffff1a}.panel{pointer-events:auto;background:#fffffff2;border-radius:16px;width:320px;padding:18px 20px;box-shadow:0 10px 30px #0d1b3e33}.panel__head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.panel__vehicle{font-size:24px;font-weight:800;line-height:1.2}.panel__route{color:#5b6b8c;align-items:center;gap:8px;font-size:13px;display:flex}.accbadge{border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.accbadge.is-run{color:#12a97e;background:#e4faf3}.accbadge.is-park{color:#5b6b8c;background:#eef1f7}.conn{white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:5px 12px;font-size:13px;font-weight:700;display:inline-flex}.conn__dot{background:currentColor;border-radius:50%;width:9px;height:9px}.conn.is-ok{color:#12a97e;background:#e4faf3}.conn.is-warn{color:#c98600;background:#fff5e0}.conn.is-bad{color:#e02b38;background:#ffe9ea}.conn.is-replay{color:#8b2fe8;background:#f3e9ff}.metrics{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;display:grid}.metrics.is-stale{opacity:.5;filter:grayscale(.6)}.metric{background:#f2f5fb;border:2px solid #0000;border-radius:12px;padding:12px 14px}.metric__label{color:#5b6b8c;margin-bottom:2px;font-size:12px}.metric__value{font-variant-numeric:tabular-nums;font-size:30px;font-weight:800;line-height:1.1}.metric__unit{color:#5b6b8c;margin-left:5px;font-size:13px;font-weight:600}.metric.is-ok{border-color:#0000}.metric.is-warn{background:#fff5e0;border-color:#ffc94d}.metric.is-danger{color:#c9202c;background:#ffe9ea;border-color:#ff4f5a}.facts{gap:6px;margin:0;display:grid}.fact{justify-content:space-between;gap:12px;font-size:13px;display:flex}.fact dt{color:#5b6b8c}.fact dd{font-variant-numeric:tabular-nums;text-align:right;margin:0;font-weight:700}.panel__alert{color:#c9202c;background:#ffe9ea;border-radius:10px;margin:14px 0 0;padding:10px 12px;font-size:13px;line-height:1.45}.health{pointer-events:auto;background:#fffffff7;border-radius:16px;flex-direction:column;width:min(1100px,94vw);max-height:88vh;display:flex;overflow:hidden;box-shadow:0 18px 50px #0d1b3e47}.health__head{border-bottom:1px solid #eef1f7;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 22px;display:flex}.health__title{margin:0;font-size:20px;font-weight:800}.health__sub{color:#5b6b8c;margin:4px 0 0;font-size:12.5px}.health__summary{align-items:center;gap:8px;display:flex}.hpill{white-space:nowrap;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}.hpill.is-online{color:#12a97e;background:#e4faf3}.hpill.is-stale{color:#c98600;background:#fff5e0}.hpill.is-offline{color:#e02b38;background:#ffe9ea}.health__close{color:#33415c;cursor:pointer;background:#eef1f7;border:none;border-radius:8px;width:30px;height:30px;margin-left:4px;font-size:15px}.health__close:hover{background:#e2e7f1}.health__scroll{overflow:auto}.health__table{border-collapse:collapse;width:100%;font-size:13.5px}.health__table thead th{text-align:left;color:#5b6b8c;white-space:nowrap;background:#f7f9fd;border-bottom:1px solid #eef1f7;padding:10px 14px;font-size:12px;font-weight:700;position:sticky;top:0}.health__table td{vertical-align:middle;font-variant-numeric:tabular-nums;border-bottom:1px solid #f1f3f8;padding:11px 14px}.health__empty{text-align:center;color:#8a97b0;padding:28px 0}.hrow__id{font-weight:800}.hrow.is-offline{background:#fff7f7}.hrow.is-stale{background:#fffdf4}.hrow__ago{font-weight:700}.hrow__clock{color:#8a97b0;margin-left:8px;font-size:12px}.hstatus{white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:4px 11px;font-size:12.5px;font-weight:700;display:inline-flex}.hstatus__dot{background:currentColor;border-radius:50%;width:8px;height:8px}.hstatus.is-online{color:#12a97e;background:#e4faf3}.hstatus.is-stale{color:#c98600;background:#fff5e0}.hstatus.is-offline{color:#e02b38;background:#ffe9ea}.hrow__extras{max-width:260px}.xchip{color:#33415c;white-space:nowrap;background:#eef2f9;border-radius:8px;margin:2px 4px 2px 0;padding:2px 8px;font-size:11.5px;font-weight:600;display:inline-block}.app{flex-direction:column;height:100dvh;display:flex}.topbar{color:#fff;background:#0d1b3e;flex:none;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.brand{align-items:center;gap:10px;font-size:18px;display:flex}.brand strong{font-weight:800}.brand__dot{background:linear-gradient(135deg,#17c8ff,#8b2fe8);border-radius:50%;width:12px;height:12px}.brand__sub{color:#9fb3d9;margin-left:8px;font-size:14px}.topbar__right{align-items:center;gap:10px;display:flex}.chip{color:#cfe0ff;background:#ffffff1a;border-radius:999px;padding:6px 12px;font-size:13px}.stage{flex:1;min-height:0;position:relative}.overlay{z-index:2;pointer-events:none;position:absolute;top:16px;left:16px}.toggle{color:#cfe0ff;cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.ghostbtn{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:10px;padding:7px 14px;font-family:inherit;font-size:14px}.ghostbtn:hover{background:#ffffff1a}.ghostbtn.is-off{color:#ff9aa1;background:#ff4f5a2e;border-color:#ff4f5a}.ghostbtn.is-on{color:#bdeeff;background:#17c8ff2e;border-color:#17c8ff}.ghostbtn__badge{color:#fff;vertical-align:middle;background:#ff4f5a;border-radius:999px;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;font-size:11px;font-weight:700;display:inline-grid}.health-overlay{z-index:5;background:#09122873;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.health-overlay__inner{max-width:100%;display:flex}.tile-error{z-index:3;color:#fff;background:#ff4f5a;border-radius:10px;padding:10px 18px;font-size:14px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}