/* Base styles + disco background */ 
:root { --bg:#0c0c14; --fg:#f3f3f6; --accent:#ffd54a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height:100%; margin:0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--fg); }
.center { min-height:100dvh; display:grid; place-items:center; padding:24px; }
/* Disco background */
body.disco::before, body.disco::after { content:""; position:fixed; inset:-20% -20%; filter:blur(30px); z-index:-2; }
body.disco::before { background:
  radial-gradient(60% 40% at 30% 30%, rgba(255,213,74,0.25), transparent 60%),
  radial-gradient(60% 40% at 70% 70%, rgba(120,197,255,0.18), transparent 65%),
  radial-gradient(60% 40% at 20% 80%, rgba(255,140,230,0.20), transparent 60%); }
body.disco::after { background:
  conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.05), transparent 20%, rgba(255,255,255,0.05), transparent 40%),
  radial-gradient(60% 40% at 30% 30%, rgba(255,213,74,0.18), transparent 60%),
  radial-gradient(60% 40% at 70% 70%, rgba(120,197,255,0.14), transparent 60%),
  radial-gradient(60% 40% at 20% 80%, rgba(255,140,230,0.16), transparent 60%);
  animation: lights 8s linear infinite; opacity:.7; }
@keyframes lights { from{ transform: rotate(0deg) scale(1.05);} to{ transform: rotate(360deg) scale(1.05);} }
/* Buttons & toast */
button { background:var(--accent); color:#1b1b1f; border:none; border-radius:12px; padding:12px 14px; font-weight:700; font-size:16px; }
.badge { background: rgba(255,255,255,0.12); padding:6px 10px; border-radius:999px; font-size:12px; }
.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(20,20,28,0.95); color:#fff; padding:12px 16px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.35); z-index:9999; font-size:14px; }