/* ── Grid ───────────────────────────────────────────────── */
.cv-grid { display:grid; gap:20px; margin:0 auto; }
.cv-cols-2 { grid-template-columns:repeat(2,1fr); }
.cv-cols-3 { grid-template-columns:repeat(3,1fr); }
.cv-cols-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .cv-cols-3,.cv-cols-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:540px){ .cv-grid{grid-template-columns:1fr!important;} }

/* ── Card ───────────────────────────────────────────────── */
.cv-card {
    border-radius:10px; overflow:hidden; background:#fff;
    border:1px solid #e8e8e8; cursor:pointer;
    transition:box-shadow .2s, transform .2s;
}
.cv-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.cv-card:focus { outline:2px solid #2563EB; outline-offset:2px; }

/* ── Thumbnail ──────────────────────────────────────────── */
.cv-thumb {
    position:relative; width:100%; padding-top:56.25%;
    background:#1a1a2e; overflow:hidden;
}
.cv-thumb img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block; transition:transform .3s ease;
}
.cv-card:hover .cv-thumb img { transform:scale(1.04); }
.cv-thumb-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,#1a1a2e,#16213e); }

.cv-play-btn {
    position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.3); transition:background .2s;
}
.cv-play-btn::before {
    content:''; position:absolute; width:52px; height:52px;
    border-radius:50%; background:rgba(37,99,235,.85);
    transition:transform .2s, background .2s;
}
.cv-card:hover .cv-play-btn { background:rgba(0,0,0,.15); }
.cv-card:hover .cv-play-btn::before { transform:scale(1.1); background:rgba(37,99,235,1); }
.cv-play-btn svg { position:relative; z-index:1; width:36px; height:36px; }

.cv-count-badge {
    position:absolute; top:8px; right:8px;
    background:rgba(0,0,0,.65); color:#fff;
    font-size:11px; padding:3px 8px; border-radius:12px;
}

/* ── Card info ──────────────────────────────────────────── */
.cv-info { padding:12px 14px; }
.cv-title { font-size:14px; font-weight:600; color:#1a1a1a; line-height:1.45; margin-bottom:4px; }
.cv-date  { font-size:12px; color:#888; }
.cv-empty { color:#888; font-size:14px; padding:1rem 0; }

/* ── Overlay ────────────────────────────────────────────── */
.cv-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.75); z-index:99999;
    opacity:0; transition:opacity .25s ease;
}
.cv-overlay.open    { display:block; }
.cv-overlay.visible { opacity:1; }

/* ── Modal ──────────────────────────────────────────────── */
.cv-modal {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,calc(-50% + 40px));
    width:90%; max-width:860px;
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.4);
    opacity:0; transition:opacity .25s ease, transform .28s ease;
}
.cv-overlay.visible .cv-modal {
    opacity:1; transform:translate(-50%,-50%);
}

.cv-modal-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid #f0f0f0; gap:12px;
}
.cv-modal-title {
    font-size:15px; font-weight:600; color:#1a1a1a;
    flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cv-close {
    background:transparent; border:none; font-size:20px;
    cursor:pointer; color:#999; padding:2px 8px; line-height:1; flex-shrink:0;
}
.cv-close:hover { color:#333; }

/* ── Tabs ───────────────────────────────────────────────── */
.cv-tabs {
    display:none; gap:0; border-bottom:1px solid #e8e8e8;
    overflow-x:auto; background:#fafafa; flex-wrap:nowrap;
}
.cv-tab {
    padding:10px 18px; font-size:13px; font-weight:500;
    border:none; background:transparent; cursor:pointer;
    color:#555; white-space:nowrap; border-bottom:2px solid transparent;
    transition:color .15s, border-color .15s;
}
.cv-tab:hover  { color:#2563EB; }
.cv-tab.active { color:#2563EB; border-bottom-color:#2563EB; background:#fff; }

/* ── Video ──────────────────────────────────────────────── */
.cv-modal-body { background:#000; }
.cv-video-wrap { position:relative; width:100%; padding-top:56.25%; }
.cv-video-wrap iframe,
.cv-video-wrap video {
    position:absolute; inset:0; width:100%; height:100%; border:none;
}

@media(max-width:600px){
    .cv-modal { width:96%; border-radius:8px; }
    .cv-modal-head { padding:10px 14px; }
    .cv-tab { padding:8px 12px; font-size:12px; }
}