.ypsv3-wrap{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(320px,.9fr);
    gap:18px;
    width:100%;
    font-family:Arial,Helvetica,sans-serif;
    color:#0f0f0f;
}

.ypsv3-main{
    min-width:0;
}

.ypsv3-player-shell{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;
    background:#000;
}

.ypsv3-player,
.ypsv3-player iframe{
    display:block;
    width:100%;
    height:100%;
}

.ypsv3-now{
    padding:12px 2px 0;
}

.ypsv3-now-title{
    margin:0 0 5px;
    font-size:20px;
    line-height:1.35;
    font-weight:700;
}

.ypsv3-now-duration{
    color:#606060;
    font-size:13px;
}

.ypsv3-sidebar{
    min-width:0;
    align-self:start;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
}

.ypsv3-sidebar-head{
    padding:14px 16px 10px;
    border-bottom:1px solid #e5e5e5;
}

.ypsv3-sidebar-head strong{
    font-size:16px;
}

.ypsv3-count{
    margin-top:4px;
    color:#606060;
    font-size:12px;
}

.ypsv3-list{
    width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    transition:height .18s ease;
}

.ypsv3-list::-webkit-scrollbar{
    width:8px;
}

.ypsv3-list::-webkit-scrollbar-thumb{
    background:#b8b8b8;
    border-radius:10px;
}

.ypsv3-list::-webkit-scrollbar-track{
    background:transparent;
}

.ypsv3-status{
    padding:18px;
    color:#606060;
    font-size:14px;
    line-height:1.5;
}

.ypsv3-item{
    box-sizing:border-box;
    display:grid;
    grid-template-columns:28px 128px minmax(0,1fr);
    gap:9px;
    align-items:center;
    width:100%;
    min-height:88px;
    padding:8px 10px;
    cursor:pointer;
    border-bottom:1px solid transparent;
    transition:background .15s ease;
}

.ypsv3-item:hover{
    background:#f2f2f2;
}

.ypsv3-item.is-active{
    background:#e9e9e9;
}

.ypsv3-index{
    color:#606060;
    font-size:12px;
    text-align:center;
}

.ypsv3-item.is-active .ypsv3-index{
    font-size:0;
}

.ypsv3-item.is-active .ypsv3-index:after{
    content:"▶";
    font-size:12px;
    color:#0f0f0f;
}

.ypsv3-thumb{
    position:relative;
    width:128px;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:7px;
    background:#ddd;
}

.ypsv3-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.ypsv3-time{
    position:absolute;
    right:4px;
    bottom:4px;
    padding:2px 4px;
    border-radius:4px;
    background:rgba(0,0,0,.84);
    color:#fff;
    font-size:11px;
    line-height:1.2;
}

.ypsv3-item-title{
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    min-width:0;
    font-size:13px;
    line-height:1.35;
    font-weight:600;
}

@media(max-width:900px){
    .ypsv3-wrap{
        grid-template-columns:1fr;
    }

    .ypsv3-sidebar{
        width:100%;
    }
}

@media(max-width:520px){
    .ypsv3-wrap{
        gap:14px;
    }

    .ypsv3-player-shell{
        border-radius:8px;
    }

    .ypsv3-now-title{
        font-size:17px;
    }

    .ypsv3-item{
        grid-template-columns:22px 112px minmax(0,1fr);
        min-height:78px;
        gap:8px;
        padding:7px 8px;
    }

    .ypsv3-thumb{
        width:112px;
    }

    .ypsv3-item-title{
        font-size:12px;
    }
}