:root{
    --bg:#0b0e13; --fg:#e8eef6; --muted:#9aa7b8; --card:#121722; --cardHover:#1a2130; --radius:18px;
  }
  body{background-color: #000;color:#fff;padding: 20px 0 20px 0;}
.vv-frame,
.vv-video,
.modal-content,
.modal {
  background-color: none !important;
  --bs-modal-margin: 1rem;
}
  .subtitle{ color:var(--muted); }

  /* Scroll row */
  .vv-row{
    gap:14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .vv-row::-webkit-scrollbar{ display:none; }

  /* 9:16 card */
  .vv-card{
    flex:0 0 22%; max-width:22%;
    background:var(--card); border-radius:var(--radius); border:0; padding:0; cursor:pointer;
    transition:transform .18s ease, background .18s ease; position:relative; overflow:hidden;
    aspect-ratio:9/16;
  }
  .vv-card:hover{ transform:translateY(-2px); background:var(--cardHover); }
  @media (max-width:1100px){ .vv-card{ flex-basis:28%; max-width:28%; } }
  @media (max-width:900px){  .vv-card{ flex-basis:34%; max-width:34%; } }
  @media (max-width:700px){  .vv-card{ flex-basis:46%; max-width:46%; } }
  @media (max-width:520px){  .vv-card{ flex-basis:72%; max-width:72%; } }

  .vv-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .vv-overlay{
    position:absolute; left:0; right:0; bottom:0; color:#fff; font-size:13px;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.8) 60%);
    padding:12px; display:flex; justify-content:space-between; align-items:flex-end;
  }
  .vv-pill{ font-size:11px; background:rgba(255,255,255,.14); padding:6px 8px; border-radius:999px; white-space:nowrap; }
  .vv-play{
    position:absolute; right:10px; bottom:10px; width:42px; height:42px; border-radius:999px;
    background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); display:grid; place-items:center;
  }
  .vv-play::before{
    content:""; width:0; height:0; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:2px;
  }

  .vv-nav{
    position:relative;
  }
  .vv-nav .btn{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  }
  .vv-prev{ left:-8px; }
  .vv-next{ right:-8px; }

  /* Modal: keep 9:16 video area */
  .vv-dialog{
    max-width:min(460px,92vw);
  }
  .vv-frame{
    width:100%; aspect-ratio:9/16; background:#000; border-radius:12px; overflow:hidden;
  }
  .vv-video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }