:root{
  --paper: #FBF4E9;
  --paper-2: #F6ECDA;
  --paper-edge: #EFE1C8;
  --ink: #2E1620;
  --ink-soft: #5B4550;
  --raspberry: #B0175C;
  --raspberry-dark: #7E0F42;
  --raspberry-tint: #F6DDE8;
  --blush: #F5DCE6;
  --blush-deep: #EEC6D8;
  --gold: #B8912F;
  --gold-soft: #E8D9AF;
  --green: #2F7A52;
  --sky: #2B6EA8;
  --hairline: rgba(126, 15, 66, 0.22);
  --shadow-card: 0 1px 2px rgba(46,22,32,.06), 0 8px 20px -10px rgba(46,22,32,.18);
  --shadow-lift: 0 4px 8px rgba(46,22,32,.10), 0 22px 40px -14px rgba(176,23,92,.35);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 14px;
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ -webkit-text-size-adjust: 100%; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(176,23,92,0.05), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(184,145,47,0.06), transparent 55%),
    var(--paper);
  line-height: 1.5;
  min-height: 100vh;
}
a{ color: inherit; }
button{ font-family: inherit; }
img{ max-width: 100%; }

.visually-hidden{
  position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ================= HEART RAIN ================= */
.heart-rain{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.heart-rain .heart{
  position:absolute; top:-10%;
  color: var(--raspberry);
  opacity:.55;
  animation: fall linear infinite;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(126,15,66,.15));
}
.heart-rain .heart.gold{ color: var(--gold); }
@keyframes fall{ to{ transform: translateY(120vh) rotate(35deg); } }
@media (prefers-reduced-motion: reduce){
  .heart-rain .heart{ animation: none; opacity:.25; }
}

/* ================= ONBOARDING OVERLAY ================= */
#onboarding{
  position: fixed; inset:0; z-index: 500;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(176,23,92,.10), transparent 60%),
    linear-gradient(180deg, #FCF6EC 0%, #F7E9D6 100%);
  transition: opacity .5s ease, visibility .5s ease;
}
#onboarding.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.onboarding-card{
  position:relative; z-index:2;
  width:min(92vw, 560px);
  text-align:center;
  padding: 34px 22px 30px;
}
.ob-eyebrow{
  font-family: var(--serif); font-style:italic; font-weight:420;
  letter-spacing:.02em; color: var(--raspberry-dark);
  font-size: 14px; margin:0 0 6px;
}
.ob-title{
  font-family: var(--serif); font-weight:600; font-style:italic;
  font-size: clamp(2rem, 7vw, 3rem);
  margin: 0 0 10px; color: var(--ink);
}
.ob-title .amp{ color: var(--raspberry); }
.ob-sub{
  font-size: 14.5px; color: var(--ink-soft); max-width: 420px;
  margin: 0 auto 28px; line-height:1.6;
}
.ob-prompt{
  font-family: var(--serif); font-weight:600; font-size: 1.05rem;
  margin: 0 0 16px; color: var(--raspberry-dark); letter-spacing:.01em;
}
.persona-picks{ display:flex; gap:14px; justify-content:center; flex-wrap: wrap; }
.persona-card{
  flex: 1 1 150px; max-width: 220px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 14px 18px;
  cursor:pointer;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.persona-card:hover, .persona-card:focus-visible{
  transform: translateY(-6px) rotate(-.6deg);
  box-shadow: var(--shadow-lift);
  border-color: var(--raspberry);
  outline:none;
}
.persona-card:nth-child(2):hover{ transform: translateY(-6px) rotate(.6deg); }
.persona-emoji{ font-size: 3rem; display:block; margin-bottom:8px; line-height:1; }
.persona-name{ font-family: var(--serif); font-weight:600; font-size:1.15rem; display:block; }
.persona-tag{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; letter-spacing:.03em; text-transform:uppercase; display:block; }
.ob-skip{
  display:inline-block; margin-top: 24px;
  font-size: 12.5px; color: var(--ink-soft);
  text-decoration: underline dotted; text-underline-offset:3px;
  background:none; border:none; cursor:pointer;
}
.ob-skip:hover{ color: var(--raspberry-dark); }

/* ================= PAGE ================= */
.page{ max-width: 800px; margin: 0 auto; padding: 60px 16px 60px; }
@media (min-width: 700px){ .page{ padding: 52px 40px 90px; } }

/* persona chip */
.persona-chip{
  position: fixed; top: 12px; right: 12px; z-index: 60;
  display:flex; align-items:center; gap:8px;
  background: var(--paper);
  border:1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  box-shadow: var(--shadow-card);
  cursor:pointer;
  font-size: 13px; max-width: calc(100vw - 24px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.persona-chip:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.persona-chip .chip-emoji{
  width:28px; height:28px; border-radius:50%; flex:none;
  background: var(--blush);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.persona-chip .chip-text{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.persona-chip .chip-label{ font-family: var(--serif); font-weight:600; color: var(--raspberry-dark); }
.persona-chip .chip-sub{ font-size:9px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }
.persona-chip .chip-caret{ font-size:12px; color: var(--ink-soft); }

/* offline bar */
#offlineBar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display:flex; align-items:center; justify-content:center; gap: 12px;
  background: var(--raspberry-dark); color: var(--paper);
  padding: 8px 14px; font-size: 12.5px; font-weight:500;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.4);
}
.offline-retry{
  background: var(--paper); color: var(--raspberry-dark);
  border:none; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight:700; cursor:pointer;
}

/* ================= HEADER ================= */
header.doc-header{ text-align:center; position: relative; padding-bottom: 20px; }
.doc-header .heart-corner{ position:absolute; font-size: 13px; color: var(--blush-deep); opacity:.9; }
.doc-header .heart-corner.tl{ top:-6px; left:2px; transform: rotate(-12deg); }
.doc-header .heart-corner.tr{ top:-2px; right:4px; transform: rotate(14deg); }
.doc-kicker{
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight:600; margin-bottom: 10px;
}
.doc-title{
  font-family: var(--serif); font-style: italic; font-weight:600;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  color: var(--ink); margin: 0 0 14px; letter-spacing: -0.01em;
}
.doc-title .heart-dot{ color: var(--raspberry); font-style:normal; }
.doc-sub{ font-size: 14.5px; color: var(--ink-soft); max-width: 480px; margin: 0 auto 18px; line-height:1.65; }
.fleuron{ display:flex; align-items:center; gap:12px; justify-content:center; color: var(--gold); margin: 18px auto 20px; max-width: 320px; }
.fleuron::before, .fleuron::after{ content:""; height:1px; flex:1; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.fleuron::after{ background: linear-gradient(90deg, var(--gold-soft), transparent); }
.fleuron span{ font-size: 15px; }
.dedication{
  font-family: var(--serif); font-style: italic; font-weight: 420;
  font-size: 15.5px; color: var(--raspberry-dark);
  max-width: 520px; margin: 0 auto; line-height:1.7; padding: 0 8px;
}

/* ================= WIDGET ROW ================= */
.widget-row{ display:grid; grid-template-columns: 1fr; gap: 14px; margin: 30px 0 8px; }
@media (min-width: 620px){ .widget-row{ grid-template-columns: 1fr 1fr; } }
.widget{
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.widget::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--raspberry), var(--gold));
}
.widget-title{
  font-family: var(--serif); font-weight:600; font-size: 13.5px;
  letter-spacing:.03em; text-transform:uppercase; color: var(--raspberry-dark);
  display:flex; align-items:center; gap:6px; margin: 4px 0 12px;
}
.ledger-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ledger-stats{ display:flex; gap: 14px; }
.ledger-stat{ text-align:center; }
.ledger-num{ font-family: var(--serif); font-weight:700; font-size: 1.6rem; color: var(--ink); line-height:1; transition: transform .3s ease; }
.ledger-num.owed{ color: var(--raspberry); }
.ledger-num.bump{ animation: numBump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes numBump{ 0%{ transform: scale(1);} 40%{ transform: scale(1.35);} 100%{ transform: scale(1);} }
.ledger-cap{ font-size: 10px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); margin-top:4px; }
.ledger-sign{ font-family: var(--serif); font-size:1.1rem; color: var(--gold); align-self:center; padding-bottom: 14px; }
.ledger-hint{ font-size: 11px; color: var(--ink-soft); margin: 10px 0 0; font-style: italic; }
.redeem-btn{
  background: var(--raspberry); color: var(--paper);
  border:none; border-radius: 999px; padding: 9px 16px;
  font-size: 12.5px; font-weight:600; cursor:pointer;
  box-shadow: 0 6px 14px -6px rgba(176,23,92,.6);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
  white-space:nowrap;
}
.redeem-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(176,23,92,.7); }
.redeem-btn:active{ transform: translateY(0); }
.redeem-btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.redeem-wrap{ position:relative; }
.kiss-float{
  position:absolute; left:50%; bottom: 100%;
  font-size:20px; transform: translateX(-50%);
  animation: kissUp 1.1s ease-out forwards; pointer-events:none;
}
@keyframes kissUp{
  0%{ opacity:0; transform: translate(-50%, 0) scale(.6) rotate(0deg); }
  15%{ opacity:1; transform: translate(-50%, -6px) scale(1.1) rotate(-8deg); }
  100%{ opacity:0; transform: translate(-50%, -70px) scale(1) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce){ .kiss-float{ animation: none; opacity:0; } }

/* Meter */
.meter-stage{ font-family: var(--serif); font-style: italic; font-weight:600; font-size: 15.5px; color: var(--ink); margin-bottom: 10px; }
.meter-track{ height: 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--hairline); overflow:hidden; position:relative; }
.meter-fill{
  height:100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--raspberry));
  width: var(--pct, 0%); position:relative; transition: width .6s ease;
}
.meter-fill::after{
  content:""; position:absolute; right:-1px; top:-3px; bottom:-3px; width:16px;
  background: radial-gradient(circle, rgba(255,255,255,.9), transparent 70%); opacity:.5;
}
.meter-endcaps{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color: var(--ink-soft); margin-top:6px; }

