/* ═══════════════════════════════════════════════
   BIRTHDAY — Unified Design System
   Cormorant Garamond + Plus Jakarta Sans
═══════════════════════════════════════════════ */

:root {
  --bg-1: #0D0221;
  --bg-2: #1A0845;
  --bg-3: #6B21A8;
  --accent-1: #F472B6;
  --accent-2: #FBBF24;
  --accent-3: #C084FC;
  --text-primary: #F5F0FF;
  --text-secondary: #C4B5FD;
  --text-muted: #7C6FA0;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.12);
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.5);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  min-height:100vh;
  background:var(--bg-1);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
}

/* ── Canvas & Orbs ── */
#starCanvas {
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.orb {
  position:fixed; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  animation:orbDrift 18s ease-in-out infinite alternate;
}
.orb-1 { width:500px;height:500px; background:radial-gradient(circle,rgba(107,33,168,.35) 0%,transparent 70%); top:-150px;left:-150px; }
.orb-2 { width:400px;height:400px; background:radial-gradient(circle,rgba(244,114,182,.25) 0%,transparent 70%); top:40%;right:-100px; animation-delay:-6s; }
.orb-3 { width:350px;height:350px; background:radial-gradient(circle,rgba(251,191,36,.15) 0%,transparent 70%); bottom:-100px;left:30%; animation-delay:-12s; }
@keyframes orbDrift { from{transform:translate(0,0) scale(1);} to{transform:translate(40px,30px) scale(1.1);} }

/* ── Confetti ── */
#confettiContainer { position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden; }
.confetti-piece {
  position:absolute; width:8px; height:8px; top:-10px;
  animation:confettiFall linear forwards; border-radius:2px;
}
@keyframes confettiFall { to { transform:translateY(110vh) rotate(720deg) translateX(var(--drift)); opacity:0; } }

/* ── Wish Overlay ── */
.wish-overlay {
  position:fixed;inset:0;z-index:1000;
  background:rgba(13,2,33,.85);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .5s ease;
}
.wish-overlay.hidden { display:none; }
.wish-content {
  text-align:center;padding:60px 50px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);backdrop-filter:blur(20px);
  max-width:480px;width:90%;
  animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1);
}
.wish-stars { font-size:32px;margin-bottom:20px;animation:pulse 1.5s ease infinite; }
.wish-content h2 { font-family:var(--font-display);font-size:52px;font-weight:600;color:var(--accent-2);text-shadow:0 0 30px rgba(251,191,36,.6);margin-bottom:16px; }
.wish-content p { font-size:17px;color:var(--text-secondary);margin-bottom:32px;line-height:1.8; }
.wish-close { padding:14px 40px;background:linear-gradient(135deg,var(--accent-1),var(--bg-3));border:none;border-radius:50px;color:white;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);letter-spacing:.05em; }
.wish-close:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(244,114,182,.4); }

/* ── Reveal ── */
.reveal { opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay-1 { transition-delay:.15s; }
.reveal-delay-2 { transition-delay:.3s; }
.reveal-delay-3 { transition-delay:.45s; }

/* ══════════════════════════════
   SETUP PAGE
══════════════════════════════ */
.setup-page { background:var(--bg-1); }

.setup-container {
  position:relative;z-index:1;
  width:94%;max-width:760px;margin:0 auto;padding:40px 0 80px;
}

.setup-header { text-align:center;padding:20px 0 50px; }
.setup-badge {
  display:inline-block;padding:6px 20px;
  border:1px solid rgba(244,114,182,.4);border-radius:50px;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-1);margin-bottom:24px;background:rgba(244,114,182,.08);
}
.setup-title {
  font-family:var(--font-display);font-size:clamp(56px,10vw,100px);
  font-weight:300;line-height:.95;letter-spacing:-.02em;
}
.setup-title em { font-style:italic;color:var(--accent-1);text-shadow:0 0 60px rgba(244,114,182,.5);display:block; }
.setup-sub { margin-top:20px;font-size:16px;color:var(--text-secondary);line-height:1.7; }

