body{margin:0}
.bvp{background:#07090f;color:white;padding:24px;font-family:system-ui; position:relative}
.bvp-top{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.bvp-search,.bvp-sort,.bvp-cols{
 padding:14px;
 border-radius:14px;
 border:none;
 background:#121735;
 color:white;
 font-size:16px;
}
.bvp-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
 gap:42px 26px;
 min-height:120px;
}
.bvp-grid.is-loading{opacity:.65; transition:.2s}
.bvp-card{cursor:pointer}
.bvp-card img{
 width:100%;
 aspect-ratio:16/9;
 border-radius:18px;
 object-fit:cover;
}
.bvp-title{
 margin-top:12px;
 font-size:18px;
 font-weight:800;
 letter-spacing:.3px;
}

/* Modern pager: prev / info / next */
.bvp-pager{
 position:sticky;
 bottom:0;
 margin-top:28px;
 padding:14px 12px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 background:rgba(7,9,15,.72);
 backdrop-filter:blur(10px);
 border-radius:18px;
 border:1px solid rgba(255,255,255,.08);
}
.bvp-pager button{
 padding:12px 14px;
 border:none;
 border-radius:14px;
 background:#1a2250;
 color:white;
 font-weight:700;
 font-size:15px;
 cursor:pointer;
}
.bvp-pager button:hover{filter:brightness(1.08)}
.bvp-pager button.disabled,
.bvp-pager button:disabled{
 opacity:.45;
 cursor:not-allowed;
}
.bvp-pageinfo{
 font-weight:800;
 font-size:15px;
 color:#d6dbff;
}

/* Modal */
.bvp-modal{
 position:fixed;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:9999;
}
.bvp-backdrop{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,.62);
 backdrop-filter:blur(6px);
}
.bvp-modal iframe{
 width:85vw;
 height:48vw;
 border:0;
 border-radius:18px;
 z-index:2;
}
.bvp-close-hint{
 position:absolute;
 bottom:28px;
 z-index:2;
 color:#e7e7e7;
 font-weight:700;
 background:rgba(0,0,0,.35);
 padding:10px 14px;
 border-radius:999px;
 border:1px solid rgba(255,255,255,.12);
}

/* Mobile */
@media(max-width:768px){
 .bvp-grid{gap:54px 22px}
 .bvp-title{font-size:19px}
 .bvp-top{flex-direction:column}
 .bvp-search,.bvp-sort,.bvp-cols{width:100%}
 .bvp-modal iframe{width:92vw;height:52vw}
}