/* ============================================================================
   Quizzo demo-video engine styles. Two visual worlds share one stage:
   - Merchant admin: clean Shopify/Polaris look (light).
   - Storefront: "Neon Prize Vault" popup (magenta/violet/lime on near-black).
   Wrappers set --w/--h and --scale; everything sizes off --fz for a crisp
   1080p / 1920px canvas.
   ============================================================================ */

:root {
  --w: 1920px; --h: 1080px; --scale: 1; --fz: 1;
  /* Neon Prize Vault */
  --nv-bg: #0b0614; --nv-bg2: #160b28; --nv-panel: #1c1030;
  --nv-magenta: #db2777; --nv-magenta2: #ff2d95;
  --nv-violet: #a855f7; --nv-lime: #a3e635; --nv-cyan: #06b6d4;
  --nv-gold: #f5c542;
  /* Admin (Polaris-ish) */
  --ad-bg: #f1f1f4; --ad-surface: #ffffff; --ad-border: #e1e3e5;
  --ad-ink: #1a1c1e; --ad-muted: #6b7177; --ad-teal: #0d9488; --ad-teal2: #2dd4bf;
  --ad-amber: #f59e0b;
}

* { box-sizing: border-box; }

/* ---- stage: fixed canvas, scaled to fit ---- */
.vz-stage, .qz-stage {
  position: relative;
  width: var(--w); height: var(--h);
  transform: scale(var(--scale)); transform-origin: center center;
  background: var(--nv-bg);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ad-ink);
  border-radius: 6px;
}
.qz-app { position: absolute; inset: 0; }
.qz-leave { animation: qzLeave .55s ease forwards; }
.qz-enter { animation: qzEnter .6s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes qzLeave { to { opacity: 0; transform: scale(.985); } }
@keyframes qzEnter { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }

/* ============================ ADMIN SHELL ============================ */
.qz-shell { position: absolute; inset: 0; background: var(--ad-bg); display: flex; flex-direction: column; }
.qz-topbar {
  height: calc(52px * var(--fz)); background: #1a1c1e; color: #e3e5e7;
  display: flex; align-items: center; gap: calc(20px * var(--fz)); padding: 0 calc(22px * var(--fz));
  font-size: calc(14px * var(--fz));
}
.qz-sh-logo { font-weight: 800; letter-spacing: .3px; }
.qz-sh-store { opacity: .8; }
.qz-sh-search { margin-left: auto; background: #2b2e31; padding: calc(6px*var(--fz)) calc(16px*var(--fz)); border-radius: 8px; opacity: .8; }
.qz-body { flex: 1; display: flex; min-height: 0; }
.qz-nav-col { width: calc(240px * var(--fz)); background: #fbfbfc; border-right: 1px solid var(--ad-border); padding: calc(12px*var(--fz)) calc(10px*var(--fz)); overflow: hidden; }
.qz-nav { padding: calc(8px*var(--fz)) calc(12px*var(--fz)); border-radius: 8px; font-size: calc(14px*var(--fz)); color: #43474b; margin-bottom: calc(2px*var(--fz)); }
.qz-nav.on { background: #eef0f2; font-weight: 700; color: var(--ad-ink); }
.qz-nav-app { display: flex; align-items: center; gap: calc(9px*var(--fz)); margin: calc(16px*var(--fz)) 0 calc(6px*var(--fz)); padding: calc(6px*var(--fz)) calc(10px*var(--fz)); font-weight: 800; font-size: calc(14px*var(--fz)); color: var(--nv-magenta); }
.qz-nav-app img { width: calc(22px*var(--fz)); height: calc(22px*var(--fz)); border-radius: 6px; }
.qz-nav-sub { color: #43474b; }
.qz-nav-sub.on { background: #fbeaf3; color: var(--nv-magenta); }
.qz-content { flex: 1; padding: calc(28px*var(--fz)) calc(34px*var(--fz)); overflow: hidden; }

.qz-crumb { display: flex; align-items: center; gap: calc(9px*var(--fz)); font-size: calc(21px*var(--fz)); font-weight: 800; margin-bottom: calc(20px*var(--fz)); }
.qz-crumb img { width: calc(26px*var(--fz)); height: calc(26px*var(--fz)); border-radius: 7px; }

.qz-card { background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: calc(14px*var(--fz)); padding: calc(22px*var(--fz)); margin-bottom: calc(16px*var(--fz)); box-shadow: 0 1px 2px rgba(0,0,0,.04); position: relative; overflow: hidden; }
.qz-accent-amber::before, .qz-accent-teal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(3px*var(--fz)); }
.qz-accent-amber::before { background: linear-gradient(90deg, var(--ad-amber), #fbbf24); }
.qz-accent-teal::before { background: linear-gradient(90deg, var(--ad-teal), var(--ad-teal2)); }
.qz-card-h { font-size: calc(17px*var(--fz)); font-weight: 800; margin-bottom: calc(4px*var(--fz)); }
.qz-muted { font-size: calc(14px*var(--fz)); color: var(--ad-muted); line-height: 1.5; }
.qz-btnrow { display: flex; gap: calc(10px*var(--fz)); margin-top: calc(16px*var(--fz)); flex-wrap: wrap; }
.qz-btn { font: inherit; font-size: calc(14px*var(--fz)); font-weight: 700; padding: calc(9px*var(--fz)) calc(16px*var(--fz)); border-radius: calc(9px*var(--fz)); border: 1px solid var(--ad-border); background: #fff; color: var(--ad-ink); cursor: pointer; transition: transform .12s; }
.qz-btn-primary { background: var(--ad-ink); color: #fff; border-color: var(--ad-ink); }
.qz-btn-danger { background: #fdecec; color: #d72c0d; border-color: #f4c2bd; }
.qz-fw { width: 100%; }
.qz-pressed { transform: scale(.96); }

.qz-tags { display: flex; flex-wrap: wrap; gap: calc(8px*var(--fz)); margin-top: calc(14px*var(--fz)); }
.qz-tag { font-size: calc(13px*var(--fz)); font-weight: 700; padding: calc(6px*var(--fz)) calc(13px*var(--fz)); border-radius: 999px; background: #f1f0f6; color: #4a3d63; border: 1px solid #e6e2f0; }

/* questions */
.qz-qrow { display: flex; gap: calc(14px*var(--fz)); padding: calc(14px*var(--fz)) 0; border-bottom: 1px solid #f0f1f2; }
.qz-qrow:last-child { border-bottom: none; }
.qz-qn { width: calc(30px*var(--fz)); height: calc(30px*var(--fz)); flex-shrink: 0; border-radius: 8px; background: #fbeaf3; color: var(--nv-magenta); font-weight: 800; display: grid; place-items: center; font-size: calc(15px*var(--fz)); }
.qz-qp { font-size: calc(15px*var(--fz)); font-weight: 700; margin-bottom: calc(8px*var(--fz)); }
.qz-qopts { display: flex; gap: calc(8px*var(--fz)); flex-wrap: wrap; }
.qz-qopt { font-size: calc(13px*var(--fz)); padding: calc(7px*var(--fz)) calc(14px*var(--fz)); border-radius: 8px; background: #f7f7f9; border: 1px solid var(--ad-border); }

/* settings chips */
.qz-grid2 { display: grid; grid-template-columns: 1fr calc(320px*var(--fz)); gap: calc(16px*var(--fz)); align-items: start; }
.qz-field-l { font-size: calc(14px*var(--fz)); font-weight: 600; margin: calc(16px*var(--fz)) 0 calc(9px*var(--fz)); }
.qz-chiprow { display: flex; flex-wrap: wrap; gap: calc(8px*var(--fz)); }
.qz-chip { font-size: calc(14px*var(--fz)); font-weight: 700; padding: calc(8px*var(--fz)) calc(15px*var(--fz)); border-radius: 999px; background: #fff; border: 1px solid var(--ad-border); color: var(--ad-ink); }
.qz-chip.on { background: var(--ad-teal); color: #fff; border-color: var(--ad-teal); }
.qz-help { font-size: calc(12.5px*var(--fz)); color: var(--ad-muted); margin-top: calc(9px*var(--fz)); line-height: 1.5; }
.qz-side .qz-side-h { font-size: calc(15px*var(--fz)); font-weight: 800; display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(10px*var(--fz)); }
.qz-pill { font-size: calc(11px*var(--fz)); font-weight: 800; padding: calc(3px*var(--fz)) calc(9px*var(--fz)); border-radius: 999px; }
.qz-pill.on { background: #e7f9ee; color: #16a34a; border: 1px solid #b6ebc8; }
.qz-pill.off { background: #f1f2f3; color: #8a9099; border: 1px solid #e1e3e5; }
.qz-side .qz-btn { margin-top: calc(14px*var(--fz)); }
.qz-cv { margin-top: calc(16px*var(--fz)); padding-top: calc(14px*var(--fz)); border-top: 1px solid var(--ad-border); }
.qz-cv-h { font-size: calc(11px*var(--fz)); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ad-muted); margin-bottom: calc(8px*var(--fz)); }
.qz-cv-row { display: flex; justify-content: space-between; font-size: calc(13px*var(--fz)); margin-bottom: calc(6px*var(--fz)); }

/* reward tiers */
.qz-tiers { margin-top: calc(14px*var(--fz)); display: flex; flex-direction: column; gap: calc(8px*var(--fz)); }
.qz-tier { display: flex; align-items: center; gap: calc(12px*var(--fz)); padding: calc(9px*var(--fz)) calc(12px*var(--fz)); border: 1px solid var(--ad-border); border-radius: 10px; }
.qz-tier-sw { width: calc(24px*var(--fz)); height: calc(24px*var(--fz)); border-radius: 6px; flex-shrink: 0; }
.qz-tier-l { font-weight: 700; font-size: calc(14px*var(--fz)); }
.qz-tier-o { margin-left: auto; font-size: calc(12px*var(--fz)); color: var(--ad-muted); }
.qz-ceiling { margin-top: calc(14px*var(--fz)); font-size: calc(13px*var(--fz)); color: var(--ad-muted); }
.qz-ceiling b { color: var(--ad-teal); }

/* ============================ STOREFRONT ============================ */
.qz-storewrap { position: absolute; inset: 0; }
.qz-store { position: absolute; inset: 0; background: #0e1116; color: #e8eaed; }
.qz-store-dim::after { content: ""; position: absolute; inset: 0; background: rgba(6,4,14,.62); backdrop-filter: blur(3px); }
.qz-store-nav { display: flex; align-items: center; gap: calc(20px*var(--fz)); padding: calc(18px*var(--fz)) calc(40px*var(--fz)); border-bottom: 1px solid rgba(255,255,255,.06); }
.qz-store-brand { font-weight: 900; letter-spacing: calc(2px*var(--fz)); font-size: calc(20px*var(--fz)); }
.qz-store-links { opacity: .7; font-size: calc(14px*var(--fz)); }
.qz-store-cart { margin-left: auto; font-size: calc(20px*var(--fz)); }
.qz-store-hero { padding: calc(70px*var(--fz)) calc(40px*var(--fz)) calc(40px*var(--fz)); }
.qz-store-htitle { font-size: calc(54px*var(--fz)); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.qz-store-hbtn { display: inline-block; margin-top: calc(24px*var(--fz)); background: #fff; color: #111; font-weight: 700; padding: calc(13px*var(--fz)) calc(26px*var(--fz)); border-radius: 999px; font-size: calc(15px*var(--fz)); }
.qz-store-row { display: flex; gap: calc(20px*var(--fz)); padding: calc(20px*var(--fz)) calc(40px*var(--fz)); }
.qz-store-card { flex: 1; }
.qz-store-thumb { height: calc(180px*var(--fz)); border-radius: 14px; background: linear-gradient(135deg,#232833,#171b22); }
.qz-store-nm { margin-top: calc(10px*var(--fz)); font-size: calc(14px*var(--fz)); font-weight: 600; }
.qz-store-pr { font-size: calc(13px*var(--fz)); opacity: .7; }

/* ---- The Neon Prize Vault popup ---- */
.qz-vault {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: calc(440px*var(--fz)); min-height: calc(660px*var(--fz));
  background:
    radial-gradient(120% 80% at 50% 0%, #3a1156 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 100%, #2a0f45 0%, transparent 60%),
    linear-gradient(180deg, #2a0f45, var(--nv-bg));
  border: 1px solid rgba(168,85,247,.4); border-radius: calc(26px*var(--fz));
  box-shadow: 0 40px 120px -20px rgba(219,39,119,.5), inset 0 0 60px rgba(168,85,247,.12);
  padding: calc(30px*var(--fz)) calc(28px*var(--fz)); color: #fff;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  overflow: hidden;
}
.qz-v-close { position: absolute; top: calc(14px*var(--fz)); right: calc(16px*var(--fz)); width: calc(30px*var(--fz)); height: calc(30px*var(--fz)); border-radius: 999px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: calc(14px*var(--fz)); cursor: pointer; }
.qz-v-ribbon { position: absolute; top: calc(14px*var(--fz)); left: calc(16px*var(--fz)); right: calc(54px*var(--fz)); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, var(--nv-magenta), var(--nv-violet)); border-radius: 999px; padding: calc(6px*var(--fz)) calc(14px*var(--fz)); font-size: calc(13px*var(--fz)); font-weight: 800; }
.qz-v-timer b { color: var(--nv-lime); }
.qz-v-beat { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(6px*var(--fz)); margin-top: calc(18px*var(--fz)); flex: 1; justify-content: center; }

.qz-v-kicker { color: var(--nv-lime); font-weight: 800; letter-spacing: calc(1.5px*var(--fz)); font-size: calc(12px*var(--fz)); }
.qz-v-gift { font-size: calc(90px*var(--fz)); filter: drop-shadow(0 10px 24px rgba(245,197,66,.4)); margin: calc(10px*var(--fz)) 0; }
.qz-v-mega { font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: .98; }
.qz-mag { background: linear-gradient(90deg,#ff2d95,#ff6ec4); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: calc(34px*var(--fz)); }
.qz-mega-xl { font-size: calc(62px*var(--fz)); }
.qz-mega-lg { font-size: calc(40px*var(--fz)); }
.qz-lime { color: var(--nv-lime); text-shadow: 0 0 24px rgba(163,230,53,.5); }
.qz-v-sub { color: #f6c453; font-style: italic; font-weight: 600; font-size: calc(16px*var(--fz)); margin-top: calc(6px*var(--fz)); }
.qz-v-cta {
  margin-top: calc(20px*var(--fz)); font: inherit; font-weight: 800; font-size: calc(18px*var(--fz)); color: #10240a;
  background: linear-gradient(180deg,#c6ff6b,var(--nv-lime)); border: none; border-radius: 999px;
  padding: calc(15px*var(--fz)) calc(34px*var(--fz)); cursor: pointer;
  box-shadow: 0 12px 30px -6px rgba(163,230,53,.6);
}

/* quiz beat */
.qz-v-qkicker { color: var(--nv-lime); font-weight: 800; letter-spacing: 1px; font-size: calc(12px*var(--fz)); }
.qz-v-qprompt { font-size: calc(30px*var(--fz)); font-weight: 900; margin: calc(10px*var(--fz)) 0 calc(22px*var(--fz)); }
.qz-v-qopts { display: flex; flex-direction: column; gap: calc(12px*var(--fz)); width: 100%; }
.qz-v-qopt { font: inherit; font-size: calc(18px*var(--fz)); font-weight: 700; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: calc(14px*var(--fz)); padding: calc(16px*var(--fz)); cursor: pointer; }
.qz-v-qopt-on { background: linear-gradient(90deg, rgba(219,39,119,.4), rgba(168,85,247,.4)); border-color: var(--nv-magenta2); }

/* wheel */
.qz-v-wheelwrap { position: relative; margin: calc(6px*var(--fz)) 0; }
.qz-v-ptr { position: absolute; top: calc(-6px*var(--fz)); left: 50%; transform: translateX(-50%); color: var(--nv-gold); font-size: calc(34px*var(--fz)); z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
#qzWheel { width: calc(300px*var(--fz)); height: calc(300px*var(--fz)); }
.qz-v-confetti { font-size: calc(60px*var(--fz)); }

/* bundle */
.qz-v-btitle { font-size: calc(20px*var(--fz)); font-weight: 800; margin-bottom: calc(14px*var(--fz)); }
.qz-v-bundle { display: flex; gap: calc(10px*var(--fz)); width: 100%; }
.qz-v-bcard { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: calc(14px*var(--fz)); padding: calc(10px*var(--fz)); }
.qz-v-bthumb { height: calc(70px*var(--fz)); border-radius: 10px; background: linear-gradient(135deg,#3a2456,#241436); }
.qz-v-bnm { font-size: calc(11.5px*var(--fz)); font-weight: 600; margin-top: calc(8px*var(--fz)); line-height: 1.25; }
.qz-v-bpr { font-size: calc(12px*var(--fz)); margin-top: calc(6px*var(--fz)); }
.qz-v-bpr s { opacity: .5; } .qz-v-bpr b { color: var(--nv-lime); }
.qz-v-btotals { margin-top: calc(16px*var(--fz)); font-size: calc(20px*var(--fz)); font-weight: 800; }
.qz-v-btotals s { opacity: .5; font-size: calc(15px*var(--fz)); font-weight: 500; } .qz-v-btotals b { color: var(--nv-lime); }
.qz-v-bsave { background: var(--nv-magenta); color: #fff; font-size: calc(12px*var(--fz)); font-weight: 800; padding: calc(3px*var(--fz)) calc(10px*var(--fz)); border-radius: 999px; margin-left: calc(6px*var(--fz)); }

/* checkout */
.qz-checkout { position: absolute; inset: 0; background: #fff; color: #1a1c1e; }
.qz-co-head { display: flex; align-items: center; justify-content: space-between; padding: calc(20px*var(--fz)) calc(40px*var(--fz)); border-bottom: 1px solid #eee; }
.qz-co-head .qz-store-brand { color: #111; }
.qz-co-secure { font-size: calc(13px*var(--fz)); color: #6b7177; }
.qz-co-cols { display: flex; gap: calc(40px*var(--fz)); padding: calc(34px*var(--fz)) calc(60px*var(--fz)); }
.qz-co-main { flex: 1.3; } .qz-co-side { flex: 1; background: #fafafb; border: 1px solid #eee; border-radius: 14px; padding: calc(22px*var(--fz)); align-self: start; }
.qz-co-sec { font-size: calc(15px*var(--fz)); font-weight: 800; margin-bottom: calc(16px*var(--fz)); }
.qz-co-line { display: flex; align-items: center; gap: calc(14px*var(--fz)); padding: calc(12px*var(--fz)) 0; border-bottom: 1px solid #f2f2f4; }
.qz-co-th { width: calc(48px*var(--fz)); height: calc(48px*var(--fz)); border-radius: 10px; background: linear-gradient(135deg,#e9e9ef,#d7d7e0); flex-shrink: 0; }
.qz-co-nm { flex: 1; font-size: calc(14px*var(--fz)); font-weight: 600; }
.qz-co-pr { font-size: calc(14px*var(--fz)); font-weight: 700; }
.qz-co-row { display: flex; justify-content: space-between; font-size: calc(14px*var(--fz)); margin-bottom: calc(10px*var(--fz)); }
.qz-co-disc { color: #16a34a; font-weight: 700; }
.qz-co-total { display: flex; justify-content: space-between; font-size: calc(18px*var(--fz)); font-weight: 800; padding-top: calc(12px*var(--fz)); border-top: 1px solid #eee; margin-top: calc(6px*var(--fz)); }
.qz-co-pay { margin-top: calc(18px*var(--fz)); }

/* ============================ TITLE CARDS ============================ */
.qz-fullbleed { position: absolute; inset: 0; }
.qz-titlecard {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: calc(14px*var(--fz)); padding: calc(60px*var(--fz));
  background:
    radial-gradient(90% 60% at 50% 12%, #3a1156 0%, transparent 55%),
    radial-gradient(80% 60% at 50% 100%, #14243f 0%, transparent 55%),
    var(--nv-bg);
  color: #fff;
}
.qz-tc-logo { width: calc(96px*var(--fz)); height: calc(96px*var(--fz)); border-radius: calc(22px*var(--fz)); box-shadow: 0 20px 60px -10px rgba(219,39,119,.6); }
.qz-tc-title { font-size: calc(58px*var(--fz)); font-weight: 900; letter-spacing: -.02em; text-wrap: balance; background: linear-gradient(90deg,#ff2d95,#a855f7,#a3e635); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-tc-sub { font-size: calc(21px*var(--fz)); color: #cdb8e6; max-width: calc(760px*var(--fz)); line-height: 1.45; }
.qz-tc-tag { margin-top: calc(10px*var(--fz)); font-size: calc(13px*var(--fz)); font-weight: 800; letter-spacing: calc(3px*var(--fz)); color: var(--nv-lime); }
.qz-cta-pill, .qz-cta { }
.qz-cta-pill { margin-top: calc(14px*var(--fz)); background: linear-gradient(180deg,#c6ff6b,var(--nv-lime)); color: #10240a; font-weight: 800; font-size: calc(20px*var(--fz)); padding: calc(15px*var(--fz)) calc(36px*var(--fz)); border-radius: 999px; box-shadow: 0 14px 40px -8px rgba(163,230,53,.6); }
.qz-tc-url { margin-top: calc(6px*var(--fz)); font-size: calc(15px*var(--fz)); color: #9f86c0; font-family: ui-monospace, monospace; }

/* ============================ PRIMS ============================ */
.qz-cursor { position: absolute; width: calc(26px*var(--fz)); height: calc(26px*var(--fz)); z-index: 60; pointer-events: none; opacity: 0; transition: left .55s cubic-bezier(.3,.8,.3,1), top .55s cubic-bezier(.3,.8,.3,1), opacity .3s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.qz-cursor.show { opacity: 1; }
.qz-cursor svg { width: 100%; height: 100%; }
.qz-cursor.click::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(38px*var(--fz)); height: calc(38px*var(--fz)); border: 2px solid var(--nv-lime); border-radius: 999px; transform: translate(-50%,-50%) scale(0); animation: qzRipple .5s ease-out; }
@keyframes qzRipple { from { transform: translate(-50%,-50%) scale(0); opacity: 1; } to { transform: translate(-50%,-50%) scale(1.4); opacity: 0; } }

.qz-poplayer { position: absolute; inset: 0; z-index: 55; pointer-events: none; }
.qz-pop {
  position: absolute; max-width: calc(300px*var(--fz)); background: #10121a; color: #fff;
  border: 1px solid rgba(163,230,53,.4); border-radius: calc(12px*var(--fz)); padding: calc(12px*var(--fz)) calc(16px*var(--fz));
  font-size: calc(14px*var(--fz)); line-height: 1.4; font-weight: 600;
  box-shadow: 0 16px 44px -10px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .4s, transform .4s;
}
.qz-pop.show { opacity: 1; transform: none; }
.qz-pop-dot { display: inline-block; width: calc(8px*var(--fz)); height: calc(8px*var(--fz)); border-radius: 999px; background: var(--nv-lime); margin-right: calc(8px*var(--fz)); box-shadow: 0 0 10px var(--nv-lime); }
.qz-pop::before { content: ""; position: absolute; width: calc(12px*var(--fz)); height: calc(12px*var(--fz)); background: #10121a; border: 1px solid rgba(163,230,53,.4); transform: rotate(45deg); }
.qz-pop.right::before { left: calc(-7px*var(--fz)); top: var(--ay,20px); border-right: none; border-top: none; }
.qz-pop.left::before  { right: calc(-7px*var(--fz)); top: var(--ay,20px); border-left: none; border-bottom: none; }
.qz-pop.top::before   { bottom: calc(-7px*var(--fz)); left: var(--ax,20px); border-top: none; border-left: none; }
.qz-pop.bottom::before{ top: calc(-7px*var(--fz)); left: var(--ax,20px); border-bottom: none; border-right: none; }

.qz-caption { position: absolute; left: 50%; bottom: calc(70px*var(--fz)); transform: translateX(-50%) translateY(10px); z-index: 58; display: flex; align-items: center; gap: calc(14px*var(--fz)); background: rgba(10,7,18,.86); backdrop-filter: blur(8px); border: 1px solid rgba(168,85,247,.3); border-radius: 999px; padding: calc(12px*var(--fz)) calc(24px*var(--fz)); max-width: calc(1300px*var(--fz)); opacity: 0; transition: opacity .5s, transform .5s; }
.qz-caption.show { opacity: 1; transform: translateX(-50%); }
.qz-cap-step { font-size: calc(13px*var(--fz)); font-weight: 800; color: #10240a; background: var(--nv-lime); padding: calc(4px*var(--fz)) calc(12px*var(--fz)); border-radius: 999px; flex-shrink: 0; }
.qz-cap-text { font-size: calc(17px*var(--fz)); font-weight: 600; color: #fff; }

.qz-progress { position: absolute; left: 0; right: 0; bottom: 0; height: calc(5px*var(--fz)); background: rgba(255,255,255,.08); z-index: 58; }
.qz-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg,var(--nv-magenta),var(--nv-lime)); transition: width .6s ease; }

.qz-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 70; font: inherit; font-size: calc(22px*var(--fz)); font-weight: 800; color: #10240a; background: linear-gradient(180deg,#c6ff6b,var(--nv-lime)); border: none; border-radius: 999px; padding: calc(18px*var(--fz)) calc(44px*var(--fz)); cursor: pointer; box-shadow: 0 20px 50px -10px rgba(163,230,53,.6); }
.qz-start.hidden { display: none; }

/* ============================ MOBILE (9:16) ============================ */
.qz-stage.qz-mobile .qz-store-htitle { font-size: calc(40px*var(--fz)); }
.qz-stage.qz-mobile .qz-store-row { flex-wrap: wrap; }
.qz-stage.qz-mobile .qz-store-card { flex: 0 0 46%; }
.qz-stage.qz-mobile .qz-vault { width: calc(90%); min-height: calc(80%); }
.qz-stage.qz-mobile .qz-grid2 { grid-template-columns: 1fr; }
.qz-stage.qz-mobile .qz-co-cols { flex-direction: column; padding: calc(24px*var(--fz)); }
.qz-stage.qz-mobile .qz-caption { bottom: calc(120px*var(--fz)); max-width: 90%; }
.qz-stage.qz-mobile .qz-nav-col { width: calc(200px*var(--fz)); }

@media (prefers-reduced-motion: reduce) {
  .qz-leave, .qz-enter { animation: none; }
  .qz-cursor { transition: none; }
}

/* ============================ REBUILD: faithful admin + shopper ============================ */

/* Dashboard */
.qz-dash-h{font-size:calc(24px*var(--fz));font-weight:800;letter-spacing:-.3px;}
.qz-dstats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(14px*var(--fz));}
.qz-dcard{background:var(--ad-surface);border:1px solid var(--ad-border);border-radius:calc(14px*var(--fz));padding:calc(18px*var(--fz)) calc(20px*var(--fz));position:relative;overflow:hidden;}
.qz-dcard-stripe{position:absolute;top:0;left:0;right:0;height:calc(3px*var(--fz));}
.qz-dcard-l{font-size:calc(12px*var(--fz));font-weight:700;letter-spacing:.05em;color:var(--ad-muted);text-transform:uppercase;}
.qz-dcard-v{font-size:calc(26px*var(--fz));font-weight:800;margin-top:calc(6px*var(--fz));}
.qz-perf{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(12px*var(--fz));margin:calc(14px*var(--fz)) 0;}
.qz-perf-stat{background:#fafafb;border:1px solid var(--ad-border);border-radius:calc(10px*var(--fz));padding:calc(14px*var(--fz));}
.qz-perf-l{font-size:calc(11px*var(--fz));font-weight:700;letter-spacing:.04em;color:var(--ad-muted);text-transform:uppercase;}
.qz-perf-v{font-size:calc(24px*var(--fz));font-weight:800;margin-top:calc(6px*var(--fz));}
.qz-fn-h{font-size:calc(14px*var(--fz));font-weight:800;margin:calc(14px*var(--fz)) 0 calc(10px*var(--fz));}
.qz-fn-row{display:flex;align-items:center;gap:calc(14px*var(--fz));margin-bottom:calc(9px*var(--fz));}
.qz-fn-l{width:calc(150px*var(--fz));font-size:calc(13px*var(--fz));color:var(--ad-ink);}
.qz-fn-bar{flex:1;height:calc(22px*var(--fz));background:#eef0f2;border-radius:calc(6px*var(--fz));overflow:hidden;}
.qz-fn-fill{display:block;height:100%;background:linear-gradient(90deg,var(--ad-teal),var(--ad-teal2));}
.qz-fn-v{width:calc(70px*var(--fz));text-align:right;font-size:calc(13px*var(--fz));font-weight:700;font-variant-numeric:tabular-nums;}

/* Quiz Builder header/toolbar */
.qz-qb-h{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(16px*var(--fz));margin-bottom:calc(14px*var(--fz));}
.qz-set-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(16px*var(--fz));}
.qz-qb-toolbar{display:flex;gap:calc(10px*var(--fz));margin-bottom:calc(16px*var(--fz));}
.qz-select,.qz-btn2{font-size:calc(13px*var(--fz));font-weight:700;padding:calc(9px*var(--fz)) calc(15px*var(--fz));border-radius:calc(9px*var(--fz));border:1px solid var(--ad-border);background:#fff;}
.qz-btn2.sm{padding:calc(6px*var(--fz)) calc(11px*var(--fz));font-size:calc(12px*var(--fz));}
.qz-btn2.danger{color:#d72c0d;border-color:#f4c2bd;}
.qz-vpills{display:flex;flex-wrap:wrap;gap:calc(9px*var(--fz));margin-top:calc(14px*var(--fz));}
.qz-vpill{font-size:calc(13px*var(--fz));font-weight:600;padding:calc(8px*var(--fz)) calc(14px*var(--fz));border-radius:999px;background:#e7f5f2;border:1px solid #bfe6de;color:#0b6b5e;}
.qz-vx{opacity:.5;margin-left:calc(4px*var(--fz));}

/* Question cards */
.qz-qcard{border:1px solid var(--ad-border);border-radius:calc(12px*var(--fz));padding:calc(16px*var(--fz));margin-top:calc(12px*var(--fz));background:#fbfbfc;}
.qz-qcard-h{display:flex;align-items:center;justify-content:space-between;gap:calc(12px*var(--fz));margin-bottom:calc(12px*var(--fz));}
.qz-qcard-t{font-size:calc(15px*var(--fz));font-weight:800;}
.qz-qcard-btns{display:flex;gap:calc(8px*var(--fz));flex-shrink:0;}
.qz-qcard-opts{display:flex;flex-wrap:wrap;gap:calc(8px*var(--fz));}
.qz-qmap{font-size:calc(13px*var(--fz));padding:calc(7px*var(--fz)) calc(12px*var(--fz));border:1px solid var(--ad-border);border-radius:calc(8px*var(--fz));background:#fff;}
.qz-qmap b{color:var(--ad-teal);} .qz-arrow{color:var(--ad-muted);}
.qz-tiernote{background:#f6f6f8;border:1px solid var(--ad-border);border-radius:calc(10px*var(--fz));padding:calc(12px*var(--fz)) calc(14px*var(--fz));font-size:calc(12.5px*var(--fz));color:var(--ad-muted);margin:calc(12px*var(--fz)) 0;}

/* Vault: quiz title + question grid */
.qz-v-title{font-weight:900;font-style:italic;font-size:calc(30px*var(--fz));line-height:.98;text-align:left;width:100%;margin-bottom:calc(12px*var(--fz));}
.qz-v-qpill{align-self:flex-start;font-size:calc(11px*var(--fz));font-weight:800;letter-spacing:.06em;padding:calc(4px*var(--fz)) calc(12px*var(--fz));border-radius:999px;background:linear-gradient(90deg,var(--nv-lime),var(--nv-cyan));color:#10240a;margin-bottom:calc(12px*var(--fz));}
.qz-v-qprompt{align-self:flex-start;text-align:left;font-size:calc(22px*var(--fz));font-weight:800;margin-bottom:calc(16px*var(--fz));}
.qz-v-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(11px*var(--fz));width:100%;}
.qz-v-qwide{grid-column:1/-1;}
.qz-v-qopt{font:inherit;font-size:calc(15px*var(--fz));font-weight:700;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:calc(14px*var(--fz));padding:calc(18px*var(--fz)) calc(12px*var(--fz));cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:calc(8px*var(--fz));}
.qz-v-qic{font-size:calc(26px*var(--fz));}
.qz-v-qopt-on{border-color:var(--nv-cyan);box-shadow:0 0 0 2px var(--nv-cyan),0 0 24px rgba(6,182,212,.5);}

/* Vault: WON starburst */
.qz-burst{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,rgba(245,197,66,.22) 0deg 10deg,transparent 10deg 20deg);animation:qzSpinSlow 18s linear infinite;}
@keyframes qzSpinSlow{to{transform:rotate(360deg);}}
.qz-v-won{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(4px*var(--fz));}
.qz-v-wonsub{color:#fff;font-weight:800;letter-spacing:calc(2px*var(--fz));font-size:calc(15px*var(--fz));text-transform:uppercase;}
.qz-cta-mag{background:linear-gradient(90deg,var(--nv-magenta),#ff6ec4)!important;color:#fff!important;box-shadow:0 12px 30px -6px rgba(219,39,119,.6)!important;}

/* Vault: bundle lockbar + badges */
.qz-v-lockbar{width:100%;display:flex;justify-content:space-between;align-items:center;background:rgba(219,39,119,.18);border:1px solid rgba(219,39,119,.4);border-radius:calc(12px*var(--fz));padding:calc(9px*var(--fz)) calc(14px*var(--fz));font-size:calc(13px*var(--fz));font-weight:700;margin-bottom:calc(12px*var(--fz));}
.qz-v-lockbar b{color:var(--nv-lime);}
.qz-v-lockt{color:#fff;background:var(--nv-magenta);padding:calc(2px*var(--fz)) calc(8px*var(--fz));border-radius:999px;}
.qz-v-bcard{position:relative;}
.qz-v-bbadge{position:absolute;top:calc(6px*var(--fz));left:calc(6px*var(--fz));background:var(--nv-violet);color:#fff;font-size:calc(11px*var(--fz));font-weight:800;padding:calc(2px*var(--fz)) calc(7px*var(--fz));border-radius:calc(7px*var(--fz));z-index:1;}
.qz-v-bpr b{color:var(--nv-violet);} .qz-v-bpr s{opacity:.5;font-weight:500;}
.qz-v-retake{margin-top:calc(12px*var(--fz));font-size:calc(13px*var(--fz));color:#fff;text-decoration:underline;opacity:.8;}

/* Vault: added-to-cart toast */
.qz-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(460px*var(--fz));background:linear-gradient(180deg,#2a0f45,var(--nv-bg));border:1px solid rgba(168,85,247,.4);border-radius:calc(22px*var(--fz));padding:calc(22px*var(--fz));box-shadow:0 30px 90px -20px rgba(219,39,119,.5);}
.qz-toast-msg{color:var(--nv-lime);font-weight:800;font-size:calc(20px*var(--fz));text-align:center;text-shadow:0 0 18px rgba(163,230,53,.5);margin-bottom:calc(16px*var(--fz));line-height:1.3;}

/* Real Shopify checkout */
.qz-co-cols{display:flex;gap:0;min-height:100%;}
.qz-co-main{flex:1.3;padding:calc(40px*var(--fz)) calc(50px*var(--fz));}
.qz-co-side{flex:1;background:#fafafb;border-left:1px solid #eee;padding:calc(30px*var(--fz)) calc(40px*var(--fz));}
.qz-co-express{text-align:center;font-size:calc(13px*var(--fz));color:var(--ad-muted);}
.qz-co-shop{background:#5a31f4;color:#fff;font-weight:800;font-size:calc(20px*var(--fz));border-radius:calc(8px*var(--fz));padding:calc(12px*var(--fz));margin-top:calc(10px*var(--fz));}
.qz-co-or{text-align:center;color:var(--ad-muted);font-size:calc(13px*var(--fz));margin:calc(18px*var(--fz)) 0;}
.qz-co-sec{font-size:calc(17px*var(--fz));font-weight:700;margin-bottom:calc(10px*var(--fz));}
.qz-co-input{border:1px solid #c9ccd0;border-radius:calc(8px*var(--fz));padding:calc(13px*var(--fz)) calc(14px*var(--fz));font-size:calc(14px*var(--fz));color:var(--ad-muted);margin-bottom:calc(10px*var(--fz));}
.qz-co-line{display:flex;align-items:center;gap:calc(12px*var(--fz));padding:calc(12px*var(--fz)) 0;border-bottom:1px solid #eee;}
.qz-co-th{width:calc(48px*var(--fz));height:calc(48px*var(--fz));border-radius:calc(8px*var(--fz));background:linear-gradient(135deg,#e9e9ef,#d7d7e0);flex-shrink:0;}
.qz-co-mid{flex:1;display:flex;flex-direction:column;gap:calc(3px*var(--fz));}
.qz-co-nm{font-size:calc(13px*var(--fz));font-weight:600;}
.qz-co-disc-tag{font-size:calc(11px*var(--fz));color:#16a34a;font-weight:600;}
.qz-co-pr{font-size:calc(14px*var(--fz));font-weight:700;}
.qz-co-code{display:flex;gap:calc(10px*var(--fz));align-items:center;margin:calc(16px*var(--fz)) 0;}
.qz-co-row{display:flex;justify-content:space-between;font-size:calc(14px*var(--fz));margin-bottom:calc(10px*var(--fz));}
.qz-co-total{display:flex;justify-content:space-between;font-size:calc(19px*var(--fz));font-weight:800;border-top:1px solid #eee;padding-top:calc(12px*var(--fz));}
.qz-co-savings{margin-top:calc(10px*var(--fz));font-size:calc(13px*var(--fz));font-weight:700;color:#16a34a;}

.qz-stage.qz-mobile .qz-dstats,.qz-stage.qz-mobile .qz-perf{grid-template-columns:1fr 1fr;}
.qz-stage.qz-mobile .qz-v-qgrid{grid-template-columns:1fr;}
.qz-stage.qz-mobile .qz-co-cols{flex-direction:column;}