/* Деньги: баланс в шапке, окно пополнения, страница «Баланс», покупка проверки ИИ (редизайн 05.11.2026).
   Язык лендинга: Onest для сумм и заголовков, плоские поверхности без рамок, воздух; моноширинный — только формула
   расчёта. Цвет со смыслом: голубой — действие и выбор, зелёный — то, что человек получает (бонус, поступит),
   янтарный — не хватает. Без свечения и анимаций. */

.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- шапка: сумма — она же вход в пополнение ------------------------------------------------------------------- */
.wallet {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px;
  background: var(--h-sunken); box-shadow: inset 0 0 0 1px var(--h-line); color: var(--h-ink); text-decoration: none;
  font-size: 13.5px; line-height: 1; white-space: nowrap; transition: box-shadow .15s ease-out, background-color .15s ease-out;
}
.wallet:hover { box-shadow: inset 0 0 0 1px var(--h-accent-line); background: var(--h-accent-soft); }
.wallet:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.wallet-sum { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wallet-plus { color: var(--h-ink-3); }
.wallet:hover .wallet-plus { color: var(--h-accent-text); }
/* призыв пополнить — когда денег нет: заливка главного действия, как у «Запросить пилот» на лендинге */
.wallet:has(.wallet-offer) { padding-right: 3px; }
.wallet-offer {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--h-btn);
  color: var(--h-on-accent); font-weight: 600; transition: background-color .15s ease-out;
}
.wallet:hover .wallet-offer { background: var(--h-btn-hover); }
@media (max-width: 560px) { .wallet-offer { padding: 0 8px; font-size: 12.5px; } }

/* --- окно пополнения ------------------------------------------------------------------------------------------- */
.topup-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 14px;
  background: var(--h-panel); color: var(--h-ink); box-shadow: 0 1px 0 var(--h-line) inset, var(--h-shadow-lg), 0 24px 64px -24px rgba(0, 0, 0, .55);
}
.topup-dialog::backdrop { background: rgba(5, 8, 13, .62); }
@media (max-width: 560px) {
  .topup-dialog { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}
.topup-sheet { display: flex; flex-direction: column; padding: 24px 24px 20px; }
.topup-head { position: relative; margin-bottom: 20px; padding-right: 40px; }
.topup-head h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.topup-head p { margin: 0; color: var(--h-ink-2); font-size: 14px; }
.topup-head .amt { color: var(--h-ink); font-weight: 600; }
.topup-close {
  position: absolute; top: -4px; right: -8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--h-ink-3); cursor: pointer;
}
.topup-close:hover { background: var(--h-sunken); color: var(--h-ink); }
.topup-close:focus-visible { outline: 2px solid var(--h-accent); }

.topup-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.topup-preset {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 72px; padding: 14px 16px;
  border-radius: 10px; background: var(--h-card); box-shadow: inset 0 0 0 1px var(--h-line); cursor: pointer;
  transition: box-shadow .15s ease-out, background-color .15s ease-out;
}
.topup-preset:hover { box-shadow: inset 0 0 0 1px var(--h-line-strong); }
.topup-preset input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.topup-preset:has(input:checked) { background: var(--h-accent-soft); box-shadow: inset 0 0 0 1.5px var(--h-accent); }
.topup-preset:has(input:focus-visible) { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.tp-sum { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.tp-buys { color: var(--h-ink-3); font-size: 12.5px; line-height: 1.35; }

.topup-own { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--h-ink-2); font-size: 14px; }
.topup-own-field {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 8px;
  background: var(--h-sunken); box-shadow: inset 0 0 0 1px var(--h-line-strong); color: var(--h-ink-3);
}
.topup-own-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--h-accent); }
.topup-own-field input {
  width: 96px; padding: 0; border: 0; background: none; color: var(--h-ink); text-align: right;
  font: 600 15px/1 var(--font-display); font-variant-numeric: tabular-nums; outline: none;
}
.topup-hint { margin: 6px 0 0; text-align: right; color: var(--h-ink-3); font-size: 12px; }

