/* Small, finite animations keep account and purchase actions easy to follow. */
:root { --ease-out:cubic-bezier(.22,1,.36,1); }
html { scroll-behavior:smooth; }
body { background-image:radial-gradient(ellipse at 80% 0,rgba(53,176,178,.055),transparent 48%); }
.btn,.quicklink,.product,.article-card,.help-card,.feed-row,.side-menu a,.side-menu button,.icon-button {
 transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s,background-color .25s,color .25s;
}
@media(hover:hover) {
 .btn:not(:disabled):hover { transform:translateY(-2px);box-shadow:0 8px 24px #0003; }
 .quicklink:hover,.product:hover,.help-card:hover { transform:translateY(-5px);border-color:#5de7d563;box-shadow:0 16px 40px #0003; }
 .product-art svg { transition:transform .5s var(--ease-out); }
 .product:hover .product-art svg { transform:translateY(-5px) scale(1.045); }
 .feed-row:hover { background:#5de7d508; }
}
.btn:active { transform:translateY(0) scale(.98); }
.btn:disabled { cursor:wait;opacity:.6; }
:is(input,select,textarea):focus { box-shadow:0 0 0 4px #5de7d510;transition:box-shadow .2s,border-color .2s; }
:focus-visible { outline:2px solid #5de7d5;outline-offset:4px; }
dialog[open] { animation:dialog-in .3s var(--ease-out) both; }
dialog[open]::backdrop { animation:backdrop-in .25s both; }
#toast { animation:toast-in .25s var(--ease-out); }
.reveal-in { animation:section-in .65s var(--ease-out) both; }
.hero-art { animation:art-in 1.1s var(--ease-out) both; }
.hero-badge { backdrop-filter:blur(12px); }
header { box-shadow:0 10px 40px #0001; }
.payment-layout { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:24px;align-items:start; }
.payment-steps { display:flex;gap:20px;flex-wrap:wrap;margin:0 0 26px;color:#91a7bd;font-size:13px; }
.payment-steps span { display:flex;align-items:center;gap:9px; }
.payment-steps b { display:grid;place-items:center;width:25px;height:25px;border:1px solid #5de7d550;border-radius:50%;color:#5de7d5; }
.amount-picks { display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0; }
.amount-picks button { padding:13px 6px;border:1px solid #324354;background:#142230;border-radius:10px;color:#cbd9e5;font:inherit;cursor:pointer; }
.amount-picks button.active { background:#5de7d514;border-color:#5de7d5;color:#5de7d5; }
.payment-methods { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0; }
.payment-method { padding:18px;border:1px solid #344454;border-radius:13px;background:#0d1722; }
.payment-method.selected { border-color:#5de7d56b;background:linear-gradient(130deg,#5de7d50c,#0d1722); }
.payment-method strong { display:block;margin:9px 0 4px;font-size:15px; }
.payment-method small { color:#91a7bd;font-size:12px; }
.payment-method .badge { margin-top:12px; }
.payment-summary { background:linear-gradient(145deg,#173135,#101b29 70%);border:1px solid #385157;border-radius:18px;padding:28px; }
.payment-summary h2 { font-size:40px;margin:18px 0 4px;letter-spacing:-2px; }
.payment-summary p { font-size:14px; }
.payment-summary hr { border:0;border-top:1px solid #ffffff14;margin:24px 0; }
.payment-summary .inline { margin:14px 0;font-size:14px; }
.bank-details { background:#0b1520;border:1px solid #2c4252;border-radius:12px;padding:20px;margin:20px 0; }
.bank-details dt { color:#91a7bd;font-size:12px;margin-top:14px; }
.bank-details dt:first-child { margin:0; }
.bank-details dd { margin:5px 0 0;overflow-wrap:anywhere; }
.bank-details code { color:#5de7d5; }
.payment-record { display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid #ffffff0d; }
.payment-record .record-main { flex:1;min-width:180px; }
.payment-record small { display:block;color:#91a7bd;margin-top:5px; }
@keyframes section-in { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }
@keyframes art-in { from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none} }
@keyframes dialog-in { from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none} }
@keyframes backdrop-in { from{opacity:0}to{opacity:1} }
@keyframes toast-in { from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0} }
@media(max-width:760px) { .payment-layout { grid-template-columns:1fr; }.payment-summary{padding:22px}.payment-methods{grid-template-columns:1fr}.amount-picks{grid-template-columns:repeat(2,1fr)} }
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}