/* ============ TOKENS (map these to your own variables) ============ */
:root{
  --rpt-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --rpt-night:#1a1736;
  --rpt-plum:#2a2350;
  --rpt-plum-hi:#383063;
  --rpt-line:rgba(247,182,200,.18);
  --rpt-ink:#f7f0fb;
  --rpt-ink-dim:#bcb0d8;
  --rpt-sakura:#f7b6c8;
  --rpt-sakura-deep:#e98aa8;
  --rpt-moon:#fff1cf;
  --rpt-error:#ff9aae;
  --rpt-ease-out:cubic-bezier(.22,1,.36,1);
  --rpt-ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ============ OVERLAY + CARD ============ */
.rpt-overlay{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:16px;
  background:radial-gradient(ellipse at 50% 30%, rgba(60,40,100,.55), rgba(10,8,28,.82));
  backdrop-filter:blur(6px);
  font-family:var(--rpt-font); color:var(--rpt-ink);
}
.rpt-overlay.is-open{ display:flex; animation:rpt-fade .28s ease-out both; }
.rpt-overlay.is-closing{ display:flex; animation:rpt-overlay-out .22s ease-in both; }

.rpt-card{
  position:relative; width:min(460px,100%); max-height:min(88vh,720px);
  display:flex; flex-direction:column;
  background:linear-gradient(170deg, var(--rpt-plum-hi) 0%, var(--rpt-plum) 45%, var(--rpt-night) 100%);
  border:1px solid var(--rpt-line);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(5,3,20,.6), inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
  animation:rpt-card-in .5s var(--rpt-ease-spring) both;
}
.rpt-overlay.is-closing .rpt-card{ animation:rpt-card-out .22s ease-in both; }
.rpt-card.is-shaking{ animation:rpt-shake .42s ease-in-out; }

/* moon glow in the corner, same family as your hero moon */
.rpt-card::before{
  content:""; position:absolute; top:-70px; right:-60px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,241,207,.30), rgba(255,241,207,0) 68%);
  pointer-events:none;
}

/* ambient petals drifting behind the header; only a few, slow */
.rpt-ambient{ position:absolute; inset:0 0 auto 0; height:150px; overflow:hidden; pointer-events:none; }
.rpt-ambient i{
  position:absolute; top:-20px; width:10px; height:10px;
  background:var(--rpt-sakura); opacity:0;
  border-radius:150% 0 150% 0;
  animation:rpt-petal-fall linear infinite;
}
.rpt-ambient i:nth-child(1){ left:12%; animation-duration:9s;  animation-delay:0s; }
.rpt-ambient i:nth-child(2){ left:34%; animation-duration:12s; animation-delay:2.5s; width:8px; height:8px; }
.rpt-ambient i:nth-child(3){ left:58%; animation-duration:10s; animation-delay:5s; }
.rpt-ambient i:nth-child(4){ left:76%; animation-duration:13s; animation-delay:1s; width:7px; height:7px; }
.rpt-ambient i:nth-child(5){ left:90%; animation-duration:11s; animation-delay:6.5s; }

/* ============ HEADER ============ */
.rpt-head{ position:relative; padding:22px 24px 6px; }
.rpt-who{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rpt-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:700; font-size:17px; color:#2a2350;
  background:var(--rpt-user, var(--rpt-sakura));
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
}
.rpt-who-name{ font-weight:700; font-size:15px; color:var(--rpt-user, var(--rpt-sakura)); }
.rpt-who-sub{ font-size:12px; color:var(--rpt-ink-dim); }
.rpt-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:0; background:transparent; color:var(--rpt-ink-dim); cursor:pointer;
  display:grid; place-items:center; transition:background .2s, color .2s, transform .35s var(--rpt-ease-out);
}
.rpt-close:hover{ background:rgba(255,255,255,.08); color:var(--rpt-ink); transform:rotate(90deg); }
.rpt-title{ margin:0; font-size:21px; line-height:1.3; font-weight:700; }
.rpt-sub{ margin:6px 0 0; font-size:13.5px; line-height:1.65; color:var(--rpt-ink-dim); }

