/* Lightweight previews for the editor and admin. Public legacy pages load their original local assets. */
:is(.zc-qr-page-shell,.zcu-page,.zcu-template-mini-page,.zcu-template-preview,.zc-template-admin-preview)[data-effect]:not([data-effect="none"]){position:relative;isolation:isolate;overflow:hidden;background-color:var(--effect-base,#15112b)!important;background-image:var(--effect-bg)!important;background-size:var(--effect-size,cover)!important;background-position:var(--effect-position,center)!important}
:is(.zc-qr-page-shell,.zcu-page,.zcu-template-mini-page)[data-effect]:not([data-effect="none"])::before,:is(.zc-qr-page-shell,.zcu-page,.zcu-template-mini-page)[data-effect]:not([data-effect="none"])::after{content:"";position:absolute;pointer-events:none;z-index:0}
:is(.zc-qr-page-shell,.zcu-page,.zcu-template-mini-page)[data-effect]:not([data-effect="none"])>*{position:relative;z-index:2}

/* Model 1: the original .background with twenty soft moving circles. */
[data-effect="orbs"]{--effect-base:#3e1e68;--effect-bg:radial-gradient(circle at 8% 18%,#ffacac 0 5.8%,transparent 6%),radial-gradient(circle at 82% 12%,#8be0ef 0 7%,transparent 7.3%),radial-gradient(circle at 22% 78%,#ffe27c 0 8%,transparent 8.3%),radial-gradient(circle at 88% 70%,#bfa1ff 0 6%,transparent 6.3%),radial-gradient(circle at 50% 44%,#ee9cff 0 4%,transparent 4.3%),linear-gradient(145deg,#3e1e68,#251044)}
[data-effect="orbs"]::before{inset:-12%;background:radial-gradient(circle at 18% 30%,#fff8 0 2.8%,transparent 3%),radial-gradient(circle at 66% 18%,#ffb4c655 0 4%,transparent 4.2%),radial-gradient(circle at 74% 82%,#7ccad755 0 5%,transparent 5.2%);animation:zcMpFloat 12s ease-in-out infinite alternate}

/* Model 2: full-screen animated multicolour gradient (#gradient + gradient-bg.js). */
[data-effect="aurora"]{--effect-base:#5f3dc4;--effect-bg:radial-gradient(circle at 12% 18%,#ff6b9dcc,transparent 34%),radial-gradient(circle at 84% 16%,#ffb86ccc,transparent 35%),radial-gradient(circle at 74% 88%,#4dd6d0b8,transparent 38%),radial-gradient(circle at 18% 82%,#845ef7cc,transparent 42%),linear-gradient(135deg,#3b1b74,#c43f87);--effect-size:150% 150%;animation:zcMpGradient 14s ease-in-out infinite alternate}

/* Model 3: exact dark-purple stage and exploding pink/orange/purple hearts. */
[data-effect="doodle"]{--effect-base:#3d2152;--effect-bg:radial-gradient(circle at 50% 45%,#5b2f7433,transparent 55%),linear-gradient(#3d2152,#3d2152)}
[data-effect="doodle"]::before{content:"♥  ♥  ♥  ♥  ♥\A  ♥  ♥  ♥  ♥\A ♥  ♥  ♥  ♥  ♥"!important;white-space:pre;inset:-12%;color:#ff0198;font:700 clamp(24px,4vw,54px)/2 serif;word-spacing:clamp(24px,8vw,110px);text-shadow:120px 60px #8156a8,-80px 140px #ff6d00,230px 210px #ff75e4,30px 310px #ff0198;opacity:.82;animation:zcMpHeartBurst 5s cubic-bezier(.84,.02,1,1) infinite reverse}

/* Model 4: one large beating heart behind the content. */
[data-effect="hearts"]{--effect-base:#be1e2d;--effect-bg:linear-gradient(#be1e2d,#be1e2d)}
[data-effect="hearts"]::before{content:"♡"!important;inset:50% auto auto 50%;translate:-50% -50%;color:#fff;font:400 min(62vw,520px)/1 serif;filter:drop-shadow(0 0 22px #ffffff55);animation:zcMpHeartbeat 5s linear infinite}

/* Model 5: the D3/GSAP pink nested-heart field. */
[data-effect="petals"]{--effect-base:#ff93a6;--effect-bg:radial-gradient(circle at 50% 45%,#ffffff55,transparent 46%),linear-gradient(#ff93a6,#ff93a6)}
[data-effect="petals"]::before{content:"♥"!important;inset:50% auto auto 50%;translate:-50% -50%;color:#ffb3c3;font:700 min(70vw,590px)/1 serif;text-shadow:0 0 0 #fce3e9;filter:drop-shadow(0 18px 30px #a7264930);animation:zcMpHeartField 10s ease-in-out infinite alternate}

/* Model 6: WebGL sakura translated to a lightweight layered blossom field. */
[data-effect="cosmic"]{--effect-base:#130d23;--effect-bg:radial-gradient(ellipse at 22% 18%,#ffb7d5 0 .55%,transparent .8%),radial-gradient(ellipse at 72% 28%,#ffd4e6 0 .7%,transparent .95%),radial-gradient(ellipse at 38% 72%,#ff9fc8 0 .6%,transparent .9%),radial-gradient(circle at 50% 120%,#7d315f88,transparent 52%),linear-gradient(#100a1c,#28112f);--effect-size:70px 90px,95px 120px,120px 150px,cover,cover}
[data-effect="cosmic"]::before{content:"✿  ❀  ✿\A  ❀  ✿  ❀"!important;white-space:pre;inset:-20% -10%;color:#ffc0d9;font:400 clamp(18px,4vw,46px)/3 serif;word-spacing:clamp(28px,12vw,150px);opacity:.58;filter:blur(.3px);animation:zcMpSakura 13s linear infinite}

/* Model 7: Particle-Wave.js on its original navy-to-purple gradient. */
[data-effect="particles"]{--effect-base:rgb(10,10,50);--effect-bg:radial-gradient(circle,#c9c4ff 0 1px,transparent 1.6px),radial-gradient(circle,#f3b9ff 0 1px,transparent 1.7px),linear-gradient(to bottom,rgb(10,10,50) 0%,rgb(60,10,60) 100%);--effect-size:31px 31px,53px 53px,cover;--effect-position:0 0,13px 17px,center}
[data-effect="particles"]::after{inset:34% -15% auto;height:24%;border-radius:50%;background:radial-gradient(ellipse at center,#c4b5fd75 0 1px,transparent 2px);background-size:13px 9px;transform:rotate(-7deg);filter:drop-shadow(0 0 5px #b993ff);animation:zcMpWave 7s ease-in-out infinite alternate}

/* Model 8: simplex/chroma moving colour-noise canvas. */
[data-effect="chroma"]{--effect-base:#072a40;--effect-bg:radial-gradient(circle at 8% 12%,#00d4ffaa,transparent 33%),radial-gradient(circle at 88% 18%,#ff2d95aa,transparent 35%),radial-gradient(circle at 75% 90%,#ffe45e99,transparent 37%),radial-gradient(circle at 18% 88%,#7b2cffcc,transparent 40%),linear-gradient(135deg,#05223a,#123d5b);--effect-size:145% 145%;animation:zcMpNoise 12s ease-in-out infinite alternate}

/* Model 9: the three blue/green SVG waves from the supplied file. */
[data-effect="waves"]{--effect-base:#0e4166;--effect-bg:radial-gradient(ellipse at 15% 112%,rgba(130,158,249,.26) 0 42%,transparent 42.5%),radial-gradient(ellipse at 65% 115%,rgba(76,190,255,.58) 0 46%,transparent 46.5%),radial-gradient(ellipse at 110% 108%,rgba(115,209,72,.28) 0 40%,transparent 40.5%),linear-gradient(to bottom,rgba(14,65,102,.86),#0e4166);--effect-size:120% 125%;animation:zcMpWater 9s ease-in-out infinite alternate}

/* Model 10: animated magenta/yellow/cyan radial plasma from its inline SVG. */
[data-effect="artdeco"]{--effect-base:#090014;--effect-bg:radial-gradient(circle at 18% 36%,rgba(255,0,255,.95),transparent 40%),radial-gradient(circle at 76% 24%,rgba(255,255,0,.9),transparent 38%),radial-gradient(circle at 58% 82%,rgba(0,255,255,.92),transparent 42%),linear-gradient(135deg,#100019,#001b26);--effect-size:135% 135%;animation:zcMpPlasma 11s linear infinite alternate}

/* Every template gets a single matte glass content surface, while the background remains visible. */
.zc-qr-page-shell .zc-qr-page:not(.zc-sections-enabled){border:1px solid rgba(255,255,255,.56);background:linear-gradient(145deg,rgba(255,255,255,.73),rgba(255,255,255,.57));box-shadow:0 30px 90px rgba(9,15,35,.28),inset 0 1px 0 rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(1.18);-webkit-backdrop-filter:blur(22px) saturate(1.18)}
.zc-qr-page-shell:is([data-effect="doodle"],[data-effect="petals"],[data-effect="cosmic"],[data-effect="particles"],[data-effect="chroma"],[data-effect="artdeco"]) .zc-qr-page:not(.zc-sections-enabled){border-color:rgba(255,255,255,.28);background:linear-gradient(145deg,rgba(13,18,38,.68),rgba(30,18,46,.52));box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.24)}
.zcu-page[data-effect]:not([data-effect="none"]){padding:clamp(22px,5vw,58px)}
.zcu-page:not(.zcu-sections-enabled) .zcu-page-content,.zcu-template-mini-page{border:1px solid rgba(255,255,255,.58);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.58));box-shadow:0 20px 55px rgba(8,15,35,.24),inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15)}
.zcu-page:not(.zcu-sections-enabled):is([data-effect="doodle"],[data-effect="petals"],[data-effect="cosmic"],[data-effect="particles"],[data-effect="chroma"],[data-effect="artdeco"]) .zcu-page-content,.zcu-template-mini-page:is([data-effect="doodle"],[data-effect="petals"],[data-effect="cosmic"],[data-effect="particles"],[data-effect="chroma"],[data-effect="artdeco"]){border-color:rgba(255,255,255,.28);background:linear-gradient(145deg,rgba(13,18,38,.7),rgba(30,18,46,.55));box-shadow:0 20px 55px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22)}
.zcu-page:not(.zcu-sections-enabled)[data-effect]:not([data-effect="none"]) .zcu-page-content{padding:clamp(18px,4vw,42px)}

/* Admin/editor thumbnails use the same effect, scaled down. */
.zc-template-admin-preview,.zcu-template-preview{--effect-size:cover;min-width:0}.zc-template-admin-grid article[data-effect]:not([data-effect="none"]){background:#f8fafc!important;animation:none!important}.zc-template-admin-grid article[data-effect]:not([data-effect="none"])::before,.zc-template-admin-grid article[data-effect]:not([data-effect="none"])::after{content:none!important}.zc-template-admin-grid article[data-effect]:not([data-effect="none"]) .zc-template-admin-preview{background-color:var(--effect-base,#15112b)!important;background-image:var(--effect-bg)!important;background-size:var(--effect-size,cover)!important;background-position:center!important}
.zc-template-admin-grid article[data-effect="orbs"] .zc-template-admin-preview{--effect-base:#f6ede6;--effect-bg:radial-gradient(circle at 8% 18%,#ff9aa888 0 8%,transparent 9%),radial-gradient(circle at 82% 12%,#8bd3dd99 0 10%,transparent 11%),linear-gradient(145deg,#fdf6ef,#ecdde5)}
.zc-template-admin-grid article[data-effect="aurora"] .zc-template-admin-preview{--effect-bg:radial-gradient(circle at 12% 20%,#ff6b9d,transparent 35%),radial-gradient(circle at 84% 16%,#ffb86c,transparent 35%),radial-gradient(circle at 74% 88%,#4dd6d0,transparent 38%),linear-gradient(135deg,#3b1b74,#c43f87)}
.zc-template-admin-grid article[data-effect="doodle"] .zc-template-admin-preview{--effect-base:#3d2152;--effect-bg:radial-gradient(circle,#ff0198 0 3px,transparent 4px),radial-gradient(circle,#ff6d00 0 3px,transparent 4px),linear-gradient(#3d2152,#3d2152);--effect-size:30px 30px,42px 42px,cover}
.zc-template-admin-grid article[data-effect="hearts"] .zc-template-admin-preview{--effect-bg:radial-gradient(circle at 50% 50%,#d7265e 0 26%,transparent 27%),linear-gradient(145deg,#ffe8ed,#e8a9bb)}
.zc-template-admin-grid article[data-effect="petals"] .zc-template-admin-preview{--effect-bg:radial-gradient(circle,#ff75aa 0 4px,transparent 5px),linear-gradient(155deg,#18091f,#8d225e);--effect-size:34px 34px,cover}
.zc-template-admin-grid article[data-effect="cosmic"] .zc-template-admin-preview{--effect-bg:radial-gradient(ellipse,#ffc0d9 0 3px,transparent 4px),linear-gradient(#100a1c,#28112f);--effect-size:42px 52px,cover}
.zc-template-admin-grid article[data-effect="particles"] .zc-template-admin-preview{--effect-bg:radial-gradient(circle,#c9c4ff 0 1px,transparent 2px),linear-gradient(to bottom,rgb(10,10,50),rgb(60,10,60));--effect-size:18px 18px,cover}
.zc-template-admin-grid article[data-effect="chroma"] .zc-template-admin-preview{--effect-bg:radial-gradient(circle at 8% 12%,#00d4ff,transparent 34%),radial-gradient(circle at 88% 18%,#ff2d95,transparent 36%),radial-gradient(circle at 65% 90%,#ffe45e,transparent 38%),linear-gradient(135deg,#05223a,#123d5b)}
.zc-template-admin-grid article[data-effect="waves"] .zc-template-admin-preview{--effect-bg:radial-gradient(ellipse at 30% 115%,rgba(76,190,255,.75) 0 45%,transparent 46%),radial-gradient(ellipse at 100% 108%,rgba(115,209,72,.42) 0 40%,transparent 41%),linear-gradient(#eef9ff,#f8fffd)}
.zc-template-admin-grid article[data-effect="artdeco"] .zc-template-admin-preview{--effect-bg:radial-gradient(circle at 18% 36%,#f0f,transparent 42%),radial-gradient(circle at 76% 24%,#ff0,transparent 40%),radial-gradient(circle at 58% 82%,#0ff,transparent 44%),#090014}

@keyframes zcMpFloat{to{transform:translate3d(4%,-5%,0) rotate(3deg)}}
@keyframes zcMpGradient{to{background-position:82% 24%}}
@keyframes zcMpHeartBurst{0%{opacity:0;transform:scale(.28)}70%{opacity:.9}100%{opacity:0;transform:scale(1.1)}}
@keyframes zcMpHeartbeat{0%,100%{transform:scale(.9)}18%{transform:scale(1)}36%{transform:scale(.92)}54%{transform:scale(1.04)}}
@keyframes zcMpHeartField{to{transform:translate3d(-4%,-8%,0) rotate(5deg)}}
@keyframes zcMpSakura{from{transform:translate3d(0,-18%,0) rotate(-3deg)}to{transform:translate3d(-8%,22%,0) rotate(7deg)}}
@keyframes zcMpWave{to{transform:translate3d(4%,-8%,0) rotate(5deg)}}
@keyframes zcMpNoise{to{background-position:78% 25%}}
@keyframes zcMpWater{to{background-position:8% 0}}
@keyframes zcMpPlasma{to{background-position:80% 28%;filter:hue-rotate(18deg)}}
@media(max-width:600px){.zc-qr-page-shell .zc-qr-page:not(.zc-sections-enabled){border-radius:22px;backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12)}.zcu-page:not(.zcu-sections-enabled)[data-effect]:not([data-effect="none"]) .zcu-page-content{padding:18px 12px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){[data-effect]:not([data-effect="none"]),[data-effect]:not([data-effect="none"])::before,[data-effect]:not([data-effect="none"])::after{animation:none!important}}

/* Public pages use the exact local legacy DOM/CSS/JS instead of preview approximations. */
.zc-qr-page-shell[data-legacy-model][data-effect]{background:transparent!important;background-image:none!important}
.zc-qr-page-shell[data-legacy-model][data-effect]::before,.zc-qr-page-shell[data-legacy-model][data-effect]::after{content:none!important}
.zc-qr-page-shell[data-legacy-model]>.zc-legacy-music-bg{position:fixed!important;z-index:0!important}