*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}#app{width:100%;height:100%;position:relative}#map{position:absolute;top:0;left:0;width:100%;height:100%}.error-message{position:absolute;top:0;left:0;right:0;z-index:1000;background:#dc2626;color:#fff;padding:12px 20px;font-size:.9rem;font-weight:500;text-align:center;transform:translateY(-100%);transition:transform .3s ease}.error-message.visible{transform:translateY(0)}#route-panel{position:absolute;top:16px;left:16px;z-index:10;background:#fff;border-radius:12px;width:320px;box-shadow:0 4px 20px #00000026;transition:transform .3s ease}#route-panel-body{padding:20px}#route-panel.collapsed #route-panel-body{display:none}#route-panel.collapsed{transform:translate(calc(-100% - 16px))}.route-panel-toggle{position:absolute;top:8px;right:-40px;width:36px;height:36px;border:none;border-radius:0 8px 8px 0;background:#fff;box-shadow:4px 2px 10px #00000026;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#374151;z-index:1}.route-panel-toggle:active{background:#f3f4f6}#route-panel:not(.collapsed) .toggle-icon:after{content:"×"}#route-panel:not(.collapsed) .toggle-icon{font-size:0}#route-panel:not(.collapsed) .toggle-icon:after{font-size:1.3rem}#route-panel h1{font-size:1.25rem;font-weight:600;margin-bottom:16px;color:#1a1a2e}.input-group{margin-bottom:12px;position:relative}.input-group label{display:block;font-size:.75rem;font-weight:500;color:#666;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.input-group input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}.input-group input:focus{outline:none;border-color:#4a90d9;box-shadow:0 0 0 3px #4a90d91a}.input-group input::placeholder{color:#999}.input-group input.confirmed{border-color:#10b981;background-color:#f0fdf4}.suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 8px 8px;list-style:none;max-height:280px;overflow-y:auto;z-index:100;display:none;box-shadow:0 4px 12px #0000001a}.suggestions.visible{display:block}.suggestions li{padding:17px 12px;cursor:pointer;font-size:.9rem;border-bottom:1px solid #f0f0f0;transition:background-color .15s}.suggestions li:last-child{border-bottom:none}.suggestions li:hover,.suggestions li.highlighted{background:#f0f7ff}.suggestions li:active{background:#e0efff}.suggestions li .place-name{font-weight:500;color:#333}.suggestions li .place-context{font-size:.8rem;color:#888;margin-top:2px}#plan-route{width:100%;padding:14px;background:#4a90d9;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}#plan-route:hover{background:#3a7bc8}#plan-route:active{transform:scale(.98)}#plan-route:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.toggle-row{display:flex;gap:8px;margin-top:12px}.radar-toggle{flex:1;padding:10px;background:#374151;color:#9ca3af;border:1px solid #4b5563;border-radius:6px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.radar-toggle:hover{background:#4b5563;color:#e5e7eb}.radar-toggle.active{background:#0ea5e9;color:#fff;border-color:#0ea5e9}.radar-toggle.loading{background:#374151;color:#9ca3af;cursor:wait}.debug-toggle{flex:1;padding:10px;background:#374151;color:#9ca3af;border:1px solid #4b5563;border-radius:6px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.debug-toggle:hover{background:#4b5563;color:#e5e7eb}.debug-toggle.active{background:#7c3aed;color:#fff;border-color:#7c3aed}.route-info{margin-top:16px;padding:12px;background:#f5f8fc;border-radius:8px;font-size:.9rem}.route-info.hidden{display:none}.route-info .duration{font-weight:600;color:#1a1a2e}.route-info .distance{color:#666;margin-top:4px}.marker{width:24px;height:24px;border-radius:50%;border:3px solid white;box-shadow:0 2px 6px #0000004d;cursor:pointer}.marker-origin{background:#10b981}.marker-destination{background:#ef4444}.maplibregl-popup-content{padding:10px 14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.9rem;border-radius:8px;box-shadow:0 2px 10px #00000026}.custom-scale-control{display:flex;flex-direction:row;align-items:center;gap:8px;padding:10px 12px;margin-top:8px;background:#ffffffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:6px;box-shadow:0 1px 4px #00000026}.custom-scale-control .scale-label{font-size:11px;font-weight:600;color:#374151;letter-spacing:.3px;white-space:nowrap}.custom-scale-control .scale-bar{height:3px;background:#374151;border-radius:1px;position:relative;transition:width .15s ease-out}.custom-scale-control .scale-bar:before,.custom-scale-control .scale-bar:after{content:"";position:absolute;top:-2px;width:1px;height:7px;background:#374151}.custom-scale-control .scale-bar:before{left:0}.custom-scale-control .scale-bar:after{right:0}.debug-info{position:absolute;top:50px;right:10px;z-index:10;background:#374151e6;color:#e5e7eb;padding:8px 12px;border-radius:6px;font-size:11px;font-family:SF Mono,Monaco,Cascadia Code,monospace;display:none;box-shadow:0 2px 8px #0003}.debug-info.visible{display:block}.debug-info-row{margin:2px 0}.debug-info-row span{color:#9ca3af}.debug-info-row strong{color:#a78bfa}.loading{opacity:.6;pointer-events:none}@media(max-width:480px){#route-panel{left:0;right:auto;width:calc(100vw - 56px);max-width:320px;top:8px}#route-panel-body{padding:16px}#route-panel h1{font-size:1.1rem}#route-panel.mobile-start-collapsed{transform:translate(calc(-100% - 8px))}.suggestions li{padding:18px 12px}.input-group input{padding:14px 12px}#plan-route{padding:16px}}@supports (padding: max(0px)){#route-panel{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}@media(max-width:480px){#route-panel{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}}}.route-info .camera-count{color:#6366f1;font-weight:500;margin-top:4px}.priority-reel{position:absolute;bottom:0;left:0;right:0;z-index:11;background:linear-gradient(to top,#1e1400e6,#1e1400bf);padding:8px 0 10px;transform:translateY(100%);transition:transform .3s ease;border-top:2px solid #f97316}.priority-reel.visible{transform:translateY(0)}.priority-reel-header{padding:0 16px 6px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#f97316}.priority-reel .film-strip-item:not(.selected){border-color:#f97316;border-width:2px}.priority-reel .film-strip-item.selected{box-shadow:0 0 0 3px #fbbf24;border-color:#fbbf24}.film-strip{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,#000000d9,#000000b3);padding:12px 0;transform:translateY(100%);transition:transform .3s ease,bottom .3s ease}.has-priority-reel .film-strip.visible{bottom:124px}.film-strip.visible{transform:translateY(0)}.film-strip-container{display:flex;gap:12px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.film-strip-container::-webkit-scrollbar{display:none}.film-strip-item{position:relative;flex-shrink:0;width:120px;scroll-snap-align:start;cursor:pointer;border-radius:8px;overflow:hidden;background:#1f2937;border:2px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.film-strip-item:hover{transform:scale(1.05)}.film-strip-item.selected{box-shadow:0 0 0 3px #f59e0b;transform:scale(1.05);border-color:#f59e0b}.film-strip-item[data-source=caltrans]:not(.out-of-view):not(.selected){border-color:#3b82f6;border-width:3px}.film-strip-item[data-source=alertcalifornia]:not(.out-of-view):not(.selected){border-color:#8b5cf6;border-width:3px}.film-strip-item.out-of-view{transform:scale(.9);border-color:#94a3b84d}.film-strip-item.out-of-view:after{content:"";position:absolute;inset:0;background:#0f172a99;pointer-events:none;transition:opacity .2s ease}.film-strip-item.out-of-view:hover{transform:scale(.95);border-color:#94a3b880}.film-strip-item.out-of-view:hover:after{opacity:.4}.film-strip-item.selected.out-of-view{transform:scale(1.05);border-color:#f59e0b}.film-strip-item.selected.out-of-view:after{display:none}.film-strip-item img{width:100%;height:80px;object-fit:cover;background:#374151;cursor:zoom-in;transition:opacity .15s}.film-strip-item img:hover{opacity:.85}.film-strip-label{padding:6px 8px;font-size:.7rem;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-popup{text-align:center}.camera-popup img{width:100%;max-width:300px;border-radius:6px;margin-bottom:8px;cursor:zoom-in;transition:opacity .15s}.camera-popup img:hover{opacity:.9}.camera-popup-name{font-weight:600;font-size:.9rem;color:#1a1a2e;margin-bottom:2px}.camera-popup-meta{font-size:.75rem;color:#666}.camera-popup-unavailable{border:2px solid #ef4444;border-radius:8px;padding:4px}.camera-popup-error{background:#ef4444;color:#fff;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:4px;margin-bottom:6px;text-align:center}@media(max-width:480px){.film-strip{padding:10px 0}.film-strip-container{gap:10px;padding:0 12px}.film-strip-item{width:100px}.film-strip-item img{height:65px}.film-strip-label{padding:4px 6px;font-size:.65rem}}@supports (padding: max(0px)){.film-strip{padding-bottom:max(12px,env(safe-area-inset-bottom))}}.camera-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}.camera-modal.visible{opacity:1;visibility:visible}.camera-modal-backdrop{position:absolute;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.camera-modal-content{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;background:#1f2937;border-radius:12px;overflow:hidden;box-shadow:0 25px 50px -12px #00000080;transform:scale(.95);transition:transform .25s ease}.camera-modal.visible .camera-modal-content{transform:scale(1)}.camera-modal-close{position:absolute;top:12px;right:12px;z-index:10;width:40px;height:40px;background:#0009;color:#fff;border:none;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,transform .15s}.camera-modal-close:hover{background:#000c;transform:scale(1.1)}.camera-modal-close:active{transform:scale(.95)}.camera-modal-content img{width:auto;height:auto;max-width:100%;max-height:calc(90vh - 80px);object-fit:contain;background:#374151}.camera-modal-content img[src=""]{min-width:300px;min-height:200px}.camera-modal-info{padding:16px 20px;background:#1f2937;border-top:1px solid #374151}.camera-modal-info h2{font-size:1rem;font-weight:600;color:#f3f4f6;margin:0 0 4px}.camera-modal-info p{font-size:.85rem;color:#9ca3af;margin:0}@media(max-width:480px){.camera-modal-content{max-width:95vw;max-height:85vh;border-radius:8px}.camera-modal-close{top:8px;right:8px;width:36px;height:36px;font-size:24px}.camera-modal-content img{max-height:calc(85vh - 70px)}.camera-modal-info{padding:12px 16px}.camera-modal-info h2{font-size:.9rem}.camera-modal-info p{font-size:.8rem}}@supports (padding: max(0px)){.camera-modal-content{margin:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}}.route-alerts{margin-top:12px;max-height:200px;overflow-y:auto;border-radius:8px;background:#fef3c7;border:1px solid #fbbf24}.route-alerts.hidden{display:none}.route-alerts-header{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:.8rem;font-weight:600;color:#92400e;background:#fde68a;border-bottom:1px solid #fbbf24;position:sticky;top:0}.route-alerts-header .alert-count{background:#dc2626;color:#fff;font-size:.7rem;padding:2px 6px;border-radius:10px;margin-left:auto}.route-alert{padding:10px 12px;border-bottom:1px solid #fcd34d;cursor:pointer;transition:background-color .15s}.route-alert:last-child{border-bottom:none}.route-alert:hover{background:#fde68a}.route-alert-header{display:flex;align-items:flex-start;gap:8px}.route-alert-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}.route-alert-content{flex:1;min-width:0}.route-alert-event{font-weight:600;font-size:.85rem;color:#1f2937;margin-bottom:2px}.route-alert-area{font-size:.75rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-alert-expires{font-size:.7rem;color:#92400e;margin-top:4px}.route-alert.severity-extreme{background:#fee2e2;border-color:#fca5a5}.route-alert.severity-extreme:hover{background:#fecaca}.route-alert.severity-severe{background:#ffedd5;border-color:#fdba74}.route-alert.severity-severe:hover{background:#fed7aa}.route-alert.severity-moderate{background:#fef9c3;border-color:#fde047}.route-alert.severity-moderate:hover{background:#fef08a}.route-alert.severity-minor{background:#dcfce7;border-color:#86efac}.route-alert.severity-minor:hover{background:#bbf7d0}.route-alerts-none{padding:12px;text-align:center;color:#15803d;font-size:.85rem;background:#dcfce7;border:1px solid #86efac;border-radius:8px}.route-alerts-none .check-icon{font-size:1.2rem;margin-bottom:4px}@media(max-width:480px){.route-alerts{max-height:150px}.route-alert{padding:8px 10px}.route-alert-event{font-size:.8rem}.route-alert-area{font-size:.7rem}}