/* step bar: two segments that fill like a petal sweep */
.rpt-progress{ display:flex; gap:6px; padding:16px 24px 0; }
.rpt-progress span{ flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; position:relative; }
.rpt-progress span::after{
  content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--rpt-sakura), var(--rpt-sakura-deep));
  transition:transform .55s var(--rpt-ease-out);
}
.rpt-progress span.is-on::after{ transform:scaleX(1); }

/* ============ BODY / STEPS ============ */
.rpt-body{ position:relative; padding:18px 24px 8px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--rpt-plum-hi) transparent; }
.rpt-step[hidden]{ display:none; }
.rpt-step.in-right{ animation:rpt-slide-right .42s var(--rpt-ease-out) both; }
.rpt-step.in-left{ animation:rpt-slide-left .42s var(--rpt-ease-out) both; }

/* ---- reasons ---- */
.rpt-reasons{ display:grid; gap:8px; margin:0; padding:0; border:0; }
.rpt-reason{ position:relative; display:block; cursor:pointer; }
.rpt-reason input{ position:absolute; opacity:0; inset:0; }
.rpt-reason-box{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--rpt-line); border-radius:14px;
  background:rgba(255,255,255,.035);
  transition:border-color .25s, background .25s, transform .25s var(--rpt-ease-out);
}
.rpt-reason:hover .rpt-reason-box{ background:rgba(255,255,255,.07); transform:translateX(3px); }
.rpt-reason input:focus-visible + .rpt-reason-box{ outline:2px solid var(--rpt-sakura); outline-offset:2px; }
.rpt-reason input:checked + .rpt-reason-box{
  border-color:var(--rpt-sakura); background:rgba(247,182,200,.12);
}
.rpt-reason-text b{ display:block; font-size:14px; font-weight:700; }
.rpt-reason-text small{ display:block; font-size:12px; color:var(--rpt-ink-dim); margin-top:1px; }
/* the little sakura bud that fills in when chosen */
.rpt-bud{
  margin-left:auto; flex:none; width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28);
  display:grid; place-items:center; transition:border-color .2s;
}
.rpt-bud svg{ width:12px; height:12px; transform:scale(0) rotate(-60deg); transition:transform .45s var(--rpt-ease-spring); }
.rpt-reason input:checked + .rpt-reason-box .rpt-bud{ border-color:var(--rpt-sakura); background:var(--rpt-sakura); }
.rpt-reason input:checked + .rpt-reason-box .rpt-bud svg{ transform:scale(1) rotate(0); }
/* ripple, spawned by JS at the click point */
.rpt-ripple{
  position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:rgba(247,182,200,.5); pointer-events:none;
  animation:rpt-ripple .6s ease-out forwards;
}

/* ---- details ---- */
.rpt-field{ margin-bottom:18px; }
.rpt-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.rpt-label em{ font-style:normal; font-weight:400; font-size:12px; color:var(--rpt-ink-dim); }
.rpt-textarea{
  width:100%; min-height:104px; resize:vertical; box-sizing:border-box;
  padding:12px 14px; font:inherit; font-size:14px; line-height:1.6; color:var(--rpt-ink);
  background:rgba(10,8,30,.4); border:1px solid var(--rpt-line); border-radius:14px;
  transition:border-color .25s, box-shadow .25s;
}
.rpt-textarea::placeholder{ color:rgba(188,176,216,.55); }
.rpt-textarea:focus{ outline:none; border-color:var(--rpt-sakura); box-shadow:0 0 0 4px rgba(247,182,200,.14); }
.rpt-textarea.is-invalid{ border-color:var(--rpt-error); }
.rpt-count{ text-align:right; font-size:11.5px; color:var(--rpt-ink-dim); margin-top:4px; }
.rpt-count.is-near{ color:var(--rpt-sakura); }

.rpt-msgs{ display:grid; gap:6px; }
.rpt-msg{ position:relative; display:flex; gap:10px; align-items:flex-start; cursor:pointer; padding:10px 12px;
  border:1px solid var(--rpt-line); border-radius:12px; background:rgba(255,255,255,.03);
  transition:background .2s, border-color .2s; }
