.tgl-surprise-panel { align-self:start; overflow:hidden; }
.tgl-surprise-tag { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.09em; color:var(--pink-deep); background:var(--pink-light); padding:6px 9px; border-radius:20px; }
.tgl-surprise-intro,.tgl-surprise-hint { text-align:center; color:var(--muted); font-size:12px; }
.tgl-gift-stage { display:block; width:100%; height:200px; position:relative; margin:16px 0 4px; border:0; border-radius:20px; cursor:pointer; background:radial-gradient(ellipse at center,#fbd6e5 0%,#fff0f6 48%,#fff 78%); color:var(--pink-deep); }
.tgl-gift-stage:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
.tgl-gift-base { position:absolute; width:120px; height:92px; left:calc(50% - 60px); top:93px; border-radius:0 0 12px 12px; background:linear-gradient(110deg,#f377a5,#ed4f8b); box-shadow:0 12px 20px #d9447d30; }
.tgl-gift-base::after,.tgl-gift-lid::after { content:''; position:absolute; inset:0 auto 0 44%; width:16%; background:#ffd5ac; }
.tgl-gift-lid { position:absolute; z-index:3; left:calc(50% - 67px); top:78px; width:134px; height:27px; border-radius:7px; background:linear-gradient(110deg,#fc95bb,#f568a0); box-shadow:0 4px 6px #a826561a; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tgl-gift-bow { position:absolute; z-index:4; width:62px; height:32px; top:49px; left:calc(50% - 31px); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tgl-gift-bow::before,.tgl-gift-bow::after { content:''; position:absolute; width:34px; height:27px; border:7px solid #ffd5ac; border-radius:60% 60% 12% 60%; transform:rotate(20deg); }
.tgl-gift-bow::after { right:0; transform:scaleX(-1) rotate(20deg); }
.tgl-gift-note { position:absolute; z-index:2; top:138px; left:calc(50% - 45px); width:90px; background:white; transform:rotate(-7deg); border-radius:4px; padding:6px 2px; font-size:10px; font-weight:800; }
.tgl-gift-spark { position:absolute; font-size:29px; top:42px; transition:transform .5s; }
.tgl-gift-spark-one { left:22%; }.tgl-gift-spark-two { right:21%; top:110px; }
.tgl-gift-heart { position:absolute; left:calc(50% - 15px); top:83px; z-index:2; font-size:34px; opacity:0; transition:transform .6s,opacity .4s; }
.tgl-gift-stage.is-open .tgl-gift-lid,.tgl-gift-stage.is-open .tgl-gift-bow { transform:translateY(-35px) rotate(-12deg); }
.tgl-gift-stage.is-open .tgl-gift-heart { opacity:1; transform:translateY(-19px); }
.tgl-gift-stage.is-open .tgl-gift-spark { transform:rotate(25deg) scale(1.25); }
.tgl-surprise-name { text-align:center; margin:20px 0 10px; font-size:17px; }
.tgl-surprise-cost { display:flex; justify-content:center; align-items:center; gap:7px; color:var(--pink-deep); }
.tgl-surprise-cost strong { font-size:32px; line-height:1.2; }.tgl-surprise-cost>span:last-child { font-size:13px; font-weight:700; }
.tgl-surprise-description { text-align:center; font-size:12px; color:var(--muted); line-height:1.7; margin:12px 0 18px; }
.tgl-surprise-perks { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; font-size:11px; font-weight:700; color:var(--slate); }.tgl-surprise-perks .fa-solid,.tgl-surprise-perks .fa-regular { color:var(--pink); }
.tgl-surprise-balance { background:var(--pink-light); border-radius:10px; padding:12px; margin:20px 0 12px; text-align:center; font-size:12px; color:var(--pink-deep); }
.tgl-surprise-claim { width:100%; justify-content:center; }.tgl-surprise-claim:disabled { opacity:.6; cursor:default; }
.tgl-surprise-status { font-size:12px; color:var(--pink-deep); text-align:center; }.tgl-surprise-status:empty { display:none; }
.tgl-surprise-details { border-top:1px solid var(--border); margin-top:20px; padding-top:14px; font-size:12px; color:var(--muted); }.tgl-surprise-details summary { cursor:pointer; color:var(--heading); font-weight:700; }.tgl-surprise-details ol { padding-left:18px; line-height:1.8; margin-top:12px; }
.tgl-surprise-dialog { border:1px solid var(--border); border-radius:22px; padding:30px; width:min(520px,calc(100% - 32px)); color:var(--heading); font-family:inherit; max-height:85vh; overflow:auto; box-shadow:var(--shadow); }
.tgl-surprise-dialog::backdrop { background:#25212a66; backdrop-filter:blur(3px); }.tgl-surprise-close { float:right; border:0; border-radius:50%; background:var(--pink-light); color:var(--pink-deep); width:30px; height:30px; font-size:23px; cursor:pointer; }
.tgl-surprise-dialog h2 { margin:20px 0 12px; font-size:24px; }.tgl-surprise-dialog p { font-size:13px; line-height:1.7; margin:14px 0; color:var(--muted); }.tgl-surprise-summary { background:var(--pink-light); border-radius:12px; padding:16px; display:grid; gap:6px; color:var(--pink-deep); }.tgl-surprise-summary span { font-size:12px; }
.tgl-surprise-dialog label { display:block; font-size:13px; font-weight:700; margin:20px 0 8px; }.tgl-surprise-dialog select { width:100%; padding:12px; background:#fff; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:13px; }.tgl-surprise-dialog [data-claim-message] strong { color:var(--pink-deep); font-size:18px; }
@media(prefers-reduced-motion:reduce) { .tgl-gift-stage * { transition:none!important; } }