/* ================= LIST HEADER ================= */
.list-heading{ display:flex; align-items:baseline; justify-content:space-between; margin: 34px 0 14px; gap: 10px; flex-wrap:wrap; }
.list-heading h2{ font-family: var(--serif); font-style:italic; font-weight:600; font-size: 1.4rem; margin:0; color: var(--ink); }
.add-wish-btn{
  background: transparent; color: var(--raspberry-dark);
  border: 1px solid var(--raspberry); border-radius: 999px;
  padding: 7px 14px; font-size:12px; font-weight:600; cursor:pointer;
  transition: background .18s ease, color .18s ease;
}
.add-wish-btn:hover{ background: var(--raspberry); color: var(--paper); }

/* add-wish form */
.add-wish-form{
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 16px 16px 14px; margin: 0 0 18px;
  display:flex; flex-direction:column; gap: 8px;
}
.add-wish-form label{ font-size: 11px; letter-spacing:.04em; text-transform:uppercase; color: var(--raspberry-dark); font-weight:700; }
.add-wish-form input[type=text], .add-wish-form textarea{
  width:100%; border:1px solid var(--hairline); border-radius: 10px;
  padding: 9px 12px; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); resize:none;
}
.add-wish-form input[type=text]:focus, .add-wish-form textarea:focus{ outline:2px solid var(--raspberry); outline-offset:0; border-color: transparent; }
.add-wish-form input[type=range]{ width:100%; accent-color: var(--raspberry); }
.add-wish-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.primary-btn{ background: var(--raspberry); color: var(--paper); border:none; border-radius: 999px; padding: 8px 16px; font-size:12.5px; font-weight:600; cursor:pointer; }
.ghost-btn{ background: var(--paper); color: var(--ink-soft); border:1px solid var(--hairline); border-radius: 999px; padding: 8px 16px; font-size:12.5px; font-weight:600; cursor:pointer; }