/* Setup Card */
.setup-card {
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow);padding:32px 36px;
  margin-bottom:20px;display:flex;gap:28px;align-items:flex-start;
}
.step-num {
  font-family:var(--font-display);font-size:56px;font-weight:300;
  color:rgba(255,255,255,.08);line-height:1;flex-shrink:0;
  width:60px;text-align:center;margin-top:-4px;
}
.step-content { flex:1;min-width:0; }
.step-content h2 { font-family:var(--font-display);font-size:26px;font-weight:600;margin-bottom:6px; }
.step-desc { font-size:13px;color:var(--text-muted);margin-bottom:18px;line-height:1.6; }

/* Inputs */
.setup-card input[type="text"],
.setup-card textarea {
  width:100%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);
  padding:13px 16px;color:var(--text-primary);
  font-family:var(--font-body);font-size:14px;outline:none;
  transition:var(--transition);resize:none;
}
.setup-card input[type="text"]:focus,
.setup-card textarea:focus {
  border-color:var(--accent-3);background:rgba(192,132,252,.08);
  box-shadow:0 0 0 3px rgba(192,132,252,.15);
}
.setup-card input[type="text"]::placeholder,
.setup-card textarea::placeholder { color:var(--text-muted); }

.char-count { text-align:right;font-size:11px;color:var(--text-muted);margin-top:6px; }

/* File Drop */
.file-drop {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:28px 20px;
  border:2px dashed rgba(255,255,255,.15);border-radius:var(--radius-md);
  cursor:pointer;transition:var(--transition);text-align:center;
  background:rgba(255,255,255,.03);
}
.file-drop:hover { border-color:var(--accent-1);background:rgba(244,114,182,.06); }
.file-drop-icon { font-size:32px; }
.file-drop-text { font-size:14px;font-weight:600;color:var(--text-secondary); }
.file-drop-sub { font-size:12px;color:var(--text-muted); }
.audio-drop .file-drop-icon { font-size:28px; }
#photoUpload,#audioUpload { display:none; }

/* Photo preview */
.photo-preview-wrap {
  margin-top:16px;position:relative;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--glass-border);
}
.photo-preview-wrap img { width:100%;max-height:200px;object-fit:cover;display:block; }
.remove-photo {
  position:absolute;top:10px;right:10px;
  background:rgba(0,0,0,.6);border:none;border-radius:20px;
  color:white;font-size:12px;font-weight:600;padding:5px 12px;
  cursor:pointer;transition:var(--transition);
}
.remove-photo:hover { background:rgba(220,38,38,.8); }

/* Audio preview */
.audio-preview {
  margin-top:12px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);
  border-radius:var(--radius-sm);padding:12px 16px;
}
.audio-preview span { font-size:13px;color:var(--text-secondary);font-weight:500; }
.audio-preview .remove-photo { position:static;background:transparent;color:var(--text-muted);padding:2px 8px; }

.default-music-note {
  margin-top:12px;font-size:12px;color:var(--text-muted);
  display:flex;align-items:center;gap:6px;
}

/* Quote fields */
.quote-field { margin-bottom:16px; }
.quote-field label { display:block;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px; }

/* Theme Grid */
.theme-grid {
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
}
.theme-option {
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;
}
.theme-swatch {
  width:48px;height:48px;border-radius:50%;
  border:2px solid transparent;transition:var(--transition);
  position:relative;
}
.theme-option:hover .theme-swatch,
.theme-option.active .theme-swatch {
  border-color:white;transform:scale(1.15);
  box-shadow:0 0 16px rgba(255,255,255,.3);
}
.theme-option.active .theme-swatch::after {
  content:'✓';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:white;font-weight:700;
}
.theme-name { font-size:10px;color:var(--text-muted);text-align:center;letter-spacing:.05em; }
.theme-option.active .theme-name { color:var(--text-secondary); }

