:root {
  color-scheme: dark;
  --cp-page: #080D17;
  --cp-surface: #0D1422;
  --cp-card: #131C2B;
  --cp-elevated: #182235;
  --cp-border: #273449;
  --cp-text: #F8FAFC;
  --cp-muted: #CBD5E1;
  --cp-quiet: #94A3B8;
  --cp-blue: #3B82F6;
  --cp-cyan: #38BDF8;
  --cp-cta: #2563EB;
  --cp-cta-hover: #3B82F6;
  --cp-success: #22C55E;
  --cp-warning: #F59E0B;
  --cp-error: #EF4444;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cp-page) !important;
  color: var(--cp-text);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

::selection { color: white; background: rgba(59, 130, 246, .35); }

:focus-visible {
  outline: 2px solid var(--cp-blue);
  outline-offset: 3px;
}

.cp-header {
  min-height: 72px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: rgba(8, 13, 23, .92) !important;
  border-color: var(--cp-border) !important;
}

.cp-logo-mark {
  border-radius: 14px !important;
  background: #2563EB !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .28) !important;
}

.cp-beta-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .72rem;
  border: 1px solid #1E3A8A;
  border-radius: 999px;
  color: #93C5FD;
  background: #172554;
  font-size: .68rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cp-beta-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3B82F6;
}

.cp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  min-height: 520px;
}

.cp-hero-copy { text-align: left; }

.cp-hero-copy h1 {
  max-width: 780px;
  font-size: clamp(2.75rem, 5.5vw, 4.7rem) !important;
  line-height: .99 !important;
  letter-spacing: -.055em;
}

.cp-hero-copy p {
  max-width: 650px;
  color: var(--cp-muted) !important;
  line-height: 1.75;
}

.gradient-text {
  background: linear-gradient(100deg, var(--cp-pink), var(--cp-purple) 52%, #60A5FA) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.cp-primary,
#btnValidate,
#btnSubmitDetails,
#btnScrollToVoucher,
#headerScrollToVoucher {
  background: linear-gradient(105deg, var(--cp-pink), var(--cp-purple) 52%, var(--cp-blue)) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 36px rgba(139, 92, 246, .22) !important;
  min-height: 50px;
}

#headerScrollToVoucher { min-height: 42px; }

.cp-primary:hover,
#btnValidate:hover,
#btnSubmitDetails:hover,
#btnScrollToVoucher:hover,
#headerScrollToVoucher:hover { filter: brightness(1.1); }

.cp-secondary {
  min-height: 50px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: var(--cp-surface);
  color: white;
}

.cp-secondary:hover { border-color: rgba(139, 92, 246, .55); background: var(--cp-card); }

.cp-hero-visual {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
}

.cp-hero-visual::before {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--cp-pink), var(--cp-purple), var(--cp-blue));
  opacity: .13;
  filter: blur(55px);
}

.cp-screen {
  position: relative;
  width: min(100%, 520px);
  padding: 13px;
  border: 1px solid var(--cp-border);
  border-radius: 26px;
  background: linear-gradient(145deg, #1B1B2E, #11111B);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
}

.cp-screen-inner {
  min-height: 290px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
  background: #0F0F19;
}

.cp-screen-bar {
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cp-quiet);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cp-screen-grid {
  min-height: 248px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 8px;
  padding: 10px;
}

.cp-party-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(255,79,216,.1) 52%, rgba(59,130,246,.2));
}

.cp-party-photo > i { font-size: 4.5rem; color: rgba(255,255,255,.18); }

.cp-photo-caption {
  position: absolute;
  inset: auto 10px 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.cp-screen-side { display: grid; grid-template-rows: 1.25fr .75fr; gap: 8px; }

.cp-qr-card {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px;
  background: var(--cp-card);
  color: var(--cp-quiet);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.cp-qr-card i { font-size: 3.7rem; color: white; background: white; color: #0B0B12; padding: 8px; border-radius: 10px; }
.cp-photo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-photo-tiles span { border: 1px solid rgba(255,255,255,.06); border-radius: 12px; display: grid; place-items: center; }
.cp-photo-tiles span:first-child { color: #c4b5fd; background: rgba(139,92,246,.14); }
.cp-photo-tiles span:last-child { color: #93c5fd; background: rgba(59,130,246,.14); }

.cp-phone {
  position: absolute;
  left: -24px;
  bottom: -15px;
  width: 126px;
  padding: 10px;
  border: 1px solid var(--cp-border);
  border-radius: 24px;
  background: var(--cp-card);
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
  animation: cp-float 6s ease-in-out infinite;
}

.cp-phone-screen { padding: 25px 7px; text-align: center; border: 1px solid rgba(255,255,255,.06); border-radius: 15px; background: var(--cp-page); }
@keyframes cp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.glass-card {
  background: rgba(23, 23, 39, .94) !important;
  border: 1px solid var(--cp-border) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0,0,0,.28) !important;
}

.glass-card-feature {
  background: linear-gradient(145deg, rgba(27,27,46,.98), rgba(20,20,32,.98)) !important;
  border: 1px solid var(--cp-border) !important;
  backdrop-filter: none !important;
  box-shadow: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.glass-card-feature:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(139, 92, 246, .5) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.25), 0 0 0 1px rgba(139,92,246,.08) !important;
}

#stepVoucher,
#stepDetails,
#stepSuccess { border-radius: 24px !important; }

#voucherCodeInput,
#detailsForm input {
  background: #0F0F19 !important;
  border-color: var(--cp-border) !important;
  border-radius: 14px !important;
}

.neon-focus:focus {
  border-color: var(--cp-purple) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .14) !important;
}

.cp-section-kicker {
  color: #c4b5fd;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cp-section-title { letter-spacing: -.045em; }

.cp-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(205px, auto);
}

.cp-bento > article:first-child,
.cp-bento > article:nth-child(5) { grid-column: span 2; }

.cp-beta-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, .24);
  border-radius: 28px;
  background: linear-gradient(135deg, #1B1730, var(--cp-surface));
}

