/* VibeParty fallback styles (when React build not present)
   Palette: #8A2BE2, #FF4FD8, #121212, #FFFFFF */

:root {
  --vp-primary: #8A2BE2;
  --vp-accent: #FF4FD8;
  --vp-bg: #121212;
  --vp-fg: #FFFFFF;
  --vp-muted: #8a2be233;
  --vp-card: #1a1a1a;
  --vp-glow: 0 10px 30px rgba(138,43,226,.25);
  --vp-glow-strong: 0 20px 60px rgba(255,79,216,.25);
}

html, body { background: var(--vp-bg); color: var(--vp-fg); }
* { box-sizing: border-box; }

#vibe-party-app { min-height: 100vh; padding: 24px; display: grid; place-items: center; position: relative; overflow:hidden; }
.vp-blob { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); opacity: .25; animation: vp-float 14s ease-in-out infinite; }
.vp-blob.v1 { background: radial-gradient(circle at 30% 30%, var(--vp-primary), transparent 60%); top: -120px; left: -120px; }
.vp-blob.v2 { background: radial-gradient(circle at 70% 70%, var(--vp-accent), transparent 60%); bottom: -140px; right: -140px; animation-delay: 3s; }
@keyframes vp-float { 0% { transform: translateY(0);} 50% { transform: translateY(-20px);} 100% { transform: translateY(0);} }
.vp-card {
  background: var(--vp-card);
  border: 1px solid var(--vp-muted);
  border-radius: 16px;
  padding: 20px;
  width: 100%; max-width: 520px;
  box-shadow: var(--vp-glow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vp-card:hover { transform: translateY(-2px); box-shadow: var(--vp-glow-strong); }
.vp-nav { position:absolute; top:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.vp-nav .vp-btn { background:#1e1e1e; }
.vp-title { font-family: Poppins, Inter, system-ui; font-size: 22px; font-weight: 700; margin: 0 0 12px; color: #fff; }
.vp-sub { color: #cfcfcf; font-size: 14px; margin-bottom: 18px; }
.vp-row { display: flex; gap: 10px; margin: 10px 0; }
.vp-input {
  flex: 1;
  background: #0f0f10;
  color: #fff;
  padding: 12px 14px;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
}
.vp-btn {
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--vp-primary), var(--vp-accent));
  color: #fff; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, filter .2s ease, opacity .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.vp-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.vp-btn.secondary { background: #2a2a2a; }
.vp-list { list-style: none; margin: 0; padding: 0; }
.vp-item { padding: 10px 0; border-bottom: 1px solid #262626; display: flex; align-items:center; gap: 10px; }
.vp-badge { background: var(--vp-muted); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.vp-pin { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 2px; font-weight: 700; }

.vp-input:focus { outline: none; box-shadow: 0 0 0 2px #2a2a2a, 0 0 0 4px #442266; }

@media (max-width: 420px) {
  .vp-title { font-size: 20px; }
  .vp-card { padding: 16px; }
}