:root{
  --bg:           #fdf5f0;
  --bg-blush:     #fff1f5;
  --paper:        #ffffff;
  --paper-warm:   #fffaf6;

  --rose-100:     #fff0f4;
  --rose-200:     #ffe0e8;
  --rose-300:     #fbc4d0;
  --rose-400:     #f4a3b8;
  --rose-500:     #e87a95;
  --rose-600:     #d15674;

  --gold-200:     #f7e4b0;
  --gold-400:     #e0b355;

  --ink:          #4a3e3d;
  --ink-soft:     #6b5a58;
  --ink-muted:    #9c8b8a;

  --line:         #f0e2dc;
  --line-soft:    #f7e9e2;
  --card-border:  #f5e6df;

  --shadow-sm:    0 2px 8px rgba(232,122,149,0.10), 0 1px 2px rgba(232,122,149,0.06);
  --shadow-md:    0 12px 28px rgba(232,122,149,0.13), 0 3px 8px rgba(232,122,149,0.08);
  --shadow-lg:    0 26px 60px rgba(232,122,149,0.17), 0 8px 20px rgba(232,122,149,0.10);

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22,0.61,0.36,1);

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,200,220,0.40), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,220,235,0.35), transparent 70%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;letter-spacing:-0.015em;line-height:1.15}

