.mode-switch-container {
        padding: 12px 15px;
        display: flex;
        justify-content: center;
        background: rgba(var(--base-rgb), 0.02);
        border-top: 1px solid rgba(var(--base-rgb), 0.1);
    }

    .custom-switch {
        position: relative;
        display: inline-block;
    }

    .custom-switch-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .custom-switch-label {
        display: block;
        width: 56px;
        height: 28px;
        background: rgba(var(--base-rgb), 0.1);
        border: 1px solid rgba(var(--base-rgb), 0.2);
        border-radius: 14px;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .custom-switch-slider {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--white);
        top: 1px;
        left: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .custom-switch-input:checked+.custom-switch-label {
        background: rgba(var(--dark-rgb), 0.2);
        border-color: rgba(var(--dark-rgb), 0.3);
    }

    .custom-switch-input:checked+.custom-switch-label .custom-switch-slider {
        transform: translateX(28px);
        background: var(--dark);
    }

    .custom-switch-slider .icon {
        position: absolute;
        font-size: 12px;
        transition: all 0.3s ease;
    }

    .custom-switch-slider .ni-sun {
        color: var(--orange);
        opacity: 1;
        left: 6px;
    }

    .custom-switch-slider .ni-moon {
        color: var(--yellow);
        right: 6px;
        opacity: 0;
    }

    .custom-switch-input:checked+.custom-switch-label .ni-sun {
        opacity: 0;
    }

    .custom-switch-input:checked+.custom-switch-label .ni-moon {
        opacity: 1;
    }

    /* Dark mode adjustments */
    [data-theme="dark"] .mode-switch-container {
        background: rgba(var(--dark-rgb), 0.1);
        border-color: rgba(var(--dark-rgb), 0.2);
    }

    [data-theme="dark"] .custom-switch-label {
        background: rgba(var(--dark-rgb), 0.2);
        border-color: rgba(var(--dark-rgb), 0.3);
    }

    [data-theme="dark"] .custom-switch-slider {
        background: var(--dark-2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .custom-switch-input:checked+.custom-switch-label {
        background: rgba(var(--light-rgb), 0.1);
        border-color: rgba(var(--light-rgb), 0.2);
    }

    [data-theme="dark"] .custom-switch-input:checked+.custom-switch-label .custom-switch-slider {
        background: var(--light);
    }