.navigation-card{border-left:5px solid #f5a800}
.navigation-card.navigation-highlight{animation:navigation-pulse .6s ease-in-out 2}
@keyframes navigation-pulse{50%{box-shadow:0 0 0 5px #f5a80066}}
.navigation-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.navigation-dialog{width:min(760px,calc(100% - 20px));max-height:calc(100dvh - 20px);border:0;border-radius:20px;padding:0;box-shadow:0 18px 70px #001c2e88;background:#f7fafc;color:#102f44}
.navigation-dialog::backdrop{background:#001824dd}
.navigation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px;background:#0d3b5c;color:#fff}
.navigation-head h2{font-size:clamp(1.45rem,5vw,2.35rem);line-height:1.15;margin:6px 0 0}
.navigation-head small{color:#ffd166;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.navigation-destination{font-weight:700;margin:20px 24px 10px}
.navigation-map{position:relative;height:clamp(290px,47vh,470px);margin:10px 24px;overflow:hidden;border:2px solid #b9c9d3;border-radius:16px;background:#dce6eb;isolation:isolate}
.navigation-map-loading{display:grid;place-items:center;height:100%;margin:0!important}
.navigation-map-tile{position:absolute;width:256px;height:256px;max-width:none;z-index:1;user-select:none}
.navigation-traffic-tile{z-index:2;pointer-events:none}
.navigation-route-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.navigation-route-shadow,.navigation-route-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.navigation-route-shadow{stroke:#fff;stroke-width:10}
.navigation-route-line{stroke:#0878d1;stroke-width:6}
.navigation-position-marker{position:absolute;z-index:5;width:28px;height:28px;border:4px solid #fff;border-radius:50%;background:#0878d1;box-shadow:0 2px 8px #001c2e99}
.navigation-position-marker::after{content:"";position:absolute;left:50%;top:-13px;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid #0878d1}
.navigation-destination-marker{position:absolute;z-index:5;transform:translate(-50%,-85%);font-size:38px;line-height:1;color:#d52222;-webkit-text-stroke:4px #fff;paint-order:stroke fill;filter:drop-shadow(0 2px 3px #001c2e77)}
.navigation-map-legend{position:absolute;left:8px;bottom:8px;z-index:6;display:flex;gap:9px;padding:6px 8px;border-radius:9px;background:#fffffff0;color:#17394e;font-size:.72rem;font-weight:800;box-shadow:0 1px 5px #001c2e44}
.navigation-map-legend span{display:flex;align-items:center;gap:3px}.navigation-map-legend i{display:inline-block;width:15px;height:5px;border-radius:4px}.flow-green{background:#2ae57b}.flow-orange{background:#ffc105}.flow-red{background:#fb2d09}
.navigation-map-attribution{position:absolute;right:5px;bottom:4px;z-index:6;padding:2px 4px;border-radius:4px;background:#ffffffd9;color:#17394e;font-size:.65rem}
.navigation-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 24px}
.navigation-summary>div{background:#fff;border:1px solid #cfdae1;border-radius:14px;padding:15px;text-align:center}
.navigation-summary b{display:block;font-size:1.35rem;color:#0d3b5c}
.navigation-summary small{display:block;margin-top:4px;color:#607583}
.navigation-traffic{margin:10px 24px;padding:12px 15px;border-radius:12px;background:#e7f5ec;color:#145c32;font-weight:700}
.navigation-dialog>[data-nav-status],.navigation-safety{margin:12px 24px}
.standalone-navigation-body{padding:24px}
.standalone-navigation-body>button[type="submit"]{width:100%;margin-top:14px}
.standalone-navigation-body .address-results{position:static;max-height:42vh;margin-top:8px;overflow:auto}
.navigation-safety{padding:12px;border-radius:12px;background:#fff3cd;color:#725400;font-weight:700}
@media(max-width:620px){.navigation-actions{grid-template-columns:1fr}.navigation-head{display:block}.navigation-head button{margin-top:14px;width:100%}.navigation-summary{padding:8px 14px;gap:6px}.navigation-summary>div{padding:10px 5px}.navigation-summary b{font-size:1rem}.navigation-destination,.navigation-map,.navigation-traffic,.navigation-dialog>[data-nav-status],.navigation-safety{margin-left:14px;margin-right:14px}.navigation-map{height:42vh;min-height:280px}.navigation-map-legend{gap:5px;font-size:.64rem}}