.cp-beta-panel::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  top: -130px;
  border-radius: 50%;
  background: rgba(255,79,216,.13);
  filter: blur(55px);
}

.faq-toggle[aria-expanded='true'] { color: white; }

@media (max-width: 900px) {
  .cp-hero { grid-template-columns: 1fr; min-height: auto; }
  .cp-hero-copy { text-align: center; }
  .cp-hero-copy p { margin-inline: auto; }
  .cp-hero-actions, .cp-hero-chips { justify-content: center; }
  .cp-hero-visual { min-height: 350px; width: min(100%, 560px); margin-inline: auto; }
  .cp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .cp-header { min-height: 64px; }
  .cp-hero-copy h1 { font-size: 2.75rem !important; }
  .cp-hero-actions > * { width: 100%; }
  .cp-hero-visual { min-height: 285px; }
  .cp-screen { transform: none; }
  .cp-screen-inner { min-height: 230px; }
  .cp-screen-grid { min-height: 188px; }
  .cp-party-photo > i { font-size: 3rem; }
  .cp-phone { width: 100px; left: -5px; bottom: -20px; }
  .cp-phone-screen { padding: 18px 4px; }
  .cp-qr-card i { font-size: 2.6rem; }
  .cp-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cp-bento > article:first-child,
  .cp-bento > article:nth-child(5) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Theme system: Light is the product default; Dark uses Midnight Navy ── */
:root,
html[data-theme='light'] {
  color-scheme: light;
  --cp-page: #F8FAFC;
  --cp-page-alt: #F1F5F9;
  --cp-surface: #FFFFFF;
  --cp-card: #FFFFFF;
  --cp-border: #E2E8F0;
  --cp-text: #0F172A;
  --cp-muted: #64748B;
  --cp-quiet: #94A3B8;
  --cp-pink: #0EA5E9;
  --cp-purple: #2563EB;
  --cp-blue: #2563EB;
  --cp-cyan: #0EA5E9;
  --cp-coral: #F59E0B;
  --cp-yellow: #F59E0B;
  --cp-green: #22C55E;
  --cp-shadow-sm: 0 8px 24px rgba(15, 23, 42, .045);
  --cp-shadow-md: 0 20px 52px rgba(15, 23, 42, .075);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --cp-page: #080D17;
  --cp-page-alt: #0D1422;
  --cp-surface: #0D1422;
  --cp-card: #131C2B;
  --cp-elevated: #182235;
  --cp-border: #273449;
  --cp-text: #F8FAFC;
  --cp-muted: #CBD5E1;
  --cp-quiet: #94A3B8;
  --cp-pink: #38BDF8;
  --cp-purple: #3B82F6;
  --cp-blue: #3B82F6;
  --cp-cyan: #38BDF8;
  --cp-coral: #EF4444;
  --cp-yellow: #F59E0B;
  --cp-green: #22C55E;
  --cp-shadow-sm: 0 8px 24px rgba(2, 6, 23, .22);
  --cp-shadow-md: 0 24px 70px rgba(2, 6, 23, .36);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--cp-border);
  border-radius: 13px;
  background: var(--cp-surface);
  color: var(--cp-muted);
  box-shadow: var(--cp-shadow-sm);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background-color .2s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(118, 87, 232, .5);
  color: var(--cp-purple);
}

.theme-toggle--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
}

html[data-theme='light'] body {
  background:
    radial-gradient(circle at 8% 5%, rgba(14, 165, 233, .06), transparent 25rem),
    radial-gradient(circle at 94% 17%, rgba(37, 99, 235, .05), transparent 27rem),
    var(--cp-page) !important;
  color: var(--cp-text);
}

html[data-theme='light'] body::before {
  opacity: .28;
  background-image: radial-gradient(rgba(51, 65, 85, .11) .7px, transparent .7px);
  background-size: 24px 24px;
}

html[data-theme='light'] :focus-visible {
  outline-color: rgba(37, 99, 235, .55);
}

html[data-theme='light'] .cp-header {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--cp-border) !important;
}

