/* ---------- 付款后：粉面扩开，箱子居中 ---------- */
.flood{position:absolute; inset:0; z-index:3; background:var(--blush); clip-path:circle(0px at 940px 232px); pointer-events:none}
.bloom{position:absolute; left:0; top:0; width:1180px; height:792px; pointer-events:none; overflow:visible}
.bloom--back{z-index:3}
.bloom--front{z-index:5}
.bloom g.fl{transform-box:fill-box; transform-origin:center; animation:float var(--fd,7s) ease-in-out var(--fo,0s) infinite alternate}
.bloom g.is-rest g.fl{animation-play-state:running}
.bloom g:not(.is-rest) > g.fl{animation:none}
@keyframes float{from{transform:translateY(-3px) rotate(calc(var(--fa,2deg) * -1))}to{transform:translateY(4px) rotate(var(--fa,2deg))}}

.panel[data-phase="busy"] .col-form{pointer-events:none}
.col-form,.col-box > *{transition:opacity .38s var(--ease-out), transform .5s var(--ease-out)}
.panel[data-phase="success"] .col-form{opacity:0; transform:translateX(-28px); pointer-events:none}
.panel[data-phase="success"] .col-box > *{opacity:0; transform:translateY(10px); pointer-events:none}
.panel[data-phase="success"] .col-box > .scene-slot{opacity:0}
.panel[data-static] .col-form,.panel[data-static] .col-box > *{transition:none}

.done{position:absolute; left:0; right:0; top:0; bottom:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:44px; text-align:center; pointer-events:none; visibility:hidden}
.panel[data-phase="success"] .done{visibility:visible; pointer-events:auto}
.done__title{font-family:var(--f-display); font-weight:900; font-size:54px; line-height:1.15; letter-spacing:.02em; color:var(--ink); display:flex; gap:0}
.done__title .ch{display:inline-block; opacity:0; transform:translateY(24px) scale(.7); transform-origin:50% 80%}
.done__title.in .ch{animation:chIn .62s var(--ease-spring) calc(var(--i) * 46ms) both}
.panel[data-static] .done__title.in .ch{animation:none; opacity:1; transform:none}
@keyframes chIn{0%{opacity:0; transform:translateY(26px) scale(.7)}60%{opacity:1}100%{opacity:1; transform:none}}
.done__sub{margin-top:14px; max-width:620px;  font-size:16px; line-height:1.75; color:var(--ink-2); opacity:0; transform:translateY(10px)}
.done__sub b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.done__sub .nb{white-space:nowrap; color:var(--ink); font-weight:700}
.done__actions{margin-top:24px; display:flex; gap:12px; opacity:0; transform:translateY(10px)}
.done.go .done__sub{animation:rise .6s var(--ease-out) .35s both}
.done.go .done__actions{animation:rise .6s var(--ease-out) .5s both}
.panel[data-static] .done__sub,.panel[data-static] .done__actions{opacity:1; transform:none; animation:none}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 30px; border-radius:16px; font-size:16px; font-weight:600; letter-spacing:.03em; text-decoration:none; border:0;
  transition:transform .14s var(--ease-out), background .16s, box-shadow .2s, color .16s}
.btn--primary{background:var(--cobalt); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px -10px rgba(35,65,228,.7), 0 2px 4px rgba(20,23,45,.14)}
.btn--primary:hover{background:#2B49EC; transform:translateY(-1px)}
.btn--primary:active{background:var(--cobalt-d); transform:scale(.985)}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(20,23,45,.82)}
.btn--ghost:hover{background:rgba(20,23,45,.07)}
.btn--ghost:active{transform:scale(.985)}
.btn:focus-visible{outline:0; box-shadow:0 0 0 3px var(--blush), 0 0 0 5px var(--cobalt)}

@media (prefers-reduced-motion: reduce){
  .bloom g.fl{animation:none !important}
  .done__title .ch{animation:none !important; opacity:1; transform:none}
}

.done__brand{position:absolute; left:52px; top:28px; height:28px}