.topup-sum { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--h-line); }
.topup-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.topup-sum dt { color: var(--h-ink-2); font-size: 14px; }
.topup-sum dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.topup-sum .gain dt, .topup-sum .gain dd { color: var(--h-ok); }
.topup-sum .total { margin-top: 4px; }
.topup-sum .total dt { color: var(--h-ink); font-weight: 600; }
.topup-sum .total dd { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.topup-note { margin: 10px 0 0; color: var(--h-ink-3); font-size: 12.5px; line-height: 1.45; }
.topup-go { width: 100%; height: 46px; margin-top: 18px; font-size: 15px; font-weight: 600; }
.topup-fine { margin: 10px 0 0; color: var(--h-ink-3); font-size: 12px; line-height: 1.5; text-align: center; }

/* --- страница «Баланс» ----------------------------------------------------------------------------------------- */
.billing { max-width: 920px; }
.billing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 8px; }
.billing-head h1 { margin: 0 0 6px; color: var(--h-ink-2); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.billing-sum {
  margin: 0; font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 600; line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.billing-sub { margin: 10px 0 0; color: var(--h-ink-2); }
.billing-sub .amt { color: var(--h-ink); font-weight: 600; }
.billing-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.billing-actions .button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 180px; height: 44px; font-size: 15px;
}
.billing-offer { margin: 0; color: var(--h-ok); font-size: 13.5px; }
.billing-need { margin: 16px 0 0; color: var(--h-warn); }
.billing-need .amt { font-weight: 600; }

.billing-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin: 32px 0 0;
  border-radius: 12px; overflow: hidden; background: var(--h-line);
}
.billing-facts > div { padding: 16px 18px; background: var(--h-card); }
.billing-facts dt { margin-bottom: 6px; color: var(--h-ink-3); font-size: 12.5px; }
.billing-facts dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.billing-facts dd span { color: var(--h-ink-3); font-family: var(--font); font-size: 13px; font-weight: 400; }
.billing-facts dd.text { font-family: var(--font); font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--h-ink-2); }

.billing-history { margin-top: 40px; }
.billing-history h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.billing-table td.num { font-family: var(--font-display); font-weight: 500; }
.billing-table td.plus { color: var(--h-ok); }
.billing-empty { margin: 0; padding: 24px; border-radius: 12px; background: var(--h-card); color: var(--h-ink-3); }
.billing-seller { margin: 40px 0 0; max-width: 72ch; color: var(--h-ink-3); font-size: 12.5px; line-height: 1.55; }
@media (max-width: 640px) { .billing-actions { align-items: stretch; width: 100%; } .billing-actions .button { width: 100%; } }

/* --- покупка проверки ИИ на странице тома (paid.js) ------------------------------------------------------------- */
/* главное платное действие на странице тома: голубая кромка (цвет «активное») выделяет блок среди серых карточек */
.card.paid-check { padding: 28px 32px; box-shadow: inset 0 0 0 1px var(--h-accent-line); }
.paid-check > h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.paid-check > .hint { max-width: 70ch; margin-bottom: 16px; }
@media (max-width: 640px) { .card.paid-check { padding: 20px; } .paid-go { width: 100%; min-width: 0; } }
.paid-pages { margin: 0 0 12px; color: var(--h-ink-2); font-size: 14px; }
.paid-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.paid-tier {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 0; border-radius: 12px;
  background: var(--h-sunken); box-shadow: inset 0 0 0 1px var(--h-line); color: var(--h-ink); text-align: left;
  font: inherit; cursor: pointer; transition: box-shadow .15s ease-out, background-color .15s ease-out;
}
.paid-tier:hover { box-shadow: inset 0 0 0 1px var(--h-line-strong); }
.paid-tier[aria-checked="true"] { background: var(--h-accent-soft); box-shadow: inset 0 0 0 1.5px var(--h-accent); }
.paid-tier:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.paid-tier .t-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.paid-tier .t-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.paid-tier .t-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.paid-tier .t-per { color: var(--h-ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.paid-tier .t-what { margin-top: 6px; color: var(--h-ink-2); font-size: 13.5px; line-height: 1.45; }
.paid-calc { margin: 16px 0 4px; font-family: var(--mono); font-size: 13.5px; color: var(--h-ink-2); font-variant-numeric: tabular-nums; }
.paid-after { margin: 0; color: var(--h-ink-2); }
.paid-after b { color: var(--h-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.paid-after .short { color: var(--h-warn); font-weight: 600; }
.paid-go { min-width: 300px; height: 50px; margin-top: 18px; padding: 0 28px; border-radius: 10px; font-size: 16px; font-weight: 600; }
.paid-alt { display: block; margin-top: 10px; }
.paid-alt[hidden] { display: none; }
.paid-note { margin: 10px 0 0; color: var(--h-ok); font-size: 13.5px; }
.paid-note:empty { display: none; }
.paid-fine { margin: 14px 0 0; color: var(--h-ink-3); font-size: 12.5px; }
.paid-flash { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--h-warn-soft); color: var(--h-ink); font-size: 14px; }
.paid-flash.ok { background: var(--h-ok-soft); }