html,body{width:100%;height:100%}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6}#app{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.main-content{flex:1;min-height:0;display:flex;overflow:hidden}.left-sidebar,.right-sidebar{width:400px;overflow-y:auto}.header{color:#fff;z-index:1000;background:linear-gradient(135deg,#2c3e50 0%,#3498db 100%);padding:1rem;box-shadow:0 2px 10px #0000001a}.header h1{margin-bottom:.5rem;font-size:1.5rem}.control-panel{background:#fff;border-radius:8px;max-width:400px;margin:1rem;padding:1rem;box-shadow:0 2px 10px #0000001a}.control-panel h2{color:#2c3e50;border-bottom:2px solid #3498db;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.2rem}.form-group{margin-bottom:1rem}.form-group label{color:#555;margin-bottom:.5rem;font-weight:600;display:block}.form-group input,.form-group select{border:2px solid #ddd;border-radius:6px;width:100%;padding:.75rem;font-size:1rem;transition:border-color .3s}.form-group input:focus,.form-group select:focus{border-color:#3498db;outline:none}#dark-mode-toggle{accent-color:#3498db;border:none;width:auto;padding:0;transform:scale(1.2)}.btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border:none;border-radius:6px;width:100%;margin-top:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:inline-block}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3498db66}.btn:active{transform:translateY(0)}.btn-secondary{background:linear-gradient(135deg,#95a5a6 0%,#7f8c8d 100%)}.btn-secondary:hover{box-shadow:0 4px 12px #95a5a666}.route-info{background:#fff;border-radius:8px;max-width:400px;margin:1rem;padding:1rem;box-shadow:0 2px 10px #0000001a}.route-info h3{color:#2c3e50;margin-bottom:.5rem}.route-info p{color:#666;margin:.5rem 0}.route-info .distance,.route-info .duration{color:#2c3e50;font-weight:600}.settings-panel{background:#fff;border-radius:8px;max-width:400px;margin:1rem;padding:1rem;box-shadow:0 2px 10px #0000001a}.settings-panel h3{color:#2c3e50;margin-bottom:.5rem}#map{flex:auto;width:100%;height:100%;min-height:0}.loading-overlay{z-index:9999;background:#ffffffe6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading-overlay.hidden{display:none}.waypoint-marker{box-shadow:0 2px 5px #0000004d;background-color:#3498db!important;border:2px solid #fff!important}.route-line{line-color:#e74c3c;opacity:.8}body.dark-mode{color:#e6edf3;background-color:#12161c}body.dark-mode .header{background:linear-gradient(135deg,#1f2937 0%,#111827 100%);box-shadow:0 2px 10px #0006}body.dark-mode .control-panel,body.dark-mode .route-info,body.dark-mode .settings-panel{color:#e6edf3;background:#1f2937;box-shadow:0 2px 10px #00000059}body.dark-mode .control-panel h2,body.dark-mode .route-info h3,body.dark-mode .settings-panel h3,body.dark-mode .form-group label{color:#e6edf3}body.dark-mode .form-group input,body.dark-mode .form-group select{color:#e6edf3;background-color:#111827;border-color:#374151}body.dark-mode .form-group input::placeholder{color:#9ca3af}body.dark-mode .route-info p,body.dark-mode #route-status{color:#cbd5e1!important}body.dark-mode .loading-overlay{color:#e6edf3;background:#0f172ae0}