.cp-wordmark {
  color: var(--cp-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme='light'] .cp-logo-mark {
  background: #0F172A !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .14) !important;
}

html[data-theme='light'] .cp-beta-badge {
  color: #1D4ED8;
  background: #DBEAFE;
  border-color: #BFDBFE;
}

html[data-theme='light'] .cp-beta-badge::before {
  background: #2563EB;
  box-shadow: none;
}

.cp-home-main { padding-top: clamp(2.5rem, 6vw, 5.25rem) !important; }

html[data-theme='light'] .cp-hero-copy h1,
html[data-theme='light'] .cp-section-title,
html[data-theme='light'] h1.text-white,
html[data-theme='light'] h2.text-white,
html[data-theme='light'] h3.text-white,
html[data-theme='light'] h4.text-white,
html[data-theme='light'] p.text-white {
  color: var(--cp-text) !important;
}

html[data-theme='light'] .gradient-text {
  background: #2563EB !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme='light'] .cp-hero-copy p,
html[data-theme='light'] .text-slate-300,
html[data-theme='light'] .text-slate-400 {
  color: var(--cp-muted) !important;
}

html[data-theme='light'] .text-slate-500,
html[data-theme='light'] .text-slate-600 { color: var(--cp-quiet) !important; }

html[data-theme='light'] .cp-primary,
html[data-theme='light'] #btnValidate,
html[data-theme='light'] #btnSubmitDetails,
html[data-theme='light'] #btnScrollToVoucher,
html[data-theme='light'] #headerScrollToVoucher {
  background: #0F172A !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
}

html[data-theme='light'] .cp-primary:hover,
html[data-theme='light'] #btnValidate:hover,
html[data-theme='light'] #btnSubmitDetails:hover,
html[data-theme='light'] #btnScrollToVoucher:hover,
html[data-theme='light'] #headerScrollToVoucher:hover {
  background: #1E293B !important;
  transform: translateY(-1px);
}

html[data-theme='light'] .cp-secondary {
  color: #0F172A;
  background: var(--cp-surface);
  border-color: #CBD5E1;
  box-shadow: var(--cp-shadow-sm);
}

