:root {
  --pink: #c2185b;
  --pink-light: #fdeef3;
  --bg: #fff5f8;
  --text: #3a2a30;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }
.wrap { max-width: 480px; margin: 0 auto; padding: 32px 20px 80px; min-height: 100vh; }
h1, h2 { font-family: 'Georgia', serif; }
.btn { display: inline-block; border: none; border-radius: 999px; padding: 14px 28px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--pink); color: #fff; }
.btn-outline { background: transparent; color: var(--pink); border: 2px solid var(--pink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
input[type=text], input[type=password], textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #e6c3d2; border-radius: 12px; font-size: 15px; margin-bottom: 14px; background: #fff; color: var(--text); }
label { font-size: 13px; font-weight: 600; color: #8a4a63; display:block; margin-bottom:6px; }
.field { margin-bottom: 18px; }
.file-drop { border: 2px dashed #e6c3d2; border-radius: 12px; padding: 16px; text-align: center; font-size: 13px; color: #a55c78; margin-bottom: 14px; cursor: pointer; position: relative; overflow: hidden; }
.file-drop img { max-height: 100px; border-radius: 8px; margin-top: 8px; }
.file-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.preview-bar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #fff; border-bottom: 1px solid #eee; }
.preview-bar .label { font-size: 11px; letter-spacing: .08em; color: #a55c78; text-transform: uppercase; }
.preview-bar .title { font-weight: 700; }
.preview-frame-holder { position: relative; }
.watermark-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; display: flex; flex-wrap: wrap; opacity: .18; transform: rotate(-22deg) scale(1.4); }
.watermark-layer span { font-size: 26px; font-weight: 700; color: #c2185b; margin: 28px 40px; white-space: nowrap; }
.card-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 20px; position: relative; overflow: hidden; }
.screen-bg-red { background: linear-gradient(160deg,#b71c3c,#7a0f29); color: #fff; }
.screen-bg-pink { background: var(--pink-light); }
.bear { font-size: 64px; }
.passcode-dots { display:flex; gap:14px; justify-content:center; margin: 18px 0; }
.passcode-dots .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: transparent; }
.passcode-dots .dot.filled { background: #fff; }
.keypad { display:grid; grid-template-columns: repeat(3,64px); gap: 14px; justify-content:center; margin-top: 18px; }
.keypad button { width: 64px; height: 64px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 22px; cursor: pointer; }
.keypad button:active { background: rgba(255,255,255,.35); }
.hint { font-size: 13px; opacity: .8; margin-top: 16px; }
.error-shake { animation: shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.gifts-row { display:flex; gap: 22px; justify-content:center; margin: 30px 0; }
.gift-box { font-size: 70px; cursor: pointer; transition: transform .2s; background:none; border:none; }
.gift-box:hover { transform: scale(1.12) rotate(-4deg); }
.cake-wrap { position: relative; margin: 24px 0; }
.candle { display:inline-block; width: 6px; height: 26px; background:#f6c453; margin: 0 3px; border-radius: 2px; position: relative; transition: opacity .4s; }
.candle.blown { opacity: .25; }
.candle::before { content:""; position:absolute; top:-12px; left:50%; transform: translateX(-50%); width: 8px; height: 12px; background: orange; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 0 8px 2px #ffb84d; transition: opacity .3s; }
.candle.blown::before { opacity: 0; }
.cake-body { width: 220px; margin: 0 auto; }
.cake-tier { background: #fff; border: 3px solid #f3b9c9; border-radius: 16px; height: 50px; margin-top: -6px; }
.cake-tier.top { width: 140px; margin: 0 auto; }
.cake-tier.bottom { width: 220px; }
.photos-grid { display:flex; flex-direction:column; gap:14px; margin: 20px 0; width:100%; }
.photos-grid img { width: 100%; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.letter { background:#fff; color:#3a2a30; border-radius: 16px; padding: 22px; text-align:left; box-shadow: 0 10px 30px rgba(0,0,0,.2); margin: 18px 0; max-height: 50vh; overflow-y:auto; }
.letter .from { font-style: italic; margin-top: 14px; font-weight: 600; }
.back-btn { margin-top: 18px; background: rgba(255,255,255,.15); color:#fff; border:none; padding: 10px 22px; border-radius: 999px; cursor:pointer; }
.screen-bg-pink .back-btn { background: var(--pink); color:#fff; }