/* ══════════════════════════════════════════════════════════
   QRForge Builder — Unified with style.css design system
   Uses same CSS variables as style.css (deep navy palette)
   ══════════════════════════════════════════════════════════ */

/* ─── Atmosphere ────────────────────────────────────────── */
.atmo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmo-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.orb-1 {
  width: 600px; height: 600px; top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(26,63,117,0.28) 0%, transparent 70%);
  animation: orbD1 20s ease-in-out infinite alternate;
}
.orb-2 {
  width: 500px; height: 500px; bottom: -100px; right: -100px;
  background: radial-gradient(circle, rgba(45,74,80,0.2) 0%, transparent 70%);
  animation: orbD2 17s ease-in-out infinite alternate;
}
.orb-3 {
  width: 400px; height: 400px; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(59,130,212,0.08) 0%, transparent 70%);
  animation: orbD3 14s ease-in-out infinite alternate;
}
@keyframes orbD1 { from { transform: translate(0,0); } to { transform: translate(40px,30px); } }
@keyframes orbD2 { from { transform: translate(0,0); } to { transform: translate(-30px,-20px); } }
@keyframes orbD3 {
  from { transform: translate(-50%,-50%) scale(1); }
  to   { transform: translate(-50%,-50%) scale(1.15); }
}

/* ─── Stepper ───────────────────────────────────────────── */

.stepper-wrap {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 90;
  padding: 12px 32px;
  background: rgba(0,0,30,0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
}
.stepper {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center;
}
.step-node {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.step-node-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--border-medium);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s var(--ease-out);
}
.step-node.active .step-node-dot {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px rgba(59,130,212,0.45);
}
.step-node.done .step-node-dot {
  background: var(--surface-3);
  border-color: var(--border-bright);
  color: var(--accent-dim);
}
.step-node-label {
  font-size: 0.625rem; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color 0.3s;
}
.step-node.active .step-node-label { color: var(--accent-dim); }
.step-node.done  .step-node-label { color: var(--text-secondary); }
.step-connector {
  flex: 1; height: 1.5px;
  background: var(--border-medium);
  margin: 0 8px; margin-bottom: 18px;
  position: relative; overflow: hidden; border-radius: 99px;
}
.step-connector.filled::after {
  content: ''; position: absolute;
  inset-block: 0; left: 0; width: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--accent-dim));
  animation: connFill 0.4s var(--ease-out) forwards;
}
@keyframes connFill { from { width: 0; } to { width: 100%; } }

/* ─── Builder Layout ────────────────────────────────────── */
.builder-layout {
  min-height: 100vh;
  padding-top: calc(64px + 52px + 20px);
  padding-bottom: 60px;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 20px;
  align-items: start;
}

/* ─── Panel Column ──────────────────────────────────────── */
.panel-col {
  display: flex; flex-direction: column;
  min-width: 0;
}

/* ─── Step Panes ────────────────────────────────────────── */
.step-pane {
  display: none;
  flex-direction: column;
}
.step-pane.active {
  display: flex;
  animation: paneIn 0.35s var(--ease-out) forwards;
}
@keyframes paneIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pane-head { padding: 22px 0 18px; }
.pane-title {
  font-size: 1.375rem; font-weight: 500;
  letter-spacing: -0.025em; color: var(--text-primary);
}
.pane-sub { font-size: 0.875rem; color: var(--text-secondary); margin-top: 4px; }

