:root {
  --bg: #f4f5f7;
  --card: #fff;
  --text: #1b1f24;
  --muted: #69707a;
  --accent: #0a53be;
  --accent-text: #fff;
  --warn-bg: #fff4d6;
  --warn-border: #f0c040;
  --ok: #1a7f37;
  --err: #c62828;
  --radius: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.wrap { max-width: 560px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.35rem; margin: 0 0 4px; }
.card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.error { color: var(--err); }

/* --- кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--accent); background: #fff; color: var(--accent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-text); width: 100%; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: default; }

/* --- каталог --- */
.products { border: 0; padding: 0; margin: 0 0 16px; }
.products legend { font-weight: 600; margin-bottom: 8px; }
.product {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid #dde1e6; border-radius: 10px; margin-bottom: 8px; cursor: pointer;
}
.product-title { flex: 1; }
.product-price { font-weight: 600; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #c9ced6; border-radius: 10px; font: inherit; }

/* --- страница оплаты --- */
.pay-head { margin-bottom: 16px; }
.amount-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.amount-label { width: 100%; color: var(--muted); font-size: .9rem; }
.amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.copied { color: var(--ok); font-size: .9rem; }
.approx { margin: 8px 0 12px; color: var(--muted); }
.warning { background: var(--warn-bg); border-left: 4px solid var(--warn-border); padding: 10px 12px; border-radius: 8px; margin: 0 0 16px; }
.qr-block { text-align: center; margin: 12px 0; }
.qr { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 12px; image-rendering: pixelated; background: #fff; }
.timer { margin: 10px 0 0; color: var(--muted); }
.howto { margin: 16px 0; border-top: 1px solid #eceef1; padding-top: 12px; }
.howto summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.howto ol { padding-left: 1.2em; }
.howto li { margin: 6px 0; }
.status-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 600; }
.spinner { width: 18px; height: 18px; border: 3px solid #cfd6e0; border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.big { font-size: 1.3rem; font-weight: 700; margin: 8px 0; }
.ok { color: var(--ok); }
.cert-code { font: 700 1.6rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; background: #eef6ee; padding: 10px 14px; border-radius: 8px; display: inline-block; user-select: all; }
.demo { margin-top: 20px; padding: 12px; border: 1px dashed #999; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Показываем один блок в зависимости от статуса. */
.state { display: none; }
.pay[data-view="pending"] .state-pending,
.pay[data-view="expired"] .state-expired,
.pay[data-view="paid"] .state-paid,
.pay[data-view="amount_mismatch"] .state-amount_mismatch { display: block; }
/* До загрузки JS — по серверному статусу. */
.pay:not([data-view])[data-status="pending"] .state-pending,
.pay:not([data-view])[data-status="processing"] .state-pending,
.pay:not([data-view])[data-status="expired"] .state-expired,
.pay:not([data-view])[data-status="failed"] .state-expired,
.pay:not([data-view])[data-status="paid"] .state-paid,
.pay:not([data-view])[data-status="amount_mismatch"] .state-amount_mismatch { display: block; }

/* Мобайл: основная кнопка — «Скачать QR», QR поменьше. */
.only-desktop { display: none; }
.btn.download { background: var(--accent); color: var(--accent-text); width: 100%; max-width: 360px; }
@media (min-width: 768px) {
  .wrap { padding-top: 40px; }
  .only-desktop { display: block; font-weight: 600; }
  .qr { max-width: 400px; }
  /* Десктоп: сканируют телефоном, скачивание — вторичная кнопка. */
  .btn.download { background: #fff; color: var(--accent); width: auto; }
}