:root { --bg:#0b0f14; --panel:#121821; --panel-alt:#17202b; --text:#ecf2f8; --muted:#a5b3c2; --border:#253245; --accent:#40b5ff; --shadow:0 12px 30px rgba(0,0,0,.26); }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif} body{min-height:100vh;padding-bottom:78px} a{text-decoration:none;color:inherit} button,input{font:inherit}
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px 14px;background:linear-gradient(180deg,rgba(11,15,20,.98),rgba(11,15,20,.92));backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.app-header h1{margin:2px 0 0;font-size:1.5rem}.eyebrow{margin:0;color:var(--accent);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.page-shell{padding:16px;display:grid;gap:14px}.card{background:linear-gradient(180deg,var(--panel),var(--panel-alt));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px}.subtle{color:var(--muted)}.error{border-color:rgba(239,71,111,.5);color:#ffd9e2}.stack{display:grid;gap:12px}.group-block{display:grid;gap:10px}.group-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.group-title-row h2{margin:0;font-size:1.08rem}.meta-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:8px;background:rgba(11,15,20,.96);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
.bottom-nav a{text-align:center;padding:12px 10px;border-radius:14px;color:var(--muted);background:transparent;border:1px solid transparent;font-weight:600}.bottom-nav a.active{color:var(--text);background:rgba(64,181,255,.10);border-color:rgba(64,181,255,.25)}
.icon-btn,.mini-btn,.pin-btn{appearance:none;border:1px solid var(--border);color:var(--text);background:#1b2430;border-radius:12px;padding:10px 12px;cursor:pointer}.icon-btn{width:44px;height:44px}.pin-btn{min-width:42px;height:42px;padding:0;font-size:1.2rem}.pin-btn.active{color:#ffd166;border-color:rgba(255,209,102,.4)}
input[type="search"]{width:100%;border:1px solid var(--border);background:#0f141b;color:var(--text);border-radius:14px;padding:14px 16px}.helper-text{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.live-lookup-wrap{position:relative}.suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:25;background:linear-gradient(180deg,#141b24,#0f141c);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;max-height:min(50vh,360px);overflow-y:auto}.suggestion-item{width:100%;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:12px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;color:var(--text);text-align:left}.suggestion-item:last-child{border-bottom:0}.suggestion-item p{margin:4px 0 0;color:var(--muted);font-size:.86rem}.suggestion-item:hover,.suggestion-item.active{background:rgba(64,181,255,.10)}.suggestion-action{display:flex;align-items:flex-start;justify-content:flex-end;min-width:48px}
.line-card{position:relative;border-radius:18px;padding:14px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));overflow:hidden}.line-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--line-accent,#40b5ff)}
.line-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;width:100%}
.line-title-wrap{display:flex;align-items:center;gap:12px;min-width:0;width:100%}
.line-title-wrap > div{min-width:0;flex:1}
.line-card h3{margin:0 0 4px;font-size:1.02rem;word-break:break-word}
.status-copy{margin:0;color:var(--muted)}
.line-actions{display:grid;gap:8px;justify-items:end;align-content:start;min-width:fit-content}
.detail-panel{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);color:#fff}
.svg-badge{display:inline-flex;line-height:0;flex-shrink:0}.svg-badge svg{height:28px;width:auto;display:block}.svg-badge--compact svg{height:26px}.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.chip-row--tight{margin-top:6px}
.status-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:32px;padding:6px 10px;border-radius:999px;font-size:.84rem;font-weight:700;border:1px solid rgba(255,255,255,.16)}
.status-ok{background:rgba(12,206,107,.15);color:#b7ffd7}.status-minor{background:rgba(249,199,79,.16);color:#ffe7a3}.status-severe{background:rgba(255,159,28,.18);color:#ffd09a}.status-major{background:rgba(243,114,44,.16);color:#ffc5a5}.status-critical{background:rgba(239,71,111,.18);color:#ffd5df}.status-planned{background:rgba(141,153,174,.18);color:#dee4ef}.status-info{background:rgba(76,201,240,.18);color:#d7f6ff}.status-unknown{background:rgba(108,122,137,.18);color:#e1e6ec}
.legend-grid,.pollutants-grid{display:flex;flex-wrap:wrap;gap:8px}.departures-list{display:grid;gap:10px}.departure-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 10px 12px;border-bottom:1px solid rgba(255,255,255,.06);border-left:4px solid var(--line-accent,#40b5ff)}.departure-row:last-child{border-bottom:0;padding-bottom:0}.departure-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.eta{font-weight:800;font-size:1rem;color:var(--accent)}
.station-card{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.station-side-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.clickable-station{cursor:pointer;transition:transform .12s ease, border-color .12s ease}.clickable-station:hover{transform:translateY(-1px);border-color:rgba(64,181,255,.35)}.pinned-card{border-color:rgba(255,209,102,.22)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.flash{animation:softFlash 1.35s ease-in-out infinite}@keyframes softFlash{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0),var(--shadow)}50%{box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 26px rgba(239,71,111,.16)}}
@media (max-width:560px){.station-card{flex-direction:column}.station-side-actions{width:100%;justify-content:space-between}.mini-btn{flex:1}.pin-btn{width:44px}.meta-row{flex-direction:column}.line-main{grid-template-columns:1fr}.line-actions{justify-items:start;width:100%}.line-actions .status-pill{max-width:100%;justify-content:flex-start}.line-title-wrap{align-items:flex-start}}
@media (min-width:720px){body{padding-bottom:24px}.bottom-nav{position:sticky;top:74px;bottom:auto;max-width:860px;margin:0 auto;border-radius:16px;left:16px;right:16px}.page-shell{max-width:860px;margin:0 auto;padding-top:20px}}