.rpt-msg:hover{ background:rgba(255,255,255,.06); }
.rpt-msg input{ position:absolute; opacity:0; }
.rpt-msg input:focus-visible ~ .rpt-tick{ outline:2px solid var(--rpt-sakura); outline-offset:2px; }
.rpt-msg:has(input:checked){ border-color:var(--rpt-sakura); background:rgba(247,182,200,.1); }
.rpt-tick{ flex:none; width:18px; height:18px; margin-top:2px; border-radius:6px; border:1.5px solid rgba(255,255,255,.28);
  display:grid; place-items:center; transition:background .2s, border-color .2s; }
.rpt-tick svg{ width:11px; height:11px; stroke-dasharray:16; stroke-dashoffset:16; transition:stroke-dashoffset .3s ease-out .05s; }
.rpt-msg input:checked ~ .rpt-tick{ background:var(--rpt-sakura); border-color:var(--rpt-sakura); }
.rpt-msg input:checked ~ .rpt-tick svg{ stroke-dashoffset:0; }
.rpt-msg-text{ font-size:13.5px; line-height:1.55; }
.rpt-msg-time{ display:block; font-size:11.5px; color:var(--rpt-ink-dim); margin-top:2px; }

/* switch */
.rpt-switch{ display:flex; align-items:center; gap:14px; cursor:pointer; padding:12px 14px;
  border:1px solid var(--rpt-line); border-radius:14px; background:rgba(255,255,255,.03); }
.rpt-switch-text{ flex:1; font-size:13.5px; line-height:1.5; }
.rpt-switch-text small{ display:block; font-size:12px; color:var(--rpt-ink-dim); }
.rpt-switch input{ position:absolute; opacity:0; }
.rpt-track{ position:relative; flex:none; width:44px; height:26px; border-radius:26px; background:rgba(255,255,255,.14); transition:background .3s; }
.rpt-track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .4s var(--rpt-ease-spring); }
.rpt-switch input:checked ~ .rpt-track{ background:var(--rpt-sakura-deep); }
.rpt-switch input:checked ~ .rpt-track::after{ transform:translateX(18px); }
.rpt-switch input:focus-visible ~ .rpt-track{ outline:2px solid var(--rpt-sakura); outline-offset:3px; }

.rpt-error{ min-height:20px; margin:6px 24px 0; font-size:12.5px; color:var(--rpt-error); }
.rpt-error:not(:empty){ animation:rpt-fade .25s both; }

/* ============ FOOTER BUTTONS ============ */
.rpt-foot{ display:flex; justify-content:flex-end; gap:10px; padding:10px 24px 22px; }
.rpt-btn{
  position:relative; overflow:hidden; font:inherit; font-size:14px; font-weight:700;
  padding:11px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--rpt-ease-out), box-shadow .25s, background .25s, opacity .2s;
}
.rpt-btn:focus-visible{ outline:2px solid var(--rpt-moon); outline-offset:3px; }
.rpt-btn:active{ transform:scale(.97); }
.rpt-btn-ghost{ background:transparent; color:var(--rpt-ink-dim); border-color:var(--rpt-line); }
.rpt-btn-ghost:hover{ color:var(--rpt-ink); background:rgba(255,255,255,.06); }
.rpt-btn-primary{ background:linear-gradient(135deg, var(--rpt-sakura), var(--rpt-sakura-deep)); color:#3a1830; box-shadow:0 8px 22px rgba(233,138,168,.35); }
.rpt-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(233,138,168,.5); }
.rpt-btn[disabled]{ opacity:.55; cursor:default; transform:none; }
/* soft light that sweeps across the primary button on hover */
.rpt-btn-primary::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); }
.rpt-btn-primary:hover::after{ animation:rpt-sheen .8s ease-out; }