/* ================= LIST ================= */
ol.wish-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 14px; }

.card{
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  position: relative; padding: 16px 16px 14px 12px;
  transition: transform .22s ease, box-shadow .22s ease;
}
body.first-load .card{
  opacity:0; transform: translateY(14px);
  animation: cardIn .55s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--d, 0) * 55ms + 100ms);
}
@keyframes cardIn{ to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  body.first-load .card{ animation: none; opacity:1; transform:none; }
}
.card.lifted{
  box-shadow: var(--shadow-lift);
  z-index: 20; cursor: grabbing;
  border-color: var(--raspberry);
}
.card.dragging-tilt{ transform: rotate(-1.3deg) scale(1.02); }

.card-row{ display:flex; gap: 10px; align-items:flex-start; }
.drag-handle{
  flex: none; width: 26px; align-self: stretch;
  display:flex; align-items:center; justify-content:center;
  color: var(--blush-deep); font-size: 15px; letter-spacing:2px;
  cursor: grab; user-select:none; touch-action:none;
  border-radius: 6px; margin: -4px 0;
  transition: color .15s ease, background .15s ease;
}
.drag-handle:hover{ color: var(--raspberry); background: var(--blush); }
.drag-handle:active{ cursor: grabbing; }

.num{
  flex:none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--raspberry-dark);
  background-image: linear-gradient(160deg, var(--raspberry), var(--raspberry-dark));
  color: var(--paper);
  font-family: var(--serif); font-weight:700; font-size: 13.5px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px -3px rgba(126,15,66,.6);
}

