/* Event Online V10.4 – bright theme-matched outer canvas and full-viewport effects. */
html,body{min-height:100%;}
body.design-v5{
  color-scheme:light;
  min-height:100svh;
  background-color:var(--outer-start,#fff);
  background-image:
    radial-gradient(ellipse at 8% 8%,var(--outer-glow-a,#e7efff) 0%,transparent 40%),
    radial-gradient(ellipse at 92% 88%,var(--outer-glow-b,#f4e8f3) 0%,transparent 43%),
    linear-gradient(135deg,var(--outer-start,#fff),var(--outer-end,#edf4ff));
  background-attachment:fixed;
  color:#26364d;
}
body.design-v5 .page{
  position:relative;
  z-index:1;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
body.design-v5 .invitation-shell{border:0!important;outline:0!important;box-shadow:none!important;}
body.design-v5 .public-footer{
  position:relative;
  z-index:1;
  background:transparent!important;
  color:var(--outer-footer,#64748b)!important;
  border:0!important;
}
body.design-v5 .loading-state,body.design-v5 .error-state{color:#33445e;}
body.design-v5 .error-state p{color:#687991;}

/* The effect layer is a fixed viewport overlay, not a child clipped by the invitation card. */
body.design-v5 > .theme-fx{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  overflow:hidden!important;
  z-index:8!important;
  pointer-events:none!important;
  contain:layout paint;
  opacity:.72;
  border:0!important;
  border-radius:0!important;
}
body.design-v5 > .theme-fx .fx-item{
  position:absolute;
  display:block;
  width:var(--size,12px);
  height:var(--size,12px);
  left:0;top:0;
  pointer-events:none;
  will-change:transform,opacity;
}
body.design-v5 > .theme-fx[data-effect=snow] .fx-item{
  border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#fff 0 20%,#f5fbff 42%,rgba(203,230,255,.2) 72%,transparent 76%);
  box-shadow:0 0 10px rgba(255,255,255,.86),0 1px 5px rgba(48,93,143,.28);
  filter:drop-shadow(0 1px 2px rgba(53,93,137,.28));
  animation:fxFall linear infinite;
}
body.design-v5 > .theme-fx[data-effect=petals] .fx-item{
  border-radius:70% 30% 70% 30%;
  background:radial-gradient(circle at 30% 30%,#fff8fc 0 18%,#ffd9e9 34%,#ec8db6 74%,#d65f91 100%);
  box-shadow:0 4px 12px rgba(161,72,116,.22);
  filter:drop-shadow(0 1px 2px rgba(118,61,91,.2));
  animation:fxPetal linear infinite;
}
body.design-v5 > .theme-fx[data-effect=leaves] .fx-item{
  border-radius:75% 0 75% 0;
  background:linear-gradient(145deg,#e3f7d5 0%,#a8d78d 48%,#5b9858 100%);
  box-shadow:0 5px 12px rgba(52,112,66,.25);
  filter:drop-shadow(0 1px 2px rgba(48,92,51,.22));
  animation:fxLeaf linear infinite;
}
body.design-v5 > .theme-fx[data-effect=lights] .fx-item{
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 8%,#fff8c7 18%,rgba(255,226,128,.78) 31%,rgba(133,200,255,.26) 52%,transparent 72%);
  filter:blur(.35px);
  mix-blend-mode:screen;
  animation:fxPulse ease-in-out infinite;
}
/* Keep particles visible across the entire browser viewport without blocking controls. */
@media(max-width:640px){
  body.design-v5 > .theme-fx{opacity:.62;}
}
@media(prefers-reduced-motion:reduce){
  body.design-v5 > .theme-fx .fx-item{animation:none!important;}
}

/* Countdown: bright theme-specific numerals, still transparent and borderless. */
body.design-v5 .invitation .event-countdown,
body.design-v5 .invitation .countdown-unit{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.design-v5 .invitation .countdown-unit strong{
  color:var(--countdown-number,#fff)!important;
  font-weight:900!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.2),
    0 0 10px var(--countdown-glow,rgba(255,255,255,.28)),
    0 0 22px var(--countdown-glow,rgba(255,255,255,.22)),
    0 2px 3px rgba(0,0,0,.24)!important;
  -webkit-text-fill-color:var(--countdown-number,#fff)!important;
}
body.design-v5 .invitation .countdown-unit span{
  color:var(--countdown-label,var(--countdown-number,#fff))!important;
  font-weight:850!important;
  text-shadow:0 0 8px var(--countdown-glow,rgba(255,255,255,.18));
}
body.design-v5 .invitation .countdown-status{color:var(--countdown-number,var(--ink))!important;}

@media(max-width:610px){
  body.design-v5 .page{min-height:calc(100svh - 58px);padding:10px 8px 12px;}
  body.design-v5 .invitation{max-width:100%;}
  body.design-v5 .invitation .countdown-units{gap:clamp(6px,2.5vw,13px);}
  body.design-v5 .invitation .countdown-unit strong{font-size:clamp(24px,7vw,32px)!important;}
  body.design-v5 .invitation .countdown-unit span{font-size:clamp(8px,2.3vw,10px)!important;}
}