/* ============ SENDING STATE: petals orbit ============ */
.rpt-state{ display:none; flex-direction:column; align-items:center; text-align:center; padding:38px 24px 30px; }
.rpt-card.is-sending .rpt-form, .rpt-card.is-done .rpt-form{ display:none; }
.rpt-card.is-sending .rpt-sending{ display:flex; animation:rpt-fade .3s both; }
.rpt-card.is-done .rpt-success{ display:flex; }
.rpt-orbit{ position:relative; width:84px; height:84px; animation:rpt-orbit 2.4s linear infinite; }
.rpt-orbit i{ position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px;
  background:var(--rpt-sakura); border-radius:150% 0 150% 0; opacity:.9;
  transform:rotate(calc(var(--n) * 72deg)) translateY(-32px);
  animation:rpt-orbit-pulse 1.2s ease-in-out infinite; animation-delay:calc(var(--n) * .12s); }
.rpt-state h3{ margin:20px 0 6px; font-size:19px; }
.rpt-state p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--rpt-ink-dim); max-width:300px; min-height:3.4em; }

/* ============ SUCCESS STATE: sakura blooms, check draws ============ */
.rpt-bloom{ position:relative; width:132px; height:132px; }
.rpt-bloom svg{ width:100%; height:100%; overflow:visible; }
.rpt-bloom .pt{ fill:var(--rpt-sakura); stroke:var(--rpt-sakura-deep); stroke-width:1;
  transform-box:fill-box; transform-origin:50% 100%; transform:scale(0); }
.rpt-card.is-done .rpt-bloom .pt{ animation:rpt-bloom .75s var(--rpt-ease-spring) forwards; animation-delay:calc(var(--n) * .09s + .1s); }
.rpt-bloom .core{ fill:var(--rpt-moon); transform-box:fill-box; transform-origin:center; transform:scale(0); }
.rpt-card.is-done .rpt-bloom .core{ animation:rpt-pop .5s var(--rpt-ease-spring) .55s forwards; }
.rpt-bloom .tick{ fill:none; stroke:#c75b82; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; }
.rpt-card.is-done .rpt-bloom .tick{ animation:rpt-draw .45s ease-out 1s forwards; }
.rpt-bloom::before{ content:""; position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(circle, rgba(247,182,200,.35), transparent 65%); opacity:0; }
.rpt-card.is-done .rpt-bloom::before{ animation:rpt-glow 1.6s ease-out .3s forwards; }
.rpt-success h3{ opacity:0; }
.rpt-card.is-done .rpt-success h3{ animation:rpt-fade .4s ease-out 1s forwards; }
.rpt-caret::after{ content:"|"; margin-left:1px; color:var(--rpt-sakura); animation:rpt-blink .8s steps(1) infinite; }
.rpt-success .rpt-btn{ margin-top:22px; opacity:0; }
.rpt-card.is-done .rpt-success .rpt-btn{ animation:rpt-fade .4s ease-out 1.6s forwards; }

/* burst particles (spawned by JS) */
.rpt-particle{ position:absolute; top:50%; left:50%; width:11px; height:11px; margin:-5px;
  background:var(--rpt-sakura); border-radius:150% 0 150% 0; pointer-events:none;
  animation:rpt-burst 1.3s var(--rpt-ease-out) forwards; }

/* ============ TOAST ============ */
.rpt-toast{ position:fixed; left:50%; bottom:28px; z-index:1100; transform:translate(-50%,30px); opacity:0;
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
  background:var(--rpt-plum); color:var(--rpt-ink); border:1px solid var(--rpt-line);
  font:500 13.5px var(--rpt-font); box-shadow:0 14px 40px rgba(5,3,20,.5); pointer-events:none; }
.rpt-toast.is-on{ animation:rpt-toast 3.2s var(--rpt-ease-out) both; }

/* ============ KEYFRAMES ============ */
@keyframes rpt-fade{ from{opacity:0} to{opacity:1} }
@keyframes rpt-card-in{ from{opacity:0; transform:translateY(28px) scale(.94)} to{opacity:1; transform:none} }
@keyframes rpt-card-out{ to{opacity:0; transform:translateY(16px) scale(.97)} }
@keyframes rpt-slide-right{ from{opacity:0; transform:translateX(28px)} to{opacity:1; transform:none} }
@keyframes rpt-slide-left{ from{opacity:0; transform:translateX(-28px)} to{opacity:1; transform:none} }
@keyframes rpt-shake{ 0%,100%{transform:none} 18%{transform:translateX(-9px)} 36%{transform:translateX(8px)} 54%{transform:translateX(-5px)} 72%{transform:translateX(3px)} }
@keyframes rpt-ripple{ to{ transform:scale(26); opacity:0 } }
@keyframes rpt-sheen{ to{ left:130% } }
@keyframes rpt-petal-fall{
  0%{ transform:translate(0,0) rotate(0); opacity:0 }
  12%{ opacity:.7 }
  100%{ transform:translate(-40px,170px) rotate(300deg); opacity:0 }
}
@keyframes rpt-orbit{ to{ transform:rotate(360deg) } }
@keyframes rpt-orbit-pulse{ 0%,100%{ opacity:.35; scale:.7 } 50%{ opacity:1; scale:1.15 } }
@keyframes rpt-bloom{ 0%{ transform:scale(0) rotate(-25deg) } 100%{ transform:scale(1) rotate(0) } }
@keyframes rpt-pop{ 0%{ transform:scale(0) } 100%{ transform:scale(1) } }
@keyframes rpt-draw{ to{ stroke-dashoffset:0 } }
@keyframes rpt-glow{ 0%{opacity:0; transform:scale(.6)} 40%{opacity:1} 100%{opacity:.55; transform:scale(1.1)} }
@keyframes rpt-blink{ 50%{ opacity:0 } }
@keyframes rpt-burst{
  0%{ transform:translate(0,0) rotate(0) scale(.4); opacity:1 }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1); opacity:0 }
}
@keyframes rpt-toast{
  0%{ opacity:0; transform:translate(-50%,30px) }
  12%,82%{ opacity:1; transform:translate(-50%,0) }
  100%{ opacity:0; transform:translate(-50%,16px) }
}

