body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #374151; border-radius: 10px; }

#map-container {
    background-color: #0f172a !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

/* Stable dark theme filter that avoids uneven tile brightness loading artifacts */
.leaflet-tile-pane { 
    filter: brightness(0.6) invert(1) contrast(3.4) hue-rotate(190deg) saturate(0.2) brightness(0.65); 
    transition: filter 0.4s ease-in-out;
    opacity: 1 !important;
}

.leaflet-container {
    background: #0f172a !important;
    outline: none;
    height: 100%;
    width: 100%;
}

.leaflet-overlay-pane {
    filter: none !important;
    mix-blend-mode: normal;
}

.toggle-label { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.toggle-switch { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #374151; transition: .2s; border-radius: 20px; }
.toggle-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 50%; }
input:checked + .toggle-slider { background-color: #4f46e5; }
input:checked + .toggle-slider:before { transform: translateX(16px); }

progress { appearance: none; border: none; }
progress::-webkit-progress-bar { background-color: #374151; border-radius: 10px; }
progress::-webkit-progress-value { background-color: #4f46e5; border-radius: 10px; transition: width 0.1s linear; }

#legend h4 { font-size: 11px; font-weight: 700; color: #fff; }

.animate-fadeIn { animation: fadeIn 0.4s ease-out; }
.animate-slideUp { animation: slideUp 0.3s ease-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }