/* builder.css — extracted from builder.html 2026-07-17. Main builder
   stylesheet. Mobile-gate component styles stay inline in builder.html
   next to the #mobile-gate markup. See AI-INDEX.md / builder/README.md. */
/* Force light scheme at the CSS layer too. Belt and suspenders with the
   meta tag — `color-scheme` keeps form controls + scrollbars in light
   regardless of the user's OS dark-mode preference. */
html, :root { color-scheme: light only; }
:root {
  --bg:           #FAFBFD;
  --bg-soft:      #F4F6FA;
  --surface:      #FFFFFF;
  --border:       #E5E8F0;
  --border-soft:  #EEF0F6;
  --ink:          #0F172A;
  --ink-soft:     #475569;
  --ink-muted:    #94A3B8;
  --accent:       #6366F1;
  --accent-deep:  #4F46E5;
  --accent-soft:  #EEF2FF;
  --success:      #10B981;
  --warn:         #F59E0B;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --shadow-sm:  0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md:  0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 18px 40px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Top nav ───────────────────────────────────────────────────────── */
.topnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-soft); }
.topnav-inner { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%); display: grid; place-items: center; color: white; font-size: 14px; font-weight: 900; }
.topnav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.topnav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500; }
.topnav-links a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 100px; font-family: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s, background .15s; }
.btn-primary { background: var(--ink); color: white; border-color: var(--ink); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--accent); color: white; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }
/* r22: lighter pill for "Talk to us" so it doesn't disappear next to the dark Create-account button */
.btn-ghost-light { background: rgba(255,255,255,0.85); color: var(--ink); border-color: rgba(0,0,0,0.08); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: white; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 64px 24px 36px; background: radial-gradient(60% 80% at 80% 0%, rgba(99,102,241,0.08), transparent 60%), radial-gradient(50% 80% at 10% 20%, rgba(168,85,247,0.07), transparent 60%), var(--bg); }
.hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; font-weight: 600; margin-bottom: 22px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; margin-bottom: 22px; }
.hero h1 .accent { background: linear-gradient(135deg, #6366F1 0%, #A855F7 60%, #EC4899 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.lead { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 640px; margin: 0 auto 28px; }
.hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

/* ── Hero trust strip — quick reassurance row under the CTAs ──────── */
.hero-trust {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-size: 12px; color: var(--ink-soft);
  flex-wrap: wrap; justify-content: center;
}
.hero-trust .trust-item { white-space: nowrap; font-weight: 500; }
.hero-trust .trust-dot { color: var(--ink-muted); opacity: 0.6; }

/* ── Sign-in celebration — unmissable "you're in" moment ───────────
   Three layers: a brief white page-flash (200ms), a gradient backdrop
   that fades, and a pop-in success card. Plus a confetti-style burst
   of emoji from the check mark. Total duration ~3.2s. */
.signin-celebrate {
  position: fixed; inset: 0; z-index: 320;
  display: none; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(99,102,241,0.55), rgba(168,85,247,0.55), rgba(236,72,153,0.45));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  overflow: hidden;
}
.signin-celebrate.show {
  display: flex;
  animation: celebrate-fade 3.2s ease-out forwards;
}
@keyframes celebrate-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Layer 1 — the white page-flash. Quick stab of brightness on top of
   everything to make the moment unmistakable. */
.signin-celebrate::before {
  content: '';
  position: absolute; inset: 0;
  background: white;
  animation: celebrate-flash 0.6s ease-out forwards;
}
@keyframes celebrate-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.signin-celebrate-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(15,23,42,0.35);
  padding: 44px 56px;
  text-align: center;
  transform: scale(0.7);
  animation: celebrate-pop 0.9s cubic-bezier(.34,1.56,.64,1) forwards;
  position: relative; z-index: 1;
}
@keyframes celebrate-pop {
  0%   { transform: scale(0.5)  rotate(-3deg); opacity: 0; }
  55%  { transform: scale(1.08) rotate(2deg);  opacity: 1; }
  75%  { transform: scale(0.98) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}
.signin-celebrate-check {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  color: white; font-size: 44px; font-weight: 800;
  box-shadow: 0 12px 32px rgba(16,185,129,0.55), 0 0 0 8px rgba(16,185,129,0.18);
  animation: celebrate-check 0.8s cubic-bezier(.34,1.56,.64,1) 0.2s both;
}
@keyframes celebrate-check {
  0%   { transform: scale(0) rotate(-90deg); }
  60%  { transform: scale(1.2) rotate(15deg); }
  100% { transform: scale(1) rotate(0); }
}
.signin-celebrate-title { font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -0.025em; }
.signin-celebrate-sub   { font-size: 15px; color: var(--ink-soft); margin-top: 8px; max-width: 360px; line-height: 1.5; }
/* Emoji burst around the card — float up & fade for ~2s */
.signin-confetti {
  position: absolute; pointer-events: none;
  font-size: 28px;
  animation: confetti-rise 2.4s ease-out forwards;
  opacity: 0;
}
@keyframes confetti-rise {
  0%   { transform: translate(0, 40px) scale(0.4) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--cx, 0), var(--cy, -260px)) scale(1.2) rotate(var(--cr, 220deg)); opacity: 0; }
}

/* The hero's primary CTA gets a gradient flourish — it's THE primary action. */
#hero-wizard-cta {
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  border-color: transparent; color: white;
  padding: 12px 22px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
#hero-wizard-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(99,102,241,0.45);
}

/* ── Disclaimer ──────────────────────────────────────────────────── */
.disclaimer-strip { max-width: 1560px; margin: 0 auto 28px; padding: 0 28px; }
.disclaimer { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border: 1px solid #FED7AA; border-radius: var(--r-lg); padding: 16px 22px; display: flex; align-items: center; gap: 18px; font-size: 14px; color: #7C2D12; box-shadow: var(--shadow-sm); }
.disclaimer-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(234,88,12,0.15); color: #C2410C; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.disclaimer strong { color: #9A3412; }
.disclaimer-cta { margin-left: auto; flex-shrink: 0; }

/* ── Builder grid ──────────────────────────────────────────────── */
.builder-wrap { max-width: 1560px; margin: 0 auto; padding: 0 28px 60px; }
.builder { display: grid; grid-template-columns: 460px 1fr; gap: 28px; align-items: start; }
@media (max-width: 1180px) { .builder-wrap { padding: 0 18px 60px; } .builder { grid-template-columns: 420px 1fr; gap: 18px; } }
@media (max-width: 980px)  { .builder { grid-template-columns: 1fr; } }

.editor {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  overflow: hidden;
  position: sticky; top: 80px;
  max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
}
@media (max-width: 980px) { .editor { position: static; max-height: none; } }
.editor-header {
  padding: 16px 20px 14px;
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0;               /* keep the header + tab bar from being squished */
}
.editor-header > div:first-child { margin-right: 12px; flex: 1; min-width: 0; }
.editor-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.editor-wizard-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  color: white;
  border: 0; border-radius: 100px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .12s;
  box-shadow: 0 2px 8px rgba(99,102,241,0.32);
  white-space: nowrap;
}
.editor-wizard-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.42); }
.editor-wizard-btn .ew-icon { font-size: 13px; }
.editor-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.editor-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ── Tab bar — lightweight, text + underline ────────────────────── */
/* Note: avoid flex `gap` here — old iOS Safari (< 14.1) renders it as 0,
   which collapses the tabs into "BrandDesignContentLayoutFooter". Use
   explicit margin-right on each tab instead. */
