.mini-player{

    position:fixed;

    left:20px;

    right:20px;

    bottom:20px;

    height:82px;

    background:#121826;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:16px;

    display:flex;

    align-items:center;

    gap:16px;

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    z-index:999;

}

.mini-player img{

    width:56px;

    height:56px;

    border-radius:14px;

    object-fit:cover;

    border:1px solid rgba(255,255,255,.08);

    transition:.30s;

}

.radio-playing .mini-player img{

    transform:rotate(360deg);

    transition:transform 20s linear;

}

.mini-info{

    flex:1;

    min-width:0;

}

.mini-info h4{

    font-size:16px;

    font-weight:700;

    color:#fff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.mini-info p{

    margin-top:4px;

    font-size:14px;

    color:#A9B1C7;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

#miniPlay{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #6C2CFF,
        #2EC5FF
    );

    color:#fff;

    transition:
        transform .25s,
        box-shadow .25s;

    box-shadow:
        0 8px 24px rgba(108,44,255,.35);

}

#miniPlay:hover{

    transform:scale(1.08);

    box-shadow:
        0 12px 30px rgba(108,44,255,.45);

}

#miniPlay:active{

    transform:scale(.95);

}

#miniPlay svg{

    width:22px;

    height:22px;

    fill:currentColor;

}

.radio-playing #miniPlay{

    animation:miniPulse 2s infinite;

}

@keyframes miniPulse{

    0%{

        box-shadow:
            0 0 0 rgba(108,44,255,.45);

    }

    50%{

        box-shadow:
            0 0 18px rgba(108,44,255,.65);

    }

    100%{

        box-shadow:
            0 0 0 rgba(108,44,255,.45);

    }

}