/* Generate Button */
.generate-wrap { text-align:center;margin-top:40px; }
.generate-btn {
  display:inline-flex;align-items:center;gap:14px;
  padding:20px 48px;
  background:linear-gradient(135deg,#db2777,#9333ea,#6366f1);
  border:none;border-radius:60px;color:white;
  font-family:var(--font-body);font-size:18px;font-weight:700;
  cursor:pointer;transition:var(--transition);letter-spacing:.04em;
  box-shadow:0 8px 32px rgba(219,39,119,.4);
  position:relative;overflow:hidden;
}
.generate-btn::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity .3s;
}
.generate-btn:hover::before { opacity:1; }
.generate-btn:hover { transform:translateY(-3px);box-shadow:0 14px 40px rgba(219,39,119,.5); }
.generate-btn:active { transform:translateY(0); }
.gen-icon { font-size:22px; }
.gen-arrow { font-size:20px;transition:transform .3s; }
.generate-btn:hover .gen-arrow { transform:translateX(4px); }
.generate-note { margin-top:14px;font-size:13px;color:var(--text-muted); }

/* ══════════════════════════════
   WISH PAGE
══════════════════════════════ */
.wish-page { background:var(--bg-1); }

.container {
  position:relative;z-index:1;
  width:94%;max-width:1100px;margin:0 auto;padding:40px 0 60px;
}

/* Hero */
.hero { text-align:center;padding:20px 0 50px; }
.hero-badge {
  display:inline-block;padding:6px 20px;
  border:1px solid rgba(244,114,182,.4);border-radius:50px;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-1);margin-bottom:24px;background:rgba(244,114,182,.08);
}
.hero-title {
  font-family:var(--font-display);font-size:clamp(72px,12vw,140px);
  font-weight:300;line-height:.9;letter-spacing:-.02em;
}
.hero-title em { font-style:italic;color:var(--accent-1);text-shadow:0 0 60px rgba(244,114,182,.5);display:block; }
.hero-sub { margin-top:24px;font-size:24px;color:var(--text-secondary);font-weight:300;letter-spacing:.05em; }
.hero-divider { display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px; }
.hero-divider span:not(.diamond) { display:block;width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-3)); }
.hero-divider span:last-child { background:linear-gradient(90deg,var(--accent-3),transparent); }
.diamond { color:var(--accent-2);font-size:12px; }

/* Top Grid */
.top-grid {
  display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;
}

/* Glass */
.glass {
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow);padding:28px;
}
.glass-inner {
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);padding:20px;
}
.panel-label { font-size:10px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--accent-3);margin-bottom:20px; }

/* Cake Panel */
.cake-panel { display:flex;flex-direction:column;align-items:center;gap:24px; }
.cake-stage { position:relative;display:flex;flex-direction:column;align-items:center;padding-top:20px; }
.cake-glow {
  position:absolute;width:200px;height:200px;
  background:radial-gradient(circle,rgba(251,191,36,.2) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
  animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);} }