.tabs {
  display: flex;
  flex-shrink: 0;               /* never let the flex column squish the tab bar */
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.tab-btn {
  position: relative;
  padding: 12px 18px;
  margin-right: 4px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink-soft);
  background: transparent; border: none;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.005em;
}
.tab-btn:last-child { margin-right: 0; }
.tab-btn:hover {
  color: var(--ink);
  background: rgba(99,102,241,0.06);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab-btn.active { color: var(--accent-deep); background: var(--surface); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tab-btn.active::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 3px; border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.editor-scroll { flex: 1; overflow-y: auto; }

/* ── Tab panes ─────────────────────────────────────────────────── */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Sections (accordion) — lighter, no numbered chips ─────────── */
.editor-section { border-bottom: 1px solid var(--border-soft); }
.editor-section:last-child { border-bottom: none; }
.section-summary {
  list-style: none;
  padding: 14px 20px 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  transition: background .12s;
}
.section-summary::-webkit-details-marker { display: none; }
.section-summary:hover { background: var(--bg-soft); }
.section-title {
  font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em;
}
details[open] .section-title { color: var(--ink); }
.section-chev { font-size: 11px; color: var(--ink-muted); transition: transform .15s; }
details[open] .section-chev { transform: rotate(90deg); }
.section-body { padding: 0 20px 18px 18px; }
.subhead {
  margin-top: 14px; margin-bottom: 8px;
  font-size: 10px; font-weight: 700; color: var(--ink-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Form fields ───────────────────────────────────────────────── */
.field { margin-bottom: 11px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; letter-spacing: 0.01em; }
.field input[type="text"], .field input[type="url"], .field textarea, .field select {
  width: 100%; padding: 7px 10px;
  font-family: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm);
  outline: none; transition: border-color .12s, background .12s, box-shadow .12s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.field textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-help { font-size: 11px; color: var(--ink-muted); margin-top: 6px; line-height: 1.5; }

/* ── Color picker (clickable swatch) ───────────────────────────── */
.color-pick { display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); }
.color-pick-swatch { width: 44px; height: 44px; border-radius: 10px; border: 2px solid white; box-shadow: 0 1px 0 var(--border), var(--shadow-sm); cursor: pointer; position: relative; transition: transform .12s; }
.color-pick-swatch:hover { transform: scale(1.04); }
.color-pick-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.color-pick-meta { flex: 1; min-width: 0; }
.color-pick-hex { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink); font-weight: 600; }
.color-pick-note { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.derived-shades { display: flex; gap: 4px; margin-top: 8px; }
.derived-shades div { flex: 1; height: 14px; border-radius: 4px; border: 1px solid var(--border); }
.mood-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.mood-btn { padding: 8px 6px; font-family: inherit; font-size: 11px; font-weight: 600; text-align: center; background: var(--surface); color: var(--ink-soft); border: 1.5px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: all .12s; }
.mood-btn:hover { color: var(--ink); border-color: var(--accent); }
.mood-btn.active { background: var(--ink); color: white; border-color: var(--ink); }
.mood-swatch { display: block; width: 100%; height: 12px; border-radius: 4px; margin-bottom: 6px; }

/* ── Fonts ─────────────────────────────────────────────────────── */
.font-pair-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.font-pair { padding: 5px 10px; font-family: inherit; font-size: 11px; font-weight: 600; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 100px; cursor: pointer; transition: all .12s; }
.font-pair:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* ── Image controls ────────────────────────────────────────────── */
.image-control { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; position: relative; }
.image-thumb { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); background-size: contain; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; color: var(--ink-muted); font-size: 20px; overflow: hidden; }
.image-thumb.empty { font-size: 24px; }
.image-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.image-meta-row { display: flex; gap: 6px; align-items: center; }
.image-upload-btn { position: relative; flex-shrink: 0; padding: 5px 10px; font-family: inherit; font-size: 11px; font-weight: 600; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 100px; cursor: pointer; transition: all .12s; overflow: hidden; }
.image-upload-btn:hover { background: var(--ink); color: white; border-color: var(--ink); }
.image-upload-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.image-meta input[type="url"] { width: 100%; padding: 5px 9px; font-family: inherit; font-size: 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.image-meta input[type="url"]:focus { border-color: var(--accent); outline: none; }
.image-control-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-bottom: 3px; }
.image-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); cursor: pointer; user-select: none; margin-top: 4px; }
.image-toggle input { cursor: pointer; }
.image-upload-spinner { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(99,102,241,0.2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; display: none; }
.image-control[data-uploading="1"] .image-upload-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Announcement buttons ─────────────────────────────────────── */
.ann-type-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.ann-type-btn { padding: 7px 6px; font-family: inherit; font-size: 11px; font-weight: 600; background: var(--surface); color: var(--ink-soft); border: 1.5px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: all .12s; }
.ann-type-btn:hover { color: var(--ink); }
.ann-type-btn.active { color: white; border-color: transparent; }
.ann-type-btn[data-ann-type="info"].active    { background: #3B82F6; }
.ann-type-btn[data-ann-type="warning"].active { background: #F59E0B; }
.ann-type-btn[data-ann-type="urgent"].active  { background: #DC2626; }

/* ── Layout tab: module list, drag, toggle ─────────────────────── */
.module-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.module-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: grab;
  transition: background .12s, border-color .12s, box-shadow .12s;
  user-select: none;
}
.module-row:hover { background: var(--bg-soft); border-color: var(--border); }
.module-row.dragging { opacity: 0.4; cursor: grabbing; }
.module-row.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.10); }
.module-row[data-hidden="1"] { opacity: 0.55; }
.module-drag { color: var(--ink-muted); font-size: 14px; cursor: grab; flex-shrink: 0; }
.module-row.is-custom .module-drag { color: var(--accent); }
.module-label { flex: 1; font-size: 13px; color: var(--ink); }
.module-row[data-hidden="1"] .module-label { color: var(--ink-muted); text-decoration: line-through; }
.module-meta { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-muted); text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--bg-soft); }
.module-row.is-custom .module-meta { background: var(--accent-soft); color: var(--accent-deep); }
/* r44: PRO badge on modules (visual only for now) */
.module-pro { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #8A5A17; background: linear-gradient(135deg, rgba(217,164,65,.30), rgba(176,85,47,.16)); border: 1px solid rgba(217,164,65,.5); padding: 2px 7px; border-radius: 100px; flex-shrink: 0; white-space: nowrap; }
.module-eye {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer; transition: all .12s;
  font-size: 13px; color: var(--ink-soft);
  flex-shrink: 0;
}
.module-eye:hover { background: var(--bg-soft); }
.module-row[data-hidden="1"] .module-eye { background: var(--ink); color: white; border-color: var(--ink); }

.toggle-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--r-md); cursor: pointer; user-select: none; }
.toggle-row span { font-size: 13px; color: var(--ink); flex: 1; }
.toggle-row small { font-size: 11px; color: var(--ink-muted); display: block; margin-top: 2px; }
.toggle-row input { transform: scale(1.1); cursor: pointer; }

