*{box-sizing:border-box}body{margin:0;background:#07111f;color:#f4f7fb;font-family:system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:22px 18px 14px;background:#0b1728;position:sticky;top:0;z-index:5}.brand{font-weight:900;letter-spacing:.12em;font-size:20px}.sub{font-size:12px;color:#91a2b9;margin-top:2px}.icon{width:44px;height:44px;border-radius:14px;font-size:25px}button,input{font:inherit}button{border:0;background:#16263b;color:#fff;padding:11px 14px;border-radius:12px;font-weight:700}.active{background:#f6b900;color:#10151c}main{max-width:760px;margin:auto;padding:16px}.station{background:#0d1b2d;border:1px solid #1c3048;border-radius:18px;padding:16px}label{font-size:12px;color:#91a2b9;text-transform:uppercase;letter-spacing:.08em}.search{display:flex;gap:8px;margin-top:8px}input{width:100%;background:#07111f;border:1px solid #29415d;color:#fff;border-radius:12px;padding:13px}.selected{display:flex;justify-content:space-between;align-items:end;margin-top:16px}h1{font-size:25px;margin:0 0 4px}#stationCode{color:#f6b900;font-weight:800}#updated{font-size:11px;color:#91a2b9}nav{display:flex;gap:8px;margin:14px 0}nav button{flex:1}.time-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:-4px 0 8px}.time-nav button{min-height:42px}.time-nav #viewPeriod{text-align:center;color:#91a2b9;font-size:12px;font-weight:800;min-width:76px}#notice{padding:18px;text-align:center;color:#9aabc0}.service{display:grid;grid-template-columns:60px 1fr auto;gap:12px;padding:15px 4px;border-bottom:1px solid #1a2b40;align-items:start}.time{font-size:19px;font-weight:900}.dest{font-weight:800;font-size:17px}.meta,.status{font-size:12px;color:#91a2b9;margin-top:4px}.status{color:#78d99a;text-align:right}.late{color:#ffb45f}.cancel{color:#ff7070}.plat{background:#152941;border-radius:8px;padding:5px 8px;font-weight:800;text-align:center}.compact .service{padding:9px 4px}.compact .meta{display:none}.simple-headcode{display:none}.compact .simple-headcode{display:block;margin-top:3px;color:#91a2b9;font-size:12px;font-weight:800;letter-spacing:.04em}.journey-title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.journey-headcode{color:#f6b900;font-weight:900;font-size:14px;letter-spacing:.06em}#suggestions{position:absolute;background:#102036;border:1px solid #29415d;border-radius:12px;max-height:260px;overflow:auto;z-index:8;margin-top:4px;min-width:min(650px,calc(100vw - 64px))}.suggestion{display:block;width:100%;text-align:left;border-radius:0;background:transparent;border-bottom:1px solid #203650}footer{text-align:center;color:#60748e;font-size:11px;padding:30px 12px}.service{cursor:pointer}.service:active{background:#0d1b2d}.sheet{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-end;z-index:20}.hidden{display:none}.sheet-card{width:100%;max-height:82vh;overflow:auto;background:#0d1b2d;border-radius:22px 22px 0 0;padding:20px;box-shadow:0 -10px 40px #0008}.close{float:right;width:40px;height:40px;border-radius:50%;font-size:24px;padding:0}.journey-head{padding-right:52px}.journey-head h2{margin:0 0 6px}.journey-sub{color:#91a2b9;font-size:13px}.stops{margin-top:18px}.stop{display:grid;grid-template-columns:58px 18px 1fr auto;gap:10px;align-items:start;min-height:54px}.dot{width:12px;height:12px;border-radius:50%;background:#f6b900;margin-top:5px;position:relative}.dot:after{content:'';position:absolute;left:5px;top:12px;width:2px;height:42px;background:#29415d}.stop:last-child .dot:after{display:none}.stop-name{font-weight:800}.stop-meta{font-size:12px;color:#91a2b9;margin-top:2px}.stop-exp{font-size:12px;text-align:right;color:#78d99a}.stop-exp.late{color:#ffb45f}.stop-exp.cancel{color:#ff7070}
.demo-banner{position:sticky;top:0;z-index:30;background:#d9a600;color:#1b1600;text-align:center;padding:11px 8px;font-weight:900;letter-spacing:.04em;font-size:14px;box-shadow:0 2px 12px #0005}
header{top:41px}.menu-wrap{position:relative}.menu-button{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-size:15px}.header-menu{position:absolute;right:0;top:50px;z-index:40;width:220px;padding:8px;background:#0d1b2d;border:1px solid #29415d;border-radius:14px;box-shadow:0 12px 32px #0008}.header-menu.hidden{display:none}.menu-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border-radius:10px;padding:12px}.menu-item:hover,.menu-item:focus{background:#16263b}.menu-icon,.menu-item .home-svg{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}.menu-item .home-svg{fill:currentColor}.menu-item span:last-child{font-size:14px}
footer button{margin-bottom:14px}.form-help{color:#91a2b9;margin-top:-6px}.sheet-card h2{margin:4px 50px 8px 0}#suggestForm{display:grid;gap:9px;margin-top:18px}textarea{font:inherit;width:100%;min-height:150px;resize:vertical;background:#07111f;border:1px solid #29415d;color:#fff;border-radius:12px;padding:13px}.submit{margin-top:6px;background:#f6b900;color:#10151c}#suggestStatus{text-align:center;min-height:24px;color:#78d99a;font-size:13px}
body.day{background:#f3f6fa;color:#142033}body.day header{background:#fff;border-bottom:1px solid #dbe2ea}body.day .sub,body.day #updated,body.day .meta,body.day .journey-sub,body.day .stop-meta,body.day .form-help{color:#617085}body.day .station,body.day .sheet-card{background:#fff;border-color:#dbe2ea}body.day input,body.day textarea{background:#f7f9fc;color:#142033;border-color:#cbd5e1}body.day button{background:#e6edf5;color:#142033}body.day .active,body.day .submit{background:#f6b900;color:#10151c}body.day .header-menu{background:#fff;border-color:#cbd5e1;box-shadow:0 12px 32px #0002}body.day .menu-item:hover,body.day .menu-item:focus{background:#eef3f8}body.day #suggestions{background:#fff;border-color:#cbd5e1}body.day .suggestion{border-color:#e1e7ef}body.day .service{border-color:#dbe2ea}body.day .service:active{background:#eef3f8}body.day .plat{background:#e6edf5}body.day .dot:after{background:#cbd5e1}body.day #notice{color:#617085}body.day footer{color:#617085}
@media(max-width:420px){.brand{font-size:17px}.sub{display:none}.menu-button{min-height:38px;padding:0 12px}.header-menu{top:46px;width:min(220px,calc(100vw - 32px))}.demo-banner{font-size:12px}header{top:38px}}

.state-active{background:#f6b900!important;color:#10151c!important}
.status.scheduled{color:#91a2b9}
.service-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;margin-top:10px;padding-top:10px;border-top:1px solid #1c3048;font-size:11px;color:#b6c3d3}
.service-details span{min-width:0;overflow-wrap:anywhere}.service-details b{display:block;color:#73869f;font-size:9px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.compact .service-details{display:none}
.live-summary{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding:11px 13px;border:1px solid #285c43;background:#0e2a20;border-radius:12px;color:#7ee2a0;font-size:13px}
.live-summary.muted{border-color:#29415d;background:#102036;color:#91a2b9}
.journey-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px;padding:12px;border:1px solid #1c3048;border-radius:12px}
.journey-details div{min-width:0}.journey-details b{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#73869f}.journey-details span{font-size:12px;overflow-wrap:anywhere}
.stop.passed{opacity:.58}.stop.live-current{opacity:1}.stop.live-current .dot{background:#3fe77a;box-shadow:0 0 0 5px #3fe77a22,0 0 16px #3fe77a}
.stop.live-after{opacity:1}.stop.live-after .dot:before{content:'';position:absolute;left:0;top:27px;width:12px;height:12px;border-radius:50%;background:#3fe77a;box-shadow:0 0 0 5px #3fe77a22,0 0 16px #3fe77a;z-index:2}
body.day .service-details,body.day .journey-details{border-color:#dbe2ea;color:#3f4e61}
body.day .service-details b,body.day .journey-details b{color:#718096}
body.day .live-summary{background:#eaf8ef;border-color:#9ad8ae;color:#176b39}
body.day .live-summary.muted{background:#f1f5f9;border-color:#cbd5e1;color:#617085}
@media(max-width:520px){.service-details{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-details{grid-template-columns:1fr}.live-summary{flex-direction:column;gap:3px}}

.live-summary.estimate{border-color:#8a6a20;background:#2b2411;color:#f6c95a}
.stop.estimated-after .dot:before{content:'';position:absolute;left:0;top:27px;width:12px;height:12px;border-radius:50%;background:#f6b900;box-shadow:0 0 0 5px #f6b90022,0 0 16px #f6b900;z-index:2}
body.day .live-summary.estimate{background:#fff8df;border-color:#e3c767;color:#7c5b00}

.train-marker{position:absolute;left:-9px;top:-10px;font-size:19px;line-height:1;z-index:4;filter:drop-shadow(0 0 5px rgba(0,0,0,.45))}
.train-marker.live{filter:drop-shadow(0 0 7px #3fe77a)}
.train-marker.estimate{filter:drop-shadow(0 0 7px #f6b900)}
.train-marker.between{top:19px}
.stop.live-current .dot,.stop.live-after .dot,.stop.estimated-after .dot{background:#29415d;box-shadow:none}
.stop.live-current .dot:before,.stop.live-after .dot:before,.stop.estimated-after .dot:before{display:none}

.route-track{position:relative;width:18px;min-height:54px;display:flex;justify-content:center}
.route-track:after{content:'';position:absolute;left:8px;top:17px;width:2px;height:43px;background:#29415d;z-index:0}
.stop:last-child .route-track:after{display:none}
.station-dot{position:absolute;top:5px;left:3px;width:12px;height:12px;border-radius:50%;background:#f6b900;z-index:2}
.train-marker{position:absolute;left:-4px;top:-8px;font-size:22px;line-height:1;z-index:5;pointer-events:none}
.train-marker.live{filter:drop-shadow(0 0 7px #3fe77a)}
.train-marker.estimate{filter:drop-shadow(0 0 7px #f6b900)}
.train-marker.between{top:24px}
.stop.passed .station-dot{opacity:.55}
body.day .route-track:after{background:#cbd5e1}

.home-button{display:grid;place-items:center}
.home-svg{width:22px;height:22px;fill:currentColor;display:block}
.train-marker{width:24px;height:24px;color:#fff;display:grid;place-items:center}
.train-svg{width:24px;height:24px;fill:currentColor;display:block}
body.day .train-marker{color:#142033}