.candles { display:flex;gap:10px;align-items:flex-end;margin-bottom:-4px;z-index:2;position:relative; }
.candle { display:flex;flex-direction:column;align-items:center; }
.wax { width:12px;height:36px;border-radius:3px 3px 2px 2px;background:linear-gradient(180deg,#f9d4e8,#e879a0);position:relative; }
.wax::after { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:3px;height:8px;background:#333;border-radius:2px; }
.flame { width:14px;height:22px;position:relative;margin-bottom:2px;animation:flicker .5s ease-in-out infinite alternate; }
.flame::before { content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:14px;height:22px;background:radial-gradient(ellipse at 50% 80%,#FBBF24,#F97316,transparent);border-radius:50% 50% 30% 30%;filter:blur(1px); }
.flame-inner { position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:6px;height:12px;background:radial-gradient(ellipse at 50% 80%,#fff,#FDE68A,transparent);border-radius:50% 50% 30% 30%; }
@keyframes flicker { from{transform:scaleX(1) scaleY(1) rotate(-2deg);} to{transform:scaleX(.9) scaleY(1.05) rotate(2deg);} }
.flame.out::before,.flame.out .flame-inner { display:none; }
.flame.out::after { content:'💨';font-size:16px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);animation:smokeUp 1s ease forwards; }
@keyframes smokeUp { from{opacity:1;transform:translateX(-50%) translateY(0);} to{opacity:0;transform:translateX(-50%) translateY(-20px);} }

.cake-body { display:flex;flex-direction:column;align-items:center;animation:cakeBounce 3s ease-in-out infinite; }
@keyframes cakeBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.cake-top { width:160px;height:55px;background:linear-gradient(180deg,#fce7f3,#fbcfe8);border-radius:12px 12px 0 0;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.cake-top::before { content:'';position:absolute;top:0;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,#f9a8d4 0px,#f9a8d4 12px,#fce7f3 12px,#fce7f3 24px); }
.cake-deco { font-size:18px;margin-top:8px; }
.cake-mid { width:190px;height:60px;background:linear-gradient(180deg,#ede9fe,#ddd6fe);border:2px solid rgba(255,255,255,.3);position:relative;overflow:hidden; }
.cake-mid::before { content:'🌸 ✨ 🌸 ✨ 🌸 ✨ 🌸';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;white-space:nowrap; }
.cake-base { width:220px;height:65px;background:linear-gradient(180deg,#fef3c7,#fde68a);border:2px solid rgba(255,255,255,.3);border-radius:0 0 4px 4px;position:relative;overflow:hidden; }
.cake-base::before { content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.15) 8px,rgba(255,255,255,.15) 16px); }
.cake-plate { width:260px;height:14px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border-radius:50%;margin-top:4px;box-shadow:0 4px 20px rgba(0,0,0,.4); }

.wish-area { text-align:center;width:100%; }
.wish-prompt { font-family:var(--font-display);font-size:18px;font-style:italic;color:var(--text-secondary);margin-bottom:16px; }
.blow-btn { display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:linear-gradient(135deg,#db2777,#9333ea);border:none;border-radius:50px;color:white;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);letter-spacing:.04em;box-shadow:0 4px 20px rgba(219,39,119,.4); }
.blow-btn:hover { transform:translateY(-3px);box-shadow:0 8px 30px rgba(219,39,119,.5); }
.blow-icon { font-size:18px; }

.message-display { width:100%;text-align:center; }
.message-display p { font-family:var(--font-display);font-size:17px;font-style:italic;line-height:1.8;color:var(--text-secondary); }

/* Controls */
.controls-panel { display:flex;flex-direction:column;gap:14px; }
.ctrl-btn { width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);background:rgba(255,255,255,.05);color:var(--text-primary);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);text-align:left;position:relative;overflow:hidden; }
.ctrl-btn::before { content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s; }
.ctrl-btn:hover::before { opacity:1; }
.ctrl-btn:hover { transform:translateX(4px);border-color:rgba(255,255,255,.2); }
.music-btn::before { background:linear-gradient(135deg,rgba(139,92,246,.2),transparent); }
.music-btn:hover { border-color:#8b5cf6;box-shadow:0 0 20px rgba(139,92,246,.2); }
.confetti-btn::before { background:linear-gradient(135deg,rgba(251,191,36,.2),transparent); }
.confetti-btn:hover { border-color:#fbbf24;box-shadow:0 0 20px rgba(251,191,36,.2); }
.lantern-btn::before { background:linear-gradient(135deg,rgba(249,115,22,.2),transparent); }
.lantern-btn:hover { border-color:#f97316;box-shadow:0 0 20px rgba(249,115,22,.2); }
.ctrl-icon { font-size:20px;flex-shrink:0; }
.ctrl-text { flex:1; }
.ctrl-badge { font-size:10px;font-weight:700;letter-spacing:.1em;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.1);color:var(--text-muted); }
.ctrl-badge.on { background:rgba(139,92,246,.3);color:#c084fc; }

.countdown-box { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:18px;text-align:center; }
.countdown-label { font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px; }
.countdown-timer { font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--accent-2);letter-spacing:.05em; }

.share-box { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:18px; }
.share-row { display:flex;gap:8px; }
.share-btn { flex:1;padding:10px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap; }
.share-btn:hover { background:rgba(255,255,255,.1);color:var(--text-primary);border-color:rgba(255,255,255,.2); }

/* Memories */
.memories { margin-top:60px; }
.section-header { text-align:center;margin-bottom:36px; }
.section-header h2 { font-family:var(--font-display);font-size:clamp(40px,6vw,64px);font-weight:300;line-height:1.1; }
.section-header h2 em { font-style:italic;color:var(--accent-1); }
.section-header p { margin-top:10px;color:var(--text-muted);font-size:15px;letter-spacing:.05em; }

.slider-wrapper { position:relative;display:flex;align-items:center;gap:16px; }
.slider { display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:10px 4px 20px;scrollbar-width:none;flex:1; }
.slider::-webkit-scrollbar { display:none; }
.slider-arrow { flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);backdrop-filter:blur(10px);line-height:1; }
.slider-arrow:hover { background:rgba(255,255,255,.12);transform:scale(1.1); }

.slide { min-width:300px;max-width:300px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(20px);transition:transform .4s ease,box-shadow .4s ease;flex-shrink:0; }
.slide:hover { transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.5); }
.slide-img-wrap { position:relative;height:200px;overflow:hidden; }
.slide-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .6s ease; }
.slide:hover .slide-img-wrap img { transform:scale(1.05); }
.slide-overlay { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(13,2,33,.8)); }
.slide-body { padding:20px; }
.slide-tag { font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-1);margin-bottom:10px; }
.slide-body blockquote { font-family:var(--font-display);font-size:15px;font-style:italic;line-height:1.8;color:var(--text-secondary);border:none;padding:0; }

/* Footer */
.footer { text-align:center;margin-top:60px;padding:40px 0 20px;border-top:1px solid rgba(255,255,255,.06); }
.footer-stars { font-size:14px;letter-spacing:.3em;color:var(--accent-2);margin-bottom:16px;animation:pulse 2s ease infinite; }
.footer p { color:var(--text-muted);font-size:14px;margin-bottom:6px; }
.footer-sub { font-family:var(--font-display);font-style:italic;font-size:16px!important;color:var(--text-secondary)!important; }
.heart { display:inline-block;animation:heartbeat 1.2s ease infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1);} 50%{transform:scale(1.3);} }

/* Lantern */
.lantern { position:fixed;font-size:32px;pointer-events:none;z-index:998;animation:lanternFloat linear forwards; }
@keyframes lanternFloat { from{transform:translateY(0) rotate(-5deg);opacity:1;} 50%{transform:translateY(-50vh) rotate(5deg);opacity:1;} to{transform:translateY(-110vh) rotate(-3deg);opacity:0;} }

/* Utilities */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn { from{transform:scale(.8);opacity:0;} to{transform:scale(1);opacity:1;} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }

/* Responsive */
@media(max-width:900px) {
  .top-grid { grid-template-columns:1fr; }
  .controls-panel { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
  .countdown-box,.share-box { grid-column:1/-1; }
}
@media(max-width:600px) {
  .setup-card { flex-direction:column;gap:12px;padding:24px 20px; }
  .step-num { font-size:36px;width:auto; }
  .theme-grid { grid-template-columns:repeat(5,1fr); }
  .hero-title { font-size:clamp(56px,16vw,80px); }
  .slide { min-width:270px;max-width:270px; }
  .slider-arrow { display:none; }
  .controls-panel { grid-template-columns:1fr; }
  .share-row { flex-direction:column; }
}