.custom-card { padding: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; }
.custom-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.custom-card-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-muted); padding: 2px 6px; background: var(--surface); border-radius: 4px; }
.custom-card-remove { background: transparent; border: none; color: var(--ink-muted); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; transition: all .12s; }
.custom-card-remove:hover { background: rgba(220,38,38,0.10); color: #DC2626; }
.add-custom-btn {
  width: 100%;
  padding: 10px;
  background: transparent; color: var(--accent);
  border: 1.5px dashed var(--border); border-radius: var(--r-md);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .12s;
}
.add-custom-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Presets ──────────────────────────────────────────────────── */
.presets { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); }
.preset-chip { padding: 5px 10px; font-family: inherit; font-size: 11.5px; font-weight: 600; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 100px; cursor: pointer; transition: all .12s; }
.preset-chip:hover { background: var(--accent); color: white; border-color: var(--accent); transform: translateY(-1px); }
.preset-chip.is-reset { color: var(--ink-muted); }

.editor-actions { padding: 12px 18px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; background: var(--bg-soft); }
.editor-actions .btn { flex: 1; justify-content: center; }

/* ── Preview pane ──────────────────────────────────────────────── */
.preview-pane { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; min-height: 720px; }
.preview-header { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; background: var(--bg-soft); }
.preview-dots { display: flex; gap: 6px; }
.preview-dots span { width: 10px; height: 10px; border-radius: 50%; }
.preview-dots span:nth-child(1) { background: #FF5F57; }
.preview-dots span:nth-child(2) { background: #FEBC2E; }
.preview-dots span:nth-child(3) { background: #28C840; }
.refresh-btn { width: 30px; height: 30px; display: grid; place-items: center; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; transition: all .12s; font-size: 14px; flex-shrink: 0; }
.refresh-btn:hover { background: var(--ink); color: white; border-color: var(--ink); transform: rotate(180deg); }
.preview-url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-soft); background: var(--surface); padding: 5px 11px; border-radius: 100px; border: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewport-toggle { display: flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; position: relative; }
.viewport-toggle button { padding: 4px 10px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--ink-soft); background: transparent; border: none; border-radius: 100px; cursor: pointer; transition: all .12s; }
.viewport-toggle button:hover { background: var(--bg-soft); }
.viewport-toggle button.active { background: var(--ink); color: white; }

/* One-time "psst — try the other sizes!" wiggle the first time the page
   loads. The animation gets removed after it plays so it doesn't keep
   pulling the eye every visit. */
@keyframes vp-hint-wiggle {
  0%, 5%, 100%   { transform: scale(1); }
  10%            { transform: scale(1.06) rotate(-2deg); }
  15%            { transform: scale(1.10) rotate(2deg);  }
  20%            { transform: scale(1.06) rotate(-2deg); }
  25%, 60%       { transform: scale(1); }
  /* Pulse the ring briefly so users see the WHOLE toggle, not one icon. */
}
@keyframes vp-hint-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  20%      { box-shadow: 0 0 0 6px rgba(99,102,241,0.18); }
  40%      { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}
.viewport-toggle.hint {
  animation: vp-hint-ring 2.2s ease-out 0.8s 2;
}
.viewport-toggle.hint button { animation: vp-hint-wiggle 2.2s ease-out 0.8s 2; }
/* Preview stage — flex column so the iframe always sits dead-center
   regardless of what the editor side is doing. Earlier we used grid +
   place-items, which drifted on some Safari builds when DOM mutations
   triggered layout recalcs. Flex + margin:auto on the iframe is rock-solid. */
.preview-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  padding: 16px;
  min-height: 600px;
  overflow: hidden;
}
#preview-frame {
  display: block;
  width: 100%; height: 100%;
  min-height: 580px;
  margin: 0 auto !important;     /* armor against any cached-CSS drift */
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: white;
  box-shadow: var(--shadow-lg);
  transition: max-width .25s ease;
}
/* Desktop is the default → the iframe fills the available stage. */
.preview-stage[data-viewport="desktop"] #preview-frame { max-width: 100%; }
.preview-stage[data-viewport="mobile"]  #preview-frame { max-width: 390px; max-height: 780px; }
.preview-stage[data-viewport="tablet"]  #preview-frame { max-width: 820px; }

