:root {
    --ctp-base: 30 30 46;
    --ctp-text: 205 214 244;
    --ctp-subtext0: 166 173 200;
    --ctp-mantle: 24 24 37;
    --ctp-crust: 17 17 27;
    --ctp-surface0: 49 50 68;
    --ctp-mauve: 203 166 247;
    --ctp-pink: 245 194 231;
    --ctp-red: 243 139 168;
    --ctp-peach: 250 179 135;
    --ctp-yellow: 249 226 175;
    --ctp-green: 166 227 161;
    --ctp-blue: 137 180 250;
    --ctp-filter: brightness(0.9) contrast(1.1) saturate(1.1);
}

        /* Rainbow Border for Catppuccin */
        .fancy-input:focus, 
        .rainbow-border, 
        .group:hover .group-hover\:border-ctp-mauve {
            border: 4px solid transparent !important;
            background-image: linear-gradient(rgb(var(--ctp-base)), rgb(var(--ctp-base))), 
                              linear-gradient(to right, rgb(var(--ctp-pink)), rgb(var(--ctp-red)), rgb(var(--ctp-peach)), rgb(var(--ctp-yellow)), rgb(var(--ctp-green)), rgb(var(--ctp-blue)));
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow: 0 0 15px rgba(var(--ctp-mauve), 0.3);
        }

        /* Leaflet Container specific (Conic for proper spin) */
        .leaflet-container .rainbow-border {
             border: none !important;
             background: conic-gradient(from 0deg, rgb(var(--ctp-pink)), rgb(var(--ctp-red)), rgb(var(--ctp-peach)), rgb(var(--ctp-yellow)), rgb(var(--ctp-green)), rgb(var(--ctp-blue)), rgb(var(--ctp-pink)));
        }
        
        /* Apply to search results too */
        #search-results {
            border: 2px solid transparent !important;
            background-image: linear-gradient(rgb(var(--ctp-mantle)), rgb(var(--ctp-mantle))), 
                              linear-gradient(to right, rgb(var(--ctp-pink)), rgb(var(--ctp-red)), rgb(var(--ctp-peach)), rgb(var(--ctp-yellow)), rgb(var(--ctp-green)), rgb(var(--ctp-blue)));
            background-origin: border-box;
            background-clip: padding-box, border-box;
        }