/* ————— پلیر: تمام اندازه‌ها/چیدمان/گردی‌ها اینجا با CSS خودمکتفی تعریف شدن، ————— */
    /* ————— هیچ‌کدوم به کلاس تیلویند جدید یا فونت آیکون وابسته نیستن (همیشه کار می‌کنه) ————— */
    .soull-player-shell {
        background: rgba(10, 12, 20, .82);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .soull-player-inner {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 1rem;
        position: relative;
    }

    /* چیدمان اصلی ردیف پلیر — با grid به‌جای flex برای جلوگیری از هرگونه هم‌پوشانی */
    .soull-player-row {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: .75rem;
        align-items: center;
    }
    @media (min-width: 768px) {
        .soull-player-row {
            grid-template-columns: 300px minmax(0, 1fr);
            column-gap: 1.25rem;
        }
    }
    @media (min-width: 1024px) {
        .soull-player-row {
            grid-template-columns: 300px minmax(0, 1fr) 180px;
        }
    }

    .soull-player-meta {
        position: relative;
        display: flex;
        align-items: center;
        gap: .75rem;
        min-width: 0;
    }

    .soull-player-controls {
        position: relative;
        min-width: 0;
    }
    .soull-player-buttons {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        margin-bottom: .5rem;
    }
    .soull-player-seek {
        position: relative;
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    .soull-player-volume {
        position: relative;
        display: none;
        align-items: center;
        gap: .75rem;
    }
    @media (min-width: 1024px) {
        .soull-player-volume { display: flex; }
    }

    .soull-cover {
        width: 56px;
        height: 56px;
        border-radius: .75rem;
        flex-shrink: 0;
    }
    .soull-icon-btn {
        position: relative;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .625rem;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        color: #e5e7eb;
        transition: background .15s ease, transform .1s ease;
        flex-shrink: 0;
        line-height: 0;
    }
    .soull-icon-btn svg { position: relative; display: block; }
    .soull-icon-btn:hover { background: rgba(255, 255, 255, .12); }
    .soull-icon-btn:active { transform: scale(.94); }
    .soull-big-play {
        width: 48px;
        height: 48px;
        background: #2563eb;
        border-color: transparent;
        color: #fff;
    }
    .soull-big-play:hover { background: #1d4ed8; }

    .soull-player-range {
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(to left, #2563eb var(--soull-progress-value, 0%), rgba(255,255,255,.14) 0);
        outline: none;
    }
    .soull-player-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 12px; height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #2563eb;
        cursor: pointer;
    }
    .soull-player-range::-moz-range-thumb {
        width: 12px; height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #2563eb;
        cursor: pointer;
    }

    .soull-eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; opacity: .25; }
    .soull-eq span {
        width: 3px; height: 100%;
        background: #2563eb;
        border-radius: 2px;
        animation: soull-eq-bounce 1s ease-in-out infinite;
        transform-origin: bottom;
    }
    .soull-eq.playing { opacity: 1; }
    .soull-eq span:nth-child(1){animation-delay:0s;}
    .soull-eq span:nth-child(2){animation-delay:.15s;}
    .soull-eq span:nth-child(3){animation-delay:.3s;}
    .soull-eq span:nth-child(4){animation-delay:.45s;}
    @keyframes soull-eq-bounce {
        0%, 100% { transform: scaleY(.25); }
        50% { transform: scaleY(1); }
    }
    #soull-player-cover.playing { box-shadow: 0 0 0 2px #2563eb; }