body{padding-top:65px}
.guest-note{font-size:12px;color:var(--text-light);font-style:italic}

/* LAYOUT */
.create-layout{display:grid;grid-template-columns:210px 1fr 190px;min-height:calc(100vh - 65px);position:relative;z-index:1}

/* PANELS */
.left-panel,.right-panel{background:rgba(255,255,255,.62);backdrop-filter:blur(12px);padding:18px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.left-panel{border-right:1px solid rgba(244,114,182,.12)}
.right-panel{border-left:1px solid rgba(244,114,182,.12)}
.panel-sec{margin-bottom:22px}
.panel-title{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mid);margin-bottom:11px}

/* THEMES */
.theme-list{display:flex;flex-direction:column;gap:6px}
.theme-btn{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:1.5px solid rgba(244,114,182,.2);border-radius:8px;background:rgba(255,255,255,.7);cursor:pointer;font-family:'Montserrat',sans-serif;font-size:13px;color:var(--text-dark);transition:var(--transition);text-align:left}
.theme-btn:hover{border-color:var(--pink-mid);background:rgba(255,255,255,.95)}
.theme-btn.active{border-color:var(--pink-hot);background:rgba(253,232,240,.9);color:var(--pink-deep);font-weight:600}
.swatch{width:18px;height:18px;border-radius:50%;flex-shrink:0}

/* STICKERS */
.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sticker-btn{aspect-ratio:1;border:1.5px solid rgba(244,114,182,.15);border-radius:7px;background:rgba(255,255,255,.7);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:var(--transition);padding:0}
.sticker-btn:hover{transform:scale(1.18);border-color:var(--pink-mid);background:#fff;box-shadow:var(--shadow-soft)}

/* MODE BADGE */
.mode-badge{margin-top:auto;padding:11px 13px;background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.2);border-radius:8px;font-size:12px;color:var(--text-mid);line-height:1.6}
.mode-badge a{color:var(--pink-hot);font-weight:600;text-decoration:none}
.mode-badge.warn{background:rgba(253,219,180,.3);border-color:rgba(232,168,130,.3)}

