:root{--bg-primary:#060a14;--bg-secondary:#0c1222;--bg-card:#111a2e;--bg-card-hover:#162040;--bg-glass:#0c1222d9;--text-primary:#e8eaf6;--text-secondary:#8892a8;--text-muted:#4a5568;--accent-cyan:#18ffff;--accent-blue:#448aff;--accent-purple:#7c4dff;--border-subtle:#ffffff0f;--border-hover:#ffffff1f;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--shadow-card:0 2px 12px #0006;--shadow-glow:0 0 20px #18ffff26;--ease-out:cubic-bezier(.22, 1, .36, 1);--duration-fast:.18s;--duration-normal:.3s;--duration-slow:.5s;--header-height:64px;--sidebar-width:360px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-body{flex:1;display:flex;position:relative;overflow:hidden}.header{height:var(--header-height);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-shrink:0;align-items:center;gap:16px;padding:0 24px;display:flex}.header-logo{object-fit:contain;border-radius:8px;width:36px;height:36px}.header-title{letter-spacing:-.02em;color:var(--text-primary);font-size:1.1rem;font-weight:700}.header-subtitle{color:var(--text-secondary);margin-left:4px;font-size:.75rem;font-weight:400}.header-badge{color:var(--accent-cyan);border-radius:var(--radius-sm);background:#18ffff14;border:1px solid #18ffff26;margin-left:auto;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:500}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-subtle);transition:width var(--duration-normal) var(--ease-out);z-index:50;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border-subtle);padding:20px 20px 12px}.sidebar-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:4px;font-size:.8rem;font-weight:600}.sidebar-count{color:var(--text-muted);font-size:.7rem}.sidebar-list{flex:1;padding:8px;overflow-y:auto}.line-card{border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);border:1px solid #0000;align-items:center;gap:14px;margin-bottom:4px;padding:12px 14px;display:flex}.line-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.line-card.active{background:var(--bg-card);border-color:var(--border-hover);box-shadow:var(--shadow-card)}.line-badge{border-radius:var(--radius-md);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000004d}.line-badge:after{content:"";pointer-events:none;background:linear-gradient(135deg,#fff3 0%,#0000 50%);position:absolute;inset:0}.line-info{flex:1;min-width:0}.line-name{color:var(--text-primary);margin-bottom:2px;font-size:.85rem;font-weight:600}.line-direction{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.line-stop-count{color:var(--text-muted);border-radius:var(--radius-sm);background:#ffffff0a;flex-shrink:0;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:.7rem}.main-content{background:var(--bg-primary);flex:1;display:flex;position:relative;overflow:hidden}.network-map-container{flex:1;justify-content:center;align-items:center;padding:32px;display:flex;position:relative;overflow:auto}.network-map-svg{max-width:100%;max-height:100%}.network-welcome{text-align:center;pointer-events:none;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.network-welcome h2{color:var(--text-primary);margin-bottom:6px;font-size:1.4rem;font-weight:700}.network-welcome p{color:var(--text-secondary);font-size:.85rem}.route-panel{background:var(--bg-secondary);border-left:1px solid var(--border-subtle);width:380px;animation:slideInRight var(--duration-normal) var(--ease-out);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.route-panel-header{border-bottom:1px solid var(--border-subtle);padding:24px 20px 16px}.route-panel-line{align-items:center;gap:14px;margin-bottom:12px;display:flex}.route-panel-badge{border-radius:var(--radius-lg);color:#fff;justify-content:center;align-items:center;width:60px;height:60px;font-family:JetBrains Mono,monospace;font-size:1.6rem;font-weight:700;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #0006}.route-panel-badge:after{content:"";background:linear-gradient(135deg,#ffffff40 0%,#0000 50%);position:absolute;inset:0}.route-panel-title{color:var(--text-primary);font-size:1.15rem;font-weight:700}.route-panel-direction{color:var(--text-secondary);margin-top:3px;font-size:.82rem}.route-panel-meta{flex-wrap:wrap;gap:12px;display:flex}.route-meta-tag{color:var(--text-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#ffffff0a;padding:4px 10px;font-size:.7rem}.route-meta-tag a{color:var(--accent-cyan);text-decoration:none}.route-meta-tag a:hover{text-decoration:underline}.route-panel-close{border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;width:32px;height:32px;transition:all var(--duration-fast);background:#ffffff0f;justify-content:center;align-items:center;font-size:1rem;display:flex;position:absolute;top:16px;right:16px}.route-panel-close:hover{color:var(--text-primary);background:#ffffff1a}.stop-sequence{flex:1;padding:8px 20px 32px;overflow-y:auto}.stop-item{cursor:pointer;border-radius:var(--radius-sm);transition:background var(--duration-fast);align-items:flex-start;gap:14px;padding:6px 8px;display:flex;position:relative}.stop-item:hover{background:#ffffff08}.stop-item.active{border-left:3px solid var(--accent-cyan);background:#18ffff0f;padding-left:5px}.stop-track{flex-direction:column;flex-shrink:0;align-items:center;width:20px;display:flex;position:relative}.stop-dot{background:var(--bg-secondary);z-index:2;width:14px;height:14px;transition:transform var(--duration-fast) var(--ease-out);border:3px solid;border-radius:50%;flex-shrink:0}.stop-item:hover .stop-dot{transform:scale(1.3)}.stop-dot.terminal{background-color:currentColor;border-width:4px;width:18px;height:18px}.stop-line-segment{flex:1;width:3px;min-height:28px}.stop-info{flex:1;min-width:0;padding:2px 0 14px}.stop-name{color:var(--text-primary);margin-bottom:3px;font-size:.82rem;font-weight:500}.stop-name.terminal{font-size:.88rem;font-weight:700}.stop-transfers{flex-wrap:wrap;gap:4px;margin-top:3px;display:flex}.transfer-badge{color:#fff;border-radius:3px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:.6rem;font-weight:700;line-height:1.4}.stop-order{color:var(--text-muted);text-align:right;flex-shrink:0;width:20px;padding-top:3px;font-family:JetBrains Mono,monospace;font-size:.65rem}.pax-container{cursor:pointer;-webkit-user-select:none;user-select:none;margin-top:6px}.pax-summary{color:var(--text-secondary);align-items:center;gap:6px;margin-bottom:4px;font-size:.68rem;display:flex}.pax-icon{font-size:.72rem}.pax-total{color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:.72rem;font-weight:600}.pax-label{color:var(--text-muted);font-size:.62rem}.pax-expand{color:var(--text-muted);margin-left:2px;font-size:.6rem}.pax-bars-mini{flex-direction:column;gap:2px;display:flex}.pax-bar-mini{opacity:.7;height:3px;transition:opacity var(--duration-fast), width var(--duration-normal) var(--ease-out);border-radius:2px}.pax-container:hover .pax-bar-mini{opacity:1}.pax-detail{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);animation:fadeIn var(--duration-fast);background:#ffffff05;flex-direction:column;gap:6px;margin-top:8px;padding:10px 12px;display:flex}.pax-detail-row{align-items:center;gap:8px;font-size:.7rem;display:flex}.pax-detail-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.pax-detail-label{width:44px;color:var(--text-secondary);flex-shrink:0;font-size:.65rem}.pax-detail-bar-container{background:#ffffff0a;border-radius:4px;flex:1;height:8px;overflow:hidden}.pax-detail-bar{height:100%;transition:width var(--duration-normal) var(--ease-out);border-radius:4px}.pax-detail-value{color:var(--text-primary);text-align:right;flex-shrink:0;width:50px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:500}.stop-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;animation:fadeIn var(--duration-fast);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.stop-modal{background:var(--bg-card);border:1px solid var(--border-hover);border-radius:var(--radius-xl);width:90%;max-width:420px;animation:scaleIn var(--duration-normal) var(--ease-out);padding:28px 32px;box-shadow:0 12px 48px #00000080}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.stop-modal h3{margin-bottom:6px;font-size:1.2rem;font-weight:700}.stop-modal-subtitle{color:var(--text-secondary);margin-bottom:16px;font-size:.78rem}.stop-modal-lines{flex-direction:column;gap:6px;display:flex}.stop-modal-line-item{border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast);background:#ffffff08;align-items:center;gap:10px;padding:8px 12px;display:flex}.stop-modal-line-item:hover{background:#ffffff12}.stop-modal-line-badge{border-radius:var(--radius-sm);color:#fff;justify-content:center;align-items:center;width:34px;height:34px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;display:flex}.stop-modal-line-info{color:var(--text-secondary);font-size:.78rem}.stop-modal-close{border:1px solid var(--border-subtle);width:100%;color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast);background:0 0;margin-top:16px;padding:10px;font-size:.82rem}.stop-modal-close:hover{color:var(--text-primary);background:#ffffff0f}.network-line{fill:none;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--duration-normal) var(--ease-out), stroke-width var(--duration-fast);cursor:pointer}.network-line:hover{stroke-width:6px}.network-line.dimmed{opacity:.08}.network-line.highlighted{stroke-width:6px;filter:drop-shadow(0 0 6px)}.network-stop{cursor:pointer}.network-stop:hover .network-stop-circle{filter:drop-shadow(0 0 6px);stroke-width:3px}.network-stop:hover .network-stop-label{fill:var(--text-primary)}.network-stop-circle{fill:var(--bg-primary);stroke-width:2.5px;transition:r var(--duration-fast)}.network-stop-label{fill:var(--text-secondary);pointer-events:none;transition:fill var(--duration-fast), font-size var(--duration-fast);font-family:Inter,sans-serif;font-size:7px;font-weight:500}.network-stop-label.major{fill:var(--text-primary);font-size:8px;font-weight:600}.network-stop.highlighted .network-stop-label{fill:var(--text-primary);font-weight:600}.network-stop.selected{z-index:10}.network-stop-circle.selected{stroke-width:3px;filter:drop-shadow(0 0 8px)}.network-stop-label.selected{fill:#fff;filter:drop-shadow(0 0 4px #000c);font-size:9px;font-weight:700}.stop-pulse-ring{animation:1.8s ease-out infinite pulseRing}@keyframes pulseRing{0%{r:8;opacity:.5}to{r:20;opacity:0}}.pax-map-tooltip{animation:tooltipIn var(--duration-normal) var(--ease-out);pointer-events:none}@keyframes tooltipIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (width<=900px){.sidebar{width:280px}.route-panel{width:320px}}@media (width<=700px){.sidebar{top:var(--header-height);z-index:60;width:300px;position:absolute;bottom:0;left:0;box-shadow:4px 0 24px #00000080}.sidebar.hidden{transform:translate(-100%)}.route-panel{top:var(--header-height);z-index:60;width:320px;position:absolute;bottom:0;right:0;box-shadow:-4px 0 24px #00000080}}