:root{--font-xs:clamp(.7rem, .68rem + .1vw, .75rem);--font-sm:clamp(.8rem, .78rem + .1vw, .85rem);--font-base:clamp(1rem, .97rem + .15vw, 1.05rem);--font-md:clamp(1.25rem, 1.2rem + .25vw, 1.3rem);--font-lg:clamp(1.56rem, 1.5rem + .3vw, 1.62rem);--font-xl:clamp(1.95rem, 1.85rem + .5vw, 2.05rem);--space-half:4px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--bg-app:#080c14;--bg-card:#111827;--bg-card-hover:#162033;--bg-input:#1a2337;--border-subtle:#1e293b;--border-focus:#10b981;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--brand-green:#10b981;--brand-green-dim:#10b98126;--brand-cyan:#06b6d4;--brand-cyan-dim:#06b6d426;--route-badge-bg:#1e293b;--route-badge-text:#e2e8f0;--badge-live-bg:#064e3b;--badge-live-text:#6ee7b7;--warning-bg:#f59e0b1f;--warning-border:#f59e0b4d;--warning-text:#fbbf24;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--shadow-card:0 4px 20px -2px #00000080;--transition-fast:.12s ease}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-size:var(--font-base);justify-content:center;min-height:100vh;display:flex;overflow-y:scroll}#app{width:100%;max-width:480px;min-height:100vh;padding:var(--space-2);gap:var(--space-2);flex-direction:column;display:flex}.app-header{padding:var(--space-1) 0;justify-content:space-between;align-items:center;display:flex}.brand-title{align-items:center;gap:var(--space-1);display:flex}.brand-logo{width:32px;height:32px}.brand-name{font-size:var(--font-md);letter-spacing:-.02em;background:linear-gradient(135deg,#34d399,#38bdf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:800}.status-badge{font-size:var(--font-xs);padding:var(--space-half) var(--space-1);border-radius:var(--radius-full);background:var(--brand-green-dim);color:var(--brand-green);align-items:center;gap:var(--space-half);border:1px solid #10b9814d;font-weight:600;display:flex}.status-dot{background:var(--brand-green);width:6px;height:6px;box-shadow:0 0 6px var(--brand-green);border-radius:50%}.origin-banner{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-2);gap:var(--space-1);box-shadow:var(--shadow-card);flex-direction:column;display:flex;position:relative}.origin-meta-row{justify-content:space-between;align-items:center;display:flex}.origin-tag{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--brand-cyan);align-items:center;gap:var(--space-half);font-weight:700;display:flex}.origin-walk{font-size:var(--font-xs);color:var(--text-secondary);align-items:center;gap:var(--space-half);display:flex}.origin-name-row{justify-content:space-between;align-items:baseline;gap:var(--space-1);display:flex}.origin-name{font-size:var(--font-md);color:var(--text-primary);font-weight:700;line-height:1.3}.origin-platform{font-size:var(--font-xs);color:var(--text-muted)}.btn-change-stop{color:var(--brand-cyan);font-size:var(--font-xs);cursor:pointer;padding:var(--space-half) var(--space-1);border-radius:var(--radius-sm);transition:background var(--transition-fast);background:0 0;border:none;font-weight:600}.btn-change-stop:hover{background:var(--brand-cyan-dim)}.search-container{gap:var(--space-1);flex-direction:column;display:flex;position:relative}.search-input-wrapper{align-items:center;display:flex;position:relative}.search-icon{left:var(--space-2);color:var(--text-muted);pointer-events:none;width:20px;height:20px;position:absolute}.search-input{width:100%;padding:var(--space-2) var(--space-5) var(--space-2) var(--space-5);background:var(--bg-input);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-base);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;font-weight:500}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-green-dim)}.search-clear-btn{right:var(--space-2);color:var(--text-muted);font-size:var(--font-md);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:none;position:absolute}.search-clear-btn.active{display:flex}.search-clear-btn:hover{color:var(--text-primary);background:var(--border-subtle)}.suggestions-list{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;display:flex;overflow:hidden}.suggestion-item{padding:var(--space-2);border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.selected{background:var(--bg-card-hover)}.suggestion-info{flex-direction:column;gap:2px;display:flex}.suggestion-title{font-size:var(--font-base);color:var(--text-primary);font-weight:600}.suggestion-subtitle{font-size:var(--font-xs);color:var(--text-muted)}.suggestion-badge{font-size:var(--font-xs);padding:2px var(--space-1);border-radius:var(--radius-full);font-weight:600}.suggestion-badge.landmark{background:var(--brand-cyan-dim);color:var(--brand-cyan)}.suggestion-badge.cluster{background:var(--brand-green-dim);color:var(--brand-green)}.suggestion-badge.stop,.suggestion-badge.platform{background:var(--route-badge-bg);color:var(--text-secondary)}.section-header{margin-top:var(--space-1);justify-content:space-between;align-items:baseline;display:flex}.section-title{font-size:var(--font-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700}.section-context{font-size:var(--font-xs);color:var(--brand-green);font-weight:600}.cards-container{gap:var(--space-2);flex-direction:column;display:flex}.route-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-2);gap:var(--space-2);box-shadow:var(--shadow-card);transition:border-color var(--transition-fast);flex-direction:column;display:flex}.route-card:hover{border-color:#334155}.route-card-header{justify-content:space-between;align-items:flex-start;gap:var(--space-1);display:flex}.route-destination-info{flex-direction:column;flex:1;gap:2px;display:flex}.route-landmark-title{font-size:var(--font-base);color:var(--text-primary);font-weight:700;line-height:1.3}.route-secondary-line{align-items:center;gap:var(--space-1);font-size:var(--font-xs);display:flex}.route-number-badge{background:var(--route-badge-bg);color:var(--route-badge-text);font-weight:700;font-size:var(--font-xs);padding:2px var(--space-1);border-radius:var(--radius-sm);letter-spacing:.02em}.route-stops-count{color:var(--text-muted)}.route-walk-meta{font-size:var(--font-xs);color:var(--brand-cyan);align-items:center;gap:var(--space-half);font-weight:500;display:flex}.departures-hero-row{align-items:center;gap:var(--space-1);margin-top:var(--space-half);-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;display:flex;overflow-x:auto}.departures-hero-row::-webkit-scrollbar{display:none}.departure-hero-pill{border-radius:var(--radius-md);min-width:84px;transition:transform var(--transition-fast);flex-direction:column;flex-shrink:0;align-items:flex-start;padding:6px 14px;display:flex}.departure-hero-pill.imminent{border:1.5px solid var(--brand-green);background:#10b98126}.departure-hero-pill.imminent .pill-hero{color:#34d399}.departure-hero-pill.imminent .pill-sub{color:#a7f3d0}.departure-hero-pill.upcoming{background:#ffffff0a;border:1px solid #ffffff14}.departure-hero-pill.upcoming .pill-hero{color:var(--text-primary)}.departure-hero-pill.upcoming .pill-sub{color:var(--text-muted)}.pill-hero{font-size:var(--font-base);letter-spacing:-.01em;font-weight:700;line-height:1.15}.pill-sub{font-size:var(--font-xs);margin-top:2px;font-weight:500}.route-headway-badge{font-size:var(--font-xs);color:#38bdf8;border-radius:var(--radius-sm);background:#38bdf81a;border:1px solid #38bdf833;padding:1px 6px;font-weight:600}.route-via-badge{font-size:var(--font-xs);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:220px;font-weight:500;overflow:hidden}.route-ribbon-wrapper{padding-bottom:var(--space-1);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-half);flex-direction:column;gap:4px;display:flex}.route-ribbon-header{justify-content:space-between;align-items:baseline;display:flex}.ribbon-title{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--brand-cyan);font-weight:700}.ribbon-count,.ribbon-hint{font-size:var(--font-xs);color:var(--brand-cyan);align-items:center;gap:4px;font-weight:500;display:flex}.ribbon-hint svg{animation:1.5s ease-in-out infinite nudgeRight}@keyframes nudgeRight{0%,to{transform:translate(0)}50%{transform:translate(3px)}}.route-ribbon-track{-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start;gap:0;padding:8px 4px 4px;display:flex;overflow-x:auto}.route-ribbon-track::-webkit-scrollbar{display:none}.ribbon-stop-node{text-align:center;flex-direction:column;flex-shrink:0;align-items:center;min-width:88px;max-width:105px;padding:0 4px;display:flex;position:relative}.ribbon-stop-node:before{content:"";z-index:1;background:#ffffff1f;width:100%;height:2px;position:absolute;top:5px;left:50%}.ribbon-stop-node:last-child:before{display:none}.ribbon-node-point{background:var(--bg-card);z-index:2;border:2px solid #64748b;border-radius:50%;width:12px;height:12px;margin-bottom:6px;position:relative}.ribbon-stop-node.origin .ribbon-node-point{border-color:var(--brand-green);background:var(--brand-green);box-shadow:0 0 6px #10b98199}.ribbon-stop-node.dest .ribbon-node-point{border-color:var(--brand-cyan);background:var(--brand-cyan);box-shadow:0 0 6px #06b6d499}.ribbon-stop-name{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;font-weight:500;line-height:1.25;display:-webkit-box;overflow:hidden}.ribbon-stop-node.origin .ribbon-stop-name,.ribbon-stop-node.dest .ribbon-stop-name{color:var(--text-primary);font-weight:700}.ribbon-stop-tag{text-transform:uppercase;color:var(--brand-green);margin-top:2px;font-size:9px;font-weight:700}.ribbon-stop-tag.dest{color:var(--brand-cyan)}.service-notice-banner{font-size:var(--font-xs);margin-top:var(--space-half);border-radius:var(--radius-sm);align-items:center;gap:6px;padding:4px 10px;line-height:1.3;display:flex}.service-notice-banner.last-bus{color:#fbbf24;background:#f59e0b1a;border:1px solid #f59e0b40}.service-notice-banner.end{color:#f87171;background:#ef44441a;border:1px solid #ef444440}.details-toggle-btn{color:var(--brand-cyan);font-size:var(--font-xs);cursor:pointer;padding:var(--space-half) 0;align-self:flex-start;align-items:center;gap:var(--space-half);margin-top:var(--space-half);background:0 0;border:none;font-weight:600;display:flex}.details-drawer{gap:var(--space-1);padding-top:var(--space-1);border-top:1px dashed var(--border-subtle);flex-direction:column;animation:.15s fadeIn;display:none}.details-drawer.open{display:flex}.service-span-bar{font-size:var(--font-xs);color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-half);justify-content:space-between;align-items:center;padding:6px 0;display:flex}.service-span-bar strong{color:var(--text-primary)}.timetable-periods-container{gap:var(--space-2);margin-top:var(--space-half);flex-direction:column;display:flex}.timetable-period-block{flex-direction:column;gap:4px;display:flex}.period-header{justify-content:space-between;align-items:baseline;display:flex}.period-title{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--brand-green);font-weight:700}.period-hours{font-size:var(--font-xs);color:var(--text-muted)}.period-chips-grid{flex-wrap:wrap;gap:6px;display:flex}.time-chip{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--font-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums;transition:all var(--transition-fast);padding:3px 8px}.time-chip.active{background:var(--brand-green);color:#080c14;border-color:var(--brand-green);font-weight:700;box-shadow:0 0 8px #10b98166}.time-chip.past{opacity:.35;background:0 0;border-color:#ffffff0d;text-decoration:line-through}.route-stops-timeline{gap:var(--space-half);padding-left:var(--space-2);border-left:2px solid var(--border-subtle);margin-left:var(--space-1);flex-direction:column;display:flex}.timeline-stop{font-size:var(--font-xs);color:var(--text-secondary);position:relative}.timeline-stop.current{color:var(--brand-green);font-weight:700}.timeline-stop.destination{color:var(--brand-cyan);font-weight:700}.empty-state-card{background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:var(--radius-md);padding:var(--space-3);text-align:center;align-items:center;gap:var(--space-1);flex-direction:column;display:flex}.empty-state-icon{width:36px;height:36px;color:var(--warning-text)}.empty-state-message{font-size:var(--font-base);color:var(--warning-text);font-weight:600;line-height:1.4}.empty-state-sub{font-size:var(--font-xs);color:var(--text-muted)}.modal-overlay{backdrop-filter:blur(4px);z-index:1000;background:#000000bf;justify-content:center;align-items:flex-end;display:none;position:fixed;inset:0}.modal-overlay.open{display:flex}.modal-sheet{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:480px;max-height:80vh;padding:var(--space-3);gap:var(--space-2);box-shadow:var(--shadow-card);flex-direction:column;animation:.2s slideUp;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--font-md);color:var(--text-primary);font-weight:700}.btn-close-modal{color:var(--text-muted);font-size:var(--font-lg);cursor:pointer;padding:var(--space-half);background:0 0;border:none}.modal-stop-list{gap:var(--space-1);flex-direction:column;display:flex;overflow-y:auto}.modal-stop-item{padding:var(--space-2);border-radius:var(--radius-sm);background:var(--bg-input);border:1px solid var(--border-subtle);cursor:pointer;transition:background var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.modal-stop-item:hover{background:var(--bg-card-hover);border-color:var(--brand-cyan)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (width>=640px){#app{padding:var(--space-3) 0}.modal-sheet{border-radius:var(--radius-md);margin-bottom:var(--space-4)}}