/* ── How it works / features / CTA / footer ─────────────────────── */
.section { max-width: 1100px; margin: 0 auto; padding: 80px 24px; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 12px; }
.section-head p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 24px; transition: transform .15s, box-shadow .15s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; }
.feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--ink-soft); }
.feature.locked { position: relative; opacity: 0.95; }
.feature.locked::after { content: '🔒 Pro'; position: absolute; top: 14px; right: 14px; background: var(--ink); color: white; padding: 3px 9px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.cta { background: linear-gradient(135deg, var(--ink) 0%, #1E293B 100%); color: white; border-radius: var(--r-xl); margin: 0 auto 60px; max-width: 1100px; padding: 60px 40px; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 70% at 30% 0%, rgba(99,102,241,0.30), transparent 60%), radial-gradient(40% 60% at 80% 100%, rgba(168,85,247,0.25), transparent 60%); pointer-events: none; }
.cta-content { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 14px; }
.cta p { color: rgba(255,255,255,0.75); max-width: 540px; margin: 0 auto 28px; font-size: 16px; }
.cta-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.cta-form input { flex: 1; min-width: 200px; padding: 12px 16px; font-family: inherit; font-size: 15px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); color: white; border-radius: 100px; outline: none; }
.cta-form input::placeholder { color: rgba(255,255,255,0.5); }
.cta-form button { padding: 12px 22px; }
footer.site-footer { text-align: center; padding: 30px 24px; color: var(--ink-muted); font-size: 13px; }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(40px); background: var(--ink); color: white; padding: 10px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; z-index: 200; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.storage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-muted); background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 100px; }
.build-pill { display: inline-flex; padding: 2px 7px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: white; background: linear-gradient(135deg, #6366F1, #A855F7); border-radius: 100px; margin-left: 4px; text-transform: uppercase; }
.storage-pill[data-state="ok"]    { color: var(--success); border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.07); }
.storage-pill[data-state="local"] { color: var(--warn);    border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
.storage-pill[data-state="saved"] { color: var(--success); border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.07); }
.storage-pill[data-state="saving"]{ color: var(--ink-soft); border-color: var(--border); background: var(--bg-soft); }

/* ── Presets row inside Brand tab ─────────────────────────────── */
.presets-inline { display: flex; gap: 6px; flex-wrap: wrap; }
.presets-inline .preset-chip { padding: 6px 11px; font-family: inherit; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 100px; cursor: pointer; transition: all .12s; }
.presets-inline .preset-chip:hover { background: var(--accent); color: white; border-color: var(--accent); transform: translateY(-1px); }
.presets-inline .preset-chip.is-reset { color: var(--ink-muted); }

/* ── Image clear pill — geometry-identical to the Upload pill ──────
   Sits inline beside Upload in the meta-row. Has both an ✕ glyph AND
   the word "Clear" so the affordance is unmistakable. !important rules
   are armor against stale cached CSS from earlier rounds. */
.image-clear-btn {
  position: static !important;
  top: auto !important; right: auto !important;
  width: auto !important; height: auto !important;
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center; gap: 5px;
  flex-shrink: 0;
  padding: 5px 10px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--border);
  font-family: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .12s;
  white-space: nowrap;
  opacity: 1 !important;
}
.image-clear-btn .clear-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-soft);
  font-size: 10px; line-height: 1; font-weight: 800;
}
.image-clear-btn:hover {
  background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C;
}
.image-clear-btn:hover .clear-x {
  background: #FCA5A5; color: white;
}

/* ── Confirmation modal ────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-backdrop.show { display: flex; }
.modal-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 420px; width: 100%;
}
.modal-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(245,158,11,0.12); color: #B45309;
  font-size: 22px;
  margin-bottom: 14px;
}
.modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.modal-text { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Auth modal — sign in / sign up / reset password ────────────── */
.modal-card.auth { max-width: 380px; padding: 30px; }
.modal-eyebrow {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  color: white; border-radius: 100px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-field-row .auth-field { margin-bottom: 12px; }
.modal-card.auth .modal-icon { background: var(--accent-soft); color: var(--accent-deep); }
.auth-field { margin-bottom: 12px; }
.auth-field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.auth-field input {
  width: 100%; padding: 10px 12px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm);
  outline: none; transition: all .12s;
}
.auth-field input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.auth-error { font-size: 12px; color: #DC2626; margin-top: -4px; margin-bottom: 10px; min-height: 16px; }
.auth-submit { width: 100%; justify-content: center; padding: 11px 16px; }
/* r21 — Loading state for any auth submit (sign in / sign up / phone / OTP /
   forgot / magic link / Google). Disables the button + replaces label with a
   spinner + busy text so the user gets immediate feedback during the in-flight
   Firebase call, and a double-click can't re-fire the request. */
.auth-submit[data-loading="1"],
.auth-google[data-loading="1"] {
  cursor: progress;
  opacity: .85;
  pointer-events: none;
}
.auth-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin .65s linear infinite;
}
.auth-success-flash {
  display: inline-block;
  margin-right: 6px;
  animation: spin .4s ease-out;
}
/* r22 — Indeterminate progress bar that lives along the bottom of the
   busy button. The spinner says "thinking"; the progress bar says
   "actively working" so users with slow connections don't tap twice. */
.auth-submit[data-loading="1"]::after,
.auth-google[data-loading="1"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    currentColor 30%,
    currentColor 70%,
    transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  opacity: .85;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  animation: cw-auth-progress 1.1s ease-in-out infinite;
}
.auth-submit, .auth-google { position: relative; overflow: hidden; }
@keyframes cw-auth-progress {
  0%   { background-position: -50% 0; }
  100% { background-position:  150% 0; }
}
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0;
  font-size: 11px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-google {
  width: 100%; padding: 11px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 100px;
  cursor: pointer; transition: all .12s;
}
.auth-google:hover { background: var(--bg-soft); border-color: var(--ink-muted); }
.auth-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-switch {
  margin-top: 16px;
  font-size: 12.5px; color: var(--ink-soft);
  text-align: center;
}
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }
.auth-link {
  margin-top: 8px;
  font-size: 11.5px; color: var(--ink-muted);
  text-align: right;
}
.auth-link a { color: var(--ink-soft); cursor: pointer; text-decoration: none; }
.auth-link a:hover { color: var(--accent); }

/* ── Phone sign-in modal — minimal variant of the auth card ─────── */
.modal-card.auth .auth-alt {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; margin-top: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 100px;
  cursor: pointer; transition: all .12s;
}
.modal-card.auth .auth-alt:hover { background: var(--bg-soft); border-color: var(--ink-muted); }
.modal-card.auth .auth-alt-icon { font-size: 16px; flex-shrink: 0; }
.otp-input {
  letter-spacing: 0.4em !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 700;
}
.auth-magic-link {
  display: block;
  margin-top: 10px;
  font-size: 12px; color: var(--ink-soft);
  text-align: center;
  cursor: pointer; text-decoration: none;
}
.auth-magic-link:hover { color: var(--accent); }
/* Invisible reCAPTCHA still has to render in the DOM — display:none silently
   kills it and the SMS never sends. Park it off-screen instead. */
#recaptcha-container {
  position: fixed;
  bottom: 0; right: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
/* Phone modal shows step 1 (phone) by default; .step-otp class flips to step 2 */
.phone-step-otp { display: none; }
.modal-card.auth.show-otp .phone-step-phone { display: none; }
.modal-card.auth.show-otp .phone-step-otp { display: block; }

/* ── Nav user chip ────────────────────────────────────────────── */
.nav-user-chip {
  display: none;
  align-items: center; gap: 8px;
  padding: 5px 8px 5px 5px;
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 13px; color: var(--ink);
  cursor: pointer; user-select: none;
  position: relative;
  transition: all .12s;
}
.nav-user-chip:hover { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.nav-user-chip.signed-in { display: inline-flex; }
.nav-user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  display: grid; place-items: center;
  color: white; font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.nav-user-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  display: none;
}
.nav-user-chip.menu-open .nav-user-menu { display: block; }
.nav-user-menu button {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: transparent; border: none; border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
}
.nav-user-menu button:hover { background: var(--bg-soft); }
.nav-user-menu .menu-email { padding: 8px 10px; font-size: 11px; color: var(--ink-muted); border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; word-break: break-all; }

