.wallet-credit-open { overflow: hidden; }
.wallet-credit-overlay { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); background: rgb(4 8 16 / 76%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: wallet-credit-backdrop .3s ease both; }
.wallet-credit-dialog { position: relative; isolation: isolate; width: min(100%,440px); max-height: 100%; overflow: auto; box-sizing: border-box; padding: 38px 32px 30px; text-align: center; color: #f1f5ff; background: radial-gradient(ellipse at 50% 0%,#243455 0%,#151e30 50%,#111927 100%); border: 1px solid #435476; border-radius: 30px; box-shadow: 0 30px 100px rgb(0 0 0 / 55%),inset 0 1px 0 rgb(220 231 255 / 12%); font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; animation: wallet-credit-arrive .55s cubic-bezier(.16,1,.3,1) both; }
.wallet-credit-dialog::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 1px; background: linear-gradient(90deg,transparent,#b8cfff,transparent); }
.wallet-credit-x { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid #4d5b7566; border-radius: 50%; color: #b9c8e2; background: #ffffff06; cursor: pointer; }
.wallet-credit-x svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.wallet-credit-x:hover { background: #ffffff12; color: white; }
.wallet-credit-x:focus-visible,.wallet-credit-continue:focus-visible { outline: 3px solid #ffdb96; outline-offset: 4px; }
.wallet-credit-emblem { position: relative; width: 100px; height: 100px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle,#ffe1a018,#8cb9ff08 65%,transparent); }
.wallet-credit-emblem svg { position: relative; width: 88px; height: 88px; fill: none; stroke: #ffdb96; stroke-width: 1.3; }
.wallet-credit-emblem circle { stroke: #cfdef53d; }
.wallet-credit-check { stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: wallet-credit-draw .65s .25s ease forwards; }
.wallet-credit-orbit { position: absolute; inset: 0; border: 1px solid #ffdb9640; border-radius: 50%; animation: wallet-credit-orbit 1.4s .15s ease-out both; }
.wallet-credit-eyebrow { display: block; color: #b8cbec; font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: 2.4px; }
.wallet-credit-dialog h2 { margin: 10px 0 0; font-size: 26px; letter-spacing: -.6px; line-height: 1.25; font-weight: 650; color: #f2f6ff; }
.wallet-credit-amount { margin: 20px 0 16px; font-size: clamp(38px,8vw,54px); line-height: 1.15; font-weight: 750; letter-spacing: -2px; font-variant-numeric: tabular-nums; color: #ffdf9e; text-shadow: 0 0 28px #ffd58222; }
.wallet-credit-dialog p { margin: 0 auto; max-width: 320px; font-size: 15px; line-height: 1.65; color: #acbdd8; }
.wallet-credit-ready { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 26px 0; padding: 14px 8px; border-top: 1px solid #c2d4f51a; border-bottom: 1px solid #c2d4f51a; font-size: 12px; font-weight: 500; color: #c5d2e9; }
.wallet-credit-ready svg { width: 19px; height: 19px; fill: none; stroke: #97b7ee; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.wallet-credit-continue { display: flex; justify-content: center; align-items: center; gap: 16px; width: 100%; min-height: 52px; border: 1px solid #c0d0ff; border-radius: 15px; background: linear-gradient(120deg,#b7ceff,#95b2f3); color: #14203a; font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; transition: filter .2s,transform .2s; box-shadow: 0 5px 18px #8dacf51a; }
.wallet-credit-continue:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wallet-credit-continue span { font-size: 21px; line-height: 1; }
.wallet-credit-sparkles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.wallet-credit-sparkles i { position: absolute; top: 12%; left: var(--x); width: 4px; height: 8px; background: #a7c6ff; opacity: 0; border-radius: 1px; animation: wallet-credit-spark 2.1s var(--delay) ease-out both; }
.wallet-credit-sparkles i:nth-child(3n) { background: #ffdb96; }
.wallet-credit-sparkles i:nth-child(2n) { width: 4px; height: 4px; border-radius: 50%; background: #d8c5ff; }
.wallet-credit-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wallet-credit-overlay.is-closing { animation: wallet-credit-leave .2s ease both; pointer-events: none; }
@keyframes wallet-credit-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes wallet-credit-arrive { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wallet-credit-draw { to { stroke-dashoffset: 0; } }
@keyframes wallet-credit-orbit { 0% { transform: scale(.8); opacity: 0; } 25% { opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes wallet-credit-spark { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 18% { opacity: .75; } 100% { opacity: 0; transform: translate(var(--drift),200px) rotate(var(--turn)); } }
@keyframes wallet-credit-leave { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 420px) { .wallet-credit-dialog { padding: 34px 24px 24px; border-radius: 26px; } .wallet-credit-dialog h2 { font-size: 24px; } .wallet-credit-emblem { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .wallet-credit-overlay,.wallet-credit-dialog,.wallet-credit-check,.wallet-credit-orbit,.wallet-credit-sparkles i { animation: none !important; } .wallet-credit-check { stroke-dashoffset: 0; } .wallet-credit-continue { transition: none; } }