html[data-theme='light'] .cp-secondary:hover { background: #F8FAFC; border-color: #94A3B8; }

html[data-theme='light'] .cp-hero-chips > span {
  color: var(--cp-muted);
  background: rgba(255, 255, 255, .82) !important;
  border-color: var(--cp-border) !important;
  box-shadow: 0 5px 18px rgba(56, 46, 37, .04);
}

/* Keep the existing screen example, but present it as a warm product mockup. */
html[data-theme='light'] .cp-hero-visual::before {
  background: linear-gradient(120deg, #E0F2FE, #DBEAFE, #F1F5F9);
  opacity: .72;
}

html[data-theme='light'] .cp-screen {
  border-color: var(--cp-border);
  background: var(--cp-surface);
  box-shadow: 0 26px 64px rgba(15, 23, 42, .13);
}

html[data-theme='light'] .cp-phone {
  border-color: var(--cp-border);
  background: var(--cp-surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

html[data-theme='light'] .glass-card {
  background: rgba(255, 255, 255, .96) !important;
  border-color: var(--cp-border) !important;
  box-shadow: var(--cp-shadow-md) !important;
}

html[data-theme='light'] .glass-card-feature {
  background: var(--cp-surface) !important;
  border-color: var(--cp-border) !important;
  box-shadow: var(--cp-shadow-sm);
}

html[data-theme='light'] .glass-card-feature:hover {
  border-color: rgba(118, 87, 232, .34) !important;
  box-shadow: var(--cp-shadow-md) !important;
}

html[data-theme='light'] #stepVoucher,
html[data-theme='light'] #stepDetails,
html[data-theme='light'] #stepSuccess {
  position: relative;
  border-top-color: #2563EB !important;
}

html[data-theme='light'] #voucherCodeInput,
html[data-theme='light'] #detailsForm input,
html[data-theme='light'] .field-input,
html[data-theme='light'] #expirationDateInput,
html[data-theme='light'] #voucherNote,
html[data-theme='light'] #voucherRecipientEmail,
html[data-theme='light'] #voucherMaxPhotos,
html[data-theme='light'] #voucherDurationDays {
  color: var(--cp-text) !important;
  background: #F8FAFC !important;
  border-color: var(--cp-border) !important;
}

html[data-theme='light'] input::placeholder { color: var(--cp-quiet) !important; }

html[data-theme='light'] .neon-focus:focus,
html[data-theme='light'] .field-input:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}

html[data-theme='light'] .cp-section-kicker { color: #2563EB !important; }

html[data-theme='light'] .cp-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-theme='light'] .cp-bento > article:first-child,
html[data-theme='light'] .cp-bento > article:nth-child(5) { grid-column: auto; }

html[data-theme='light'] .cp-bento article > div:first-child {
  background: #FEF3C7 !important;
  color: #D97706 !important;
  box-shadow: none !important;
}

html[data-theme='light'] .cp-bento article:nth-child(2) > div:first-child {
  background: #E0F2FE !important;
  color: #0284C7 !important;
}

html[data-theme='light'] .cp-bento article:nth-child(3) > div:first-child {
  background: #E0F2FE !important;
  color: #0EA5E9 !important;
}

html[data-theme='light'] .cp-bento article:nth-child(4) > div:first-child {
  background: #DCFCE7 !important;
  color: #16A34A !important;
}

html[data-theme='light'] .cp-bento article:nth-child(5) > div:first-child {
  background: #F1F5F9 !important;
  color: #334155 !important;
}

html[data-theme='light'] .cp-bento article:nth-child(6) > div:first-child {
  background: #DBEAFE !important;
  color: #2563EB !important;
}

html[data-theme='light'] .cp-beta-panel {
  border-color: #D7E3F4;
  background: linear-gradient(135deg, #EFF6FF, #FFFFFF 64%, #F8FAFC);
}

html[data-theme='light'] .cp-beta-panel::after {
  background: rgba(14, 165, 233, .08);
  filter: blur(42px);
}

html[data-theme='light'] .cp-beta-panel li {
  color: var(--cp-text);
  background: rgba(255, 255, 255, .72) !important;
  border-color: var(--cp-border) !important;
}

html[data-theme='light'] .faq-toggle { color: var(--cp-text) !important; }
html[data-theme='light'] .faq-toggle:hover,
html[data-theme='light'] .faq-toggle[aria-expanded='true'] { color: #2563EB !important; }
html[data-theme='light'] .faq-content { color: var(--cp-muted) !important; border-color: var(--cp-border) !important; }

html[data-theme='light'] .cp-footer {
  color: var(--cp-quiet) !important;
  background: rgba(248, 250, 252, .94) !important;
  border-color: var(--cp-border) !important;
}

/* Guest album and admin surfaces share the same theme tokens. */
html[data-theme='light'] .logo-text {
  background: linear-gradient(100deg, #0F172A, #2563EB) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme='light'] .nav-tabs {
  background: #F6F3EF !important;
  border-color: var(--cp-border) !important;
}

html[data-theme='light'] .nav-tab-btn { color: var(--cp-muted) !important; }
html[data-theme='light'] .nav-tab-btn.active {
  color: white !important;
  background: #2563EB !important;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .10) !important;
}

html[data-theme='light'] .btn-camera,
html[data-theme='light'] .btn-send {
  background: #0F172A !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .13) !important;
}

html[data-theme='light'] .btn-cancel {
  color: var(--cp-muted) !important;
  background: #F8FAFC !important;
  border-color: var(--cp-border) !important;
}

html[data-theme='light'] :is(button, a).text-white,
html[data-theme='light'] :is(button, a)[class*='bg-brand'],
html[data-theme='light'] :is(button, a)[class*='bg-gradient'] { color: white !important; }

html[data-theme='light'] button.faq-toggle.text-white {
  color: var(--cp-text) !important;
}

html[data-theme='light'] button.faq-toggle.text-white:hover,
html[data-theme='light'] button.faq-toggle.text-white[aria-expanded='true'] {
  color: #2563EB !important;
}

html[data-theme='light'] [class*='border-brand-border'],
html[data-theme='light'] [class*='border-white'] { border-color: var(--cp-border) !important; }

html[data-theme='light'] [class*='bg-brand-dark'],
html[data-theme='light'] [class*='bg-brand-card'] { background-color: #F8FAFC !important; }

html[data-theme='light'] table { color: var(--cp-text); }
html[data-theme='light'] thead { background: #F8FAFC !important; }
html[data-theme='light'] tbody { border-color: var(--cp-border) !important; }

@media (max-width: 1024px) and (min-width: 641px) {
  html[data-theme='light'] .cp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .cp-header .theme-toggle { width: 38px; height: 38px; }
  .cp-home-main { padding-top: 2.5rem !important; }
  html[data-theme='light'] .cp-bento { grid-template-columns: 1fr; }
}

/* ── Neutro Elegante: component details exclusive to Light Mode ─────────── */
html[data-theme='light'] .cp-header a:not(#headerScrollToVoucher) {
  color: #334155 !important;
}

html[data-theme='light'] .cp-header a:not(#headerScrollToVoucher):hover {
  color: #2563EB !important;
}

html[data-theme='light'] .theme-toggle {
  border-color: #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
}

html[data-theme='light'] .theme-toggle:hover {
  border-color: #CBD5E1;
  color: #2563EB;
  background: #F8FAFC;
}

html[data-theme='light'] .cp-hero-chips i { color: #2563EB !important; }

html[data-theme='light'] .cp-phone .text-purple-300 {
  color: #2563EB !important;
}

html[data-theme='light'] .cp-how-grid .glass-card-feature {
  border-radius: 20px !important;
}

html[data-theme='light'] .cp-how-grid .glass-card-feature > div:first-child > .flex:first-child > div:first-child {
  color: #2563EB !important;
  background: #EFF6FF !important;
  border-color: #DBEAFE !important;
  box-shadow: none !important;
}

html[data-theme='light'] .cp-how-grid .glass-card-feature > div:first-child > .flex:first-child > span {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #2563EB;
  color: #FFFFFF !important;
  font-size: .72rem !important;
  line-height: 1;
  letter-spacing: .04em;
  opacity: 1;
}

html[data-theme='light'] .cp-how-grid .glass-card-feature > div:last-child {
  border-color: #E2E8F0 !important;
}

html[data-theme='light'] #stepVoucher > .text-center > .inline-flex {
  color: #2563EB !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE;
  box-shadow: none !important;
}

html[data-theme='light'] #stepVoucher > .text-center > .inline-flex i,
html[data-theme='light'] #voucherForm .fa-key,
html[data-theme='light'] #stepVoucher .text-purple-300 {
  color: #2563EB !important;
}

html[data-theme='light'] #smart-return-banner {
  color: #0F172A;
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

html[data-theme='light'] #smart-return-banner > div:first-child > div:first-child {
  background: #2563EB !important;
  box-shadow: none !important;
}

html[data-theme='light'] #smart-return-banner .text-purple-200 {
  color: #64748B !important;
}

html[data-theme='light'] #return-event-link {
  background: #0F172A !important;
  box-shadow: none !important;
}

html[data-theme='light'] #close-return-banner-btn {
  color: #64748B !important;
}

html[data-theme='light'] .cp-secondary .text-purple-300 {
  color: #2563EB !important;
}

html[data-theme='light'] main > section:last-child > .absolute {
  background: #DBEAFE !important;
  opacity: .48;
}

html[data-theme='light'] .cp-bento .glass-card-feature {
  border-radius: 20px !important;
}

html[data-theme='light'] .cp-bento h3 { color: #0F172A !important; }
html[data-theme='light'] .cp-bento p { color: #64748B !important; }

html[data-theme='light'] #email-subscribe-card > div > div:first-child {
  background: #0F172A !important;
  box-shadow: none !important;
}

html[data-theme='light'] #subscribe-email-btn {
  background: #0F172A !important;
  box-shadow: none !important;
}

/* Shared color normalization across every Light Mode page. */
html[data-theme='light'] .text-purple-200,
html[data-theme='light'] .text-purple-300,
html[data-theme='light'] .text-purple-400,
html[data-theme='light'] .text-brand-300,
html[data-theme='light'] .text-brand-500 {
  color: #2563EB !important;
}

html[data-theme='light'] .text-pink-200,
html[data-theme='light'] .text-pink-300,
html[data-theme='light'] .text-pink-400,
html[data-theme='light'] .text-brand-pink {
  color: #0EA5E9 !important;
}

html[data-theme='light'] [class*='bg-purple-'] {
  background-color: #EFF6FF !important;
}

html[data-theme='light'] [class*='border-purple-'] {
  border-color: #BFDBFE !important;
}

html[data-theme='light'] [class*='bg-pink-'] {
  background-color: #F0F9FF !important;
}

html[data-theme='light'] [class*='border-pink-'] {
  border-color: #BAE6FD !important;
}

/* Existing hero screen: dark product UI, now with blue/cyan accents. */
html[data-theme='light'] .cp-screen-bar i:nth-child(1) { color: #2563EB !important; }
html[data-theme='light'] .cp-screen-bar i:nth-child(2) { color: #0EA5E9 !important; }
html[data-theme='light'] .cp-screen-bar i:nth-child(3) { color: #38BDF8 !important; }

html[data-theme='light'] .cp-party-photo {
  background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(14,165,233,.12) 52%, rgba(56,189,248,.2));
}

html[data-theme='light'] .cp-photo-tiles span:first-child {
  color: #93C5FD;
  background: rgba(37, 99, 235, .16);
}

html[data-theme='light'] .cp-photo-tiles span:last-child {
  color: #67E8F9;
  background: rgba(14, 165, 233, .14);
}

html[data-theme='light'] .cp-phone .bg-gradient-to-r {
  background: linear-gradient(90deg, #2563EB, #0EA5E9) !important;
}

/* Guest upload, gallery and face-recognition flow. */
html[data-theme='light'] body > header .bg-gradient-to-tr {
  background: #0F172A !important;
  box-shadow: none !important;
}

html[data-theme='light'] #photo-limit-container > div {
  color: #475569 !important;
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html[data-theme='light'] #photo-limit-container i { color: #2563EB !important; }

html[data-theme='light'] #uploads-limit-banner {
  color: #92400E !important;
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
}

html[data-theme='light'] #find-my-face-btn,
html[data-theme='light'] #selfie-process-btn {
  color: #FFFFFF !important;
  background: #15803D !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme='light'] #face-filter-banner {
  color: #166534 !important;
  background: #F0FDF4 !important;
  border-color: #BBF7D0 !important;
}

html[data-theme='light'] #download-face-matches-btn,
html[data-theme='light'] #selfie-start-camera-btn,
html[data-theme='light'] #selfie-capture-btn,
html[data-theme='light'] #gallery-empty-upload-btn {
  color: #FFFFFF !important;
  background: #0F172A !important;
  box-shadow: none !important;
}

html[data-theme='light'] #face-modal > div > div:first-of-type .bg-gradient-to-tr {
  color: #15803D !important;
  background: #DCFCE7 !important;
  box-shadow: none !important;
}