/* ── r42: personalized greeting + "feel special" account menu ─────── */
.nav-greeting { display: none; font-size: 13px; font-weight: 650; color: var(--ink); margin-right: 2px; white-space: nowrap; }
.nav-greeting.show { display: inline-flex; align-items: center; }
@media (max-width: 860px) { .nav-greeting { display: none !important; } }
.nav-user-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.18); transition: transform .12s; }
.nav-user-chip:hover .nav-user-avatar { transform: scale(1.06); }
.nav-user-menu { min-width: 244px; padding: 6px; }
.menu-header { display: flex; align-items: center; gap: 11px; padding: 10px 10px 9px; }
.menu-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; background: linear-gradient(135deg, #6366F1, #A855F7); flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,.20); }
.menu-id { min-width: 0; }
.menu-name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-email-line { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-meta { padding: 0 12px 8px; font-size: 11px; color: var(--ink-muted); }
.menu-plan { margin: 0 8px 6px; padding: 7px 11px; border-radius: 9px; font-size: 11px; font-weight: 800; letter-spacing: .2px; color: #8A5A17; background: linear-gradient(135deg, rgba(217,164,65,.24), rgba(176,85,47,.14)); border: 1px solid rgba(217,164,65,.42); display: flex; align-items: center; gap: 6px; }
.menu-sep { height: 1px; background: var(--border-soft); margin: 5px 6px; }

/* ── r43: phone-preview QR modal ──────────────────────────────────── */
.qrm-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20,16,12,.55); backdrop-filter: blur(3px); }
.qrm-overlay.open { display: flex; }
.qrm-card { position: relative; width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 22px 20px 18px; text-align: center; }
.qrm-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--bg-soft); color: var(--ink-soft); cursor: pointer; font-size: 13px; }
.qrm-x:hover { background: var(--surface); }
.qrm-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.qrm-sub { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; margin-bottom: 16px; }
.qrm-code { display: grid; place-items: center; width: 236px; height: 236px; margin: 0 auto 14px; background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 8px; }
.qrm-code img, .qrm-code canvas { display: block; }
.qrm-linkrow { display: flex; gap: 6px; margin-bottom: 12px; }
.qrm-link { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 100px; padding: 8px 12px; outline: none; }
.qrm-scans { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--bg-soft); border-radius: 100px; padding: 7px 12px; }

#nav-signin-btn.is-hidden, #nav-signup-btn.is-hidden { display: none; }
#nav-signup-btn { background: var(--ink); color: white; border-color: var(--ink); }
#nav-signup-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ── Previews modal — list of saved brand looks for a signed-in user ── */
.modal-card.previews { max-width: 480px; padding: 26px; }
.modal-card.previews .modal-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-card.previews .modal-title .pv-new-btn {
  font-size: 12.5px; font-weight: 600; color: white;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 100px;
  padding: 6px 12px; cursor: pointer; transition: all .12s;
}
.modal-card.previews .modal-title .pv-new-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pv-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 18px; max-height: 360px; overflow-y: auto; }
.pv-empty {
  text-align: center; padding: 28px 12px;
  font-size: 13px; color: var(--ink-muted);
  border: 1px dashed var(--border); border-radius: var(--r-md);
}
.pv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  transition: all .12s;
}
.pv-row:hover { border-color: var(--border); background: var(--surface); }
.pv-row.active { border-color: var(--accent); background: var(--accent-soft); }
.pv-row .pv-info { flex: 1; min-width: 0; }
.pv-row .pv-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-row.active .pv-name::after {
  content: 'Active'; margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-deep); background: var(--surface);
  padding: 2px 7px; border-radius: 100px; border: 1px solid var(--accent);
}
.pv-row .pv-meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.pv-row .pv-name-input {
  width: 100%; padding: 6px 8px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--r-sm);
  outline: none;
}
.pv-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pv-actions button {
  font-family: inherit; font-size: 12px; color: var(--ink-soft);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 5px 9px; cursor: pointer; transition: all .12s;
}
.pv-actions button:hover { background: var(--surface); border-color: var(--border); color: var(--ink); }
.pv-actions button.pv-delete:hover { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.pv-actions button.pv-switch { font-weight: 700; color: var(--accent-deep); }
.pv-actions button.pv-switch:hover { background: var(--accent-soft); border-color: var(--accent); }
.pv-row.active .pv-actions .pv-switch { display: none; }

/* ── Welcome + Wizard modals ─────────────────────────────────────
   Onboarding: anon visitor sees welcome → signs up → wizard runs.
   Already-signed-in users skip welcome and go straight to wizard. */

#nav-quickstart-btn {
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  color: white; border: 0;
  padding: 7px 14px; border-radius: 100px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .12s;
  box-shadow: 0 1px 3px rgba(99,102,241,0.35);
  display: inline-flex; align-items: center; gap: 6px;
}
#nav-quickstart-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,0.45); }
#nav-quickstart-btn .qs-sparkle { font-size: 13px; }

