/* CSV Video Gallery - Dark theme with tags and duration */
.cvg-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 18px; box-sizing: border-box; }
.cvg-filterbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cvg-filterbar button { background:#151515; color:#ddd; border:1px solid #222; padding:6px 10px; border-radius:6px; cursor:pointer; }
.cvg-filterbar button.active { background:#1f6feb; color:#fff; border-color:#1f6feb; }
.cvg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.cvg-card { background: #0f0f10; color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.6); transition: transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; }
.cvg-thumb { width:100%; aspect-ratio: 16/9; object-fit: cover; display:block; background:linear-gradient(180deg,#111,#222); }
.cvg-meta { padding: 10px 12px; }
.cvg-title { font-size: 15px; font-weight: 600; margin:0 0 6px 0; color:#fff; }
.cvg-desc { font-size: 13px; color:#bdbdbd; margin:0; max-height:3.6em; overflow:hidden; text-overflow:ellipsis; }
.cvg-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 26px rgba(0,0,0,0.7); }
.cvg-overlay-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.cvg-thumb-wrap { position: relative; }
/* duration overlay */
.cvg-duration { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,0.65); color:#fff; padding:4px 6px; border-radius:4px; font-size:12px; }
.cvg-play-button { width:54px; height:54px; background: rgba(0,0,0,0.45); border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.cvg-play-button svg { width:24px; height:24px; fill: #fff; margin-left:4px; }
/* tags */
.cvg-tags { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.cvg-tag { background:#1b1b1b; color:#cfd8e3; padding:4px 8px; border-radius:999px; font-size:12px; cursor:pointer; border:1px solid #222; }
/* Lightbox */
.cvg-lightbox { position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,0.85); z-index:99999; padding:20px; }
.cvg-lightbox[aria-hidden="false"] { display:flex; }
.cvg-lightbox-inner { width:100%; max-width:1100px; background:#0b0b0b; border-radius:8px; padding:12px; box-shadow:0 10px 40px rgba(0,0,0,0.8); position:relative; }
.cvg-player-wrap { width:100%; background:#000; border-radius:6px; overflow:hidden; }
.cvg-close { position:absolute; right:8px; top:6px; background:transparent; color:#fff; border:0; font-size:28px; cursor:pointer; }
/* responsiveness */
@media (max-width: 900px) {
  .cvg-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
  .cvg-title { font-size:14px; }
}
@media (max-width: 480px) {
  .cvg-grid { grid-template-columns: repeat(2, 1fr); gap:10px; }
}
.cvg-error { color:#f66; background:#1a0b0b; padding:12px; border-radius:6px; }