html[data-theme='light'] #face-loading-text,
html[data-theme='light'] #success-name { color: #2563EB !important; }

/* Organizer and Master panels. */
html[data-theme='light'] #login-view .bg-gradient-to-tr,
html[data-theme='light'] #loginModal .bg-gradient-to-tr,
html[data-theme='light'] #admin-view header .bg-gradient-to-tr,
html[data-theme='light'] body > header .bg-gradient-to-tr {
  background: #0F172A !important;
  box-shadow: none !important;
}

html[data-theme='light'] #login-btn,
html[data-theme='light'] #btnLogin,
html[data-theme='light'] #btnCreateVoucher,
html[data-theme='light'] #demoGuestLinkBtn,
html[data-theme='light'] #demoOpenAdmin1ClickBtn,
html[data-theme='light'] #btnSaveExpiration {
  color: #FFFFFF !important;
  background: #0F172A !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme='light'] #login-btn:hover,
html[data-theme='light'] #btnLogin:hover,
html[data-theme='light'] #btnCreateVoucher:hover,
html[data-theme='light'] #demoGuestLinkBtn:hover,
html[data-theme='light'] #demoOpenAdmin1ClickBtn:hover,
html[data-theme='light'] #btnSaveExpiration:hover {
  background: #1E293B !important;
}

