.mvge { position: relative; padding: 16px; border-radius: 16px; }
.mvge .mvge-grid { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px; }
.mvge .mvge-left { min-width: 0; position: relative; }
.mvge .mvge-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #0c0c0c; overflow: hidden; }
.mvge .mvge-player iframe, .mvge .mvge-player video { width: 100%; height: 100%; border: 0; display: block; }
.mvge .mvge-player-placeholder { color: currentColor; display:flex; align-items:center; justify-content:center; height:100%; opacity: .8; text-align:center; padding: 12px; }

/* Theme toggle */
.mvge .mvge-theme-toggle { position:absolute; top: -8px; right: -8px; transform: translateY(-100%); background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 999px; }
.mvge .mvge-theme-toggle:focus-visible { outline: 2px solid currentColor; }

.mvge .mvge-labels { margin-top: 12px; }
.mvge .mvge-brand { font-weight: 700; line-height: 1.2; }
.mvge .mvge-campaign { opacity: 0.9; }

.mvge .mvge-right { width: 320px; }
.mvge .mvge-scroll { max-height: 520px; overflow-y: auto; padding-right: 6px; }
.mvge .mvge-scrollbar::-webkit-scrollbar { width: 8px; }
.mvge .mvge-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.08); border-radius: 8px; }
.mvge .mvge-scrollbar::-webkit-scrollbar-thumb { background: #C9FF00; border-radius: 8px; }

.mvge .mvge-card { display:flex; width:100%; gap:12px; background: rgba(0,0,0,0.06); border-radius: 14px; padding:10px; cursor:pointer; border:1px solid rgba(0,0,0,0.06); transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease; text-align:left; }
.mvge .mvge-card + .mvge-card { margin-top: 12px; }
.mvge .mvge-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mvge .mvge-card.active { outline: 2px solid #C9FF00; }
.mvge .mvge-card:focus { outline: none; }
.mvge .mvge-card:focus-visible { outline: 2px solid currentColor; }

.mvge .mvge-thumb { position: relative; width: 40%; min-width: 40%; }
.mvge .mvge-thumb img { width:100%; height:100%; object-fit: cover; border-radius: 12px; display:block; }
.mvge .mvge-thumb--placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height: 80px; border-radius:12px; background: rgba(0,0,0,0.08); font-size: 12px; }
.mvge .mvge-badge { position:absolute; bottom:6px; left:6px; font-size:12px; line-height:1; padding:6px 8px; border-radius:999px; color:#0a0a0a; background:#C9FF00; }
.mvge .mvge-duration { position:absolute; top:6px; right:6px; font-size:12px; padding:4px 6px; border-radius:6px; background: rgba(0,0,0,.7); color:#fff; }

.mvge .mvge-meta { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.mvge .mvge-meta .mvge-brand { font-size:14px; }
mvge .mvge-meta .mvge-campaign { font-size:13px; opacity:.85; }

@media (max-width: 900px) {
  .mvge .mvge-grid { grid-template-columns: 1fr; }
  .mvge .mvge-right { width: 100%; }
}

/* Themes */
.mvge.mvge--dark { background:#0f1115; color:#e7ecf3; }
.mvge.mvge--dark .mvge-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.mvge.mvge--dark .mvge-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); }

.mvge.mvge--light { background:#ffffff; color:#101217; }
.mvge.mvge--light .mvge-card { background: rgba(16,18,23,0.05); border-color: rgba(16,18,23,0.08); }
.mvge.mvge--light .mvge-scrollbar::-webkit-scrollbar-track { background: rgba(16,18,23,0.12); }