:root{
    --vp-bg:#ffffff;
    --vp-border:#e6e6e6;
    --vp-hover:#f7f7f7;
    --vp-active:#eef5ff;
    --vp-primary:#2563eb;
    --vp-text:#111827;
    --vp-muted:#6b7280;
    --vp-radius:14px;
}

.vp-wrapper{
    display:grid;
    grid-template-columns:minmax(0,2fr) 360px;
    gap:30px;
    align-items:flex-start;
    width:100%;
}

.vp-player{
    min-width:0;
}

.vp-player video{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
    border-radius:var(--vp-radius);
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

#vp-title{
    margin:18px 0 0;
    font-size:26px;
    font-weight:700;
    line-height:1.35;
    color:var(--vp-text);
}

.vp-sidebar{
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius);
    overflow:hidden;
    background:#fff;
    position:sticky;
    top:30px;
}


#vp-list{
    max-height:650px;
    overflow-y:auto;
}

#vp-list::-webkit-scrollbar{
    width:8px;
}

#vp-list::-webkit-scrollbar-thumb{
    background:#d4d4d4;
    border-radius:100px;
}

.vp-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px;
    cursor:pointer;
    transition:.2s;
    border-bottom:1px solid #f3f3f3;
}

.vp-item:last-child{
    border-bottom:none;
}

.vp-item:hover{
    background:var(--vp-hover);
}

.vp-item.active{
    background:var(--vp-active);
}

.vp-item.active .vp-video-title{
    color:var(--vp-primary);
}

.vp-thumb{
    width:150px;
    aspect-ratio:16 / 9;
    flex-shrink:0;

    background:linear-gradient(135deg,#444,#111);

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
    font-size:34px;
    overflow:hidden;
    position:relative;
}

.vp-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.vp-thumb canvas{
    width:100%;
    height:100%;
    object-fit:cover;
}

.vp-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent 45%,
        rgba(0,0,0,.25)
    );

}

.vp-meta{
    flex:1;
    min-width:0;
}

.vp-video-title{

    font-size:15px;

    font-weight:600;

    line-height:1.45;

    color:var(--vp-text);

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

}

.vp-duration{

    margin-top:6px;

    color:var(--vp-muted);

    font-size:13px;

}

.vp-empty{

    text-align:center;

    color:var(--vp-muted);

    padding:40px;

}

@media(max-width:1100px){

.vp-wrapper{

grid-template-columns:1fr;

}

.vp-sidebar{

position:relative;

top:0;

width:100%;

}

#vp-list{

max-height:450px;

}

}

@media(max-width:768px){

#vp-title{

font-size:22px;

}

.vp-item{

padding:12px;

gap:12px;

}

.vp-thumb{

width:120px;

}

}

@media(max-width:500px){

.vp-item{

align-items:center;

}

.vp-thumb{

width:100px;

}

.vp-video-title{

font-size:14px;

}

.vp-duration{

font-size:12px;

}

}