@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
        html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; background-color: #f8fafc; }
        @supports (height: 100dvh) {
            html, body, #root { height: 100dvh; }
        }
        body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
        .leaflet-container { width: 100%; height: 100%; background: transparent; z-index: 0; }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
        .animate-in { animation: fadeIn 0.3s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .camera-marker { filter: drop-shadow(0 6px 4px rgba(0,0,0,0.4)); cursor: grab; }
        .camera-marker:active { cursor: grabbing; }
        .target-marker { filter: drop-shadow(0 6px 4px rgba(0,0,0,0.4)); cursor: grab; }
        .target-marker:active { cursor: grabbing; }
        
        input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ffffff; border: 3px solid #0ea5e9; cursor: ew-resize; margin-top: -8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
        @media (min-width: 768px) {
            input[type=range]::-webkit-slider-thumb { height: 24px; width: 24px; margin-top: -10px; }
        }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #e2e8f0; border-radius: 3px; }
        input[type=range]:focus { outline: none; }
        
        .ar-scrubber::-webkit-slider-thumb { border-color: #38bdf8; background: #0f172a; box-shadow: 0 0 10px rgba(56, 189, 248, 0.5); }
        .ar-scrubber::-webkit-slider-runnable-track { background: #334155; }

        .leaflet-control-zoom { 
            border: 1px solid #e2e8f0 !important; 
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important; 
            border-radius: 9999px !important; 
            overflow: hidden; 
        }

        @media (max-width: 767px) {
            .leaflet-control-zoom {
                position: absolute !important;
                top: 130px !important;
                bottom: auto !important;
                right: 12px !important;
                left: auto !important;
                margin: 0 !important;
                z-index: 1000 !important;
            }
        }

        @media (min-width: 768px) { 
            .leaflet-control-zoom { 
                margin-bottom: 24px !important; 
                margin-right: 16px !important; 
            } 
        }

        .leaflet-bar a { background-color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(8px); color: #475569 !important; width: 38px !important; height: 38px !important; line-height: 38px !important; transition: all 0.2s; font-weight: bold; }
        @media (min-width: 768px) { .leaflet-bar a { width: 42px !important; height: 42px !important; line-height: 42px !important; } }
        .leaflet-bar a:hover { background-color: #ffffff !important; color: #0ea5e9 !important; }
        .leaflet-bar a:first-child { border-bottom: 1px solid #e2e8f0 !important; }
        
        .leaflet-control-attribution { background-color: rgba(255, 255, 255, 0.8) !important; border-top-right-radius: 8px; padding: 2px 6px !important; color: #64748b !important; }
        @media (max-width: 768px) { .leaflet-control-attribution { margin-bottom: 84px !important; } }
        @media (min-width: 768px) { .leaflet-control-attribution { margin-left: 65px !important; } }