.gift-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 600px at 50% 30%, rgba(240,199,94,.18), rgba(4,10,22,.88) 70%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .5s; }
.gift-overlay.show { opacity: 1; pointer-events: auto; }
.gift-stage { position: relative; text-align: center; }
.gift-sheen { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,122,.28), transparent); animation: giftSheen 2.4s ease-in-out infinite; }
.gift-box { position: relative; width: 168px; height: 132px; margin: 0 auto; animation: giftBounce 1.6s ease-in-out infinite; }
.gift-lid { position: absolute; top: 0; left: -8px; width: 184px; height: 42px; background: linear-gradient(135deg, #f0c75e, #ffd67a); border-radius: 10px; transform-origin: 50% 100%; z-index: 3; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.gift-lid::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; margin-left: -11px; background: linear-gradient(#e5484d, #b91c1c); }
.gift-lid::before { content: ''; position: absolute; left: 50%; top: -20px; width: 44px; height: 26px; margin-left: -22px; background: radial-gradient(closest-side, #ff6b6b, #c0392b); border-radius: 50% 50% 40% 40%; box-shadow: -14px 8px 0 -6px #c0392b, 14px 8px 0 -6px #c0392b; }
.gift-body { position: absolute; top: 34px; left: 0; width: 168px; height: 98px; background: linear-gradient(160deg, #b45309, #7c2d12); border-radius: 12px; z-index: 2; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.gift-body::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; margin-left: -11px; background: linear-gradient(#ef4444, #991b1b); border-radius: 4px; }
.gift-open .gift-lid { animation: giftLid .9s cubic-bezier(.2,.9,.3,1.2) forwards; }
.gift-open .gift-box { animation: giftShake .5s ease-in-out; }
.gift-rays { position: absolute; left: 50%; top: 44px; width: 2px; height: 2px; z-index: 1; opacity: 0; }
.gift-open .gift-rays { opacity: 1; box-shadow: 0 0 90px 40px rgba(255,214,122,.4); }
.gift-title { margin-top: 26px; font-size: 21px; font-weight: 800; color: #ffe8a8; text-shadow: 0 2px 18px rgba(240,199,94,.5); }
.gift-sub { margin-top: 8px; font-size: 13px; color: #d6c296; }
.gift-open-btn { margin-top: 22px; font-family: inherit; cursor: pointer; border: none; border-radius: 999px; padding: 13px 34px; font-size: 15px; font-weight: 700; color: #241a05; background: linear-gradient(135deg, #ffd67a, #f0c75e); box-shadow: 0 10px 30px rgba(240,199,94,.45); transition: transform .15s; }
.gift-open-btn:hover { transform: scale(1.05); }
.gift-note { margin-top: 18px; max-width: 420px; background: rgba(34,27,15,.55); border: 1px solid rgba(240,199,94,.4); color: #f7efdd; border-radius: 14px; padding: 14px 18px; font-size: 14.5px; line-height: 1.8; display: none; }
.gift-note.show { display: block; animation: giftPop .4s ease; }
.gift-note b { color: #ffd67a; }
.gift-skip { display: block; margin: 14px auto 0; background: none; border: none; color: rgba(247,239,221,.55); font-size: 12.5px; cursor: pointer; font-family: inherit; }
.gift-skip:hover { color: #f7efdd; }
.gift-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; }
.gift-confetti i { position: absolute; top: 40%; left: 50%; width: 8px; height: 12px; opacity: 0; border-radius: 2px; }
.gift-open .gift-confetti i { animation: giftConfetti 1.1s ease-out forwards; }
@keyframes giftSheen { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes giftBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes giftShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes giftLid { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-64px) rotate(-14deg); } }
@keyframes giftPop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes giftConfetti { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--gx), var(--gy)) rotate(540deg); } }

@media (max-width: 640px) {
    .sp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sp-card { padding: 14px; }
    .sp-card .sp-n { font-size: 14px; }
    .sp-card .sp-p { font-size: 16px; }
    .sp-balance-num b { font-size: 24px; }
    .sp-tabs { gap: 5px; }
    .sp-tab { padding: 8px 12px; font-size: 12.5px; }
    .sp-code { font-size: 12px; }
}