html[data-theme='light'] #statTotalVouchers,
html[data-theme='light'] #subscribers-stat,
html[data-theme='light'] #validity-stat { color: #2563EB !important; }

html[data-theme='light'] #send-subscribers-email-btn {
  color: #0369A1 !important;
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
}

html[data-theme='light'] #loginModal + header span.bg-clip-text,
html[data-theme='light'] #admin-view header .bg-clip-text {
  color: #0F172A !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ── Dark Mode: Midnight Navy ────────────────────────────────────────────── */
html[data-theme='dark'] body {
  background:
    radial-gradient(circle at 10% 2%, rgba(59, 130, 246, .10), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(56, 189, 248, .055), transparent 26rem),
    var(--cp-page) !important;
  color: var(--cp-text);
}

html[data-theme='dark'] body::before {
  opacity: .16;
  background-image: radial-gradient(rgba(148, 163, 184, .16) .65px, transparent .65px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

html[data-theme='dark'] ::selection {
  color: #F8FAFC;
  background: rgba(59, 130, 246, .42);
}

html[data-theme='dark'] :focus-visible {
  outline-color: rgba(96, 165, 250, .78);
}

html[data-theme='dark'] .cp-header {
  background: rgba(8, 13, 23, .9) !important;
  border-color: rgba(39, 52, 73, .88) !important;
}

html[data-theme='dark'] .cp-logo-mark,
html[data-theme='dark'] body > header .bg-gradient-to-tr,
html[data-theme='dark'] #login-view .bg-gradient-to-tr,
html[data-theme='dark'] #loginModal .bg-gradient-to-tr,
html[data-theme='dark'] #admin-view header .bg-gradient-to-tr {
  background: #2563EB !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .28) !important;
}

html[data-theme='dark'] .cp-wordmark,
html[data-theme='dark'] #loginModal + header span.bg-clip-text,
html[data-theme='dark'] #admin-view header .bg-clip-text {
  color: #F8FAFC !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme='dark'] .theme-toggle {
  color: #CBD5E1;
  background: #0D1422;
  border-color: #273449;
  box-shadow: none;
}

html[data-theme='dark'] .theme-toggle:hover {
  color: #60A5FA;
  background: #131C2B;
  border-color: #3B82F6;
}

html[data-theme='dark'] .cp-beta-badge {
  color: #93C5FD;
  background: #172554;
  border-color: #1E3A8A;
}

html[data-theme='dark'] .cp-beta-badge::before {
  background: #3B82F6;
  box-shadow: none;
}