/* Welcome modal — small, friendly, only shown to first-timers + on CTA click */
.modal-card.welcome {
  max-width: 460px; padding: 0; overflow: hidden;
  text-align: center;
}
.welcome-hero {
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 60%, #EC4899 100%);
  color: white; padding: 32px 28px 26px;
  position: relative;
}
.welcome-hero::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 30px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.welcome-emoji {
  font-size: 44px; line-height: 1; margin-bottom: 12px;
  display: inline-block;
  animation: welcome-wave 1.4s ease-out;
}
@keyframes welcome-wave {
  0%   { transform: scale(0.6) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.welcome-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.welcome-sub   { font-size: 14px; opacity: 0.92; line-height: 1.45; max-width: 320px; margin: 0 auto; }
.welcome-body { padding: 22px 28px 26px; }
.welcome-cta {
  width: 100%; padding: 13px 18px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  background: var(--ink); color: white;
  border: 0; border-radius: 100px; cursor: pointer;
  transition: all .12s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.welcome-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.welcome-secondary {
  margin-top: 10px;
  font-size: 12.5px; color: var(--ink-soft);
}
.welcome-secondary a { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: none; }
.welcome-secondary a:hover { text-decoration: underline; }
.welcome-skip {
  display: block; margin-top: 14px;
  font-size: 11.5px; color: var(--ink-muted); cursor: pointer;
}
.welcome-skip:hover { color: var(--ink-soft); }

/* Wizard modal — the multi-step "fancy" flow */
.modal-card.wizard {
  max-width: 560px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 92vh;
}
.wiz-header {
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  color: white; padding: 22px 28px 18px;
  position: relative;
}
.wiz-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.18); color: white;
  border: 0; border-radius: 50%;
  font-size: 16px; cursor: pointer;
  transition: all .12s;
}
.wiz-close:hover { background: rgba(255,255,255,0.32); }
.wiz-step-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
.wiz-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.wiz-sub   { font-size: 13.5px; opacity: 0.92; line-height: 1.45; margin-top: 6px; max-width: 440px; }

.wiz-dots {
  display: flex; gap: 6px; margin-top: 14px;
}
.wiz-dot {
  flex: 1; height: 4px; border-radius: 100px;
  background: rgba(255,255,255,0.25);
  transition: background .25s;
}
.wiz-dot.done    { background: rgba(255,255,255,0.95); }
.wiz-dot.current { background: rgba(255,255,255,0.95); box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }

.wiz-body {
  padding: 22px 28px; overflow-y: auto;
  flex: 1; min-height: 240px;
}
/* ── In-depth wizard polish (Round 20) ──────────────────────────── */
.wiz-illus {
  text-align: center;
  font-size: 44px; line-height: 1;
  margin: -4px 0 14px;
  letter-spacing: 6px;
  animation: wiz-illus-bounce 0.7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wiz-illus-bounce {
  0%   { transform: scale(0.5) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.12) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
.wiz-lead {
  font-size: 14.5px; color: var(--ink);
  line-height: 1.55; margin: 0 0 18px;
  text-align: center; max-width: 460px; margin-left: auto; margin-right: auto;
  font-weight: 500;
}
.wiz-promise-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 6px;
}
.wiz-promise {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 14px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.wiz-promise .wp-ico { font-size: 22px; margin-bottom: 4px; }
.wiz-promise strong  { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.wiz-promise span    { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

.wiz-req, .wiz-opt {
  display: inline-block; margin-left: 6px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 1px 7px; border-radius: 100px;
}
.wiz-req { background: rgba(99,102,241,0.12); color: var(--accent-deep); }
.wiz-opt { background: var(--bg-soft); color: var(--ink-muted); border: 1px solid var(--border-soft); }

/* Color picker row — native color input + a strip of quick swatches */
.wiz-color-row { display: flex; align-items: center; gap: 12px; }
.wiz-color-row input[type="color"] {
  width: 56px; height: 40px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; padding: 2px;
}
.wiz-color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.wiz-color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: transform .12s;
}
.wiz-color-swatch:hover { transform: scale(1.15); }
.wiz-color-swatch.active { box-shadow: 0 0 0 3px var(--accent); }

/* Font pairing chip grid */
.wiz-fontpair-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 4px;
}
.wiz-fontpair-card {
  padding: 12px; background: var(--surface); border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md); cursor: pointer; text-align: left;
  font-family: inherit; transition: all .12s;
}
.wiz-fontpair-card:hover { border-color: var(--border); transform: translateY(-1px); }
.wiz-fontpair-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.14); }
.wiz-fontpair-card .fp-name { font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: -0.005em; }
.wiz-fontpair-card .fp-specimen-display { font-size: 18px; line-height: 1.1; color: var(--ink); margin-top: 4px; }
.wiz-fontpair-card .fp-specimen-body    { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

/* Features checklist */
.wiz-feature-grid { display: flex; flex-direction: column; gap: 8px; }
.wiz-feature {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md); cursor: pointer;
  transition: all .12s;
}
.wiz-feature:hover { border-color: var(--border); background: var(--bg-soft); }
.wiz-feature.active { border-color: var(--accent); background: var(--accent-soft); }
.wiz-feature input[type="checkbox"] { display: none; }
.wiz-feature .ft-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border);
  display: grid; place-items: center;
  background: var(--surface);
  font-size: 14px; color: transparent;
  flex-shrink: 0;
  transition: all .12s;
}
.wiz-feature.active .ft-check {
  background: var(--accent); border-color: var(--accent); color: white;
}
.wiz-feature .ft-icon { font-size: 22px; flex-shrink: 0; }
.wiz-feature .ft-text { flex: 1; min-width: 0; }
.wiz-feature .ft-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wiz-feature .ft-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; line-height: 1.4; }

.wiz-step { display: none; animation: wiz-fade-in .25s ease-out; }
.wiz-step.show { display: block; }
@keyframes wiz-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wiz-field { margin-bottom: 14px; }
.wiz-field label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.wiz-field input[type="text"], .wiz-field input[type="email"] {
  width: 100%; padding: 11px 14px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: var(--r-md);
  outline: none; transition: all .12s;
}
.wiz-field input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(99,102,241,0.14); }
.wiz-field .field-hint { margin-top: 6px; font-size: 11.5px; color: var(--ink-muted); }

.wiz-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  margin-top: 8px;
}
.wiz-emoji-btn {
  font-size: 20px; line-height: 1;
  background: var(--bg-soft); border: 1.5px solid transparent;
  border-radius: var(--r-sm); cursor: pointer; padding: 6px 0;
  transition: all .12s;
}
.wiz-emoji-btn:hover  { background: var(--surface); border-color: var(--border); }
.wiz-emoji-btn.active { background: var(--accent-soft); border-color: var(--accent); }

.wiz-preset-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 6px;
}
.wiz-preset-card {
  border: 2px solid var(--border-soft); border-radius: var(--r-md);
  padding: 14px; background: var(--surface);
  cursor: pointer; transition: all .12s;
  text-align: left; font-family: inherit;
  display: flex; flex-direction: column; gap: 6px;
}
.wiz-preset-card:hover {
  border-color: var(--border); transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.wiz-preset-card.active {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
}
.wiz-preset-card .wpc-top {
  display: flex; align-items: center; gap: 8px;
}
.wiz-preset-card .wpc-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  flex-shrink: 0; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-soft);
}
.wiz-preset-card .wpc-emoji  { font-size: 18px; }
.wiz-preset-card .wpc-name   { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.wiz-preset-card .wpc-vibe   { font-size: 11px; color: var(--ink-muted); }

.wiz-finish {
  text-align: center; padding: 8px 8px 4px;
}
.wiz-finish-emoji {
  font-size: 56px; line-height: 1;
  display: inline-block; animation: wiz-pop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wiz-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}
.wiz-finish-title { font-size: 20px; font-weight: 800; margin-top: 12px; letter-spacing: -0.02em; }
.wiz-finish-sub   { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; max-width: 380px; margin-left: auto; margin-right: auto; }

.wiz-footer {
  border-top: 1px solid var(--border-soft);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft);
}
.wiz-footer .wiz-back   { color: var(--ink-soft); }
.wiz-footer .wiz-spacer { flex: 1; }
.wiz-footer .btn { padding: 9px 18px; font-size: 13.5px; }
.wiz-footer .btn-primary {
  background: linear-gradient(135deg, #6366F1, #A855F7);
  border-color: transparent; color: white;
}
.wiz-footer .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,0.4); }
.wiz-footer .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── In-editor "Save your work" banner ─────────────────────────── */
/* Visible only to anonymous users — sits between the tabs and the
   accordion sections. Subtle accent bg, easy to ignore but clearly
   actionable. Hides itself on sign-in or after dismiss. */
