*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-width: 380px;--bg: #f5f7fa;--card-bg: #ffffff;--border: #e2e8f0;--text: #1e293b;--text-secondary: #64748b;--shadow-sm: 0 1px 3px rgba(0,0,0,.08);--shadow-md: 0 4px 12px rgba(0,0,0,.1);--shadow-lg: 0 8px 24px rgba(0,0,0,.12);--radius: 12px;--radius-sm: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh}.app{display:flex;flex-direction:column;height:100vh}.app-header{background:var(--card-bg);border-bottom:1px solid var(--border);padding:12px 24px;z-index:100}.app-header h1{font-size:18px;font-weight:600;color:var(--text)}.app-body{display:flex;flex:1;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--border);overflow-y:auto;z-index:50}.map-area{flex:1;position:relative}.map-container{width:100%;height:100%;z-index:1}.search-panel{background:var(--card-bg);padding:16px;display:flex;flex-direction:column;gap:0;border-bottom:1px solid var(--border)}.search-field{position:relative;display:flex;align-items:center;flex:1}.search-field input{width:100%;padding:10px 12px 10px 28px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;background:var(--bg)}.search-field input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.dot{position:absolute;left:10px;width:8px;height:8px;border-radius:50%;z-index:2}.dot-start{background:#3b82f6;box-shadow:0 0 0 2px #3b82f640}.dot-end{background:#ef4444;box-shadow:0 0 0 2px #ef444440}.swap-btn{align-self:center;background:none;border:1px solid var(--border);border-radius:50%;width:30px;height:30px;font-size:14px;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;margin:6px 0;transition:all .2s}.swap-btn:hover{background:#f1f5f9;color:var(--text)}.search-btn{margin-top:12px;padding:10px;background:#3b82f6;color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s,transform .1s}.search-btn:hover:not(:disabled){background:#2563eb}.search-btn:active:not(:disabled){transform:scale(.97)}.search-btn:disabled{opacity:.6;cursor:not-allowed}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.suggestions{position:absolute;top:100%;left:0;right:0;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:100;list-style:none;margin-top:2px;max-height:200px;overflow-y:auto}.suggestions li{padding:8px 12px;font-size:13px;cursor:pointer;transition:background .15s}.suggestions li:hover{background:#f1f5f9}.route-comparison{padding:16px}.comparison-title{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.route-cards{display:flex;flex-direction:column;gap:8px}.route-card{background:var(--card-bg);border-radius:var(--radius);padding:14px 16px;cursor:pointer;position:relative;overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:var(--shadow-sm)}.route-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.route-card.active{border-color:var(--route-color);box-shadow:0 0 0 1px var(--route-color),var(--shadow-md);transform:translateY(-1px)}.card-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.route-icon{font-size:20px}.route-mode-label{font-size:15px;font-weight:600}.active-badge{margin-left:auto;font-size:11px;color:var(--route-color);background:color-mix(in srgb,var(--route-color) 10%,transparent);padding:2px 8px;border-radius:10px;font-weight:500}.card-metrics{display:flex;align-items:center;gap:0}.metric{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}.metric-value{font-size:15px;font-weight:700;color:var(--text)}.route-card.active .metric-value{color:var(--route-color)}.metric-label{font-size:11px;color:var(--text-secondary)}.metric-divider{width:1px;height:28px;background:var(--border)}.card-bar{position:absolute;bottom:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}.route-card.active .card-bar{transform:scaleX(1)}.route-detail{padding:0 16px 16px;transform:translate(20px);opacity:0;max-height:0;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1)}.route-detail.visible{transform:translate(0);opacity:1;max-height:1000px}.detail-header{background:var(--card-bg);border-radius:var(--radius);padding:14px 16px;border-left:4px solid;margin-bottom:12px;box-shadow:var(--shadow-sm)}.detail-title-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.detail-icon{font-size:18px}.detail-title{font-size:15px;font-weight:600}.detail-summary{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.summary-sep{color:var(--border)}.detail-steps{display:flex;flex-direction:column;gap:0}.step-item{display:flex;gap:12px;position:relative}.step-timeline{display:flex;flex-direction:column;align-items:center;width:12px;flex-shrink:0}.step-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:6px;box-shadow:0 0 0 2px #0000000f}.step-line{width:2px;flex:1;min-height:20px}.step-content{flex:1;background:var(--card-bg);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px;box-shadow:var(--shadow-sm);transition:box-shadow .2s}.step-content:hover{box-shadow:var(--shadow-md)}.step-instruction{font-size:13px;font-weight:500;line-height:1.5;display:flex;align-items:flex-start;gap:6px}.step-icon{flex-shrink:0;margin-top:1px}.step-meta{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:12px;color:var(--text-secondary)}.traffic-light-tag{background:#fef3c7;color:#b45309;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:500}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;color:var(--text-secondary)}.empty-icon{font-size:48px;margin-bottom:12px;opacity:.4}.empty-state p{font-size:14px;line-height:1.8}.map-marker{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:700;color:#fff;box-shadow:0 2px 8px #0000004d}.start-marker{background:#3b82f6}.end-marker{background:#ef4444}.route-tooltip{background:var(--card-bg)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px!important;padding:4px 10px!important;font-size:12px!important;font-weight:600!important;box-shadow:var(--shadow-md)!important}.route-tooltip:before{border-top-color:var(--border)!important}.active-polyline{animation:dash-flow 1s linear infinite}@keyframes dash-flow{to{stroke-dashoffset:-28}}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.sidebar::-webkit-scrollbar-track{background:transparent}@media(max-width:768px){.app-body{flex-direction:column}.sidebar{width:100%;min-width:unset;max-height:45vh;border-right:none;border-bottom:1px solid var(--border)}.map-area{min-height:55vh}}