/* respect reduced motion: keep state changes, drop the movement */
@media (prefers-reduced-motion:reduce){
  .rpt-overlay *, .rpt-overlay *::before, .rpt-overlay *::after, .rpt-toast{
    animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
  .rpt-ambient{ display:none; }
}
@media (max-width:480px){
  .rpt-overlay{ align-items:flex-end; padding:0; }
  .rpt-card{ width:100%; max-height:92vh; border-radius:22px 22px 0 0; }
}


.rpt-overlay *{box-sizing:border-box;letter-spacing:normal}.rpt-overlay [hidden]{display:none!important}.rpt-overlay fieldset{border:0;padding:0;margin:0}.rpt-overlay input{width:auto;min-height:0}.rpt-overlay textarea{width:100%;min-height:110px}.rpt-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.rpt-card{max-height:calc(100dvh - 24px)}
/* Keep the step actions visible while reasons scroll on small screens. */
.rpt-form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rpt-body{flex:1;min-height:0;overscroll-behavior:contain}
.rpt-head,.rpt-progress,.rpt-foot,.rpt-error{flex:none}
.rpt-who{padding-right:26px}.rpt-who-name{overflow-wrap:anywhere}
.rpt-overlay .rpt-close{padding:0;min-height:0;min-width:0}
.rpt-body::-webkit-scrollbar{width:5px}.rpt-body::-webkit-scrollbar-thumb{background:var(--rpt-line);border-radius:99px}

/* Selection glyphs stay centered and appear only for selected rows. */
.rpt-overlay .rpt-msg{display:flex;align-items:center;gap:10px}
.rpt-overlay .rpt-msg input{position:absolute;width:1px;height:1px;min-height:0;margin:0;opacity:0}
.rpt-overlay .rpt-tick{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin:0;line-height:1;color:#3a1830}
.rpt-overlay .rpt-tick svg{display:block;flex:none;width:11px;height:11px;opacity:0;transition:opacity .2s,stroke-dashoffset .3s}
.rpt-overlay .rpt-msg input:checked~.rpt-tick svg{opacity:1}
.rpt-overlay .rpt-msg-text{min-width:0;overflow-wrap:anywhere}

@keyframes rpt-overlay-out{from{opacity:1}to{opacity:0}}