/* ─── Type Grid ─────────────────────────────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 9px;
}
.type-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 15px 10px 13px;
  background: var(--surface-glass);
  border: 1.5px solid var(--border-medium);
  border-radius: 13px;
  color: var(--text-secondary);
  transition: all 0.2s var(--ease-out);
  cursor: pointer; text-align: center;
  position: relative; overflow: hidden;
}
.type-card:hover {
  border-color: var(--border-bright);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.type-card.active {
  border-color: var(--blue-400);
  background: rgba(59,130,212,0.12);
  color: var(--accent);
  box-shadow: 0 0 20px rgba(59,130,212,0.18);
}
.tc-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0; transition: all 0.2s;
}
.tc-icon svg { width: 20px; height: 20px; }
.type-card.active .tc-icon {
  background: rgba(59,130,212,0.18);
  border-color: rgba(59,130,212,0.25);
}
.tc-name { font-size: 0.8125rem; font-weight: 600; }
.tc-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: -2px; }
.type-card.active .tc-sub { color: var(--accent-dim); }

/* ─── Content Form ──────────────────────────────────────── */
.content-form { display: flex; flex-direction: column; gap: 14px; padding: 2px 0; }
.cf-group { display: flex; flex-direction: column; gap: 6px; }
.cf-lbl {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-secondary); letter-spacing: 0.01em;
}
.cf-opt { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.cf-input {
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9375rem; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cf-input:focus {
  border-color: var(--blue-400);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(59,130,212,0.18);
}
.cf-input::placeholder { color: var(--text-muted); }
.cf-textarea { resize: vertical; min-height: 86px; line-height: 1.55; }
.cf-select-styled {
  width: 100%; padding: 11px 36px 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9375rem; outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235a7898' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s;
}
.cf-select-styled:focus { border-color: var(--blue-400); }
.cf-select-styled option { background: var(--surface-2); color: var(--text-primary); }
.cf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ─── Design Accordion ──────────────────────────────────── */
.design-accordion { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.da-block {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s;
}
.da-block:hover { border-color: var(--border-medium); }
.da-title {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.da-opt-tag {
  font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-weight: 500;
}
.da-hint { font-size: 0.75rem; color: var(--text-muted); }

/* ─── Dot / Eye Option Grids ────────────────────────────── */
.dot-opts, .eye-opts {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.dot-o, .eye-o {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 10px 6px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: all 0.18s var(--ease-out);
  cursor: pointer;
}
.dot-o svg { width: 36px; height: 36px; }
.eye-o svg { width: 28px; height: 28px; }
.dot-o:hover, .eye-o:hover { border-color: var(--border-bright); color: var(--text-primary); }
.dot-o.active, .eye-o.active {
  border-color: var(--blue-400);
  color: var(--accent);
  background: rgba(59,130,212,0.1);
}

/* ─── Toggle Switch ─────────────────────────────────────── */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
}
.toggle-lbl { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }
.toggle-sw { position: relative; display: inline-flex; width: 42px; height: 24px; }
.toggle-sw input { display: none; }
.sw-track {
  width: 42px; height: 24px;
  background: var(--surface-3);
  border-radius: 99px; border: 1px solid var(--border-medium);
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center;
}
.sw-knob {
  width: 16px; height: 16px;
  background: var(--text-secondary);
  border-radius: 50%; margin-left: 3px;
  transition: all 0.22s var(--ease-spring);
}
.toggle-sw input:checked + .sw-track {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  border-color: transparent;
}
.toggle-sw input:checked + .sw-track .sw-knob {
  background: white; transform: translateX(18px);
}

/* ─── Color Controls ────────────────────────────────────── */
.two-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf { display: flex; flex-direction: column; gap: 6px; }
.cf-label { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); }
.cf-color-row { display: flex; align-items: center; gap: 8px; }
.c-swatch {
  width: 38px; height: 38px;
  border: 1.5px solid var(--border-bright);
  border-radius: 8px;
  background: transparent; padding: 2px;
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.2s, transform 0.15s var(--ease-spring);
}
.c-swatch:hover {
  border-color: var(--accent-dim);
  transform: scale(1.06);
}
.c-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.c-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
/* Read-only hex label (no text input) */
.color-val-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  user-select: none;
}
.grad-preview-bar { height: 6px; border-radius: 99px; margin: 2px 0; transition: background 0.2s; }
.cf-select {
  width: 100%; padding: 9px 30px 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-medium);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem; outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235a7898' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s;
}
.cf-select:focus { border-color: var(--blue-400); }
.cf-select option { background: var(--surface-2); color: var(--text-primary); }

/* ─── Text Label Fields ─────────────────────────────────── */
.text-label-fields { display: flex; flex-direction: column; gap: 12px; }

/* ─── Frame Options ─────────────────────────────────────── */
.frame-opts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.frame-o {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: all 0.18s var(--ease-out); cursor: pointer;
}
.frame-o svg { width: 28px; height: 28px; }
.frame-o:hover { border-color: var(--border-bright); color: var(--text-primary); }
.frame-o.active {
  border-color: var(--blue-400); color: var(--accent);
  background: rgba(59,130,212,0.1);
}

/* ─── Sliders ───────────────────────────────────────────── */
.slider-grid { display: flex; flex-direction: column; gap: 14px; }
.sg-field { display: flex; flex-direction: column; gap: 7px; }
.sg-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8125rem; color: var(--text-secondary);
}
.sg-val {
  font-family: var(--font-mono);
  font-size: 0.75rem; color: var(--accent-dim);
  min-width: 36px; text-align: right;
}
.ds-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--surface-3);
  border-radius: 99px; outline: none; cursor: pointer;
}
.ds-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--blue-400), var(--accent-dim));
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: transform 0.15s var(--ease-spring);
  cursor: grab;
}
.ds-range::-webkit-slider-thumb:active { transform: scale(1.3); cursor: grabbing; }
.ds-range::-moz-range-thumb {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--blue-400), var(--accent-dim));
  border-radius: 50%; border: none; cursor: grab;
}

