/* Videos: cards (website + home strip), filter chips, watch page. Linked by videos.php / video.php / the home page section. */
.vcard{border-radius:16px;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s;display:block}
.vcard:hover{transform:translateY(-4px)}
.vcard-dark{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.vcard-dark:hover{box-shadow:0 16px 44px rgba(99,102,241,.25);border-color:rgba(129,140,248,.5)}
.vcard-light{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.vcard-light:hover{box-shadow:0 12px 32px rgba(15,23,42,.12);border-color:#c7d2fe}
.vcard-thumb{position:relative;aspect-ratio:16/9;background:#0f172a;overflow:hidden}
.vcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.vcard:hover .vcard-thumb img{transform:scale(1.04)}
.vcard-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%)}
.vcard-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;z-index:1;transition:background .2s,transform .2s;backdrop-filter:blur(4px)}
.vcard:hover .vcard-play{background:#dc2626;transform:scale(1.08)}
.vcard-play i{margin-left:3px}
.vcard-badge{position:absolute;left:10px;top:10px;z-index:1;background:#f59e0b;color:#1f2937;font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px}
.vcard-body{padding:.95rem 1.05rem 1.05rem}
.vcard-title{font-size:1rem;font-weight:700;line-height:1.35;margin:0 0 .55rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.vcard-dark .vcard-title{color:#fff}.vcard-light .vcard-title{color:#0f172a}
.vcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;font-size:.78rem}
.vcard-dark .vcard-meta{color:rgba(255,255,255,.5)}.vcard-light .vcard-meta{color:#64748b}
.vcard-chip{display:inline-block;border-radius:999px;padding:.12rem .6rem;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard-dark .vcard-chip{background:rgba(99,102,241,.18);color:#c7d2fe}.vcard-light .vcard-chip{background:#eef2ff;color:#4338ca}
/* filter chips + search (dark page) */
.vchip{display:inline-block;padding:.38rem .95rem;border-radius:999px;font-size:.84rem;font-weight:600;text-decoration:none;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:all .18s;white-space:nowrap}
.vchip:hover{color:#fff;border-color:rgba(165,180,252,.6)}
.vchip.active{background:#6366f1;border-color:#6366f1;color:#fff}
.vsearch{display:flex;gap:.5rem;max-width:520px;margin:0 auto}
.vsearch input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:12px;padding:.65rem 1rem}
.vsearch input::placeholder{color:rgba(255,255,255,.4)}
.vsearch input:focus{outline:none;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.vsearch button{border:0;border-radius:12px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-weight:700;padding:.65rem 1.2rem}
/* watch page */
.vplayer{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vpager a,.vpager span{display:inline-block;min-width:38px;text-align:center;padding:.42rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.75);text-decoration:none;font-size:.85rem;font-weight:600}
.vpager a:hover{border-color:#818cf8;color:#fff}.vpager .cur{background:#6366f1;border-color:#6366f1;color:#fff}.vpager .off{opacity:.35}
@media (max-width:575.98px){.vcard-play{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:1.4rem}.vsearch{flex-wrap:wrap}.vsearch button{width:100%}}
@media (prefers-reduced-motion:reduce){.vcard,.vcard-thumb img,.vcard-play{transition:none}.vcard:hover{transform:none}}