.signin-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FAEDFF 100%);
  border-bottom: 1px solid rgba(99,102,241,0.18);
  font-size: 12.5px; color: var(--ink);
}
.signin-banner.hidden { display: none; }
.signin-banner-icon { font-size: 16px; flex-shrink: 0; }
.signin-banner-text { flex: 1; line-height: 1.4; }
.signin-banner-text strong { color: var(--accent-deep); }
.signin-banner-cta {
  flex-shrink: 0;
  padding: 5px 12px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: var(--ink); color: white;
  border: none; border-radius: 100px;
  cursor: pointer; transition: all .12s;
}
.signin-banner-cta:hover { background: var(--accent-deep); transform: translateY(-1px); }
.signin-banner-dismiss {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: transparent; color: var(--ink-muted);
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 12px;
  transition: all .12s;
}
.signin-banner-dismiss:hover { background: rgba(15,23,42,0.08); color: var(--ink); }

/* ═══ Event-type routing modal (r31) ═══════════════════════════════════
   Runs before the wizard. Reuses .modal-backdrop / .modal-card.wizard /
   .wiz-header / .wiz-body / .wiz-footer for shell + polish. */
.er-step { display: none; }
.er-step.show { display: block; animation: erFade .22s ease; }
@keyframes erFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.er-type-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 560px) { .er-type-grid { grid-template-columns: repeat(3, 1fr); } }

.er-type-card {
  position: relative; text-align: left; cursor: pointer;
  padding: 14px 14px 13px; border-radius: var(--r-md, 14px);
  background: var(--surface); border: 1.5px solid var(--border);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
  display: flex; flex-direction: column; gap: 4px;
}
.er-type-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 22px rgba(15,23,42,0.10); }
.er-type-card .er-glyph { font-size: 26px; line-height: 1; }
.er-type-card .er-name { font-size: 13.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.er-type-card .er-blurb { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; }
.er-type-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.er-type-card.active .er-name { color: var(--accent); }
.er-type-card .er-tick {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px;
  display: none; place-items: center; font-weight: 900;
}
.er-type-card.active .er-tick { display: grid; }

.er-needs-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .er-needs-grid { grid-template-columns: 1fr 1fr; } }
.er-need {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 13px; border-radius: var(--r-sm, 10px);
  background: var(--surface); border: 1.5px solid var(--border);
  transition: all .13s ease; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.er-need:hover { border-color: var(--accent); color: var(--ink); }
.er-need .er-need-glyph { font-size: 17px; }
.er-need .er-need-check {
  margin-left: auto; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--border); display: grid; place-items: center;
  color: transparent; font-size: 12px; font-weight: 900; transition: all .13s;
}
.er-need.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink); }
.er-need.active .er-need-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.er-need.disabled { opacity: 0.45; cursor: not-allowed; }
.er-needs-hint { font-size: 11.5px; color: var(--ink-muted); margin-top: 10px; text-align: center; }
.er-reco {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--r-sm, 10px);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
}
.er-reco strong { color: var(--ink); }

/* r31 fix — the wizard modal scopes a dark theme that overrode the need-check
   color/background; force the active/inactive states so selection is obvious. */
.er-need .er-need-check { color: transparent !important; background: transparent !important; }
.er-need.active { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 14%, transparent) !important; }
.er-need.active .er-need-check { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* r38 — fixed editor rows never shrink under the flex column's height cap
   (this, not padding, was why the tab bar clipped on the Brand tab). */
.signin-banner, .editor-actions { flex-shrink: 0; }
/* Comfortable, consistent breathing room under the tab bar on every tab. */
.tab-pane { padding-top: 14px; }

/* r66 — first-visit tab pulse: hint that Brand/Design/Content/Layout/Footer are clickable */
@keyframes cw-tab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.55); transform: translateY(0); }
  50%  { box-shadow: 0 0 0 7px rgba(99,102,241,0);  transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0);    transform: translateY(0); }
}
.tab-btn.cw-pulse { animation: cw-tab-pulse 0.9s ease-in-out 2; }

/* r67 — setup checklist ("Your event is N% ready") */
.cw-check { position: fixed; left: 18px; bottom: 18px; z-index: 900; font-family: inherit; }
.cw-check-pill { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 7px 16px 7px 8px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-md); transition: transform .12s, box-shadow .12s; }
.cw-check-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.cw-check-ring { position: relative; width: 34px; height: 34px; display: inline-flex; }
.cw-check-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.cw-check-ring .bg { fill: none; stroke: var(--border-soft); stroke-width: 3.4; }
.cw-check-ring .fg { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.cw-check-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800; color: var(--accent-deep); }
.cw-check-panel { position: absolute; left: 0; bottom: 54px; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px 14px 10px; }
.cw-check-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.cw-check-x { background: none; border: none; cursor: pointer; color: var(--ink-muted); font-size: 13px; padding: 4px; }
.cw-check-sec-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 10px 0 4px; }
.cw-check-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; font-family: inherit; font-size: 13.5px; color: var(--ink-soft); padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.cw-check-item:hover { background: var(--bg-soft); color: var(--ink); }
.cw-check-item.done { color: var(--ink-muted); cursor: default; text-decoration: line-through; text-decoration-color: rgba(148,163,184,.6); }
.cw-check-tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border); font-size: 11px; font-weight: 800; color: #fff; flex: 0 0 18px; }
.cw-check-item.done .cw-check-tick { background: var(--success); border-color: var(--success); }
.cw-check-foot { border-top: 1px solid var(--border-soft); margin-top: 10px; padding-top: 9px; font-size: 12.5px; color: var(--ink-soft); }
.cw-check-hi { outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 6px; transition: outline-color .3s; }
@media (max-width: 720px) { .cw-check-panel { width: min(300px, calc(100vw - 36px)); } }

/* ═══ r68 — task-based nav, event-type picker, click-to-edit, live QR ═══ */

/* Event-type cards (Get started tab) */
.etype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etype-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 11px 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.etype-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.etype-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.etype-glyph { font-size: 20px; line-height: 1; }
.etype-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.etype-blurb { font-size: 11px; line-height: 1.35; color: var(--ink-muted); }

