/*
  Экраны продавца — инструмент, а не витрина.
  Крупные поля, читаемо с вытянутой руки, работает на телефоне.
*/

:root {
  --ink: #16181d;
  --ink-soft: #5b6270;
  --line: #d9dde5;
  --bg: #f5f6f8;
  --card: #ffffff;
  --accent: #1f5fd0;
  --accent-ink: #ffffff;
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --warn: #8a5300;
  --warn-bg: #fff4e0;
  --ok: #1c6c3c;
  --ok-bg: #e8f5ec;
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
    sans-serif;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 8px;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 20px;
}

h2 {
  font-size: 21px;
  margin: 28px 0 12px;
}

p {
  margin: 0 0 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 16px;
}

/* ── формы ─────────────────────────────────────────────────────────────── */

label {
  display: block;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'],
textarea,
select {
  width: 100%;
  font-size: 22px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(31, 95, 208, 0.35);
  border-color: var(--accent);
}

.field {
  margin-bottom: 18px;
}

.field--code input {
  font-size: 34px;
  letter-spacing: 0.4em;
  text-align: center;
}

button,
.button {
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  font-family: inherit;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-bottom: 12px;
}

button:disabled {
  background: #9fb2d4;
  cursor: not-allowed;
}

.button--secondary {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.button--quiet {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* ── галочки согласий ──────────────────────────────────────────────────── */

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

.consent input[type='checkbox'] {
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 1px 0 0;
}

.consent-body {
  flex: 1;
}

.consent label {
  color: inherit;
  font-size: inherit;
  margin: 0;
  display: block;
}

/* Полные тексты открываются в новой вкладке: набранный e-mail не теряется. */
.consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 0;
  font-size: 14px;
}

.consent-links a {
  color: var(--ink-soft);
  text-decoration: underline;
}

/* ── сообщения ─────────────────────────────────────────────────────────── */

.note {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.45;
}

.note--error {
  background: var(--danger-bg);
  color: var(--danger);
}

.note--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.note--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

/* кнопка внутри плашки — например «да, я имел в виду gmail.com» */
.note__action {
  margin: 12px 0 0;
}

.note__action button {
  margin: 0;
  font-size: 17px;
  padding: 12px 16px;
}

/* ── итоговая раскладка сумм ───────────────────────────────────────────── */

.totals {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}

.totals__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 19px;
}

.totals__row--major {
  font-size: 24px;
  font-weight: 700;
}

.balance {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0 2px;
}

.muted {
  color: var(--ink-soft);
  font-size: 16px;
}

/* ── история операций ──────────────────────────────────────────────────── */

.history {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Список сам является карточкой. Правило .history идёт в файле позже .card
  и при равной специфичности затирало её padding — текст прилипал к рамке.
  Возвращаем отступы двумя классами, чтобы порядок объявления больше не решал.
*/
.card.history {
  padding: 2px 18px;
}

.history__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.history__item:last-child {
  border-bottom: 0;
}

.history__amount {
  font-weight: 700;
  white-space: nowrap;
}

.history__amount--plus {
  color: var(--ok);
}

.history__amount--minus {
  color: var(--ink);
}

/* ── переключатель категории ───────────────────────────────────────────── */

.segmented {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  flex: 1;
  margin: 0;
  text-align: center;
  padding: 16px 10px;
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.segmented input:checked + label {
  border-color: var(--accent);
  background: rgba(31, 95, 208, 0.08);
  font-weight: 600;
}

/* ── подвал ────────────────────────────────────────────────────────────── */

.footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px 32px;
  font-size: 14px;
  color: var(--ink-soft);
}

.footer a {
  color: var(--ink-soft);
}

.footer__sep {
  margin: 0 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

th,
td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--ink-soft);
  font-weight: 600;
}

/* ── админка: таблица участников и операций ────────────────────────────── */

/*
  Админку открывают с ноутбука, а не с прилавка: здесь важнее увидеть много
  строк разом, чем попасть пальцем. Поэтому страница шире, шрифт мельче,
  а таблица прокручивается вбок, не растягивая страницу.
*/
.layout--wide .page,
.layout--wide .footer {
  max-width: 1180px;
}

.toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar h1 {
  margin-bottom: 12px;
}

.toolbar__back {
  width: auto;
  margin: 0 0 12px;
  padding: 8px 14px;
  font-size: 15px;
}

.search {
  padding: 16px;
}

.search__row {
  display: flex;
  gap: 10px;
}

.search__row input[type='search'] {
  flex: 1;
  width: auto;
  font-size: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
}

.search__row button {
  width: auto;
  margin: 0;
  padding: 12px 22px;
  font-size: 17px;
}

.search__filters {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.search__filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.search__filter select {
  width: auto;
  font-size: 15px;
  padding: 8px 10px;
}

.search__reset {
  font-size: 15px;
  color: var(--ink-soft);
}

.table-summary {
  margin: 16px 0 8px;
}

.table-wrap {
  overflow-x: auto;
  padding: 4px 8px;
}

.grid {
  font-size: 15px;
  white-space: nowrap;
}

.grid th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  background: var(--card);
}

.grid th a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
}

