/* Модуль «Пополнить»: сумма крупно, QR, шаги статуса, быстрые суммы */
.pay-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.pay-quick .btn { padding: 8px 2px; font-family: var(--font-num) }
.pay-amt { font-size: 30px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere }
.pay-amt span { font-size: 18px; color: var(--muted); font-family: var(--font-ui) }
.pay-qr { display: grid; place-items: center; margin: 6px 0 }
.pay-qr svg { background: #fff; border-radius: 12px; padding: 0; max-width: 100%; height: auto; border: 1px solid var(--line) }
.pay-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
.pay-steps li { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 12.5px; color: var(--muted) }
.pay-steps li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-family: var(--font-num) }
.pay-steps li.past span { background: var(--ok); color: var(--save-fg) }
.pay-steps li.now { color: var(--fg); font-weight: 600 }
.pay-steps li.now span { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 0 4px var(--accent-soft) }
.pay-steps li.bad span { background: var(--bad); color: #fff }