.card-body{ flex:1; min-width:0; }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.card-title{ font-family: var(--serif); font-weight:600; font-size: 1.02rem; margin: 2px 0 4px; color: var(--ink); overflow-wrap:anywhere; }
.card-desc{ font-size: 13.6px; color: var(--ink-soft); margin: 0 0 10px; line-height:1.6; overflow-wrap:anywhere; }

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size: 11px; font-weight:700; letter-spacing:.02em;
  padding: 5px 10px; border-radius: 999px; white-space:nowrap;
  border: 1px solid transparent; flex:none;
}
.badge.wishlist{ background: var(--paper-2); color: var(--ink-soft); border-color: var(--hairline); }
.badge.negotiating{ background: #FCEFD9; color: #8A5A00; border: 1px dashed #C79A3D; }
.badge.agreed{ background: var(--blush); color: var(--raspberry-dark); border-color: var(--blush-deep); }
.badge.active{ background: var(--raspberry); color: var(--paper); box-shadow: 0 0 0 3px rgba(176,23,92,.16); animation: badgePulse 2.6s ease-in-out infinite; }
.badge.inspection{ background: #E7F1FA; color: var(--sky); border: 1px solid #B9D6EC; }
.badge.done{ background: #E6F4EC; color: var(--green); border: 1px solid #BFE0CD; }
.badge.declined{ background: #F1EBEB; color: #8B7B7B; border: 1px solid #D8CCCC; }
@keyframes badgePulse{ 0%,100%{ box-shadow: 0 0 0 3px rgba(176,23,92,.14); } 50%{ box-shadow: 0 0 0 7px rgba(176,23,92,.05); } }
@media (prefers-reduced-motion: reduce){ .badge.active{ animation:none; } }

/* wax seal / stamp */
.stamp{
  position:absolute; top: -14px; right: 12px;
  width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C4256E, var(--raspberry-dark) 75%);
  color: var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform: rotate(-9deg);
  box-shadow: 0 6px 14px -4px rgba(126,15,66,.55), inset 0 0 0 2px rgba(255,255,255,.18);
  border: 2px dotted rgba(255,255,255,.35);
  font-family: var(--serif); font-weight:700; line-height:1.05; text-align:center; z-index: 3;
}
.stamp .stamp-word{ font-size: 9px; letter-spacing:.06em; }
.stamp .stamp-kiss{ font-size: 14px; margin-top:1px; }
.stamp.stamp-pop{ animation: stampPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stampPop{ 0%{ transform: rotate(-9deg) scale(2.4); opacity:0; } 60%{ transform: rotate(-9deg) scale(.9); opacity:1; } 100%{ transform: rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: reduce){ .stamp.stamp-pop{ animation:none; } }

/* schlep */
.schlep{ display:flex; align-items:center; gap:6px; margin: 4px 0 10px; flex-wrap:wrap; }
.schlep-label{ font-size: 10.5px; color: var(--ink-soft); letter-spacing:.03em; margin-left:4px; }
.pip{ width: 9px; height:9px; border-radius:3px; background: var(--paper-2); border: 1px solid var(--hairline); }
.pip.filled{ background: var(--gold); border-color: var(--gold); }

/* terms / proposed panel */
.terms-panel{ background: var(--blush); border-left: 3px solid var(--raspberry); border-radius: 8px; padding: 9px 12px; margin: 4px 0 12px; }
.terms-panel.proposed{ background: #FCEFD9; border-left-color: #C79A3D; }
.terms-label{ display:block; font-size: 10px; letter-spacing:.06em; text-transform:uppercase; color: var(--raspberry-dark); font-weight:700; margin-bottom: 3px; }
.terms-panel.proposed .terms-label{ color: #8A5A00; }
.terms-text{ font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink); overflow-wrap:anywhere; }

.status-note{ font-size: 12px; color: var(--ink-soft); font-style: italic; padding: 6px 2px; }

/* negotiate inline form */
.negotiate-form{ background: var(--paper-2); border:1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; display:flex; flex-direction:column; gap:8px; }
.negotiate-form label{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color: var(--raspberry-dark); font-weight:700; }
.negotiate-form textarea{ width:100%; border:1px solid var(--hairline); border-radius:8px; padding:8px 10px; font-family: inherit; font-size:13px; resize:none; background: var(--paper); }
.negotiate-form textarea:focus{ outline:2px solid var(--raspberry); border-color:transparent; }
.negotiate-actions{ display:flex; gap:8px; justify-content:flex-end; }

/* actions */
.card-actions{ display:flex; flex-wrap:wrap; gap: 8px; margin: 8px 0 4px; }
.card-actions button{
  border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight:600;
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
}
.card-actions button:hover{ transform: translateY(-1px); box-shadow: var(--shadow-card); }
.card-actions button.primary{ background: var(--raspberry); border-color: var(--raspberry); color: var(--paper); }
.card-actions button.ghost-danger{ color: #9A3B3B; border-color: #E3C7C7; }
.card-actions button.accept{ background: var(--green); border-color: var(--green); color:#fff; }
.card-actions button.reject{ color:#9A3B3B; border-color:#E3C7C7; }

/* history */
.history-toggle{ background:none; border:none; cursor:pointer; font-size: 11.5px; color: var(--ink-soft); display:flex; align-items:center; gap:4px; padding: 4px 0; margin-top: 4px; }
.history-toggle:hover{ color: var(--raspberry-dark); }
.history-toggle .chev{ display:inline-block; transition: transform .2s ease; font-size:9px; }
.history-toggle.open .chev{ transform: rotate(90deg); }
.history-log{ max-height:0; overflow:hidden; transition: max-height .3s ease, margin .3s ease; margin-top:0; }
.history-log.open{ max-height: 520px; margin-top: 6px; overflow-y:auto; }
.history-log ul{ list-style:none; margin:0; padding: 8px 0 2px; border-top: 1px dashed var(--hairline); }
.history-log li{ font-size: 12px; color: var(--ink-soft); padding: 4px 0 4px 18px; position:relative; overflow-wrap:anywhere; }
.history-log li::before{ content:"❦"; position:absolute; left:0; top:3px; font-size:10px; color: var(--gold); }
.history-log li b{ color: var(--ink); font-weight:600; }
.history-log .h-who{ font-weight:600; color: var(--ink); }
.history-log .h-ts{ color: var(--ink-soft); opacity:.7; font-size:10.5px; }

/* active card special */
.card.is-active{ border-color: rgba(176,23,92,.45); }
body:not(.first-load) .card.is-active{ animation: wobble 4.5s ease-in-out infinite; }
@keyframes wobble{
  0%,100%{ box-shadow: var(--shadow-card), 0 0 0 0 rgba(176,23,92,0); }
  50%{ box-shadow: var(--shadow-card), 0 0 26px 2px rgba(176,23,92,.18); }
}
@media (prefers-reduced-motion: reduce){
  .card.is-active{ animation: none !important; box-shadow: var(--shadow-card), 0 0 18px 1px rgba(176,23,92,.15); }
}

/* footnote memo */
.memo{
  background: var(--blush); border: 1px solid var(--blush-deep);
  border-radius: 10px; padding: 14px 18px; position: relative;
  transform: rotate(-.5deg); box-shadow: var(--shadow-card);
}
.memo:nth-of-type(even){ transform: rotate(.5deg); }
.memo::before{
  content:"♥"; position:absolute; top:-9px; left:18px;
  font-size:14px; color: var(--raspberry); background:var(--paper);
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.memo-label{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--raspberry-dark); font-weight:700; display:block; margin-bottom:4px; }
.memo-text{ font-family: var(--serif); font-style: italic; font-weight: 420; font-size: 13.8px; color: var(--ink); line-height:1.6; margin:0; }

/* completion + footer */
.completion{ margin: 34px 0 6px; text-align:center; padding: 18px 20px; border-radius: var(--radius); background: linear-gradient(180deg, var(--paper-2), var(--paper)); border: 1px solid var(--hairline); }
.completion-label{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); font-weight:700; margin-bottom:6px; }
.completion-text{ font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); max-width: 520px; margin: 0 auto; line-height:1.7; }
footer.doc-footer{ text-align:center; margin-top: 30px; padding-top: 18px; font-size: 12.5px; color: var(--ink-soft); font-style:italic; font-family: var(--serif); }

/* toast */
#toast{
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px);
  max-width: min(90vw, 420px);
  background: var(--ink); color: var(--paper);
  border-radius: 12px; padding: 12px 16px; padding-right: 40px;
  font-size: 12.5px; line-height:1.5;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; z-index: 300;
  transition: opacity .4s ease, transform .4s ease;
}
#toast.show{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }
#toast .toast-label{ color: var(--gold-soft); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:9.5px; display:block; margin-bottom:3px; }
#toast .toast-close{ position:absolute; top:8px; right:10px; background:none; border:none; color: var(--paper); opacity:.6; cursor:pointer; font-size: 13px; }
#toast .toast-close:hover{ opacity:1; }

/* confetti */
.confetti-piece{ position:fixed; font-size:1.3rem; pointer-events:none; z-index:350; will-change: transform, opacity; animation: confettiBurst .95s ease-out forwards; }
@keyframes confettiBurst{ 0%{ transform: translate(0,0) rotate(0) scale(.7); opacity:1; } 100%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.1); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .confetti-piece{ display:none; } }

/* persona visibility */
body[data-persona="asaf"] .nikki-only{ display:none !important; }
body[data-persona="nikki"] .asaf-only{ display:none !important; }