:root{--bg: #0f1318;--bg2: #161c25;--bg3: #1e2735;--text: #f0f0f5;--text2: #8b95a5;--text3: #5a6577;--accent: #4f8aff;--accent-glow: rgba(79, 138, 255, .2);--green: #34d399;--yellow: #fbbf24;--red: #f87171;--border: rgba(255, 255, 255, .06);--glass: rgba(22, 28, 37, .85);--glass-border: rgba(255, 255, 255, .08);--shadow: 0 8px 32px rgba(0, 0, 0, .4);--radius: 12px;--radius-sm: 8px;--transition: .25s cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg: #f0f2f5;--bg2: #ffffff;--bg3: #e5e7eb;--text: #1a1a2e;--text2: #6b7280;--text3: #9ca3af;--accent: #3b82f6;--accent-glow: rgba(59, 130, 246, .12);--green: #10b981;--yellow: #f59e0b;--red: #ef4444;--border: rgba(0, 0, 0, .06);--glass: rgba(255, 255, 255, .88);--glass-border: rgba(0, 0, 0, .06);--shadow: 0 8px 32px rgba(0, 0, 0, .08)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;color-scheme:dark}[data-theme=light]{color-scheme:light}html,body,#root{height:100%;background:var(--bg);color:var(--text);overflow:hidden}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font:inherit;border:none;background:none;color:inherit;outline:none}.app{height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto;position:relative;overflow:hidden;background:var(--bg)}@media(min-width:481px){.app{border-left:1px solid var(--border);border-right:1px solid var(--border)}}.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);z-index:20;flex-shrink:0}.header-title{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-sm);font-size:1.15rem;transition:background var(--transition)}.header-btn:hover{background:var(--bg3)}.search-bar-wrap{position:absolute;top:8px;left:12px;right:12px;z-index:15}.search-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:28px;box-shadow:var(--shadow);transition:border-color var(--transition),box-shadow var(--transition)}.search-bar.focused{border-color:var(--accent);box-shadow:var(--shadow),0 0 0 3px var(--accent-glow)}.search-icon{font-size:.95rem;opacity:.6;flex-shrink:0}.search-bar input{flex:1;font-size:.95rem;background:transparent}.search-bar input::placeholder{color:var(--text3)}.search-clear{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:.7rem;background:var(--bg3);opacity:.7;transition:opacity var(--transition)}.search-clear:hover{opacity:1}.search-results{margin-top:6px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:slideDown .2s ease}.search-result{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;transition:background var(--transition)}.search-result:hover{background:var(--bg3)}.sr-icon{font-size:1.3rem;flex-shrink:0}.sr-name{font-size:.9rem;font-weight:600}.sr-addr{font-size:.78rem;color:var(--text2)}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:30;opacity:0;pointer-events:none;transition:opacity var(--transition)}.sidebar-overlay.open{opacity:1;pointer-events:auto}.sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;background:var(--bg2);z-index:31;transform:translate(-100%);transition:transform var(--transition);overflow-y:auto;display:flex;flex-direction:column}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.sidebar-header h2{font-size:1.1rem;font-weight:700}.sidebar-close{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:.9rem;transition:background var(--transition)}.sidebar-close:hover{background:var(--bg3)}.sidebar-section{padding:16px 20px;border-bottom:1px solid var(--border)}.sidebar-section h3{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:10px}.traffic-item{display:flex;align-items:center;gap:10px;padding:8px 0}.traffic-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.traffic-label{flex:1;font-size:.85rem}.traffic-level{font-size:.75rem;font-weight:600;text-transform:capitalize}.sidebar-place{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;text-align:left;transition:opacity var(--transition)}.sidebar-place:hover{opacity:.8}.sp-name{font-size:.88rem;font-weight:600}.sp-addr{font-size:.76rem;color:var(--text2)}.empty-text{font-size:.82rem;color:var(--text3);font-style:italic}.map-view{flex:1;position:relative;overflow:hidden}.map-container{position:absolute;top:0;right:0;bottom:0;left:0}.map-container canvas{display:block;width:100%;height:100%;cursor:crosshair}.place-popup{position:absolute;bottom:12px;left:12px;right:12px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);z-index:10;animation:slideUp .25s ease}.popup-close{position:absolute;top:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;background:var(--bg3);transition:opacity var(--transition)}.popup-close:hover{opacity:.8}.popup-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.popup-icon{font-size:1.8rem}.popup-name{font-size:1.05rem;font-weight:700}.popup-addr{font-size:.82rem;color:var(--text2)}.popup-actions{display:flex;gap:8px}.popup-btn{flex:1;padding:10px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;background:var(--bg3);transition:all var(--transition)}.popup-btn:hover,.popup-btn.primary{background:var(--accent);color:#fff}.popup-btn.primary:hover{filter:brightness(1.1)}.popup-btn.saved{color:var(--yellow)}.route-panel{flex:1;overflow-y:auto;padding:16px 16px 80px;animation:fadeIn .25s ease}.route-endpoints{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;position:relative}.endpoint{display:flex;align-items:center;gap:10px;padding:6px 0}.ep-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.ep-dot.green{background:var(--green)}.ep-dot.red{background:var(--red)}.ep-label{font-size:.9rem;font-weight:500}.swap-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:1rem;background:var(--bg3);transition:all var(--transition)}.swap-btn:hover{background:var(--accent);color:#fff}.route-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.route-empty-icon{font-size:2.5rem;margin-bottom:12px;opacity:.5}.route-empty p{font-size:.88rem;color:var(--text2)}.route-summary{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}.rs-item{text-align:center}.rs-val{display:block;font-size:1.15rem;font-weight:700;color:var(--accent)}.rs-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}.rs-divider{width:1px;height:32px;background:var(--border)}.route-steps{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}.route-step{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);transition:background var(--transition)}.route-step:first-child{border-radius:var(--radius) var(--radius) 0 0}.route-step:last-child{border-radius:0 0 var(--radius) var(--radius)}.route-step:hover{background:var(--bg3)}.step-num{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:.75rem;font-weight:700;background:var(--accent);color:#fff;flex-shrink:0}.step-instruction{font-size:.88rem;font-weight:500}.step-meta{font-size:.76rem;color:var(--text2);margin-top:2px}.route-actions{display:flex;gap:8px}.btn-start-nav{flex:1;padding:14px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:700;background:var(--accent);color:#fff;transition:all var(--transition)}.btn-start-nav:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-clear-route{padding:14px 20px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;background:var(--bg3);transition:all var(--transition)}.btn-clear-route:hover{background:var(--red);color:#fff}.nav-overlay{position:absolute;bottom:0;left:0;right:0;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -8px 32px #0000004d;z-index:10;animation:slideUp .3s ease;overflow:hidden}.nav-progress{height:3px;background:var(--bg3)}.nav-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#a78bfa);transition:width .4s ease}.nav-content{padding:16px 18px 20px}.nav-main{margin-bottom:8px}.nav-instruction{font-size:1.15rem;font-weight:700;line-height:1.3}.nav-meta{font-size:.82rem;color:var(--text2);margin-top:2px}.nav-next{font-size:.82rem;color:var(--text3);padding:8px 0;border-top:1px solid var(--border);margin-bottom:8px}.nav-dots{display:flex;gap:5px;justify-content:center;padding:8px 0 12px}.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--bg3);transition:all var(--transition)}.nav-dot.active{background:var(--accent);transform:scale(1.3)}.nav-dot.done{background:var(--green)}.nav-actions{display:flex;gap:8px}.nav-btn{padding:10px 16px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;background:var(--bg3);transition:all var(--transition)}.nav-btn:hover:not(:disabled){background:var(--accent);color:#fff}.nav-btn:disabled{opacity:.3;cursor:default}.nav-btn.primary{background:var(--accent);color:#fff}.nav-btn.primary:hover{filter:brightness(1.1)}.nav-btn.finish{background:var(--green);color:#fff}.nav-btn.danger{margin-left:auto}.nav-btn.danger:hover{background:var(--red);color:#fff}.bottom-nav{display:flex;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);flex-shrink:0;z-index:20}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 12px;transition:all var(--transition);position:relative}.nav-tab:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%) scaleX(0);width:40px;height:2px;background:var(--accent);border-radius:0 0 2px 2px;transition:transform var(--transition)}.nav-tab.active:before{transform:translate(-50%) scaleX(1)}.nav-tab.active{color:var(--accent)}.nav-tab:hover:not(.active){color:var(--text2)}.tab-icon{font-size:1.2rem;line-height:1}.tab-label{font-size:.68rem;font-weight:600;letter-spacing:.02em}.saved-view{flex:1;overflow-y:auto;padding:16px 16px 80px;animation:fadeIn .25s ease}.saved-view h2{font-size:1.2rem;font-weight:700;margin-bottom:16px}.saved-empty{display:flex;flex-direction:column;align-items:center;padding:48px 24px;text-align:center;color:var(--text3)}.saved-empty span{font-size:2.5rem;margin-bottom:12px;opacity:.4}.saved-empty p{font-size:.9rem}.saved-empty .sub{font-size:.8rem;margin-top:4px}.saved-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;transition:all var(--transition)}.saved-item:hover{background:var(--bg3);transform:translate(2px)}.saved-icon{font-size:1.4rem}.saved-info{flex:1}.saved-name{font-size:.92rem;font-weight:600}.saved-addr{font-size:.78rem;color:var(--text2)}.saved-remove{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:.75rem;background:var(--bg3);transition:all var(--transition)}.saved-remove:hover{background:var(--red);color:#fff}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text3)}