/* ─── Error Correction Row ──────────────────────────────── */
.ec-row { display: flex; gap: 8px; }
.ec-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 6px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 1rem; font-weight: 700;
  transition: all 0.18s var(--ease-out); cursor: pointer;
}
.ec-btn span {
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
}
.ec-btn:hover { border-color: var(--border-bright); color: var(--text-primary); }
.ec-btn.active { border-color: var(--blue-400); color: var(--accent); background: rgba(59,130,212,0.1); }
.ec-btn.active span { color: var(--accent-dim); }

/* ─── Logo Drop ─────────────────────────────────────────── */
.logo-drop {
  border: 1.5px dashed var(--border-bright);
  border-radius: 12px; overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.logo-drop:hover { border-color: var(--accent-dim); background: rgba(255,255,255,0.02); }
.logo-drop.has-logo { border-style: solid; border-color: var(--blue-400); }
.logo-drop-idle {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 20px;
  color: var(--text-secondary); font-size: 0.875rem;
}
.logo-drop-hint { font-size: 0.75rem; color: var(--text-muted); }
.logo-drop-loaded { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.logo-drop-loaded img {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: 6px; border: 1px solid var(--border-medium);
}
.logo-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
#logoInfoName { font-size: 0.8125rem; color: var(--text-secondary); }
.logo-rm {
  font-size: 0.75rem; color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  transition: color 0.2s; padding: 0; text-align: left;
}
.logo-rm:hover { color: var(--text-secondary); }

/* ─── Download Panel ────────────────────────────────────── */
.dl-panel { display: flex; flex-direction: column; gap: 8px; }
.scale-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-btn {
  flex: 1; min-width: 60px; padding: 10px 8px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600;
  transition: all 0.18s var(--ease-out); cursor: pointer; text-align: center;
}
.sc-btn:hover { border-color: var(--border-bright); color: var(--text-primary); }
.sc-btn.active { border-color: var(--blue-400); color: var(--accent); background: rgba(59,130,212,0.1); }
.dl-name-input {
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-medium);
  border-radius: 10px; color: var(--text-primary);
  font-size: 0.9375rem; font-family: var(--font-mono);
  outline: none; transition: border-color 0.2s;
}
.dl-name-input:focus { border-color: var(--blue-400); }
.dl-summary {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.dl-sum-row { display: flex; justify-content: space-between; font-size: 0.8125rem; }
.dl-sum-key { color: var(--text-muted); }
.dl-sum-val { color: var(--text-secondary); font-family: var(--font-mono); }
.dl-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dl-btn-png, .dl-btn-svg, .dl-btn-copy {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 20px; border-radius: 12px; border: none;
  font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.dl-btn-png {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: var(--accent-bright);
  box-shadow: var(--shadow-glow);
}
.dl-btn-png:hover { box-shadow: 0 0 36px rgba(59,130,212,0.45); transform: translateY(-1px); }
.dl-btn-svg {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--border-bright);
  color: var(--text-primary);
}
.dl-btn-svg:hover { border-color: var(--accent-dim); background: rgba(255,255,255,0.08); }
.dl-btn-copy {
  background: transparent;
  border: 1.5px solid var(--border-medium);
  color: var(--text-secondary);
}
.dl-btn-copy:hover { border-color: var(--border-bright); color: var(--text-primary); }
.dl-toast {
  display: none; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(37,99,176,0.2);
  border: 1px solid rgba(59,130,212,0.3);
  border-radius: 10px; font-size: 0.875rem;
  color: var(--accent-dim);
  animation: toastIn 0.3s var(--ease-out);
}
.dl-toast.show { display: flex; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Pane Action Buttons ───────────────────────────────── */
.pane-actions {
  padding: 20px 0 8px;
  display: flex; gap: 10px;
}
.pane-actions.two { justify-content: space-between; }
.btn-continue {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  border: none; border-radius: 12px;
  color: var(--accent-bright);
  font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-glow);
  transition: all 0.2s var(--ease-out);
}
.btn-continue:hover { box-shadow: 0 0 36px rgba(59,130,212,0.45); transform: translateY(-1px); }
.btn-continue:active { transform: scale(0.97); }
.btn-back {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px;
  background: transparent;
  border: 1.5px solid var(--border-medium);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.9375rem; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.btn-back:hover { border-color: var(--border-bright); color: var(--text-primary); }
.btn-ghost-sm {
  padding: 13px 18px;
  background: transparent;
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.btn-ghost-sm:hover { border-color: var(--border-medium); color: var(--text-secondary); }

/* ─── Preview Column ────────────────────────────────────── */
.preview-col {
  position: sticky;
  top: calc(64px + 52px + 20px);
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}

/* Context preview (steps 1 & 2) */
.ctx-preview {
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-medium);
  border-radius: 22px;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-height: 200px; justify-content: center;
  transition: opacity 0.3s, transform 0.3s;
  position: relative; overflow: hidden;
}
.ctx-preview::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(59,130,212,0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Hide ctx-preview on design/download steps; show qr-panel prominently */
.preview-col[data-step="1"] .ctx-preview,
.preview-col[data-step="2"] .ctx-preview { opacity: 1; }
.preview-col[data-step="3"] .ctx-preview,
.preview-col[data-step="4"] .ctx-preview { display: none; }

/* QR Panel */
.qr-panel {
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-medium);
  border-radius: 22px;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  position: relative; overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.qr-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(59,130,212,0.07) 0%, transparent 60%);
  pointer-events: none;
}
/* Dimmed on steps 1 & 2 */
.preview-col[data-step="1"] .qr-panel,
.preview-col[data-step="2"] .qr-panel {
  opacity: 0.45;
  pointer-events: none;
}
/* Full opacity on steps 3 & 4 */
.preview-col[data-step="3"] .qr-panel,
.preview-col[data-step="4"] .qr-panel {
  opacity: 1;
  pointer-events: auto;
  border-color: var(--border-bright);
  box-shadow: var(--shadow-glow);
}

.qr-panel-top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.qr-panel-label {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.qr-type-chip {
  padding: 4px 10px; border-radius: 99px;
  background: rgba(59,130,212,0.15);
  border: 1px solid rgba(59,130,212,0.25);
  font-size: 0.6875rem; font-weight: 600;
  color: var(--accent-dim); letter-spacing: 0.04em;
}

.qr-canvas-wrap {
  position: relative;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle);
}
#qrCanvas {
  display: block; border-radius: inherit;
  transition: opacity 0.15s;
  max-width: 100%;
}
.preview-shimmer {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(59,130,212,0.06) 0%,
    rgba(193,232,255,0.04) 50%,
    rgba(59,130,212,0.06) 100%);
  background-size: 200% 200%;
  animation: shimmerPulse 2.5s ease-in-out infinite;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.preview-shimmer.updating { opacity: 1; }
@keyframes shimmerPulse {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.qr-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--text-muted);
  font-family: var(--font-mono);
}
.qr-meta-dot { opacity: 0.5; }