/* EDITOR CENTER */
.editor-center{display:flex;flex-direction:column;align-items:center;padding:18px 20px 30px;background:var(--blush-light, #fff5fa);overflow-y:auto}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:9px 14px;background:rgba(255,255,255,.95);border-radius:10px;box-shadow:var(--shadow-soft);margin-bottom:18px;width:100%;max-width:680px}
.tb-select{padding:5px 8px;border:1.5px solid rgba(244,114,182,.2);border-radius:6px;background:#fff;font-family:'Montserrat',sans-serif;font-size:13px;color:var(--text-dark);cursor:pointer;outline:none}
.tb-select:focus{border-color:var(--pink-hot)}
.tb-btn{width:32px;height:32px;border:1.5px solid rgba(244,114,182,.15);border-radius:6px;background:transparent;cursor:pointer;font-size:13px;color:var(--text-dark);display:flex;align-items:center;justify-content:center;transition:var(--transition);font-family:'Montserrat',sans-serif}
.tb-btn:hover{background:rgba(244,114,182,.12);border-color:var(--pink-mid)}
.tb-sep{width:1px;height:22px;background:rgba(244,114,182,.2);margin:0 3px}
.tb-color{display:flex;align-items:center;gap:3px;cursor:pointer}
.tb-color input{width:26px;height:24px;border:none;background:none;cursor:pointer;padding:0;border-radius:4px}

/* PAPER */
.paper-wrap{width:100%;max-width:640px;perspective:1200px}
.letter-paper{position:relative;min-height:680px;border-radius:3px;padding:52px 56px;box-shadow:0 8px 40px rgba(61,26,46,.15),0 2px 8px rgba(61,26,46,.07);transition:background .5s;overflow:hidden}

/* THEMES */
.letter-paper[data-theme="romantic"]{background:radial-gradient(ellipse at 15% 15%,rgba(255,179,217,.5) 0,transparent 60%),radial-gradient(ellipse at 85% 85%,rgba(244,114,182,.2) 0,transparent 60%),linear-gradient(155deg,#fff5f9 0%,#ffe0f0 55%,#ffd0ea 100%)}
.letter-paper[data-theme="vintage"]{background:radial-gradient(ellipse at 10% 10%,rgba(200,168,130,.3) 0,transparent 55%),linear-gradient(155deg,#fdf5e6 0%,#f5e8cc 55%,#ede0c0 100%);border:1.5px solid rgba(200,168,130,.35)}
.letter-paper[data-theme="minimal"]{background:linear-gradient(155deg,#fefefe 0%,#f9f9f9 100%);border:1px solid rgba(0,0,0,.07)}
.letter-paper[data-theme="aesthetic"]{background:radial-gradient(ellipse at 25% 20%,rgba(200,176,232,.45) 0,transparent 55%),radial-gradient(ellipse at 75% 80%,rgba(152,112,208,.22) 0,transparent 55%),linear-gradient(155deg,#f6f0fe 0%,#ede5fc 55%,#e0d5f8 100%)}

/* STICKER LAYER */
.sticker-layer{position:absolute;inset:0;pointer-events:none;z-index:10}
.placed-sticker{position:absolute;cursor:move;pointer-events:all;user-select:none;line-height:1;touch-action:none;display:inline-flex;align-items:center;justify-content:center}
.placed-sticker .sdel{position:absolute;top:-9px;right:-9px;width:17px;height:17px;background:var(--pink-hot);color:#fff;border-radius:50%;font-size:10px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:20;border:none;line-height:1}
.placed-sticker:hover .sdel{display:flex}
.placed-sticker.custom-sticker img{width:100%;height:100%;object-fit:contain;pointer-events:none}

/* LETTER FIELDS */
.sal-row{margin-bottom:26px}
.sal-input{border:none;background:transparent;width:100%;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--text-dark);outline:none;padding:4px 0;border-bottom:1.5px dashed rgba(244,114,182,.3);transition:border-color .3s}
.sal-input:focus{border-bottom-color:var(--pink-hot)}
.sal-input::placeholder{color:rgba(176,112,144,.45)}

.body-wrap{min-height:360px;margin-bottom:30px}
.letter-body{min-height:340px;font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.9;color:var(--text-dark);outline:none;padding:6px 0;white-space:pre-wrap;word-break:break-word}
.letter-body:empty::before{content:attr(data-ph);color:rgba(176,112,144,.38);pointer-events:none;font-style:italic}

.closing-row{border-top:1px dashed rgba(244,114,182,.2);padding-top:18px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.closing-input,.sig-input{border:none;background:transparent;text-align:right;font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--text-dark);outline:none;padding:2px 0;width:auto;min-width:160px}
.closing-input::placeholder,.sig-input::placeholder{color:rgba(176,112,144,.4)}
.sig-input{font-family:'Dancing Script',cursive;font-size:24px;color:var(--pink-deep)}

.wc{position:absolute;bottom:10px;right:14px;font-size:11px;color:rgba(176,112,144,.45);font-family:'Montserrat',sans-serif}

.editor-footer{margin-top:22px;display:flex;justify-content:center}

/* RIGHT PANEL */
.flow{display:flex;flex-direction:column;gap:5px}
.flow-step{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-mid);padding:8px 10px;background:rgba(255,255,255,.6);border-radius:8px;border:1px solid rgba(244,114,182,.1)}
.fn{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--pink-mid),var(--pink-hot));color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flow-arr{text-align:center;color:rgba(244,114,182,.35);font-size:14px;line-height:1}

/* FOLD OVERLAY */
.fold-overlay{position:fixed;inset:0;background:rgba(30,10,22,.75);backdrop-filter:blur(10px);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}
.fold-overlay.active{opacity:1;pointer-events:all}
.fold-scene{display:flex;flex-direction:column;align-items:center;gap:22px}

.fold-paper{width:280px;height:360px;background:linear-gradient(155deg,#fff5f9 0%,#ffe0f0 100%);border-radius:3px;box-shadow:0 16px 50px rgba(0,0,0,.4);transform-origin:center top;position:relative;overflow:hidden}
.fold-lines{position:absolute;inset:0;background:repeating-linear-gradient(transparent,transparent 28px,rgba(244,114,182,.1) 28px,rgba(244,114,182,.1) 29px);background-position:0 48px}

@keyframes paperFoldAnim{
  0%{transform:scaleY(1) translateY(0);opacity:1}
  30%{transform:scaleY(.5) translateY(10px);opacity:.9}
  60%{transform:scaleY(.1) translateY(30px);opacity:.6}
  100%{transform:scaleY(0) translateY(50px);opacity:0}
}
@keyframes envAppear{
  0%{transform:scale(.7) translateY(20px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes flapClose{
  0%{transform:rotateX(0)}
  100%{transform:rotateX(-180deg)}
}
@keyframes sealBounce{
  0%,100%{transform:translate(-50%,50%) scale(1)}
  50%{transform:translate(-50%,50%) scale(1.3)}
}

.fold-paper.fold-anim{animation:paperFoldAnim 1.2s cubic-bezier(.4,0,.2,1) forwards}

.fold-env{width:210px;height:130px;position:relative;display:none;opacity:0}
.fold-env.env-show{display:block;animation:envAppear .6s .1s both}
.env-body{position:absolute;inset:0;background:linear-gradient(155deg,#fff0f6,#ffd6ea);border-radius:5px;box-shadow:0 10px 36px rgba(0,0,0,.32)}
.env-flap{position:absolute;top:0;left:0;right:0;height:65px;background:linear-gradient(155deg,#ffe0f0,#ffb3d9);clip-path:polygon(0 0,50% 62%,100% 0);transform-origin:top center}
.env-flap.flap-close{animation:flapClose .55s .2s cubic-bezier(.4,0,.2,1) forwards}
.env-seal{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%);font-size:26px;z-index:5;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}
.env-seal.seal-bounce{animation:sealBounce .45s .8s}

.fold-msg{color:rgba(255,255,255,.9);font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic;text-align:center}

/* RESPONSIVE */
@media(max-width:900px){
  .create-layout{grid-template-columns:1fr}
  .left-panel,.right-panel{display:none}
  .editor-center{padding:12px}
  .letter-paper{padding:30px 22px}
}