.pyap-player{
    background:#121212;
    border-radius:16px;
    padding:16px 18px;
    max-width:720px;
    color:#fff;
    font-family:Arial,sans-serif;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    margin:20px 0;
}

.pyap-top{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}

.pyap-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#e00000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.pyap-title{
    font-size:26px !important;
    font-weight:700;
    line-height:1;
    margin:0;
    padding:0;
}

.pyap-bottom{
    display:flex;
    align-items:center;
    gap:10px;
}

.pyap-bottom button{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#e00000;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
    transition:.2s;
}

.pyap-bottom button:hover{
    transform:scale(1.05);
}

.pyap-progress{
    flex:1;
    height:7px;
    background:#2f2f2f;
    border-radius:50px;
    overflow:hidden;
    cursor:pointer;
}

.pyap-bar{
    width:0%;
    height:100%;
    background:#ff0000;
    transition:width .2s linear;
}

.pyap-time{
    min-width:40px;
    text-align:right;
    font-size:13px;
    color:#d0d0d0;
}

.pyap-hidden{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

@media(max-width:700px){

    .pyap-player{
        padding:14px;
    }

    .pyap-icon{
        width:46px;
        height:46px;
        font-size:20px;
    }

    .pyap-title{
        font-size:20px !important;
    }

    .pyap-bottom button{
        width:38px;
        height:38px;
        font-size:14px;
    }

    .pyap-progress{
        height:6px;
    }

    .pyap-time{
        font-size:12px;
    }
}