:root{--genie-side-image:url("assets/floral-background.jpg");--genie-qr-accent:var(--primary)}
body{background-attachment:scroll!important}
body[data-genie-background-mode="theme"]{background-attachment:fixed!important}
#media-background-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;transform:translateZ(0)}
#genie-stable-background{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center center;transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.media-background-layer .background-video{position:absolute;inset:0;width:100%;height:100%;width:100vw;height:100vh;height:100dvh;object-fit:cover;object-position:var(--background-position,center center);transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.media-background-layer:after{content:"";position:absolute;inset:0;background:var(--overlay-color);pointer-events:none}
@media(max-width:700px){body{background-attachment:scroll!important}.media-background-layer .background-video,#genie-stable-background{height:100%;min-height:100%;will-change:auto}.glass-card,.glass,.button-glass,.icon-button{backdrop-filter:blur(min(var(--glass-blur,18px),12px));-webkit-backdrop-filter:blur(min(var(--glass-blur,18px),12px))}.page-layout{gap:16px}.profile-panel{padding:24px 17px 22px}.avatar{width:82px;height:82px}.headline{font-size:clamp(34px,10vw,48px)}.links-section,.contact-panel,.qr-panel{min-width:0}}
@media(min-width:1100px){.genie-desktop-sidefx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:block}.genie-wing{position:absolute;top:14vh;width:clamp(150px,18vw,270px);height:70vh;max-height:780px;border-radius:36px;overflow:hidden;opacity:.36;filter:saturate(1.15);box-shadow:0 30px 110px rgba(24,13,55,.24);border:1px solid rgba(255,255,255,.22);background:radial-gradient(ellipse at 35% 20%,rgba(210,172,255,.50),transparent 46%),linear-gradient(165deg,rgba(25,26,62,.35),rgba(127,67,153,.18)),var(--genie-side-image);background-size:cover;background-position:center;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 86%,transparent 100%)}.genie-wing-left{left:max(14px,calc((100vw - 1030px)/2 - 255px));transform:rotate(-2.5deg)}.genie-wing-right{right:max(14px,calc((100vw - 1030px)/2 - 255px));transform:rotate(2.5deg);background-position:70% center}.genie-wing:after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.20),transparent 30%,rgba(9,7,28,.16));backdrop-filter:blur(1px)}.genie-float{position:absolute;z-index:2;display:grid;place-items:center;width:clamp(32px,4vw,54px);height:clamp(32px,4vw,54px);border-radius:18px;color:#fff;font-size:clamp(21px,2.4vw,36px);text-shadow:0 4px 22px rgba(167,139,250,.9);background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(145,89,219,.12));border:1px solid rgba(255,255,255,.22);box-shadow:0 15px 34px rgba(37,18,73,.15);animation:genie-drift 8s ease-in-out infinite}.f1{left:14%;top:17%}.f2{right:14%;top:34%;animation-delay:-2s}.f3{left:24%;top:57%;animation-delay:-4s}.f4{right:18%;top:78%;animation-delay:-6s}.f5{right:22%;top:14%;animation-delay:-1s}.f6{left:13%;top:39%;animation-delay:-3s}.f7{right:18%;top:61%;animation-delay:-5s}.f8{left:22%;top:80%;animation-delay:-2.5s}header.topbar,main.wrap{position:relative;z-index:1}}
@keyframes genie-drift{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(0,-15px,0) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.genie-float{animation:none!important}*,*:before,*:after{scroll-behavior:auto!important}}
/* 29 editorial theme identities + custom gradient */
body[data-genie-theme="custom-gradient"]::before{background:radial-gradient(ellipse at 18% 22%,rgba(255,255,255,.16),transparent 32%),radial-gradient(ellipse at 82% 82%,rgba(255,255,255,.12),transparent 34%)}
body[data-genie-theme="aurora-dream"]::before{background:radial-gradient(ellipse at 18% 17%,rgba(45,212,191,.30),transparent 36%),radial-gradient(ellipse at 82% 78%,rgba(56,189,248,.25),transparent 36%)}
body[data-genie-theme="ocean-mist"] .profile-panel,body[data-genie-theme="coral-reef"] .profile-panel{border-color:rgba(34,211,238,.42);box-shadow:0 28px 80px rgba(14,116,144,.16)}
body[data-genie-theme="violet-dream"] .profile-panel,body[data-genie-theme="lavender-haze"] .profile-panel{box-shadow:0 22px 70px rgba(147,51,234,.19),inset 0 1px 0 rgba(255,255,255,.5)}
body[data-genie-theme="rose-quartz"] .profile-panel,body[data-genie-theme="sakura"] .profile-panel{border-color:rgba(244,114,182,.45);box-shadow:0 25px 74px rgba(190,24,93,.15)}
body[data-genie-theme="sunset-glow"]::before{background:radial-gradient(ellipse at 20% 0%,rgba(251,146,60,.38),transparent 42%),radial-gradient(ellipse at 90% 88%,rgba(244,63,94,.24),transparent 36%)}
body[data-genie-theme="cyber-neon"] .profile-panel,body[data-genie-theme="cosmic"] .profile-panel{border-color:rgba(34,211,238,.45);box-shadow:0 0 0 1px rgba(34,211,238,.10),0 0 48px rgba(129,140,248,.16),inset 0 0 30px rgba(168,85,247,.06)}
body[data-genie-theme="midnight-luxe"] .profile-panel,body[data-genie-theme="sapphire-night"] .profile-panel{border-color:rgba(196,181,253,.28);box-shadow:0 24px 90px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
body[data-genie-theme="emerald-glass"] .profile-panel,body[data-genie-theme="forest-elixir"] .profile-panel{border-color:rgba(52,211,153,.35);box-shadow:0 24px 70px rgba(6,95,70,.16)}
body[data-genie-theme="golden-hour"] .profile-panel,body[data-genie-theme="champagne-luxe"] .profile-panel{border-color:rgba(217,164,65,.44);box-shadow:0 22px 70px rgba(161,98,7,.16)}
body[data-genie-theme="arctic-frost"] .profile-panel,body[data-genie-theme="electric-blue"] .profile-panel{border-color:rgba(56,189,248,.4);box-shadow:0 24px 80px rgba(37,99,235,.15)}
body[data-genie-theme="peach-blossom"] .profile-panel,body[data-genie-theme="candy-pop"] .profile-panel{border-radius:36px;box-shadow:0 23px 68px rgba(219,39,119,.13)}
body[data-genie-theme="mint-crystal"] .profile-panel{border:1px solid rgba(45,212,191,.52);box-shadow:0 0 32px rgba(45,212,191,.15)}
body[data-genie-theme="solar-flare"] .profile-panel{border:1px solid rgba(251,146,60,.42);box-shadow:0 20px 70px rgba(249,115,22,.16)}
body[data-genie-theme="ruby-velvet"] .profile-panel{border-color:rgba(251,113,133,.5);box-shadow:0 25px 82px rgba(190,18,60,.2)}
body[data-genie-theme="monochrome"] .profile-panel{border-color:rgba(148,163,184,.4);box-shadow:0 22px 70px rgba(0,0,0,.24);border-radius:16px}
body[data-genie-theme="tropical-bloom"] .profile-panel{border-color:rgba(244,114,182,.45);box-shadow:0 25px 70px rgba(21,128,61,.16)}
body[data-genie-theme="holographic"] .profile-panel{border:1px solid transparent;background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(167,139,250,.20),rgba(244,114,182,.14)) padding-box,linear-gradient(120deg,#67e8f9,#c084fc,#f9a8d4,#67e8f9) border-box;box-shadow:0 0 40px rgba(192,132,252,.16)}
body[data-genie-theme="blue-hour"] .profile-panel{border-color:rgba(129,140,248,.4);box-shadow:0 26px 76px rgba(30,64,175,.16)}
body[data-genie-theme="citrus-fresh"] .profile-panel{border-color:rgba(132,204,22,.40);box-shadow:0 20px 68px rgba(77,124,15,.16)}
body[data-genie-theme="opal-glass"] .profile-panel{background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(238,242,255,.36),rgba(253,242,248,.54));border-color:rgba(255,255,255,.85);box-shadow:0 25px 75px rgba(99,102,241,.15)}
body[data-genie-theme="floral-glass"] .profile-panel{border-color:rgba(236,72,153,.33);box-shadow:0 25px 78px rgba(168,85,247,.13)}
body[data-genie-theme="custom-gradient"] .headline{background-image:linear-gradient(100deg,var(--primary),var(--primary-2));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body[data-genie-theme="cyber-neon"] .link-card,body[data-genie-theme="cosmic"] .link-card{box-shadow:0 0 0 1px rgba(34,211,238,.08),0 0 28px rgba(129,140,248,.12)}
body[data-genie-theme="golden-hour"] .headline,body[data-genie-theme="champagne-luxe"] .headline{filter:drop-shadow(0 2px 12px rgba(202,138,4,.14))}
body[data-genie-theme="sakura"] .avatar,body[data-genie-theme="peach-blossom"] .avatar{box-shadow:0 0 0 5px rgba(244,114,182,.12),0 15px 34px rgba(190,24,93,.20)}
/* Header: 24 selectable, genuinely different treatments */
body:not(.admin-body) .topbar{padding:13px 16px;margin-top:12px;margin-bottom:4px;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
body[data-genie-header-style="01"] .topbar{border:1px solid rgba(255,255,255,.24);border-radius:22px;background:linear-gradient(110deg,rgba(124,58,237,.18),rgba(236,72,153,.12));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body[data-genie-header-style="02"] .topbar{border:1px solid #c084fc88;border-radius:999px;background:linear-gradient(100deg,#17112ce8,#321546de);box-shadow:0 0 26px #a855f733}
body[data-genie-header-style="03"] .topbar{border:1px solid transparent;border-radius:18px;background:linear-gradient(115deg,#fff2 0%,#fff1 100%) padding-box,linear-gradient(110deg,#67e8f9,#c084fc,#f472b6) border-box}
body[data-genie-header-style="04"] .topbar{border:1px solid #ffffff45;border-radius:28px;background:rgba(26,22,44,.48);box-shadow:0 18px 48px #1c133822;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
body[data-genie-header-style="05"] .topbar{border:0;border-bottom:1px solid var(--primary);border-radius:0;background:transparent;box-shadow:none;padding-inline:2px}
body[data-genie-header-style="06"] .topbar{border:1px solid #cbd5e155;border-radius:14px;background:linear-gradient(135deg,#cbd5e132,#fff1,#47556912);box-shadow:inset 0 1px #fff8,0 6px 22px #0f172a18}
body[data-genie-header-style="07"] .topbar{border:1px solid #e9d5ff85;border-radius:24px;background:radial-gradient(ellipse at 15% 0%,#f0abfc35,transparent 55%),rgba(255,255,255,.16);box-shadow:0 12px 34px #a855f71c}
body[data-genie-header-style="08"] .topbar{border:1px solid #22d3ee8a;border-radius:8px;background:linear-gradient(100deg,#071326e8,#171136e8);box-shadow:0 0 0 1px #22d3ee20,0 0 28px #0891b226}
body[data-genie-header-style="09"] .topbar{border:1px solid #fb923c6e;border-radius:24px;background:linear-gradient(100deg,#fb923c26,#fb718526,#7c3aed1b)}
body[data-genie-header-style="10"] .topbar{border:1px solid #f9a8d480;border-radius:28px;background:radial-gradient(ellipse at 12% 10%,#f9a8d44d,transparent 54%),radial-gradient(ellipse at 90% 100%,#c4b5fd42,transparent 55%),#fff2}
body[data-genie-header-style="11"] .topbar{border:1px solid #a78bfa55;border-radius:18px;background:radial-gradient(circle at 78% 10%,#6366f135,transparent 28%),linear-gradient(110deg,#100827e8,#281044e6);box-shadow:0 0 35px #7c3aed22}
body[data-genie-header-style="12"] .topbar{border:1px solid #d6b56d9c;border-radius:16px;background:linear-gradient(110deg,#21180def,#5b451e31,#21180def);box-shadow:inset 0 1px #fff3,0 10px 28px #b9945420}
body[data-genie-header-style="13"] .topbar{border:1px solid #67e8f977;border-radius:25px;background:linear-gradient(115deg,#0891b226,#22d3ee1b,#10b98121);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body[data-genie-header-style="14"] .topbar{border:0;border-radius:0;border-top:1px solid #fff4;border-bottom:1px solid #fff4;background:transparent;padding-inline:4px}
body[data-genie-header-style="15"] .topbar{border:1px solid #e879ac66;border-radius:20px;background:linear-gradient(120deg,#5b183f21,#fff2,#5b183f18);box-shadow:0 15px 40px #9d174d16}
body[data-genie-header-style="16"] .topbar{border:2px dashed #c084fc77;border-radius:12px;background:linear-gradient(90deg,#312e811c,#db27771c);box-shadow:4px 4px 0 #7c3aed18}
body[data-genie-header-style="17"] .topbar{border:1px solid transparent;border-radius:20px;background:linear-gradient(115deg,#fff2,#fff1) padding-box,linear-gradient(95deg,#60a5fa,#c084fc,#f472b6,#fbbf24) border-box}
body[data-genie-header-style="18"] .topbar{border:1px solid #ffffffa6;border-radius:24px;background:linear-gradient(115deg,#ffffff83,#ffffff2b);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 14px 38px #64748b1c}
body[data-genie-header-style="19"] .topbar{border:1px solid #94a3b855;border-radius:16px;background:linear-gradient(150deg,#cbd5e155,#4755690c,#fff2);box-shadow:inset 0 1px #fff9,0 12px 25px #33415520}
body[data-genie-header-style="20"] .topbar{border:1px solid #f0abfc72;border-radius:999px;background:linear-gradient(100deg,#7c3aed1f,#ec48991f,#fb923c1c);box-shadow:0 10px 35px #ec48991c}
body[data-genie-header-style="21"] .topbar{border:1px solid #67e8f966;border-radius:22px;background:linear-gradient(120deg,#0e74901c,#0891b21b,#2563eb1a);box-shadow:0 10px 32px #0891b21c}
body[data-genie-header-style="22"] .topbar{border:1px solid #a78bfa72;border-radius:50px;background:radial-gradient(ellipse at center,#7c3aed1c,transparent 72%),#1e1b4b12;box-shadow:0 0 0 5px #a78bfa0e}
body[data-genie-header-style="23"] .topbar{border:1px solid #f0abfc55;border-radius:18px;background:radial-gradient(at 10% 20%,#c084fc30,transparent 44%),radial-gradient(at 90% 80%,#22d3ee25,transparent 45%),#fff1}
body[data-genie-header-style="24"] .topbar{border:1px solid #ffffff28;border-radius:16px;background:linear-gradient(130deg,#070b1cdb,#18142dd9);box-shadow:0 16px 40px #0003,inset 0 1px #fff2}
body[data-genie-header-position="bottom-logo"] .topbar{position:fixed!important;z-index:100;left:50%;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:58px;min-width:58px;max-width:58px;margin:0;padding:6px!important;display:flex;justify-content:center;border-radius:21px!important;background:rgba(22,18,40,.82)!important;border:1px solid rgba(255,255,255,.3)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 14px 42px #0004}
body[data-genie-header-position="bottom-logo"] .topbar .brand span:not(.brand-mark),body[data-genie-header-position="bottom-logo"] .topbar .top-actions{display:none!important}
body[data-genie-header-position="bottom-logo"] .topbar .brand{margin:0}
body[data-genie-header-position="bottom-logo"] .topbar .brand-mark{width:44px;height:44px;border-radius:15px}
body[data-genie-header-position="bottom-logo"] .page-layout{padding-top:14px;padding-bottom:105px}
.genie-upgrade-controls{margin:15px 0;padding:18px;display:flex;flex-direction:column;gap:15px;border-radius:22px}
.genie-upgrade-heading h3{font:800 20px/1.2 Manrope,system-ui,sans-serif;margin:5px 0;letter-spacing:-.04em}
.genie-upgrade-heading>p:last-child,.genie-control-heading p{color:var(--muted);font-size:11px;line-height:1.6;margin:5px 0 0}
.genie-gradient-editor{padding:15px;border:1px solid var(--glass-border);border-radius:17px;background:rgba(255,255,255,.12)}
.genie-control-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.genie-control-heading h4{font-size:15px;margin:0;font-weight:800}
.genie-count-pill{flex:0 0 auto;border:1px solid var(--glass-border);padding:6px 8px;border-radius:99px;font-size:9px;font-weight:800;color:var(--primary)}
.genie-gradient-swatch{height:88px;border-radius:14px;border:1px solid #ffffff70;margin:13px 0;box-shadow:inset 0 1px #fff5,0 12px 27px #26134b17}
.genie-color-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.genie-color-controls label{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:800;color:var(--muted)}
.genie-color-controls input[type=color]{width:100%;height:44px;border:1px solid var(--glass-border);border-radius:10px;background:var(--field-fill);padding:3px}
.genie-angle-control{grid-column:1/-1;display:grid!important;grid-template-columns:1fr auto;align-items:center}
.genie-angle-control input{grid-column:1/-1;width:100%}
.genie-angle-control output{color:var(--primary);font-weight:900}
.genie-design-library{border:1px solid var(--glass-border);border-radius:16px;background:rgba(255,255,255,.08);overflow:hidden}
.genie-design-library>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;cursor:pointer;list-style:none}
.genie-design-library>summary::-webkit-details-marker{display:none}
.genie-design-library>summary span{display:flex;flex-direction:column;gap:4px}
.genie-design-library>summary strong{font-size:13px}
.genie-design-library>summary small{font-size:10px;color:var(--muted)}
.genie-design-library>summary>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(120deg,var(--accent-a),var(--accent-b));color:#fff;font-size:11px}
.genie-design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 11px 12px}
.genie-design-chip{display:flex;flex-direction:column;gap:7px;min-width:0;padding:7px;border-radius:12px;border:1px solid var(--glass-border);background:var(--field-fill);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .16s,transform .16s,box-shadow .16s}
.genie-design-chip:hover{transform:translateY(-2px);border-color:var(--primary)}
.genie-design-chip.selected{border:2px solid var(--primary);padding:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 86%)}
.genie-design-name{font-size:9px;line-height:1.3;font-weight:800;overflow-wrap:anywhere}
.genie-design-preview{height:35px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;border:1px solid #ffffff33;box-shadow:inset 0 1px #fff3}
.genie-design-preview i{display:block;width:22%;height:10px;border-radius:4px;background:linear-gradient(120deg,var(--accent-a),var(--accent-b));box-shadow:0 2px 6px #0002}
.genie-preview-header[data-style="01"]{background:linear-gradient(110deg,#805ad533,#ec489933);backdrop-filter:blur(8px)}
.genie-preview-header[data-style="02"]{background:linear-gradient(100deg,#17112c,#321546);border-radius:99px}
.genie-preview-header[data-style="03"]{background:linear-gradient(100deg,#67e8f9,#c084fc,#f472b6)}
.genie-preview-header[data-style="04"]{background:#1a162cbb;border-radius:15px}
.genie-preview-header[data-style="05"]{background:transparent;border:0;border-bottom:2px solid #8b5cf6;border-radius:0}
.genie-preview-header[data-style="06"]{background:linear-gradient(135deg,#cbd5e1,#fff,#475569)}
.genie-preview-header[data-style="07"]{background:radial-gradient(circle,#f0abfc,#fff)}
.genie-preview-header[data-style="08"]{background:#071326;border-color:#22d3ee}
.genie-preview-header[data-style="09"]{background:linear-gradient(100deg,#fb923c,#fb7185,#7c3aed)}
.genie-preview-header[data-style="10"]{background:radial-gradient(circle at 20%,#f9a8d4,#fff,#c4b5fd)}
.genie-preview-header[data-style="11"]{background:radial-gradient(circle at 70%,#6366f1,#100827)}
.genie-preview-header[data-style="12"]{background:linear-gradient(100deg,#21180d,#b99454,#21180d)}
.genie-preview-header[data-style="13"]{background:linear-gradient(100deg,#0891b2,#10b981)}
.genie-preview-header[data-style="14"]{background:transparent;border-block:1px solid #94a3b8;border-radius:0}
.genie-preview-header[data-style="15"]{background:linear-gradient(100deg,#5b183f,#fff,#5b183f)}
.genie-preview-header[data-style="16"]{background:#312e81;border:1px dashed #f0abfc}
.genie-preview-header[data-style="17"]{background:linear-gradient(100deg,#60a5fa,#c084fc,#f472b6)}
.genie-preview-header[data-style="18"]{background:linear-gradient(100deg,#fff,#dbeafe)}
.genie-preview-header[data-style="19"]{background:linear-gradient(100deg,#cbd5e1,#475569,#fff)}
.genie-preview-header[data-style="20"]{background:linear-gradient(100deg,#7c3aed,#ec4899,#fb923c)}
.genie-preview-header[data-style="21"]{background:linear-gradient(100deg,#0e7490,#0891b2,#2563eb)}
.genie-preview-header[data-style="22"]{background:radial-gradient(circle,#a78bfa,#1e1b4b)}
.genie-preview-header[data-style="23"]{background:radial-gradient(at 10%,#c084fc,#fff),radial-gradient(at 90%,#22d3ee,#fff)}
.genie-preview-header[data-style="24"]{background:linear-gradient(130deg,#070b1c,#18142d);border-color:#fff5}
.genie-preview-qr{background:var(--preview-qr-bg,#f8fafc)}
.genie-preview-qr i{width:9px;height:9px;border-radius:0;background:linear-gradient(120deg,#31205f,#805ad5);box-shadow:0 0 0 2px #fff8}
.genie-preview-qr[data-style="02"] i,.genie-preview-qr[data-style="04"] i,.genie-preview-qr[data-style="07"] i,.genie-preview-qr[data-style="09"] i,.genie-preview-qr[data-style="11"] i,.genie-preview-qr[data-style="14"] i,.genie-preview-qr[data-style="18"] i,.genie-preview-qr[data-style="21"] i,.genie-preview-qr[data-style="23"] i{border-radius:50%}
.genie-preview-qr[data-style="03"]{background:#f5f3ff}.genie-preview-qr[data-style="03"] i{background:linear-gradient(120deg,#312e81,#7c3aed);border-radius:3px}
.genie-preview-qr[data-style="04"]{background:#ecfeff}.genie-preview-qr[data-style="04"] i{background:#075985}
.genie-preview-qr[data-style="05"]{background:#ecfdf5}.genie-preview-qr[data-style="05"] i{background:#065f46;border-radius:4px}
.genie-preview-qr[data-style="06"]{background:#fffbeb}.genie-preview-qr[data-style="06"] i{background:#713f12}
.genie-preview-qr[data-style="07"]{background:#fff1f2}.genie-preview-qr[data-style="07"] i{background:#9f1239}
.genie-preview-qr[data-style="08"]{background:#f7fee7}.genie-preview-qr[data-style="08"] i{background:#14532d}
.genie-preview-qr[data-style="09"]{background:#faf5ff}.genie-preview-qr[data-style="09"] i{background:#581c87}
.genie-preview-qr[data-style="10"]{background:#eff6ff}.genie-preview-qr[data-style="10"] i{background:#1e40af}
.genie-preview-qr[data-style="11"]{background:#fff7ed}.genie-preview-qr[data-style="11"] i{background:#9a3412}
.genie-preview-qr[data-style="12"]{background:#fff7f8}.genie-preview-qr[data-style="12"] i{background:#881337}
.genie-preview-qr[data-style="13"]{background:#f0fdfa}.genie-preview-qr[data-style="13"] i{background:#064e3b}
.genie-preview-qr[data-style="14"]{background:#faf5ff}.genie-preview-qr[data-style="14"] i{background:#4c1d95}
.genie-preview-qr[data-style="15"]{background:#fff7ed}.genie-preview-qr[data-style="15"] i{background:#9a3412}
.genie-preview-qr[data-style="16"]{background:#eff6ff}.genie-preview-qr[data-style="16"] i{background:#172554}
.genie-preview-qr[data-style="17"]{background:#fdf4ff}.genie-preview-qr[data-style="17"] i{background:linear-gradient(120deg,#3730a3,#db2777)}
.genie-preview-qr[data-style="18"]{background:#f8fafc}.genie-preview-qr[data-style="18"] i{background:#334155}
.genie-preview-qr[data-style="19"]{background:#f0fdf4}.genie-preview-qr[data-style="19"] i{background:#065f46}
.genie-preview-qr[data-style="20"]{background:#f5f3ff}.genie-preview-qr[data-style="20"] i{background:#312e81}
.genie-preview-qr[data-style="21"]{background:#fdf4ff}.genie-preview-qr[data-style="21"] i{background:#6b21a8;border-radius:50%}
.genie-preview-qr[data-style="22"]{background:#fefce8}.genie-preview-qr[data-style="22"] i{background:#365314;border-radius:4px}
.genie-preview-qr[data-style="23"]{background:#f0f9ff}.genie-preview-qr[data-style="23"] i{background:#164e63;border-radius:50%}
.genie-preview-qr[data-style="24"]{background:#fff7fb}.genie-preview-qr[data-style="24"] i{background:linear-gradient(120deg,#4338ca,#db2777);border-radius:4px}
.genie-position-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px 14px;font-size:11px;font-weight:800}
.genie-position-row select{max-width:270px;min-height:38px;padding:7px 10px;border:1px solid var(--glass-border);border-radius:10px;background:var(--field-fill);color:var(--ink)}
.genie-upgrade-footnote{margin:0;color:var(--muted);font-size:10px;line-height:1.6}
.qr-frame{border-color:color-mix(in srgb,var(--genie-qr-accent),white 28%);box-shadow:0 16px 44px color-mix(in srgb,var(--genie-qr-accent),transparent 84%),inset 0 1px 0 rgba(255,255,255,.7)}
#qr-canvas{display:block;max-width:100%;height:auto!important;border-radius:8px;image-rendering:pixelated}
@media(min-width:800px){.genie-upgrade-controls{padding:22px}.genie-design-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.genie-upgrade-controls{padding:12px}.genie-gradient-editor{padding:11px}.genie-color-controls{gap:6px}.genie-color-controls input[type=color]{height:39px}.genie-design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.genie-design-name{font-size:10px}.genie-design-library>summary{padding:12px}.genie-control-heading{flex-direction:column}.genie-count-pill{align-self:flex-start}.genie-position-row{align-items:flex-start;flex-direction:column}.genie-position-row select{max-width:none;width:100%}}

/* The appearance panel is split into a dedicated creative lab; this live preview confirms QR selections immediately. */
.genie-qr-live-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(132px,190px);align-items:center;gap:14px;padding:14px;margin:12px 11px 14px;border:1px solid var(--glass-border);border-radius:16px;background:linear-gradient(130deg,rgba(124,58,237,.08),rgba(236,72,153,.08),rgba(14,165,233,.06))}
.genie-qr-live-preview h4{margin:0 0 6px;font-size:14px;font-weight:900}
.genie-qr-live-preview p{margin:0 0 8px;color:var(--muted);font-size:10px;line-height:1.8}
.genie-qr-live-preview small{font-size:9px;line-height:1.6;color:var(--primary);font-weight:800}
.genie-qr-preview-frame{width:100%;padding:8px;border:1px solid color-mix(in srgb,var(--genie-qr-accent),white 30%);border-radius:17px;background:#fff;box-shadow:0 14px 34px color-mix(in srgb,var(--genie-qr-accent),transparent 84%)}
#genie-qr-preview{display:block;width:100%;height:auto!important;aspect-ratio:1;background:#fff;border-radius:8px}
@media(max-width:520px){.genie-qr-live-preview{grid-template-columns:minmax(0,1fr) 112px;gap:9px;margin-inline:8px;padding:10px}.genie-qr-live-preview p{font-size:9px}.genie-qr-preview-frame{padding:5px;border-radius:12px}}