/* Type-irrelevant modules tucked behind the reveal toggle */
.module-row.module-irrelevant { display: none; }
.module-more-toggle { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; font-size: 12.5px; color: var(--ink-soft); background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.module-more-toggle:hover { color: var(--ink); border-color: var(--accent); }

/* Click-to-edit: field flash when the preview jumps you here */
.cw-field-flash { outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 6px; animation: cwFieldFlash 1.5s ease-out; }
@keyframes cwFieldFlash { 0% { box-shadow: 0 0 0 6px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* "Click text to edit" hint in the preview header */
.edit-hint { font-size: 11.5px; color: var(--ink-muted); background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
@media (max-width: 980px) { .edit-hint { display: none; } }

/* Review & launch tab */
.launch-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.launch-btn-row .btn { flex: 1 1 auto; }

/* QR modal — SMS + expiry rows */
.qrm-sms { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.qrm-sms-label { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
.qrm-expiry { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qrm-expiry-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.qrm-expiry-row { display: flex; gap: 5px; }
.qrm-exp-btn { padding: 4px 9px; font-size: 12px; border: 1.5px solid var(--border); background: var(--surface); border-radius: 999px; cursor: pointer; color: var(--ink-soft); }
.qrm-exp-btn:hover { border-color: var(--accent); }
.qrm-exp-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 700; }

/* ═══ r70 — add-on library (module store) ═══ */
.store-cat { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 14px 0 6px; }
.store-cat:first-child { margin-top: 0; }
.store-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); margin-bottom: 6px; transition: border-color .15s; }
.store-card.on { border-color: var(--accent); background: var(--accent-soft); }
.store-icon { font-size: 18px; line-height: 1.2; }
.store-info { flex: 1 1 auto; min-width: 0; }
.store-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.store-blurb { font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); margin-top: 1px; }
.store-toggle { flex: 0 0 auto; padding: 5px 14px; font-size: 12px; font-weight: 800; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.store-toggle:hover { border-color: var(--accent); }
.store-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ═══ r72 — design tools chips ═══ */
.design-row { display: flex; gap: 6px; flex-wrap: wrap; }
.design-chip { padding: 7px 13px; font-size: 12.5px; font-weight: 700; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .12s; }
.design-chip:hover { border-color: var(--accent); }
.design-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ═══ r73 — undo/redo/history ═══ */
.hist-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-soft); font-size: 14px; cursor: pointer; transition: border-color .12s, color .12s; }
.hist-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.hist-btn:disabled { opacity: .35; cursor: default; }
.hist-list { max-height: 300px; overflow-y: auto; margin-top: 14px; text-align: left; }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); }
.hist-row:last-child { border-bottom: none; }
.hist-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.hist-time { font-size: 11.5px; color: var(--ink-muted); }
.hist-empty { padding: 18px 6px; font-size: 13px; color: var(--ink-muted); text-align: center; }

/* ═══ r74 — hero progress bar + go-live ═══ */
.cw-hero-progress { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 16px 16px 14px; margin-bottom: 14px; }
.chp-top { display: flex; align-items: center; gap: 14px; }
.chp-pct { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--accent-deep); line-height: 1; min-width: 74px; }
.chp-title { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.chp-next { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.chp-next-link { border: none; background: none; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); cursor: pointer; text-decoration: underline; }
.chp-bar { height: 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border-soft); overflow: hidden; margin-top: 12px; }
.chp-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); background-size: 200% 100%; animation: chpShimmer 2.5s linear infinite; transition: width .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px var(--accent-soft); }
@keyframes chpShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.chp-open { border: none; background: none; padding: 0; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.chp-open:hover { color: var(--accent-deep); }
.golive-missing { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.6; }
.golive-missing strong { color: var(--ink); }
.golive-ok { font-weight: 800; font-size: 14px; color: var(--ink); text-align: center; margin-top: 4px; }
.golive-plan { margin-top: 10px; padding: 14px; background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--r-md); }
.golive-plan-title { font-weight: 800; font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }

/* ═══ r75 — compact progress + guide bubbles ═══ */
.chp-compact { margin: 10px 14px 0; padding: 10px 14px 12px; }
.chp-compact .chp-pct { font-size: 22px; min-width: 52px; }
.chp-compact .chp-title { font-size: 13px; }
.chp-compact .chp-next { font-size: 11.5px; }
.chp-compact .chp-bar { height: 9px; margin-top: 8px; }
.cw-guide-bubble { position: fixed; z-index: 6000; max-width: 280px; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 34px rgba(15,23,42,.35); animation: cwGuideIn .18s ease-out; }
.cw-guide-text { font-size: 13px; line-height: 1.5; }
.cw-guide-ok { margin-top: 9px; background: var(--accent); color: #fff; border: none; border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
@keyframes cwGuideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══ r76 — store search + managed note ═══ */
.store-search { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 999px; font-size: 13px; font-family: inherit; color: var(--ink); background: var(--surface); margin-bottom: 10px; }
.store-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.store-managed { font-size: 10.5px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 8px; padding: 4px 8px; margin-top: 5px; line-height: 1.4; }

/* ═══ r80 — per-section animation select ═══ */
.module-anim { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 3px 5px; cursor: pointer; max-width: 76px; }
.module-anim:focus { outline: none; border-color: var(--accent); }

/* ═══ r80b — bottom launch CTA ═══ */
.editor-actions { flex-direction: column; gap: 8px; }
.editor-actions-row { display: flex; gap: 8px; }
.editor-actions-row .btn { flex: 1 1 auto; }
.launch-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: none; border-radius: var(--r-md); background: linear-gradient(120deg, var(--accent), #A855F7); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 6px 18px rgba(99, 102, 241, .35); transition: transform .12s, box-shadow .12s; }
.launch-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(99, 102, 241, .45); }
.launch-cta.active { outline: 2px solid var(--accent-deep); }
.launch-cta-icon { font-size: 22px; }
.launch-cta-copy { flex: 1 1 auto; line-height: 1.25; }
.launch-cta-copy strong { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.launch-cta-copy small { font-size: 11.5px; opacity: .85; }
.launch-cta-pct { font-size: 18px; font-weight: 800; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; }
.launch-cta[data-ready="1"] { animation: launchGlow 1.8s ease-in-out infinite; }
@keyframes launchGlow { 0%,100% { box-shadow: 0 6px 18px rgba(99,102,241,.35); } 50% { box-shadow: 0 6px 30px rgba(168,85,247,.65); } }

/* ═══ r81 — background gallery ═══ */
.bg-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bg-swatch { aspect-ratio: 16/10; border-radius: 9px; border: 2px solid var(--border); background: var(--bg-soft) center/cover no-repeat; cursor: pointer; font-size: 14px; color: var(--ink-muted); transition: border-color .12s, transform .1s; }
.bg-swatch:hover { border-color: var(--accent); transform: translateY(-1px); }
.bg-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }