:root{
  --bg:#06151c;--bg2:#0a212b;--panel:#0d2934;--panel2:#11323e;--line:#1a4250;
  --text:#f4f8fa;--muted:#9eb2bc;--sea:#77d2ca;--sea2:#a1e5df;--sand:#ecd6a6;
  --green:#86dc88;--red:#f39b83;--blue:#85b9ef;--shadow:0 14px 42px rgba(0,0,0,.28);--r:24px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body{display:flex;justify-content:center}
.app{width:100%;max-width:480px;min-height:100vh;position:relative;background:radial-gradient(circle at 90% 0%,rgba(119,210,202,.14),transparent 29%),linear-gradient(180deg,#081a23 0%,#0a222c 54%,#06151c 100%);overflow:hidden}
button,a{font:inherit}
.top{position:sticky;top:0;z-index:20;padding:15px 18px 13px;background:linear-gradient(180deg,rgba(7,26,35,.97),rgba(7,24,32,.90));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.055)}
.statusbar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#dce9ee;margin-bottom:11px}
.brandrow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.brand h1{margin:0;font-size:31px;line-height:1.02;letter-spacing:-.04em}
.brand p{margin:6px 0 0;color:#bfd0d7;font-size:13px;line-height:1.35}
.livepill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:850;letter-spacing:.04em;border:1px solid rgba(255,255,255,.08);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.live{color:var(--green);background:rgba(134,220,136,.10)}.demo{color:var(--sand);background:rgba(236,214,166,.10)}.offline{color:#a9b8c0;background:rgba(169,184,192,.09)}
.refreshline{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;color:var(--muted);font-size:11px}
.refreshbtn,.linkbtn{border:0;background:transparent;color:var(--sea2);padding:4px 0;font-weight:820;cursor:pointer}
.sourcebar{margin:10px 18px 0;padding:8px 11px;border-radius:14px;border:1px solid rgba(255,255,255,.06);font-size:10.5px;line-height:1.3}
.sourcebar.ok{display:none}.sourcebar.warn{background:rgba(236,214,166,.08);color:#f2e5c9}.sourcebar.bad{background:rgba(243,155,131,.08);color:#f4d7cf}
.section{padding:16px 18px 0}.view{display:none}.view.active{display:block}.stack{display:grid;gap:13px}
.card{background:linear-gradient(180deg,rgba(14,42,53,.94),rgba(9,31,40,.96));border:1px solid rgba(255,255,255,.06);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.focusCard{padding:17px;background:linear-gradient(155deg,rgba(18,58,70,.98),rgba(9,31,40,.97));border-color:rgba(119,210,202,.14)}
.compactCard{padding:15px}
.cardhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.compactHead{margin-bottom:10px}
.card h2,.card h3{margin:0;letter-spacing:-.025em}.card h2{font-size:19px}.card h3{font-size:16px}
.eyebrow{font-size:11px;color:var(--sea2);font-weight:850;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}.muted{color:var(--muted)}.tiny{font-size:11px;color:var(--muted);line-height:1.45}
.routeTitle{font-size:17px;font-weight:780;color:#e5f0f3;margin-top:2px}
.primaryTimes{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.primaryTime{font-size:50px;font-weight:920;letter-spacing:-.055em;line-height:1}.toText{color:#6f8994;font-size:18px;font-weight:700}.arrivalBlock{display:flex;align-items:baseline;gap:6px}.arrivalLabel{font-size:12px;color:var(--muted)}.arrivalTime{font-size:26px;font-weight:820;letter-spacing:-.03em}
.tripMetaLine{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.07);font-size:11px;font-weight:780}.badge.sea{color:var(--sea2);background:rgba(119,210,202,.09)}.badge.good{color:var(--green);background:rgba(134,220,136,.09)}.badge.warn{color:var(--sand);background:rgba(236,214,166,.09)}.badge.bad{color:var(--red);background:rgba(243,155,131,.09)}
.delay{font-size:11px;font-weight:850;padding:6px 9px;border-radius:999px}.delay.late{color:var(--sand);background:rgba(236,214,166,.10)}.delay.ontime{color:var(--green);background:rgba(134,220,136,.10)}.cancel{color:var(--red);background:rgba(243,155,131,.10)}
.connectionTitle{margin-top:17px;margin-bottom:8px;font-size:11px;color:#b8cbd3;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.connections{display:grid;gap:8px}.connection{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px 12px;border-radius:17px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.linebubble{min-width:46px;text-align:center;padding:8px 8px;border-radius:12px;background:#173d49;color:#fff;font-weight:920;font-size:14px}.connection .main{font-size:14px;font-weight:800;line-height:1.25}.connection .sub{font-size:10.5px;color:var(--muted);margin-top:3px}.wait{font-size:11px;font-weight:900;text-align:right;white-space:nowrap}.wait.good{color:var(--green)}.wait.warn{color:var(--sand)}.wait.bad{color:var(--red)}
.homeSummary{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.homeTime{font-size:34px;font-weight:900;letter-spacing:-.045em;line-height:1}.homeSub{font-size:12px;color:#cfdee3;margin-top:7px;line-height:1.35}.homeRight{text-align:right}.homeArrival{font-size:18px;font-weight:780}.homeVia{font-size:10.5px;color:var(--muted);margin-top:4px}
.upcomingList{display:grid;gap:2px}.upcomingRow{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:11px 2px;border-top:1px solid rgba(255,255,255,.05)}.upcomingRow:first-child{border-top:0}.upcomingTime{font-size:18px;font-weight:880}.upcomingRoute{font-size:12px;font-weight:720}.upcomingVia{font-size:10.5px;color:var(--muted);margin-top:2px}.upcomingArr{font-size:12px;color:#d6e4e8;text-align:right}
.triplist{display:grid;gap:10px}.triprow{padding:12px;border-radius:17px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.045)}.triptop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.triptime{font-size:19px;font-weight:870}.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.legendRow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.legendCard p{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);color:#f0f8fb;text-decoration:none;font-size:12px;font-weight:800;cursor:pointer}.btn.primary{background:linear-gradient(135deg,rgba(119,210,202,.22),rgba(119,210,202,.10));border-color:rgba(119,210,202,.28)}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.infoGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.infoBox{padding:12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.045)}.infoBox .k{font-size:10px;color:var(--muted)}.infoBox .v{font-size:14px;font-weight:800;margin-top:5px;overflow-wrap:anywhere}.empty{padding:20px 10px;text-align:center;color:var(--muted);font-size:12px}
.footer{height:122px}
.bottom{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:9px 11px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(6,21,28,.08),rgba(5,15,20,.98) 27%);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.06);z-index:30}
.bottom button{border:0;background:transparent;color:#9fb1ba;border-radius:14px;padding:8px 3px;font-size:10px;font-weight:780;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.bottom button.active{color:#fff;background:rgba(119,210,202,.10)}.bottom .ico{font-size:17px;line-height:1}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);width:calc(100% - 40px);max-width:440px;padding:11px 14px;border-radius:15px;background:#12313c;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);font-size:12px;color:#eaf5f9;opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:380px){.primaryTime{font-size:44px}.arrivalTime{font-size:23px}.connection{grid-template-columns:auto 1fr}.wait{grid-column:2;text-align:left}.brand h1{font-size:28px}.infoGrid{grid-template-columns:1fr}.upcomingRow{grid-template-columns:58px 1fr auto}}

.infoCardSimple{padding:15px}.infoText{margin:0;color:#d9e8ed;font-size:13px;line-height:1.55}.infoText strong{color:#ffffff}