.custom-switch-xyz {
    --w: 70px; /* عرض سوییچ */
    --h: 36px; /* ارتفاع سوییچ */
    --bg-off: #e6e6e6;
    --bg-on: rgba(59,130,246,.5);
    --knob: #fff;
    --transition: 220ms cubic-bezier(.2,.9,.2,1);
    font-family: Tahoma, "Segoe UI", sans-serif;
}

    /* مخفی کردن چک‌باکس */
    .custom-switch-xyz input {
        display: none;
    }

    /* قاب سوییچ (label) */
    .custom-switch-xyz label {
        display: inline-grid;
        grid-auto-flow: column;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        user-select: none;
    }

    .custom-switch-xyz .track {
        width: var(--w);
        height: var(--h);
        border-radius: calc(var(--h) / 2);
        background: var(--bg-off);
        position: relative;
        transition: background var(--transition);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    }

    .custom-switch-xyz .knob {
        width: calc(var(--h) - 8px);
        height: calc(var(--h) - 8px);
        border-radius: 50%;
        background: var(--knob);
        position: absolute;
        top: 4px;
        left: 4px;
        transition: transform var(--transition), box-shadow var(--transition);
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        will-change: transform;
    }

    /* وقتی چک‌باکس تیک زده شد */
    .custom-switch-xyz input:checked + label .track {
        background: var(--bg-on);
    }

    .custom-switch-xyz input:checked + label .knob {
        transform: translateX(calc(var(--w) - var(--h)));
        box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    }

    /* متن کنار سوییچ */
    .custom-switch-xyz .text {
        font-size: 14px;
        color: #222;
    }

    /* نمایش وضعیت */
    .custom-switch-xyz .state {
        font-size: 13px;
        color: #666;
        margin-top: 6px;
    }