:root {
            --primary: 227 75% 30%;   /* Navy Blue */
            --secondary: 1 73% 43%;    /* Red Center */
            --accent: 35 90% 55%;      /* Orange Extreme */
            --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 50%, hsl(var(--accent)) 100%);
        }

        body { margin: 0; padding: 0; display: flex; height: 100vh; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; color: #333; }
        
        #sidebar { 
            width: 320px; background: #fefefe; border-right: 1px solid #ddd; padding: 0; 
            display: flex; flex-direction: column; z-index: 10; overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
            transition: width 0.3s ease, min-width 0.3s ease;
            position: relative;
        }
        
        #sidebar.collapsed {
            width: 0;
            min-width: 0;
            border-right: none;
            overflow: hidden;
        }

        #sidebar-toggle {
            position: absolute;
            left: 320px;
            top: 20px;
            z-index: 1001;
            background: white;
            border: 1px solid #ddd;
            border-left: none;
            border-radius: 0 6px 6px 0;
            padding: 12px 6px;
            cursor: pointer;
            box-shadow: 4px 0 10px rgba(0,0,0,0.1);
            transition: left 0.3s ease, transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: hsl(var(--primary));
            font-weight: bold;
        }

        #sidebar-toggle:hover {
            background: #f8f8f8;
            color: hsl(var(--secondary));
        }

        .collapsed-toggle {
            left: 0 !important;
            transform: rotate(180deg);
        }

        .sidebar-header {
            background: var(--gradient-hero);
            color: white;
            padding: 22px 20px;
            border-bottom: 2px solid rgba(255,255,255,0.1);
        }
        .sidebar-content { padding: 20px; flex: 1; }
        #map-container { flex: 1; position: relative; background: #f0f0f0; }
        h2 { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
        .subtitle { font-size: 0.75rem; opacity: 0.8; margin-top: 5px; }
        
        .control-group { margin-bottom: 18px; }
        label.group-label { display: block; font-weight: 600; font-size: 0.8rem; margin-bottom: 6px; color: #1d3557; text-transform: uppercase; letter-spacing: 0.5px; }
        select { 
            width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ddd; 
            font-size: 0.9rem; background: #fff; cursor: pointer;
            font-family: inherit;
        }
        select:focus { outline: none; border-color: #e63946; }
        
        .region-item { margin-bottom: 2px; display: flex; align-items: center; font-size: 0.85rem; padding: 6px 8px; border-radius: 4px; transition: background 0.2s; }
        .region-item:hover { background: #f0f7ff; }
        .region-item input { margin-right: 12px; cursor: pointer; accent-color: #e63946; width: 16px; height: 16px; }
        .region-item label { cursor: pointer; flex: 1; }

        .multi-select-dropdown { position: relative; width: 100%; }
        .multi-select-header { 
            padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; background: white; 
            display: flex; justify-content: space-between; align-items: center; cursor: pointer;
            font-size: 0.9rem; min-height: 40px; box-sizing: border-box;
        }
        .multi-select-header::after { content: '▼'; font-size: 0.7rem; color: #888; transition: transform 0.3s; }
        .multi-select-header.open::after { transform: rotate(180deg); }
        
        .region-list { 
            position: absolute; top: 100%; left: 0; width: 100%; max-height: 250px; 
            overflow-y: auto; background: white; border: 1px solid #ddd; border-radius: 6px; 
            z-index: 2100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-top: 4px;
            padding: 8px; box-sizing: border-box;
        }
        .region-list.show { display: block; }
        
        .stats { margin-top: auto; font-size: 0.85rem; background: #f1f4f8; padding: 15px; border-top: 1px solid #e1e8ed; }
        .legend {
            position: absolute; bottom: 30px; right: 30px; background: white; padding: 15px;
            border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 1000; font-size: 11px;
            min-width: 170px; border-left: 4px solid #e63946;
        }
        .legend-scale { display: flex; flex-direction: column; margin-top: 8px; }
        .scale-item { display: flex; align-items: center; margin-bottom: 4px; }
        .color-box { width: 16px; height: 12px; margin-right: 12px; border-radius: 2px; }
        .loading { display: none; margin-left: 10px; font-size: 11px; color: #e63946; font-weight: bold; }
        .jenks-note { font-size: 10px; color: #888; margin-top: 6px; font-style: italic; }
        .range-values { display: flex; justify-content: space-between; font-size: 0.75rem; color: #666; margin-top: 10px; }
        
        .palette-dropdown { position: relative; flex: 1; }
        .palette-selected { 
            padding: 8px; border: 1px solid #ddd; border-radius: 6px; background: white; 
            display: flex; gap: 2px; align-items: center; cursor: pointer; height: 38px; box-sizing: border-box;
        }
        .palette-list { 
            position: absolute; top: 100%; left: 0; width: 100%; max-height: 250px; 
            overflow-y: auto; background: white; border: 1px solid #ddd; border-radius: 6px; 
            z-index: 2000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-top: 4px;
        }
        .palette-list.show { display: block; }
        .palette-item { padding: 10px 8px; display: flex; gap: 2px; cursor: pointer; transition: background 0.2s; position: relative; }
        .palette-item:hover { background: #f0f7ff; }
        .palette-item::after {
            content: attr(data-name);
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.85);
            color: #1d3557;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700;
            opacity: 0; transition: opacity 0.15s;
            pointer-events: none;
        }
        .palette-item:hover::after { opacity: 1; }
        .palette-color { flex: 1; height: 14px; border-radius: 1px; }

        .palette-selected:hover::after {
            content: attr(data-name);
            position: absolute;
            bottom: 100%; left: 50%; transform: translateX(-50%);
            background: #333; color: white; padding: 4px 8px; border-radius: 4px;
            font-size: 10px; white-space: nowrap; margin-bottom: 5px;
        }

        /* noUiSlider override */
        .noUi-target { height: 6px !important; border: none !important; background: #e9ecef !important; box-shadow: none !important; }
        .noUi-connect { background: #e63946 !important; }
        .noUi-handle { 
            height: 16px !important; 
            width: 16px !important; 
            border-radius: 50% !important; 
            border: 2px solid #e63946 !important; 
            background: #fff !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; 
            cursor: pointer !important; 
            top: -6px !important; 
            right: -8px !important; 
        }
        .noUi-handle::before, .noUi-handle::after { display: none !important; } /* Remove default stripes */