/* ═══ QR-код воркера: ввод суммы, «Отправляем запрос», «Ссылка отправлена» (views/QrPay.js) ═════════════════════════════ */
.qr-head { display: grid; gap: 6px; padding: 2px 2px 4px; }
.qr-head .sp-label { margin: 0; }
.qr-head .sp-h1 { font-size: 24px; }
.qr-head .sp-lead { font-size: 14px; }
.qr-screen .sp-btn.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.qr-screen.shake .sp-pad-amt { animation: qr-shake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes qr-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.qr-wait { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 60vh; padding: 24px 12px; text-align: center; }
.qr-wait .sp-label { margin: 6px 0 0; }
.qr-wait .sp-lead { max-width: 30ch; }
.qr-wait .sp-btn { margin-top: 12px; }
.qr-wait-sum { margin-top: 6px; font: 600 22px/1 var(--sp-display); letter-spacing: -0.02em; }
.qr-done { display: grid; align-content: center; min-height: 60vh; padding: 12px; }
.qr-done-tip { max-width: 32ch; margin: 4px auto 14px; font-size: 14px; color: var(--sp-dust); text-align: center; }
.qr-done-tip b { color: var(--sp-star); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .qr-screen.shake .sp-pad-amt { animation: none; } }

/* Stable viewport grid for the complete QR request lifecycle. */
.qr-layout { display: grid; place-items: center; width: 100%; min-height: min(100%, calc(var(--app-h, 100dvh) - var(--sa-t) - var(--sp-top-h) - var(--sp-nav-h) - var(--sa-b))); padding: clamp(12px, 3vh, 28px) clamp(12px, 4vw, 32px); box-sizing: border-box; }
.qr-screen, .qr-wait, .qr-done { width: min(100%, 520px); min-width: 0; margin-inline: auto; }
.qr-screen { display: grid; align-content: center; min-height: min(680px, calc(var(--app-h, 100dvh) - var(--sa-t) - var(--sp-top-h) - var(--sp-nav-h) - var(--sa-b) - 24px)); }
.qr-wait { display: grid; place-items: center; align-content: center; min-height: min(560px, calc(var(--app-h, 100dvh) - var(--sa-t) - var(--sp-top-h) - var(--sp-nav-h) - var(--sa-b) - 24px)); padding: 0; }
.qr-state { display: grid; justify-items: center; align-content: center; gap: 12px; width: min(100%, 440px); min-height: 260px; padding: clamp(20px, 5vw, 36px); border: 1px solid var(--sp-line); border-radius: 28px; background: var(--sp-panel); box-shadow: var(--sp-shadow); box-sizing: border-box; text-align: center; animation: qr-state-in 220ms ease-out both; }
.qr-state .sp-h1, .qr-state .sp-lead { margin: 0; }
.qr-state .sp-lead { max-width: 34ch; }
.qr-countdown { margin: 0; color: var(--sp-dust); font-size: 14px; font-variant-numeric: tabular-nums; }
.qr-countdown b { color: var(--sp-star); font: 650 18px/1 var(--sp-display); }
.qr-state .sp-btn-row { width: 100%; }
.qr-state-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; color: var(--sp-ion); background: var(--sp-ion-soft); }
.qr-state-mark.busy { color: var(--sp-ion); }
.qr-state[aria-busy="true"] { border-color: color-mix(in srgb, var(--sp-ion) 30%, var(--sp-line)); }
.qr-state[aria-busy="true"] .sp-spinner circle:last-child { animation: qr-orbit 1.35s linear infinite; transform-origin: 12px 12px; }
.qr-done { width: min(100%, 520px); }
@keyframes qr-state-in { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qr-orbit { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .qr-layout { padding: 10px 12px; } .qr-state { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .qr-state { animation: none; } .qr-state[aria-busy="true"] .sp-spinner circle:last-child { animation: none; } }

/* Степпер жизненного цикла QR и крупный таймер: высота карточки фиксирована, переходы между шагами не дёргают вёрстку. */
.qr-state { min-height: 380px; }
.qr-steps { display: grid; gap: 8px; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.qr-step { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 12px; border-radius: 12px; color: var(--sp-faint); font: 500 14px/1.2 var(--sp-body); transition: background 200ms, color 200ms; }
.qr-step i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font: 700 12px/1 var(--sp-body); font-style: normal; background: var(--sp-panel2); }
.qr-step.now { color: var(--sp-star); background: var(--sp-ion-soft); }
.qr-step.now i { background: var(--sp-ion); color: var(--sp-on-ion); }
.qr-step.done { color: var(--sp-dust); }
.qr-step.done i { background: color-mix(in srgb, var(--sp-aurora) 22%, transparent); color: var(--sp-aurora); }
.qr-step.bad { color: #ff7a70; background: rgba(255, 90, 78, 0.1); }
.qr-step.bad i { background: #ff5a4e; color: #fff; }
.qr-countdown { display: grid; gap: 4px; justify-items: center; min-height: 56px; }
.qr-timer { font: 700 34px/1 var(--sp-display); letter-spacing: -0.03em; color: var(--sp-star); min-width: 5ch; text-align: center; }

/* QR готов: код и ссылка в Mini App */
.qr-ready { min-height: 0; }
.qr-code-box { display: grid; place-items: center; padding: 12px; border-radius: 22px; background: #f3f4fb; }
.qr-code { width: min(240px, 62vw); height: auto; display: block; }
.qr-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 14px; background: var(--sp-panel2); color: var(--sp-dust); text-align: left; }
.qr-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.qr-ready .sp-btn .sp-ico, .qr-ready .sp-btn svg { margin-right: 6px; }

/* Готовый QR не шире экрана: длинная ссылка обрезается многоточием, а не раздвигает карточку. */
.qr-layout, .qr-wait { grid-template-columns: minmax(0, 1fr); }
.qr-state { max-width: 100%; min-width: 0; }
.qr-ready > * { max-width: 100%; min-width: 0; }
.qr-link { min-width: 0; max-width: 100%; }

/* Ввод суммы на телефоне: кнопка «Получить QR» всегда на экране, без прокрутки. Клавиатура ниже, а сама кнопка закреплена над нижним меню. */
@media (max-width: 959px) {
  .qr-screen { min-height: 0; align-content: start; }
  .qr-screen .sp-pad-sheet > .sp-pad { height: clamp(176px, 30vh, 300px); }
  .qr-screen .sp-pad-sheet > .sp-btn.primary.wide { position: sticky; bottom: calc(var(--sp-nav-h) + var(--sa-b) + 10px); z-index: 4; box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55); }
}