:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:rgba(255,255,255,.87);background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-blue:#646cffaa;--react-blue:#61dafbaa;--text-muted:#888}*{box-sizing:border-box}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#f0f0f0}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#ffffff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{display:flex;width:100vw;height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;background:#f0f0f0}.error-container,.loading-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;background:linear-gradient(135deg,#667eea,#764ba2);color:white}.error-message,.loading-message{text-align:center;padding:2rem;background:rgba(255,255,255,.1);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:500px;& h2{font-size:2rem}& h2,& p{margin-bottom:1rem}& p{line-height:1.6}& code{background:rgba(0,0,0,.3);padding:.5rem 1rem;border-radius:6px;display:inline-block;margin:.5rem 0;font-family:Monaco,Menlo,monospace}}.retry-button{background:#4caf50;color:white;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:1rem;margin-top:1rem;transition:background-color .3s;&:hover{background:#45a049}}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite;margin:1rem auto}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-banner{position:fixed;top:0;left:0;right:0;background:#f44336;color:white;padding:1rem;display:flex;justify-content:space-between;align-items:center;z-index:1000;box-shadow:0 2px 4px rgba(0,0,0,.1);& button{background:rgba(255,255,255,.2);color:white;border:1px solid rgba(255,255,255,.3);padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background-color .3s;&:hover{background:rgba(255,255,255,.3)}}}.card{padding:2em}.sidebar{width:350px;height:100vh;background:white;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;transition:transform .3s ease;z-index:1000;box-shadow:2px 0 8px rgba(0,0,0,.1);position:relative;flex-shrink:0;&.sidebar-visible{transform:translateX(0)}&.sidebar-hidden{transform:translateX(-100%);position:absolute;left:0;top:0}}.sidebar-toggle-btn{position:fixed;top:1rem;left:1rem;z-index:1001;background:white;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem;cursor:pointer;font-size:1.2rem;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .3s ease;&:hover{background:#f8f9fa;box-shadow:0 4px 12px rgba(0,0,0,.15)}}.sidebar-header{padding:1rem;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:white;& h2{margin:0;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:.5rem}& .back-btn{background:none;border:none;color:white;font-size:1.2rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:background-color .3s;&:hover{background:rgba(255,255,255,.2)}}& .close-btn{background:none;border:none;color:white;font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:background-color .3s;&:hover{background:rgba(255,255,255,.2)}}}.sidebar-controls{padding:1rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.search-container{margin-bottom:1rem;& .search-input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:6px;font-size:.9rem;transition:border-color .3s;&:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px rgba(102,126,234,.2)}}}.filter-container{margin-bottom:1rem;& .filter-select{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:6px;font-size:.9rem;background:white;cursor:pointer;&:focus{outline:none;border-color:#667eea}}}.stats-container{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:#666}.routes-list{flex:1 1;overflow-y:auto;padding:.5rem}.loading-routes,.loading-stops{display:flex;align-items:center;justify-content:center;padding:2rem;color:#666;& .loading-spinner-small{width:20px;height:20px;border:2px solid #e0e0e0;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem}}.no-routes,.no-stops{text-align:center;padding:2rem;color:#666;font-style:italic}.route-item{display:flex;align-items:center;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;background:white;&:hover{border-color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,.15);transform:translateY(-1px)}}.route-color{width:20px;height:20px;border-radius:50%;margin-right:.75rem;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,.2)}.route-info{flex:1 1;min-width:0;& .route-name{font-weight:500;margin-bottom:.25rem;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}& .route-details{display:flex;flex-direction:column;gap:.125rem;font-size:.8rem;color:#666;& .route-id{font-weight:500;color:#667eea}& .route-type{color:#28a745}}}.route-stops{flex:1 1;display:flex;flex-direction:column;min-height:0}.stops-list{flex:1 1;overflow-y:auto;padding:.5rem;min-height:0}.stops-header{padding:.5rem 1rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa;flex-shrink:0;& h3{margin:0;font-size:1rem;color:#333;& .direction-info{font-weight:400;color:#667eea;font-size:.9rem}}}.route-info-header{padding:1rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa;display:flex;align-items:center;gap:1rem;& .route-color-large{width:40px;height:40px;border-radius:50%;border:3px solid white;box-shadow:0 2px 6px rgba(0,0,0,.2)}& .route-details-header{& .route-type{font-weight:600;color:#333;margin-bottom:.25rem}& .route-id{font-size:.9rem;color:#667eea;font-weight:500}}}.directions-horizontal-container{padding:1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;margin-bottom:1rem;& h4{margin:0 0 1rem;font-size:.9rem;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px}& .directions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-gap:.75rem;gap:.75rem}& .direction-card{background:white;border:1px solid #e0e0e0;border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:100px;&:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.05)}&.selected{border-color:#667eea;background-color:#f0f7ff;box-shadow:0 2px 8px rgba(102,126,234,.15);border-width:2px;&:after{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:#667eea}}& .direction-header{margin-bottom:.5rem;& h5{margin:0;font-size:.9rem;color:#333;font-weight:600;line-height:1.3}& .direction-headsign{font-size:.75rem;color:#666;display:block;margin-top:.25rem}}& .direction-preview{margin-top:auto;& .stop-count{font-size:.75rem;color:#667eea;font-weight:500;margin-bottom:.25rem;display:inline-block;background:rgba(102,126,234,.1);padding:2px 6px;border-radius:4px}& .route-preview{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#666;margin-top:.25rem;& .arrow{color:#999;font-size:.8rem}& .first-stop,& .last-stop{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}}}}}.direction-selector{padding:1rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa;& h4{margin:0 0 .75rem;font-size:.9rem;color:#333;font-weight:600;display:flex;align-items:center;gap:.5rem;& .direction-count{font-size:.8rem;color:#667eea;font-weight:400}}& .direction-options{display:flex;flex-direction:column;gap:.5rem}& .direction-option{display:flex;align-items:center;padding:.75rem;border:2px solid #ddd;border-radius:8px;background:white;cursor:pointer;transition:all .3s ease;position:relative;&:hover{border-color:#667eea;box-shadow:0 2px 4px rgba(102,126,234,.1)}&.selected{border-color:#667eea;background:#f0f4ff;box-shadow:0 2px 8px rgba(102,126,234,.2);& .direction-icon{animation:pulse 2s infinite}&:before{content:"\2713";position:absolute;top:.5rem;right:.5rem;background:#667eea;color:white;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}}& .direction-radio{position:absolute;opacity:0;cursor:pointer}& .direction-content{display:flex;align-items:center;gap:.75rem;width:100%}& .direction-icon{font-size:1.2rem;flex-shrink:0}& .direction-text{flex:1 1;min-width:0;& .direction-name{font-weight:500;color:#333;font-size:.9rem;line-height:1.4}& .direction-id{font-size:.8rem;color:#666;font-weight:400}}}& .direction-info-text{margin-top:.5rem;font-size:.8rem;color:#666;font-style:italic;text-align:center}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.direction-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.direction-btn{padding:.5rem 1rem;border:1px solid #ddd;border-radius:6px;background:white;color:#666;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .3s ease;flex:1 1;min-width:0;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5rem;& .direction-icon{font-size:1rem}&:hover{border-color:#667eea;color:#667eea;transform:translateY(-1px);box-shadow:0 2px 4px rgba(102,126,234,.2)}&.active{background:#667eea;border-color:#667eea;color:white;box-shadow:0 2px 4px rgba(102,126,234,.3);& .direction-icon{animation:pulse 2s infinite}}}.direction-info-text{margin-top:.5rem;font-size:.8rem;color:#666;font-style:italic;text-align:center}.stop-icon{font-size:1.2rem;margin-right:.5rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.stop-item{display:flex;align-items:flex-start;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:8px;background:white;transition:all .3s ease;&:hover{border-color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,.15)}}.stop-details{display:flex;flex-direction:column;gap:.125rem;font-size:.8rem;color:#666;& .stop-id{font-weight:500;color:#667eea}& .stop-code{color:#28a745}& .stop-time{color:#ff6b35;font-weight:500}& .stop-type{color:#495057;font-weight:500;font-style:italic}}.stop-sequence{background:#667eea;color:white;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;margin-right:.75rem;flex-shrink:0}.stop-info{flex:1 1;min-width:0;& .stop-name{font-weight:500;margin-bottom:.25rem;color:#333;line-height:1.3}& .stop-details{display:flex;flex-direction:column;gap:.125rem;font-size:.8rem;color:#666;& .stop-id{font-weight:500;color:#667eea}& .stop-code{color:#28a745}& .stop-time{color:#ff6b35;font-weight:500}}}.stop-time{font-size:.75rem;color:#666;margin-top:.25rem;& .current-time{margin-bottom:.2rem}& .next-arrival{background-color:#e6f7ff;border:1px solid #91d5ff;border-radius:4px;padding:.2rem .4rem;margin:.2rem 0;font-size:.7rem;& .next-time{color:#1890ff;font-weight:500}& .time-until{color:#52c41a;font-weight:600;margin-left:.3rem}}& .departure-time{color:#8c8c8c;font-size:.7rem;margin-top:.2rem}}@media (max-width:768px){.sidebar{width:100vw;&.sidebar-hidden{transform:translateX(-100%)}}}