.credits-toast {
  position: fixed; z-index: 1800; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 15px; width: min(420px, calc(100% - 24px)); padding: 16px 38px 17px 15px;
  overflow: hidden; border: 1px solid #f5a342; border-radius: 23px; color: #fff3e4;
  background: radial-gradient(ellipse at 0 0, #c7661e38, transparent 65%), linear-gradient(125deg, #321c10f7, #1d120cfb 70%);
  box-shadow: inset 0 1px 1px #ffe0a750, inset 0 0 18px #ff7d1712, 0 12px 34px #0008, 0 0 19px #ff790d21;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.credits-toast-art { position: relative; display: grid; place-items: center; width: 59px; height: 62px; flex: none; border: 1px solid #e5913b80; border-radius: 17px; background: radial-gradient(circle at center, #ff9c2844, #6a321522); box-shadow: inset 0 1px #ffd99d35, 0 0 18px #ff981f15; }
.credits-toast-art > img { display: block; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 7px #ff9e3150); }
.credits-toast-check { position: absolute; bottom: -3px; right: -4px; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #ffe0a2; border-radius: 50%; color: #5b2b0b; background: linear-gradient(140deg, #fff2a6, #ffbc4d); box-shadow: 0 2px 7px #0006; }
.credits-toast-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.credits-toast-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.credits-toast-copy > strong { display: block; color: #fff5e9; font-size: 16px; font-weight: 750; line-height: 1.2; }
.credits-toast-amount { display: flex; align-items: center; gap: 6px; color: #ffdd86; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.credits-toast-amount img { display: block; width: 24px; height: 24px; flex: none; object-fit: contain; }
.credits-toast-detail { color: #cbaa8d; font-size: 11px; line-height: 1.3; }
.credits-toast .credits-toast-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 1px solid #ffc58c12; border-radius: 50%; background: #ffffff07; color: #e5c5a7; cursor: pointer; }
.credits-toast-close svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.credits-toast-close:focus-visible { outline: 2px solid #ffd075; outline-offset: 2px; }
.credits-toast-progress { position: absolute; bottom: 0; left: 15px; right: 15px; height: 2px; border-radius: 4px; background: linear-gradient(90deg, #ffd773, #ff822c); opacity: .65; transform-origin: left; animation: credits-toast-countdown 4800ms linear forwards; }
@keyframes credits-toast-countdown { to { transform: scaleX(0); } }
@media (max-width: 359px) { .credits-toast { padding: 14px 35px 15px 12px; gap: 11px; border-radius: 21px; } .credits-toast-art { width: 51px; height: 55px; border-radius: 15px; } .credits-toast-art > img { width: 46px; height: 46px; } .credits-toast-copy > strong { font-size: 15px; } .credits-toast-amount { font-size: 20px; } .credits-toast-detail { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .credits-toast-progress { animation: none; display: none; } }