/* Nav */
.cnav{position:sticky;top:0;z-index:50;background:rgba(253,245,240,0.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.cnav-inner{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.cnav-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-0.02em}
.cnav-logo:hover{color:var(--rose-600)}
.cnav-link{font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.cnav-link:hover{color:var(--rose-600)}

/* Layout */
.layout{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:minmax(380px,42%) 1fr;
  gap:56px;padding:40px 24px 100px;
  align-items:start;
}

/* Preview pane */
.preview-pane{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{
  position:relative;
  width:100%;max-width:400px;
  aspect-ratio:400/780;
  border-radius:42px;
  background:#1a1310;
  padding:12px;
  box-shadow:
    0 40px 80px rgba(74,62,61,0.28),
    0 16px 32px rgba(74,62,61,0.18),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.phone::before{
  content:"";position:absolute;inset:6px;border-radius:36px;
  background:#000;z-index:1;pointer-events:none;
}
.phone-notch{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:80px;height:20px;border-radius:12px;background:#0a0604;z-index:3;
}
.phone iframe{
  width:100%;height:100%;border:0;border-radius:30px;
  background:#fff;position:relative;z-index:2;
  display:block;
}

.preview-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn-sm{
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--card-border);background:var(--paper);
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn-sm:hover{background:var(--rose-100);border-color:var(--rose-300);color:var(--rose-600)}
.btn-sm:disabled{opacity:.5;cursor:not-allowed}

.preview-hint{
  font-family:'Caveat',cursive;font-size:18px;color:var(--ink-muted);
  text-align:center;line-height:1.3;max-width:340px;
}

/* Form pane */
.form-pane{min-width:0}

.form-header{
  margin-bottom:40px;padding-bottom:24px;
  border-bottom:1px dashed var(--line);
}
.form-header .tname{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:6px;
}
.form-header .tvibe{
  font-family:'Caveat',cursive;font-size:24px;color:var(--rose-500);
  margin-bottom:14px;
}
.form-header .tdesc{
  font-size:15px;color:var(--ink-soft);line-height:1.7;max-width:560px;
  margin-bottom:20px;
}
.form-header .tprice{
  display:inline-flex;align-items:baseline;gap:4px;
  font-family:'Baloo 2',sans-serif;font-weight:800;
  color:var(--rose-600);letter-spacing:-0.02em;line-height:1;
}
.form-header .tprice .cur{font-size:16px;opacity:.75;align-self:flex-start;margin-top:4px}
.form-header .tprice .num{font-size:38px}
.form-header .tprice .unit{font-size:16px;opacity:.75;align-self:flex-end;margin-bottom:5px}

.skeleton-lg{height:44px;width:60%;background:linear-gradient(90deg,#f5e6df,#fff5f8,#f5e6df);background-size:200% 100%;border-radius:8px;animation:shimmer 1.4s infinite}
.skeleton-sm{height:24px;width:40%;margin-top:12px;background:linear-gradient(90deg,#f5e6df,#fff5f8,#f5e6df);background-size:200% 100%;border-radius:6px;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Sections */
.fsec{
  display:grid;grid-template-columns:52px 1fr;gap:16px;
  padding:32px 0;border-bottom:1px dashed var(--line-soft);
}
.fsec:last-of-type{border-bottom:0}
.fsec-num{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(180deg,var(--rose-200),var(--rose-300));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 10px rgba(232,122,149,0.20);
  flex-shrink:0;
}
.fsec-body{min-width:0}
.fsec-title{
  font-size:clamp(20px,2vw,24px);letter-spacing:-0.015em;
  margin-bottom:6px;
}
.fsec-lede{
  font-size:14px;color:var(--ink-muted);line-height:1.65;
  margin-bottom:22px;
}

/* Fields */
.field{display:block;margin-bottom:18px;position:relative}
.field:last-child{margin-bottom:0}
.field-label{
  display:block;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--ink-soft);margin-bottom:8px;
}
.field-label .opt{font-weight:500;color:var(--ink-muted);font-style:italic;font-size:12px}
.field input[type=text],
.field input[type=tel],
.field select,
.field textarea,
.repeat-row input,
.repeat-row textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--card-border);
  border-radius:var(--r-sm);
  background:var(--paper);
  font-family:inherit;font-size:15px;color:var(--ink);
  line-height:1.5;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:80px;font-size:15px}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239c8b8a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.repeat-row input:focus,
.repeat-row textarea:focus{
  outline:none;border-color:var(--rose-400);
  box-shadow:0 0 0 4px rgba(244,163,184,0.18);
}
.field-hint{
  display:block;font-size:12px;color:var(--ink-muted);
  margin-top:6px;line-height:1.5;font-style:italic;
}

/* Repeat rows */
.repeat-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.repeat-row{display:flex;gap:8px;align-items:flex-start}
.repeat-row textarea{flex:1}
.badge-row{gap:6px}
.badge-row .badge-icon-input{width:56px;text-align:center;font-size:18px;flex-shrink:0}
.badge-row .badge-title-input{flex:0 1 32%;min-width:120px}
.badge-row .badge-text-input{flex:1}
.photo-row{align-items:center}
.photo-slot-num{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  background:var(--rose-100);color:var(--rose-600);
  font-weight:800;font-size:13px;
}
.btn-remove{
  width:32px;height:32px;flex-shrink:0;margin-top:6px;
  border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-muted);
  font-size:16px;line-height:1;cursor:pointer;
  transition:all .2s var(--ease);
}
.btn-remove:hover{background:#ffe5e5;color:#c54a4a;border-color:#f5c4c4}
.photo-row .btn-remove{margin-top:0;display:none}

.btn-add{
  padding:9px 16px;border-radius:var(--r-pill);
  border:1.5px dashed var(--rose-300);background:transparent;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--rose-600);
  cursor:pointer;transition:all .2s var(--ease);
}
.btn-add:hover{background:var(--rose-100);border-color:var(--rose-400)}
.btn-add:disabled{opacity:.4;cursor:not-allowed}

/* CTA block */
.cta-block{
  margin-top:40px;padding:32px 28px;
  background:linear-gradient(180deg,#fffdf7 0%,#fff0f4 100%);
  border:2px solid var(--rose-300);
  border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cta-block::before{
  content:"";position:absolute;inset:0;
  background-image:var(--paper-grain);opacity:.6;pointer-events:none;
}
.cta-block > *{position:relative;z-index:1}

.cta-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.cta-price{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:36px;letter-spacing:-0.02em;color:var(--rose-600);line-height:1;
}
.cta-meta{font-size:12.5px;color:var(--ink-muted);text-align:right;line-height:1.5}

.btn-primary{
  width:100%;padding:16px 24px;border:none;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--rose-400),var(--rose-500));
  color:#fff;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;transition:all .25s var(--ease);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 10px 24px rgba(232,122,149,0.35),
    0 3px 8px rgba(232,122,149,0.20);
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 16px 36px rgba(232,122,149,0.45), 0 4px 10px rgba(232,122,149,0.28)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.btn-secondary{
  width:100%;padding:12px 20px;margin-top:10px;
  border:1px solid var(--card-border);border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink-soft);
  font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s var(--ease);
}
.btn-secondary:hover{background:var(--rose-100);border-color:var(--rose-300);color:var(--rose-600)}

.cta-fine{
  margin-top:14px;font-size:12px;color:var(--ink-muted);
  line-height:1.55;text-align:center;font-style:italic;
}
.cta-errors{
  margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);
  background:#fff0f0;border:1px solid #f5c4c4;
  font-size:13px;color:#a83e3e;line-height:1.6;
}
.cta-errors ul{margin:0;padding-left:16px}
.cta-errors li{margin-bottom:2px}
.cta-sent{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  background:#f0faf3;border:1px solid #bfe3c9;
  font-size:13px;color:#2f6b45;line-height:1.6;
}
.cta-sent strong{display:block;margin-bottom:4px}
.cta-sent-ref{margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;opacity:.85}
.cta-sent a{color:inherit;font-weight:600}

/* JSON dialog */
.json-dialog{
  border:none;padding:0;border-radius:var(--r-md);
  max-width:640px;width:92vw;background:transparent;
}
.json-dialog::backdrop{background:rgba(74,62,61,0.5);backdrop-filter:blur(6px)}
.json-dialog-inner{background:#1a1310;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-lg)}
.json-dialog header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.json-dialog h3{color:#fff;font-size:14px;letter-spacing:.02em}
.dialog-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(255,255,255,0.1);color:#fff;font-size:18px;
  cursor:pointer;line-height:1;padding:0;
}
.dialog-close:hover{background:rgba(255,255,255,0.2)}
.json-dialog pre{
  padding:18px;color:#c9f5c9;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.55;max-height:60vh;overflow:auto;
  white-space:pre-wrap;word-break:break-word;
}

/* Responsive */
@media (max-width:960px){
  .layout{
    grid-template-columns:1fr;gap:28px;
    padding:20px 16px 80px;
  }
  /* Preview lives in a full-screen sheet, opened from the pinned bar */
  .preview-pane{
    position:fixed;inset:0;z-index:100;
    justify-content:center;
    padding:56px 16px 20px;
    background:rgba(253,245,240,0.97);
    backdrop-filter:blur(10px);
    visibility:hidden;opacity:0;transform:translateY(24px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
  }
  .preview-pane.is-open{
    visibility:visible;opacity:1;transform:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .phone{
    width:auto;max-width:100%;
    height:min(72vh,640px);
    aspect-ratio:400/780;
  }
  .preview-hint{display:none}
  #playDemo{display:none}   /* PRD §6.2: no typewriter in mobile preview */
  .fsec{grid-template-columns:44px 1fr;gap:12px;padding:26px 0}
  .fsec-num{width:32px;height:32px;font-size:13px}
  .badge-row .badge-title-input{flex:1 1 100%}
  .badge-row .badge-text-input{flex:1 1 100%}
  .badge-row{flex-wrap:wrap}
}
@media (max-width:480px){
  .cta-block{padding:24px 20px}
  .cta-price{font-size:30px}
}

/* ============================================================
   Grid page — /catalog/
   ============================================================ */

.grid-page{
  max-width:1280px;
  margin:0 auto;
  padding:60px 24px 80px;
}

.grid-header{
  text-align:center;
  max-width:640px;
  margin:0 auto 64px;
}
.grid-eyebrow{
  font-family:'Nunito',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:4px;
  text-transform:uppercase;
  color:var(--rose-500);
  margin-bottom:20px;
}
.grid-header h1{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(32px,5vw,52px);
  letter-spacing:-0.025em;
  line-height:1.1;
  margin-bottom:20px;
}
.grid-header h1 em{
  font-style:italic;
  color:var(--rose-500);
}
.grid-lede{
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.7;
  margin-bottom:16px;
}
.grid-price-note{
  font-family:'Caveat',cursive;
  font-size:24px;
  color:var(--ink-muted);
}
.grid-price-note strong{
  color:var(--rose-600);
  font-weight:700;
}

/* Cards */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:80px;
}

.grid-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1.5px solid var(--card-border);
  padding:20px 20px 22px;
  transition:all .3s var(--ease);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.grid-card::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:.5;
  pointer-events:none;
}
.grid-card:hover{
  transform:translateY(-4px);
  border-color:var(--rose-300);
  box-shadow:var(--shadow-md);
}
.grid-card > *{position:relative;z-index:1}

.mini-phone{
  width:100%;
  aspect-ratio:1/2;
  border-radius:20px;
  background:#1a1310;
  padding:6px;
  overflow:hidden;
  margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  position:relative;
}
.mini-phone-inner{
  width:100%;
  height:100%;
  border-radius:15px;
  overflow:hidden;
  background:#fff;
  position:relative;
}
.mini-phone-inner iframe{
  position:absolute;
  top:0;left:0;
  width:400px;
  height:800px;
  border:0;
  transform-origin:top left;
  pointer-events:none;
  /* scale set inline by grid.js based on rendered width */
}

.grid-card-name{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin-bottom:2px;
}
.grid-card-vibe{
  font-family:'Caveat',cursive;
  font-size:18px;
  color:var(--rose-500);
  line-height:1.2;
  margin-bottom:10px;
}
.grid-card-price{
  display:flex;
  align-items:baseline;
  gap:3px;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  color:var(--rose-600);
  letter-spacing:-0.02em;
  line-height:1;
}
.grid-card-price .cur{font-size:14px;opacity:.75;align-self:flex-start;margin-top:3px}
.grid-card-price .num{font-size:26px}
.grid-card-price .unit{font-size:14px;opacity:.75;align-self:flex-end;margin-bottom:3px}

.grid-card-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-muted);
  transition:color .2s var(--ease);
}
.grid-card:hover .grid-card-hint{color:var(--rose-600)}
.grid-card-hint::after{
  content:"→";
  transition:transform .25s var(--ease);
}
.grid-card:hover .grid-card-hint::after{transform:translateX(3px)}

/* Custom tier strip */
.grid-custom{
  margin-top:80px;
}
.grid-custom-inner{
  text-align:center;
  max-width:560px;
  margin:0 auto;
  padding:48px 32px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fffdf7 0%,#fff0f4 100%);
  border:1.5px dashed var(--rose-300);
  position:relative;
  overflow:hidden;
}
.grid-custom-inner::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:.5;
  pointer-events:none;
}
.grid-custom-inner > *{position:relative;z-index:1}

.grid-custom-eyebrow{
  font-family:'Nunito',sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:14px;
}
.grid-custom-eyebrow::before{content:"✦ ";font-size:10px}
.grid-custom h2{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(22px,3vw,30px);
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:12px;
}
.grid-custom p{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.65;
  margin-bottom:28px;
}
.grid-custom-cta{
  display:inline-flex;
  padding:14px 28px;
  text-decoration:none;
  width:auto;
}

/* Footer */
.grid-footer{
  border-top:1px solid var(--line-soft);
  padding:28px 24px;
  text-align:center;
}
.grid-footer-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:13px;
  color:var(--ink-muted);
  font-family:'Caveat',cursive;
  font-size:18px;
}

/* Grid responsive */
@media (max-width:960px){
  .grid-page{padding:40px 20px 60px}
  .grid-header{margin-bottom:44px}
  .grid-cards{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-bottom:56px;
  }
  .grid-custom{margin-top:56px}
  .grid-custom-inner{padding:36px 24px}
}

@media (max-width:520px){
  .grid-cards{
    grid-template-columns:1fr;
    gap:20px;
  }
  .mini-phone{
    aspect-ratio:1/1.6;
    max-width:260px;
    margin-left:auto;
    margin-right:auto;
  }
  .grid-footer-inner{
    flex-direction:column;
    gap:6px;
  }
}

/* ============================================================
   Mobile preview bar + sheet (bar/close hidden on desktop)
   ============================================================ */
.preview-bar{
  display:none;
  position:sticky;top:57px;z-index:40;
  width:100%;
  align-items:center;gap:10px;
  padding:11px 18px;
  border:0;border-bottom:1px solid var(--line-soft);
  background:rgba(255,250,246,0.95);
  backdrop-filter:blur(12px);
  font-family:inherit;font-size:14px;color:var(--ink-soft);
  cursor:pointer;text-align:left;
}
.preview-bar b{color:var(--rose-600)}
.preview-bar-arrow{margin-left:auto;color:var(--rose-500)}
.preview-bar-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--rose-500);
  box-shadow:0 0 0 4px rgba(232,122,149,0.18);
  animation:preview-pulse 2s ease-in-out infinite;
}
@keyframes preview-pulse{50%{box-shadow:0 0 0 7px rgba(232,122,149,0.05)}}
.preview-close{
  display:none;
  position:absolute;top:12px;right:16px;
  padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--card-border);background:var(--paper);
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;
}
body.sheet-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .preview-bar-dot{animation:none}
  .preview-pane{transition:none !important}
}

