/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  line-height: 1.5;
  color: var(--fg);
  background:
    radial-gradient(1200px 700px at 10% -10%, #ffd1dc88, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #cde8ff66, transparent 40%),
    linear-gradient(180deg, var(--bg), var(--bg));
  transition: background 0.6s ease, color 0.4s ease;
}

:root {
  --bg: #080b1c;
  --card: #0e1230;
  --panel: #0a0f28;
  --fg: #eef2ff;
  --muted: #c9cfe8;
  --primary: #8b5cf6;
  --primary-strong: #6d28d9;
  --ring: #9fb4ff80;
  --shadow: 0 10px 40px rgba(0,0,0,0.45);
  --neon1: #ff80bf;
  --neon2: #7c9cff;
  --accent1: #ff6b7a;
  --accent2: #ffd166;
  --accent3: #06d6a0;
  --accent4: #7c9cff;
  --accent5: #b18cff;
}
.light {
  --bg: #f8fbff;
  --card: #ffffff;
  --panel: #f3f6ff;
  --fg: #0d1321;
  --muted: #445;
  --primary: #3056ff;
  --primary-strong: #2346e8;
  --ring: #3056ff33;
  --shadow: 0 10px 30px rgba(9,18,44,0.12);
  --neon1: #ff5ea0;
  --neon2: #4c7dff;
}

.view {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
}
.hidden { display: none; }

.card {
  width: min(980px, 95vw);
  background: linear-gradient(180deg, var(--card), color-mix(in oklab, var(--card), transparent 30%));
  border: 1px solid color-mix(in oklab, var(--fg), transparent 80%);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 2.4vw, 36px);
  position: relative;
  overflow: hidden;
}

/* Neon border */
.neon {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, var(--neon1), var(--neon2), var(--neon1));
  filter: blur(30px) saturate(140%);
  opacity: .18;
  pointer-events: none;
}

.logo { font-size: 44px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
h1 { margin: 6px 0 10px; font-size: clamp(28px, 4.2vw, 46px); }
h3 { margin: 0 0 8px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

.input { display: grid; gap: 6px; margin-top: 14px; }
.input span { font-size: 14px; color: var(--muted); }
.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  background: color-mix(in oklab, var(--panel), transparent 0%);
  border: 1px solid color-mix(in oklab, var(--fg), transparent 85%);
  border-radius: 12px;
  padding: 10px 12px;
  outline: 2px solid transparent;
}
.input-row:focus-within { outline-color: var(--ring); }
.input-row input {
  background: transparent; border: 0; color: var(--fg);
  font-size: 16px; outline: none; padding: 4px 0;
}
.icon-btn {
  background: transparent; border: 0; font-size: 18px; cursor: pointer; line-height: 1;
}

.primary-btn, .ghost-btn, .link {
  appearance: none; border: 0; cursor: pointer;
  border-radius: 12px; padding: 12px 16px; font-weight: 600;
}
.primary-btn {
  margin-top: 12px;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: white; box-shadow: 0 8px 20px color-mix(in oklab, var(--primary), transparent 70%);
}
.primary-btn:active { transform: translateY(1px); }
.ghost-btn {
  background: transparent; border: 1px solid color-mix(in oklab, var(--fg), transparent 80%); color: var(--fg);
}
.link { background: transparent; color: var(--primary); padding: 0 4px; text-decoration: underline; }

.gate-card { text-align: center; }
.error { margin: 6px 0 0; color: #ff6b7a; font-weight: 600; min-height: 1.2em; }

.badge {
  display: inline-block;
  background: color-mix(in oklab, var(--primary), transparent 85%);
  border: 1px solid color-mix(in oklab, var(--primary), transparent 60%);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 8px;
}
.highlight { background: linear-gradient(90deg, #ff80bf, #7c9cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero { display: grid; gap: 12px; margin: 6px 0 20px; }
.message { font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); }

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.panel {
  background: color-mix(in oklab, var(--panel), transparent 0%);
  border: 1px solid color-mix(in oklab, var(--fg), transparent 85%);
  border-radius: 16px;
  padding: 14px;
}

.ticks { margin: 8px 0 0; padding-left: 18px; }
.ticks li { margin: 6px 0; }
.actions .buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* Balloons & sparkles */
.balloons { position: relative; height: 140px; overflow: visible; }
.balloon {
  position: absolute; font-size: 46px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
  animation: float 6s ease-in-out infinite;
}
.b1 { left: 10%; animation-delay: 0s; }
.b2 { left: 45%; animation-delay: 1s; }
.b3 { left: 75%; animation-delay: 2s; }
.sparkle {
  position: absolute; font-size: 22px; opacity: .8;
  animation: twinkle 2.8s ease-in-out infinite;
}
.s1 { left: 15%; top: 10%; animation-delay: .4s; }
.s2 { left: 55%; top: -6%; animation-delay: 1s; }
.s3 { left: 85%; top: 16%; animation-delay: 1.6s; }

@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes twinkle { 0%,100% { opacity:.2; transform: scale(0.9)} 50% { opacity:1; transform: scale(1.1)} }

/* Confetti canvas */
#confetti {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
}

.big { font-size: clamp(18px, 2.4vw, 22px); }
.signature { margin-top: 8px; font-size: 18px; opacity: .9; }

.footer { margin-top: 12px; color: var(--muted); text-align: center; }