:root{--bg:#0b0f14;--fg:#e6edf5;--mut:#8a97a8;--card:#121923;--line:#1f2a38;--acc:#4ad0ff}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
#app{position:relative;height:100vh;height:100dvh;width:100%}#map{position:absolute;inset:0;background:#0b0f14}
.leaflet-container{background:#0b0f14;font:inherit}canvas.trains{position:absolute;left:0;top:0;pointer-events:none;z-index:450}
.leaflet-tooltip.tip{background:#121923;color:var(--fg);border:1px solid var(--line);box-shadow:none}
.leaflet-tooltip-top.tip:before{border-top-color:#121923}
.bar{position:absolute;z-index:1000;top:0;left:0;right:0;display:flex;gap:10px;align-items:center;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:linear-gradient(#0b0f14ee,#0b0f14a0 70%,transparent)}
.logo{font-weight:800;letter-spacing:.3px;color:#fff;white-space:nowrap}
.chips{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px}.chips::-webkit-scrollbar{display:none}
.chip{--c:#888;display:flex;align-items:center;gap:6px;background:#121923;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block}
.chip.off{opacity:.4}.chip[data-s=delay]{border-color:#f5a623}.chip[data-s=down]{border-color:#ff4d4f}.chip[data-s=delay]::after{content:"!";color:#f5a623;font-weight:700}.chip[data-s=down]::after{content:"!";color:#ff4d4f;font-weight:700}
.live{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mut);white-space:nowrap}.live i{width:8px;height:8px;border-radius:50%;background:#2ee66b;box-shadow:0 0 8px #2ee66b;animation:p 1.6s infinite}
.live.stale i{background:#f5a623;box-shadow:none;animation:none}.live.replay i{background:#4ad0ff;box-shadow:none;animation:none}
@keyframes p{50%{opacity:.3}}
.panel{position:absolute;z-index:1000;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 8px 30px #000a;left:10px;top:56px;width:290px;max-height:60vh;overflow:auto}
.panel[hidden]{display:none}.panel .x{position:absolute;right:8px;top:4px;background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer}
.ph{display:flex;gap:10px;align-items:center;padding-right:24px}.sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;flex:none}.ph .sw{width:16px;height:16px;margin:0}
.panel h4{margin:10px 0 4px;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.nx{list-style:none;margin:0;padding:0}.nx li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line)}.nx b{color:#fff}
.badge{font-size:12px;border-radius:8px;padding:3px 8px;display:inline-block;margin:8px 0 0}.badge.real{background:#12361f;color:#6ff09a}.badge.est{background:#2d2a14;color:#ffd866}
.health{font-size:13px}.s-delay{color:#f5a623}.s-down{color:#ff6b6b}.s-ok{color:#6ff09a}.s-idle{color:var(--mut)}
.rbar{position:absolute;z-index:1000;left:10px;right:10px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;background:#121923ee;border:1px solid var(--line);border-radius:14px;padding:8px 10px;max-width:760px;margin:0 auto}
.rbar button{background:#1b2634;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.rbar input{flex:1;min-width:60px;accent-color:var(--acc)}.rbar span{font-size:12px;color:var(--mut);min-width:60px;max-width:210px}
#rlive{display:none}body.replaying #rlive{display:inline-block}
.legend{position:absolute;z-index:900;left:12px;bottom:76px;font-size:12px;color:var(--mut);display:flex;gap:12px;align-items:center}
.d{display:inline-block;width:10px;height:10px;border-radius:50%;background:#aaa;vertical-align:middle}.d.real{border:1.5px solid #fff}.d.est{box-shadow:0 0 0 3px #aaa4}
.leaflet-bottom.leaflet-right{margin-bottom:70px}.leaflet-control-attribution{background:#0b0f14aa!important;color:#667;font-size:10px}.leaflet-control-attribution a{color:#889}
.seo{background:var(--bg);padding:28px 16px 60px}.wrap{max-width:880px;margin:0 auto;padding:0 4px}
.seo h1,.home h1{font-size:28px;line-height:1.2;margin:18px 0 8px}h2{font-size:19px;margin:26px 0 8px}
.topnav{display:flex;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}.topnav .brand{font-weight:800;color:#fff;margin-right:8px}.topnav a[aria-current]{color:#fff;border-bottom:2px solid var(--acc)}
table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}th{color:var(--mut);font-weight:600;font-size:13px}
.lines{list-style:none;padding:0}.lines li{padding:4px 0}.cols{column-width:190px;column-gap:20px}.cols a{display:block;break-inside:avoid;line-height:1.7}
.foot{margin-top:40px;color:var(--mut);font-size:13px}
.home .wrap{padding-top:10px}.lead{color:var(--mut);font-size:18px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--fg)}.card:hover{border-color:var(--acc);text-decoration:none}.card h2{margin:0 0 6px;font-size:18px}.big{font-size:42px;font-weight:800;margin:6px 0;color:#fff}.big small{font-size:14px;color:var(--mut);font-weight:400}
@media(max-width:640px){.panel{left:8px;right:8px;top:auto;bottom:84px;width:auto;max-height:42vh}.logo{font-size:14px}.live.stale span{display:inline}.live span{display:none}.legend{bottom:78px}.leaflet-bottom.leaflet-right{margin-bottom:104px}.rbar span{display:none}body.replaying .rbar span,.rbar span:first-of-type{display:inline}}