html[data-theme='dark'] .gradient-text {
  background: #3B82F6 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme='dark'] .cp-hero-copy h1,
html[data-theme='dark'] .cp-section-title,
html[data-theme='dark'] h1.text-white,
html[data-theme='dark'] h2.text-white,
html[data-theme='dark'] h3.text-white,
html[data-theme='dark'] h4.text-white,
html[data-theme='dark'] p.text-white {
  color: #F8FAFC !important;
}

html[data-theme='dark'] .cp-hero-copy p,
html[data-theme='dark'] .text-slate-300 { color: #CBD5E1 !important; }
html[data-theme='dark'] .text-slate-400 { color: #94A3B8 !important; }

html[data-theme='dark'] .cp-primary,
html[data-theme='dark'] #btnValidate,
html[data-theme='dark'] #btnSubmitDetails,
html[data-theme='dark'] #btnScrollToVoucher,
html[data-theme='dark'] #headerScrollToVoucher,
html[data-theme='dark'] #login-btn,
html[data-theme='dark'] #btnLogin,
html[data-theme='dark'] #btnCreateVoucher,
html[data-theme='dark'] #demoGuestLinkBtn,
html[data-theme='dark'] #demoOpenAdmin1ClickBtn,
html[data-theme='dark'] #btnSaveExpiration,
html[data-theme='dark'] #subscribe-email-btn,
html[data-theme='dark'] #selfie-start-camera-btn,
html[data-theme='dark'] #selfie-capture-btn,
html[data-theme='dark'] #gallery-empty-upload-btn,
html[data-theme='dark'] #download-face-matches-btn {
  color: #FFFFFF !important;
  background: #2563EB !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(2, 6, 23, .28) !important;
}

html[data-theme='dark'] .cp-primary:hover,
html[data-theme='dark'] #btnValidate:hover,
html[data-theme='dark'] #btnSubmitDetails:hover,
html[data-theme='dark'] #btnScrollToVoucher:hover,
html[data-theme='dark'] #headerScrollToVoucher:hover,
html[data-theme='dark'] #login-btn:hover,
html[data-theme='dark'] #btnLogin:hover,
html[data-theme='dark'] #btnCreateVoucher:hover,
html[data-theme='dark'] #demoGuestLinkBtn:hover,
html[data-theme='dark'] #demoOpenAdmin1ClickBtn:hover,
html[data-theme='dark'] #btnSaveExpiration:hover,
html[data-theme='dark'] #subscribe-email-btn:hover {
  background: #3B82F6 !important;
  filter: none;
}

html[data-theme='dark'] .cp-secondary {
  color: #F8FAFC;
  background: #0D1422;
  border-color: #334155;
  box-shadow: none;
}

html[data-theme='dark'] .cp-secondary:hover {
  color: #FFFFFF;
  background: #182235;
  border-color: #475569;
}

html[data-theme='dark'] .cp-hero-chips > span,
html[data-theme='dark'] #photo-limit-container > div {
  color: #CBD5E1 !important;
  background: #0D1422 !important;
  border-color: #273449 !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .cp-hero-visual::before {
  background: linear-gradient(120deg, #1E3A8A, #0C4A6E, #172554);
  opacity: .16;
  filter: blur(60px);
}

html[data-theme='dark'] .cp-screen {
  background: linear-gradient(145deg, #182235, #0D1422);
  border-color: #273449;
  box-shadow: 0 28px 70px rgba(2, 6, 23, .52);
}

html[data-theme='dark'] .cp-screen-inner {
  background: #080D17;
  border-color: #273449;
}

html[data-theme='dark'] .cp-screen-bar { border-color: #273449; }
html[data-theme='dark'] .cp-screen-bar i:nth-child(1) { color: #3B82F6 !important; }
html[data-theme='dark'] .cp-screen-bar i:nth-child(2) { color: #38BDF8 !important; }
html[data-theme='dark'] .cp-screen-bar i:nth-child(3) { color: #60A5FA !important; }

html[data-theme='dark'] .cp-party-photo {
  background: linear-gradient(135deg, rgba(37, 99, 235, .30), rgba(14, 116, 144, .12) 52%, rgba(56, 189, 248, .18));
  border-color: #273449;
}

html[data-theme='dark'] .cp-photo-tiles span:first-child {
  color: #93C5FD;
  background: rgba(37, 99, 235, .16);
}

html[data-theme='dark'] .cp-photo-tiles span:last-child {
  color: #67E8F9;
  background: rgba(8, 145, 178, .14);
}

html[data-theme='dark'] .cp-phone {
  background: #131C2B;
  border-color: #273449;
  box-shadow: 0 22px 48px rgba(2, 6, 23, .48);
}

html[data-theme='dark'] .cp-phone-screen { background: #080D17; border-color: #273449; }
html[data-theme='dark'] .cp-phone .bg-gradient-to-r { background: #3B82F6 !important; }

html[data-theme='dark'] .glass-card {
  background: rgba(19, 28, 43, .97) !important;
  border-color: #273449 !important;
  box-shadow: 0 22px 58px rgba(2, 6, 23, .30) !important;
}

html[data-theme='dark'] .glass-card-feature {
  background: #131C2B !important;
  border-color: #273449 !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .glass-card-feature:hover {
  background: #182235 !important;
  border-color: #334155 !important;
  box-shadow: 0 18px 42px rgba(2, 6, 23, .24) !important;
}

html[data-theme='dark'] #voucherCodeInput,
html[data-theme='dark'] #detailsForm input,
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  color: #F8FAFC !important;
  background: #0D1422 !important;
  border-color: #334155 !important;
}

html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder { color: #64748B !important; }

html[data-theme='dark'] .neon-focus:focus,
html[data-theme='dark'] input:focus,
html[data-theme='dark'] select:focus,
html[data-theme='dark'] textarea:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16) !important;
}

html[data-theme='dark'] .cp-section-kicker { color: #60A5FA; }

html[data-theme='dark'] .cp-beta-panel {
  background: linear-gradient(135deg, #131C2B, #0D1422);
  border-color: #273449;
}

html[data-theme='dark'] .cp-beta-panel::after {
  background: rgba(37, 99, 235, .10);
}

html[data-theme='dark'] .faq-toggle[aria-expanded='true'] { color: #60A5FA; }

/* Small feature colors stay semantic; the page hierarchy remains blue. */
html[data-theme='dark'] .cp-how-grid .glass-card-feature > div:first-child > .flex:first-child > div,
html[data-theme='dark'] #stepVoucher > .text-center > .inline-flex {
  color: #60A5FA !important;
  background: #13213A !important;
  border-color: #1E3A5F !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .cp-how-grid .glass-card-feature > div:first-child > .flex:first-child > span {
  color: #FFFFFF !important;
  opacity: 1;
}

html[data-theme='dark'] .cp-bento article:nth-child(1) > div:first-child { color: #F59E0B !important; background: rgba(245, 158, 11, .12) !important; border-color: rgba(245, 158, 11, .24) !important; }
html[data-theme='dark'] .cp-bento article:nth-child(2) > div:first-child { color: #A78BFA !important; background: rgba(124, 58, 237, .11) !important; border-color: rgba(124, 58, 237, .22) !important; }
html[data-theme='dark'] .cp-bento article:nth-child(3) > div:first-child { color: #38BDF8 !important; background: rgba(56, 189, 248, .10) !important; border-color: rgba(56, 189, 248, .22) !important; }
html[data-theme='dark'] .cp-bento article:nth-child(4) > div:first-child { color: #22C55E !important; background: rgba(34, 197, 94, .10) !important; border-color: rgba(34, 197, 94, .22) !important; }
html[data-theme='dark'] .cp-bento article:nth-child(5) > div:first-child { color: #94A3B8 !important; background: rgba(148, 163, 184, .10) !important; border-color: rgba(148, 163, 184, .20) !important; }
html[data-theme='dark'] .cp-bento article:nth-child(6) > div:first-child { color: #60A5FA !important; background: rgba(59, 130, 246, .10) !important; border-color: rgba(59, 130, 246, .22) !important; }

/* Normalize old pink/purple Tailwind utilities on every dark page. */
html[data-theme='dark'] .text-purple-200,
html[data-theme='dark'] .text-purple-300,
html[data-theme='dark'] .text-purple-400,
html[data-theme='dark'] .text-brand-300,
html[data-theme='dark'] .text-brand-500 { color: #60A5FA !important; }

html[data-theme='dark'] .text-pink-200,
html[data-theme='dark'] .text-pink-300,
html[data-theme='dark'] .text-pink-400,
html[data-theme='dark'] .text-brand-pink { color: #38BDF8 !important; }

html[data-theme='dark'] [class*='bg-purple-'] { background-color: #13213A !important; }
html[data-theme='dark'] [class*='border-purple-'] { border-color: #27466F !important; }
html[data-theme='dark'] [class*='bg-pink-'] { background-color: #0C2B3C !important; }
html[data-theme='dark'] [class*='border-pink-'] { border-color: #155E75 !important; }

html[data-theme='dark'] #smart-return-banner,
html[data-theme='dark'] #uploads-limit-banner,
html[data-theme='dark'] #face-filter-banner,
html[data-theme='dark'] #admin-view .bg-gradient-to-r,
html[data-theme='dark'] #loginModal + header .bg-gradient-to-r {
  background-image: none !important;
}

html[data-theme='dark'] #smart-return-banner {
  color: #CBD5E1;
  background: #0D1B31 !important;
  border-color: #27466F !important;
}

html[data-theme='dark'] #smart-return-banner > div:first-child > div:first-child,
html[data-theme='dark'] #email-subscribe-card > div > div:first-child {
  background: #2563EB !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #return-event-link { background: #2563EB !important; box-shadow: none !important; }

html[data-theme='dark'] #uploads-limit-banner {
  color: #FDE68A !important;
  background: rgba(120, 53, 15, .22) !important;
  border-color: rgba(245, 158, 11, .32) !important;
}

html[data-theme='dark'] #find-my-face-btn,
html[data-theme='dark'] #selfie-process-btn {
  color: #FFFFFF !important;
  background: #15803D !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #face-filter-banner {
  color: #BBF7D0 !important;
  background: rgba(20, 83, 45, .30) !important;
  border-color: rgba(34, 197, 94, .30) !important;
}

html[data-theme='dark'] #face-modal > div > div:first-of-type .bg-gradient-to-tr {
  color: #4ADE80 !important;
  background: rgba(20, 83, 45, .34) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #success-name,
html[data-theme='dark'] #face-loading-text,
html[data-theme='dark'] #statTotalVouchers,
html[data-theme='dark'] #subscribers-stat,
html[data-theme='dark'] #validity-stat { color: #60A5FA !important; }

html[data-theme='dark'] #send-subscribers-email-btn {
  color: #7DD3FC !important;
  background: rgba(14, 116, 144, .18) !important;
  border-color: rgba(56, 189, 248, .28) !important;
}

html[data-theme='dark'] .logo-text {
  background: linear-gradient(90deg, #F8FAFC, #60A5FA, #38BDF8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme='dark'] .nav-tabs {
  background: #0D1422 !important;
  border-color: #273449 !important;
}

html[data-theme='dark'] .nav-tab-btn { color: #94A3B8 !important; }
html[data-theme='dark'] .nav-tab-btn.active {
  color: #FFFFFF !important;
  background: #2563EB !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .btn-camera,
html[data-theme='dark'] .btn-send {
  color: #FFFFFF !important;
  background: #2563EB !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .28) !important;
}

html[data-theme='dark'] .btn-camera:hover,
html[data-theme='dark'] .btn-send:hover { background: #3B82F6 !important; }

html[data-theme='dark'] .btn-cancel {
  color: #CBD5E1 !important;
  background: #0D1422 !important;
  border-color: #334155 !important;
}

html[data-theme='dark'] #progress-bar {
  background: linear-gradient(90deg, #2563EB, #0EA5E9, #38BDF8) !important;
}

html[data-theme='dark'] footer { border-color: #273449 !important; }

#confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.confetti-particle {
  position: absolute;
  top: -10px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg);     opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}