/* =========================================================
   Love letter creator
   ========================================================= */

.letter-layout{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap:32px;
  padding: 32px clamp(16px,4vw,48px) 80px; max-width:1320px; margin:0 auto; align-items:start;
}

.builder-panel{ min-width:0; }

.from-to-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.from-to-label{ display:block; font-size:0.78rem; color: var(--plum-quiet); margin-bottom:6px; font-weight:600; }
.from-to-row input{
  width:100%; padding:12px 14px; border-radius: var(--radius-m); border:1.5px solid rgba(62,44,63,.12);
  background: var(--cream); font-size:0.92rem;
}

.template-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:6px; }
.template-chip{
  white-space:nowrap; padding:9px 16px; border-radius:999px; font-size:0.82rem;
  background: var(--white); border:1px solid rgba(62,44,63,.1); color:var(--plum-quiet);
}
.template-chip.selected{ background: var(--plum); color:var(--cream); border-color:var(--plum); }

.letter-textarea{
  width:100%; min-height:180px; border-radius: var(--radius-m); border:1.5px solid rgba(62,44,63,.12);
  padding:16px; font-size:1rem; line-height:1.6; resize:vertical; background: var(--cream);
}

.font-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.font-swatch{
  padding:10px 16px; border-radius: var(--radius-m); border:1.5px solid rgba(62,44,63,.1);
  font-size:1rem; color: var(--plum-quiet);
}
.font-swatch.selected{ border-color: var(--gold); background: var(--cream); color: var(--plum); }

.align-row, .misc-row{ display:flex; gap:10px; flex-wrap:wrap; }
.align-btn, .toggle-pill{
  padding:8px 14px; border-radius:999px; border:1.5px solid rgba(62,44,63,.1); font-size:0.82rem; color:var(--plum-quiet);
}
.align-btn.selected, .toggle-pill.selected{ background: var(--plum); color:var(--cream); border-color:var(--plum); }

.color-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- letter preview stage ---- */
.letter-preview-wrap{ position:sticky; top:92px; min-width:0; }
.letter-stage{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  min-height: 560px; box-shadow: var(--shadow-deep);
  display:flex; align-items:center; justify-content:center; padding: 40px 24px;
}
.paper-sheet{
  width: min(100%, 400px); min-height:460px; border-radius: 6px;
  padding: 34px 30px; position:relative; box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transform: rotate(-0.6deg);
}
.paper-sheet.bordered{ outline: 1.5px solid rgba(62,44,63,0.18); outline-offset: -10px; }
.paper-sheet .corner{ position:absolute; width:26px; height:26px; opacity:.5; }
.paper-sheet .corner.tl{ top:8px; left:8px; }
.paper-sheet .corner.tr{ top:8px; right:8px; transform: scaleX(-1); }
.paper-sheet .corner.bl{ bottom:8px; left:8px; transform: scaleY(-1); }
.paper-sheet .corner.br{ bottom:8px; right:8px; transform: scale(-1,-1); }
.paper-text{ white-space:pre-wrap; word-break:break-word; }

.paper-cream{ background: linear-gradient(160deg,#FBF5EC,#F3E9D8); }
.paper-white{ background:#FFFFFF; }
.paper-pink{ background: linear-gradient(160deg,#FDEFEF,#F6DCE3); }
.paper-vintage{ background: linear-gradient(160deg,#EFE2C4,#DFC79B); }
.paper-floral{ background: radial-gradient(circle at 15% 15%, #F6DCE6, transparent 40%), radial-gradient(circle at 85% 85%, #E4D6F2, transparent 45%), #FBF5EC; }
.paper-handmade{ background:#F6F0E4; box-shadow: inset 0 0 0 1px rgba(62,44,63,.05), 0 16px 40px rgba(0,0,0,.18); }
.paper-luxury{ background: linear-gradient(160deg,#FFFDF7,#F1E4C8); }

.envelope-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

.deco-strip{ display:flex; gap:8px; position:absolute; top:12px; right:16px; font-size:1.1rem; }