:root {
  --mvp-bg: #0b0f14;
  --mvp-fg: #e5e7eb;
  --mvp-card: #121826;
  --mvp-accent: #34d399;
  --mvp-muted: #94a3b8;
}
.mvp-wrap[data-theme="standard"] { --mvp-accent: var(--mvp-accent); }
.mvp-wrap[data-theme="halloween"] { --mvp-accent: #f97316; }
.mvp-wrap[data-theme="christmas"] { --mvp-accent: #10b981; }
.mvp-wrap { color: var(--mvp-fg); background: radial-gradient(1200px 600px at 10% -10%, rgba(52,211,153,0.08), transparent 70%), linear-gradient(180deg, #0b0f14, #0b0f14); padding: 2rem; border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,.45); position: relative; overflow: hidden; }
.mvp-wrap[data-dark="off"] { --mvp-bg: #f5f7fb; --mvp-fg: #0b0f14; --mvp-card: #ffffff; --mvp-muted:#334155; background: linear-gradient(180deg, #f5f7fb, #eef2ff); }
.mvp-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.mvp-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing:.2px; }
.mvp-badge { font-size:.75rem; padding:.35rem .6rem; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.mvp-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
.mvp-card { background: var(--mvp-card); border:1px solid rgba(255,255,255,.06); border-radius:1rem; padding:1rem; position:relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mvp-card:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(0,0,0,.35); border-color: color-mix(in oklab, var(--mvp-accent) 35%, transparent); }
.mvp-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.8rem 1rem; border-radius:.75rem; border:1px solid color-mix(in oklab, var(--mvp-accent) 35%, transparent); background: color-mix(in oklab, var(--mvp-accent) 18%, transparent); color: var(--mvp-fg); text-decoration:none; font-weight:700; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.mvp-btn:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--mvp-accent) 28%, transparent); box-shadow: 0 10px 25px color-mix(in oklab, var(--mvp-accent) 35%, transparent); }
.mvp-anim-pulse .mvp-btn { animation: mvpPulse 1600ms infinite; }
@keyframes mvpPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mvp-accent) 40%, transparent); } 70%{ box-shadow: 0 0 0 18px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mvp-anim-glow .mvp-card::after { content:""; position:absolute; inset:-1px; border-radius:1rem; pointer-events:none; background: conic-gradient(from 90deg at 50% 50%, transparent, color-mix(in oklab, var(--mvp-accent) 45%, transparent), transparent 30%); filter: blur(12px); opacity: .35; }
.mvp-wrap[data-theme="halloween"] .mvp-title::after { content:" 🎃"; filter: drop-shadow(0 0 6px #f97316); }
.mvp-wrap[data-theme="christmas"] .mvp-title::after { content:" 🎄"; filter: drop-shadow(0 0 6px #10b981); }
.mvp-footer { margin-top:1.25rem; display:flex; justify-content:space-between; gap:.75rem; align-items:center; color:var(--mvp-muted); font-size:.9rem; }
.mvp-online-dot { width:10px;height:10px; border-radius:999px; background: var(--mvp-accent); margin-right:.4rem; display:inline-block; }
.mvp-canvas { position:absolute; inset:0; pointer-events:none; }