/* Custom Styles for Scrollbars and Range Inputs */
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 10px; }
        
        input[type=range] { -webkit-appearance: none; background: transparent; }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%;
            background: #6366f1; cursor: pointer; margin-top: -3px;
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 6px; cursor: pointer; background: #334155; border-radius: 4px;
        }
        
        /* Smooth Toggle */
        .toggle-checkbox:checked { right: 0; border-color: #6366f1; }
        .toggle-checkbox:checked + .toggle-label { background-color: #6366f1; }
        .toggle-checkbox { right: 0; z-index: 1; border-color: #e2e8f0; transition: all 0.3s; }
        .toggle-label { width: 2.25rem; height: 1.25rem; background-color: #334155; border-radius: 9999px; transition: all 0.3s; }
        .toggle-dot { top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; background-color: white; border-radius: 50%; transition: all 0.3s; }
        .toggle-checkbox:checked ~ .toggle-dot { transform: translateX(100%); }