/* Video cards and the on-page player (assets/video/video.js). Dark only, like the builder. */
.apv-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.apv-card { display: flex; flex-direction: column; border: 1px solid #374151; border-radius: 10px; overflow: hidden; background: rgba(31, 41, 55, .6); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.apv-card:hover { border-color: #10b981; background: #1f2937; }
.apv-card:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.apv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #111827; overflow: hidden; }
.apv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.apv-card:hover .apv-thumb img { transform: scale(1.04); }
.apv-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .15); }
.apv-play svg { width: 48px; height: 34px; opacity: .92; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); transition: opacity .15s, transform .15s; }
.apv-card:hover .apv-play svg { opacity: 1; transform: scale(1.08); }
.apv-text { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.apv-title { font-size: 13px; font-weight: 600; color: #f3f4f6; line-height: 1.3; }
.apv-sub { font-size: 12px; color: #9ca3af; }

/* compact: thumbnail left, text right */
.apv-card.apv-row { flex-direction: row; align-items: center; }
.apv-row .apv-thumb { width: 128px; flex: none; }
.apv-row .apv-play svg { width: 36px; height: 26px; }
.apv-row .apv-text { padding: 8px 12px; }

.apv-dialog { padding: 0; border: 0; background: transparent; width: min(960px, 94vw); max-width: none; }
.apv-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.apv-box { background: #0b1220; border: 1px solid #374151; border-radius: 12px; overflow: hidden; }
.apv-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid #1f2937; }
.apv-bar-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apv-yt { font-size: 12px; color: #9ca3af; text-decoration: underline; }
.apv-yt:hover { color: #e5e7eb; }
.apv-x { background: none; border: 0; color: #9ca3af; font-size: 22px; line-height: 1; padding: 2px 8px; cursor: pointer; }
.apv-x:hover { color: #f3f4f6; }
.apv-frame { aspect-ratio: 16 / 9; background: #000; }
.apv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }