.vpg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:12px}
.vpg-card{background:var(--vpg-bg,#fff);color:var(--vpg-fg,#111);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;transition:transform .18s}
.vpg-card:hover{transform:translateY(-6px)}
.vpg-thumb{height:140px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.vpg-no-thumb{background:linear-gradient(135deg,#e2e2e2,#cfcfcf)}
.vpg-overlay{position:absolute;pointer-events:none}
.vpg-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.5);color:#fff;border:0;padding:8px 12px;border-radius:6px}
.vpg-title{padding:10px;font-weight:600}
.vpg-root{position:relative;--vpg-bg:#fff;--vpg-fg:#111}
.vpg-root .vpg-toolbar{display:flex;justify-content:flex-end}
.vpg-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);opacity:0;pointer-events:none;transition:opacity .18s}
.vpg-modal.open{opacity:1;pointer-events:auto}
.vpg-modal-inner{background:#fff;padding:12px;border-radius:8px;max-width:95%;max-height:90%;overflow:auto}
.vpg-modal-close{position:absolute;right:18px;top:18px;background:transparent;border:0;font-size:20px}
.vpg-hover-video{width:100%;height:100%;object-fit:cover}

/* Dark theme */
.vpg-dark .vpg-root{--vpg-bg:#111;--vpg-fg:#eee}
.vpg-dark .vpg-modal-inner{background:#111;color:#eee}