.grid tbody tr:hover {
  background: rgba(31, 95, 208, 0.05);
}

.grid td {
  vertical-align: top;
}

.grid__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.grid__num--negative {
  color: var(--danger);
  font-weight: 700;
}

.grid__mono {
  font-variant-numeric: tabular-nums;
}

.grid__email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--line);
  color: var(--ink);
}

.badge--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.badge--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge--muted {
  background: #eceef2;
  color: var(--ink-soft);
}

.inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.inline-form input[type='text'] {
  width: 150px;
  font-size: 14px;
  padding: 7px 9px;
}

.inline-form button {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 14px;
}

.field-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.field-row .field {
  flex: 1;
  min-width: 200px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}

.pager .button {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: 16px;
}

@media (max-width: 700px) {
  .grid__email {
    max-width: 140px;
  }
}

/* ── режим разработки ──────────────────────────────────────────────────── */

.dev-link .button {
  margin: 12px 0 0;
}

.chip {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none;
}

.chip--on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.code {
  font-size: 20px;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
}

.danger {
  color: var(--danger);
}

/* ── персонал ──────────────────────────────────────────────────────────── */

.row--off td {
  opacity: 0.55;
}

.pin-card {
  text-align: center;
  padding: 28px 18px;
}

.pin {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 10px;
  /* сдвигаем на половину трекинга — иначе число выглядит смещённым влево */
  text-indent: 0.22em;
}

.inline-form select {
  width: auto;
  font-size: 14px;
  padding: 7px 9px;
}

/* ── QR на регистрацию ─────────────────────────────────────────────────── */
/* Клиент наводит камеру с расстояния вытянутой руки, часто под углом
   и с бликами на экране — поэтому крупно, на белом и с полями. */

.qr {
  display: flex;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
}

.qr svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.qr-hint {
  text-align: center;
  font-size: 18px;
  margin: 0 0 20px;
}

/* Запасной путь, когда камера не берёт код: адрес читают вслух. */
.fallback {
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--ink-soft);
}

.fallback__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  word-break: break-all;
  color: var(--ink);
}

/* Пример под полем настройки: подпись не всегда объясняет, что вписывать. */
.field-hint {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Необратимое действие: рамка предупреждает до нажатия, а не после. */
.card--danger {
  border-color: var(--danger);
}

.card--danger p {
  margin-top: 0;
}

.button--danger {
  color: var(--danger);
  border-color: var(--danger-bg);
}

.button--danger:hover {
  background: var(--danger-bg);
}

.inline-form--stack {
  flex-wrap: wrap;
  gap: 6px;
}

/* Подсказка под ошибкой: что делать дальше, а не извинение. */
.note__hint {
  margin: 6px 0 0;
  font-size: 15px;
  opacity: 0.85;
}

/* ── главная страница сайта ────────────────────────────────────────────── */
/* Её читают не клиенты, а модераторы и проверяющие: им нужны реквизиты
   и понятное описание, а не витрина. */

.lead {
  font-size: 20px;
  line-height: 1.45;
}

.doc-list {
  margin: 0 0 16px;
  padding-left: 20px;
  line-height: 1.9;
}