/* ============================================================
   Draft note, inline errors, post-send steps
   ============================================================ */
.draft-note{
  margin:0 0 20px;padding:10px 14px;
  border-radius:var(--r-sm);
  background:var(--paper-warm);border:1px dashed var(--rose-300);
  font-size:13px;color:var(--ink-soft);line-height:1.6;
}
.draft-reset,
.err-link{
  padding:0;border:0;background:none;
  font:inherit;font-weight:700;color:var(--rose-600);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.err-link{color:inherit;font-weight:600}

.field .is-invalid,
.repeat-row .is-invalid,
#codeConfirm.is-invalid{
  border-color:#e08a8a !important;
  background:#fff7f7 !important;
  box-shadow:0 0 0 3px rgba(224,138,138,0.15);
}
.field-error{
  display:block;margin-top:6px;
  font-size:12.5px;font-weight:600;color:#a83e3e;
}
.field-error::before{content:"• "}

.sent-steps{
  margin:12px 0 4px;padding:0;list-style:none;
  counter-reset:sent;
}
.sent-steps li{
  position:relative;
  padding:0 0 10px 30px;
  counter-increment:sent;
}
.sent-steps li::before{
  content:counter(sent);
  position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;
  background:#fff;border:1.5px solid #bfe3c9;color:#2f6b45;
}
.sent-steps li.is-done::before{content:"✓";background:#2f6b45;border-color:#2f6b45;color:#fff}
.sent-steps li:not(:last-child)::after{
  content:"";position:absolute;left:9.5px;top:22px;bottom:2px;
  border-left:1.5px dashed #bfe3c9;
}

/* Grid: placeholder shown until a card's live preview starts (phones) */
.mini-phone-wait{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Caveat',cursive;font-size:26px;color:var(--rose-400);
  background:linear-gradient(160deg,var(--rose-100) 0%,var(--paper-warm) 100%);
}
.mini-phone-inner iframe{z-index:1}
.mini-phone-inner iframe:not([src]){visibility:hidden}

/* Must come after the base .preview-bar / .preview-close rules above,
   otherwise their display:none wins on phones. */
@media (max-width:960px){
  .preview-bar{display:flex}
  .preview-close{display:block}
}