/* ─── Context Preview Internals ─────────────────────────── */
.ctx-label {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  align-self: flex-start;
}

/* Phone mockup */
.phone-mock {
  width: 200px; background: #f5f5f7; border-radius: 24px;
  overflow: hidden; box-shadow: var(--shadow-lg);
  border: 6px solid #1c1c1e; position: relative;
}
.phone-screen { background: #f5f5f7; padding: 0; }
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px 4px; background: white;
}
.phone-status-time { font-size: 0.625rem; font-weight: 600; color: #1d1d1f; }
.phone-status-icons { display: flex; gap: 4px; align-items: center; }
.phone-browser { background: white; }
.phone-url-bar {
  display: flex; align-items: center; gap: 5px;
  margin: 4px 8px; background: #f2f2f7;
  border-radius: 6px; padding: 5px 8px;
}
.phone-url-text {
  font-size: 0.55rem; color: #636366; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1;
  font-family: var(--font-mono);
}
.phone-content { padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.phone-site-hero {
  height: 60px; background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.phone-site-text-lg { height: 8px; background: #e5e5ea; border-radius: 4px; width: 85%; }
.phone-site-text-md { height: 6px; background: #e5e5ea; border-radius: 3px; width: 70%; }
.phone-site-text-sm { height: 5px; background: #f2f2f7; border-radius: 3px; width: 50%; }

/* WiFi card */
.wifi-card {
  background: white; border-radius: 16px; padding: 16px;
  width: 200px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 10px;
}
.wifi-icon-row { display: flex; align-items: center; gap: 10px; }
.wifi-icon-bg {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(26,63,117,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wifi-name { font-size: 0.875rem; font-weight: 600; color: #1d1d1f; }
.wifi-sub { font-size: 0.6875rem; color: #8e8e93; }
.wifi-divider { height: 1px; background: #f2f2f7; }
.wifi-password-row { display: flex; justify-content: space-between; align-items: center; }
.wifi-pw-label { font-size: 0.75rem; color: #8e8e93; }
.wifi-pw-val { font-size: 0.75rem; color: #1d1d1f; font-family: var(--font-mono); letter-spacing: 0.1em; }
.wifi-connect-btn {
  text-align: center; padding: 8px; border-radius: 8px;
  background: var(--blue-500); color: white;
  font-size: 0.8125rem; font-weight: 600;
}

/* vCard mock */
.vcard-mock {
  background: white; border-radius: 16px; overflow: hidden;
  width: 200px; box-shadow: var(--shadow-md);
}
.vcard-header {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  padding: 14px; display: flex; align-items: center; gap: 10px;
}
.vcard-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600; color: white; flex-shrink: 0;
}
.vcard-name { font-size: 0.875rem; font-weight: 600; color: white; }
.vcard-title-text { font-size: 0.6875rem; color: rgba(255,255,255,0.75); margin-top: 2px; }
.vcard-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.vcard-row { display: flex; align-items: center; gap: 8px; }
.vcard-row-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(26,63,117,0.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vcard-row-val { font-size: 0.6875rem; color: #3c3c43; }

/* Social mock */
.social-mock {
  background: white; border-radius: 16px; overflow: hidden;
  width: 180px; box-shadow: var(--shadow-md);
}
.social-header {
  background: linear-gradient(135deg, #0f0c29, #302b63);
  padding: 16px; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.social-avatar-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.social-handle { font-size: 0.8125rem; font-weight: 600; color: white; }
.social-links { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.social-link-item {
  padding: 7px 10px; border-radius: 8px;
  background: #f2f2f7; font-size: 0.6875rem;
  font-weight: 500; color: #1d1d1f; text-align: center;
}

/* Message / call / SMS card */
.msg-card {
  background: white; border-radius: 16px; padding: 16px;
  width: 200px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.msg-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(26,63,117,0.08);
  display: flex; align-items: center; justify-content: center;
}
.msg-card-title { font-size: 0.875rem; font-weight: 600; color: #1d1d1f; }
.msg-card-sub { font-size: 0.75rem; color: #636366; text-align: center; line-height: 1.5; }
.msg-card-btn {
  margin-top: 4px; padding: 8px 20px;
  background: var(--blue-500); color: white;
  border-radius: 20px; font-size: 0.8125rem; font-weight: 600;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .builder-layout {
    grid-template-columns: 1fr;
    padding-top: calc(64px + 52px + 14px);
  }
  .preview-col { position: static; order: -1; }
  .qr-panel { padding: 18px; }
  #qrCanvas { max-width: 280px; }
  /* On mobile, always show both panels without dimming */
  .preview-col[data-step="1"] .qr-panel,
  .preview-col[data-step="2"] .qr-panel {
    opacity: 0.5;
  }
  .preview-col[data-step="1"] .ctx-preview,
  .preview-col[data-step="2"] .ctx-preview { display: flex; }
  .preview-col[data-step="3"] .ctx-preview,
  .preview-col[data-step="4"] .ctx-preview { display: none; }
}
@media (max-width: 640px) {
  .stepper-wrap { padding: 10px 16px; }
  .nav { padding: 0 16px; }
  .builder-layout { padding: calc(64px + 52px + 12px) 12px 40px; }
  .type-grid { grid-template-columns: repeat(3,1fr); }
  .dot-opts, .eye-opts, .frame-opts { grid-template-columns: repeat(2,1fr); }
  .ec-row { flex-wrap: wrap; }
  .pane-actions { flex-direction: column; }
  .btn-continue, .btn-back { justify-content: center; width: 100%; }
  .two-color-row { grid-template-columns: 1fr; }
  .cf-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .type-grid { grid-template-columns: repeat(2,1fr); }
  .scale-row { flex-wrap: wrap; }
  .sc-btn { flex-basis: calc(50% - 4px); }
}