/* СИСТЕМА ВИДА МИНИ-ПРИЛОЖЕНИЯ. Редакция 2 — по его референсам 26.08.
 *
 * 🔴 ЧТО СНЯТО С РЕФЕРЕНСОВ 1:1 И ПОЧЕМУ ИМЕННО ЭТО.
 *
 * Он забраковал прежний вид словом «слоп» и приложил два банковских
 * приложения. Разбор дал восемь приёмов, и каждый здесь исполнен:
 *
 *   1. фон — ЧИСТЫЙ ЧЁРНЫЙ. Не «почти чёрный с уклоном»: у обоих #000;
 *   2. главный блок — КАРТОЧКА, ЗАЛИТАЯ АКЦЕНТОМ, текст в ней чёрный;
 *   3. внутри неё — ЧЁРНЫЕ ПИЛЮЛИ со значком в круге, зеркально;
 *   4. действия — ШИРОКИЕ ПЛАШКИ, подпись ПОД плашкой, а не кружки;
 *   5. активная вкладка — ЗАЛИТЫЙ КРУГ, а не подкрашенный значок;
 *   6. строка списка — СПЛОШНОЙ цветной кружок слева, шеврон справа;
 *   7. столбчатый график с выделенным столбцом и биркой над ним;
 *   8. имя в шапке КРУПНО и ЖИРНО, приветствие мелко над ним.
 *
 * 🔴 ЧЕГО У НИХ НЕТ И ПОТОМУ НЕТ ЗДЕСЬ: градиентов, свечения, обводок 1px
 * вокруг карточек. Слои разделяются ТОЛЬКО светлотой. Именно эти три вещи
 * он и назвал «видно работу ИИ» — и был прав: они появляются сами собой,
 * когда вид сочиняют, а не снимают с образца.
 *
 * 🔴 ОРАНЖЕВЫЙ ВЗЯТ ИЗ ЗНАКА: #FF6E40, а не прежний #FF6A2C. Знак — это то,
 * что нельзя подгонять под палитру; подгонять надо палитру под знак.
 */

/* ── ШРИФТ ────────────────────────────────────────────────────────────────
   🔴 ЛЕЖИТ У НАС, А НЕ ГРУЗИТСЯ С GOOGLE FONTS.

   Три довода, и каждый сам по себе решающий:
     1. приложение открывается ВНУТРИ Telegram, часто на мобильном интернете
        в дороге. Лишний домен — это лишний DNS, лишний TLS и шанс, что
        текст поедет системным шрифтом на пол-секунды (FOUT);
     2. `content-security-policy` у нас закрыт на свой домен. Пускать туда
        чужой хост ради шрифта значит расширять дыру, через которую потом
        уедет что-нибудь ещё;
     3. Google Fonts видит IP каждого нашего человека. Нам это не нужно.

   Взяты только две подтаблицы — кириллица и латиница, 49,6 КБ вместе.
   Вариативный: один файл на все веса от 400 до 800, вместо пяти файлов.

   🔴 И РАЗМЕТКА НЕ ЗНАЕТ ПРО ШРИФТ. Ни одного `<link>`: правило
   живёт там же, где палитра, — иначе следующий экран забудут подписать. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/app/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/app/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Ступени подложки. Разделяются светлотой, не тенью и не обводкой. */
  --чёрный: #000000;
  --низ: #000000;
  --слой-1: #131315; /* карточка */
  --слой-2: #1d1d20; /* плашка, поле ввода, столбец графика */
  --слой-3: #2a2a2e; /* тихий кружок, невыбранный переключатель */

  /* 🔴 Деньги и действие. Один цвет, одна роль, ПЛОСКИЙ — из знака. */
  --деньги: #ff6e40;
  --на-деньгах: #140600;

  /* Состояния заявки. Ступень 400: ступень 600 (#dc2626, #22c55e) считана
     под СВЕТЛЫЙ фон и на чёрном темнеет до бурого и болотного — это и было
     то, что он назвал «старческими цветами». */
  --ждёт: #a78bfa;
  --зачтено: #34d399;
  --идёт: #60a5fa;
  --отказ: #fb7185;

  --текст: #ffffff;
  --текст-2: #a7a7b0;
  --текст-тихо: #6e6e78;

  --р-карты: 24px;
  --р-плашки: 18px;
  --р-пилюли: 999px;

  /* Высота плавающей панели вместе с её отступом от низа. Всё, что считает
     запас снизу, обязано считать ЭТО, а не голую высоту рейки. */
  --низ-панели: 82px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--чёрный);
  color: var(--текст);
  font-family:
    "Onest",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* 🔴 ТАБЛИЧНЫЕ ЦИФРЫ ВЕЗДЕ: на каждом экране столбцы сумм, и при разной
   ширине цифр столбец дёргается на каждом обновлении (§19.3). */
body {
  font-variant-numeric: tabular-nums;
}

/* ── ШАПКА ────────────────────────────────────────────────────────────────
   Аватар и приветствие слева, круглая кнопка справа. Имя КРУПНО: у обоих
   референсов имя — самая заметная строка шапки, а «Добрый день» — мелкая
   надстрочная. */
.шапка {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 16px;
  background: var(--чёрный);
}

.аватар {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  overflow: hidden;
  background: var(--слой-2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--текст-2);
}
.аватар img,
.аватар svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Аватар поддержки — корона знака на оранжевом. Раньше здесь стояла буква
   «S», и бренд из приложения не читался вовсе. */
/* 🔴 КОРОНА БЕЗ ПОДЛОЖКИ — ЕГО ПРАВКА 26.08.
   На оранжевом круге тёмный силуэт короны читался как пятно: у знака
   тонкие зубцы, и на цветном фоне они пропадают. Оранжевая корона на
   чёрном — то, как знак нарисован в самом файле. */
.аватар.корона {
  background: none;
  padding: 0;
  color: var(--деньги);
}
.аватар.корона svg {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.привет {
  flex: 1;
  min-width: 0;
}
.привет small {
  display: block;
  color: var(--текст-тихо);
  font-size: 13px;
  line-height: 1.25;
}
.привет b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.привет .живой {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--зачтено);
}
.привет .живой i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Заголовок экрана по центру — для страниц, куда пришли «вглубь» (вывод,
   подача): слева стрелка назад, справа распорка того же размера. */
.заголовок-экрана {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.распорка {
  width: 42px;
  flex: none;
}

/* Знак целиком — слово с короной. */
.знак {
  display: inline-flex;
  align-items: center;
  height: 26px;
}
.знак svg {
  height: 22px;
  width: auto;
  display: block;
}

/* ── КРУГЛАЯ КНОПКА ШАПКИ ─────────────────────────────────────────────── */
.кругляш {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  position: relative;
  background: var(--слой-1);
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--текст);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.кругляш:active {
  transform: scale(0.93);
}
.кругляш svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Точка непрочитанного. Обводка цветом фона — иначе точка сливается с краем
   кнопки и читается как дефект отрисовки. */
.кругляш .точка {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--р-пилюли);
  background: var(--отказ);
  border: 2.5px solid var(--чёрный);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 1;
}
/* Когда непрочитанное есть, но считать нечего — точка без числа. */
.кругляш .точка.пустая {
  top: 7px;
  right: 8px;
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
}

/* ── СОДЕРЖИМОЕ ──────────────────────────────────────────────────────────
   🔴 ЗАПАС СНИЗУ СЧИТАЕТ И БЕЗОПАСНУЮ ЗОНУ. Панель плавающая и сама
   добавляет `env(safe-area-inset-bottom)` — то есть на телефоне с чёлкой
   она выше своих 82 пикселей. Запас, не знающий про это, на такой машине
   оказывается меньше панели. */
main {
  padding: 0 16px
    calc(var(--низ-панели) + env(safe-area-inset-bottom, 0px) + 24px);
  max-width: 640px;
  margin: 0 auto;
}

/* ── РАЗДЕЛ: заголовок слева, тихая ссылка справа ────────────────────── */
h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--текст);
  text-transform: none;
}
.раздел {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.раздел h2 {
  margin: 0;
}
.раздел .ссылка {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--текст-тихо);
  cursor: pointer;
}
.раздел .ссылка:active {
  color: var(--текст-2);
}

/* ── КАРТОЧКА. Ни обводки, ни тени: только светлота. ──────────────────── */
.карта {
  background: var(--слой-1);
  border: 0;
  border-radius: var(--р-карты);
  overflow: hidden;
  margin-bottom: 12px;
}
.карта.воздух {
  padding: 18px;
}

/* 🔴 ФОРМА — НЕ ОДНА СПЛОШНАЯ ПЛИТА.
   Его слова про экран подачи: «все сплошным цветом и ничего не понятно».
   И верно: форма была одной карточкой, внутри неё поля того же цвета, и
   границ между шагами не читалось вовсе — сплошное серое поле с текстом.
   Теперь форма прозрачна, а карточками стали САМИ поля: каждое видно
   отдельно, между ними воздух. */
form.карта {
  background: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  margin-bottom: 0;
}
.карта.выше {
  background: var(--слой-2);
}

/* ── ГЛАВНАЯ КАРТОЧКА, ЗАЛИТАЯ АКЦЕНТОМ ─────────────────────────────────
   Ядро вида: самое яркое пятно экрана — деньги. */
.карта-денег {
  background: var(--деньги);
  color: var(--на-деньгах);
  border-radius: var(--р-карты);
  padding: 20px;
  margin-bottom: 12px;
}
.карта-денег .верх {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.карта-денег .число {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.карта-денег .под {
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0.62;
  margin-top: 3px;
}
.карта-денег .значок-угол,
.акция .значок-угол {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--на-деньгах);
}
.карта-денег .значок-угол svg,
.акция .значок-угол svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Пилюли внутри карточки денег. Зеркальные: у левой значок слева, у правой
   справа — так у них, и так пара читается как «туда и сюда». */
.пилюли {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}
.пилюля {
  flex: 1;
  height: 52px;
  border: 0;
  border-radius: var(--р-пилюли);
  background: #101012;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.пилюля:active {
  transform: scale(0.97);
}
.пилюля:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.пилюля .кр {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #101012;
  display: grid;
  place-items: center;
  flex: none;
}
.пилюля .кр svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.пилюля.вправо {
  justify-content: space-between;
  padding-left: 18px;
}

/* ── БАЛАНС ПО ЦЕНТРУ (выбранный им вариант Б) ────────────────────────── */
.баланс-центр {
  text-align: center;
  padding: 10px 0 22px;
}
.баланс-центр .число {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.баланс-центр .под {
  color: var(--текст-тихо);
  font-size: 14.5px;
  margin-top: 7px;
}

/* ── ШИРОКИЕ ПЛАШКИ ДЕЙСТВИЙ, подпись ПОД плашкой ─────────────────────── */
.плашки {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.плашки.четыре {
  grid-template-columns: repeat(4, 1fr);
}
.плашка {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.плашка .верх {
  height: 56px;
  border-radius: var(--р-плашки);
  background: var(--слой-1);
  display: grid;
  place-items: center;
  color: var(--текст);
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.плашка:active .верх {
  transform: scale(0.95);
}
.плашка.главная-плашка .верх {
  background: var(--деньги);
  color: var(--на-деньгах);
}
.плашка:disabled {
  cursor: not-allowed;
}
.плашка:disabled .верх {
  background: var(--слой-2);
  color: var(--текст-тихо);
}
.плашка:disabled span {
  color: var(--текст-тихо);
}
.плашка span {
  display: block;
  font-size: 12.5px;
  color: var(--текст-2);
  margin-top: 8px;
}
.плашка .верх svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── СТРОКА СПИСКА: сплошной цветной кружок слева, шеврон справа ──────── */
.поз {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-weight: 400;
  color: inherit;
  text-align: left;
  cursor: default;
}
button.поз {
  cursor: pointer;
}
button.поз:active {
  background: var(--слой-2);
}
.поз + .поз {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.кружок {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #0a0a0c;
}
.кружок svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.кружок.к-деньги {
  background: var(--деньги);
}
.кружок.к-зачтено {
  background: var(--зачтено);
}
.кружок.к-ждёт {
  background: var(--ждёт);
}
.кружок.к-идёт {
  background: var(--идёт);
}
.кружок.к-отказ {
  background: var(--отказ);
}
.кружок.к-тихо {
  background: var(--слой-3);
  color: var(--текст-2);
}
.тело {
  flex: 1;
  min-width: 0;
}
.тело b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.тело small {
  display: block;
  color: var(--текст-тихо);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 🔴 И ЗАГОЛОВОК ТОЖЕ УМЕЕТ ПЕРЕНОСИТЬСЯ.
   В списке сумм строку режут многоточием — там важна колонка справа. А в
   правилах заголовок и есть содержание: «Подать можно за 7 дней после
   публ…» — это не правило, это загадка. */
.поз.длинная .тело b {
  white-space: normal;
  overflow: visible;
}

/* Пояснение, которое обязано читаться целиком, — переносится, а не режется.
   Одно и то же место говорит две разные вещи: примета (режем) и причина
   отказа (не режем). */
.тело small.полностью {
  white-space: normal;
  overflow: visible;
}
.справа {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.справа .сум {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.справа .сум.плюс {
  color: var(--зачтено);
}
.шеврон {
  color: var(--текст-тихо);
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── ЧИПЫ-ФИЛЬТРЫ: пилюли, активная — сплошная заливка ────────────────── */
.чипы {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Чипы уходят под край экрана при прокрутке — как у них. Отрицательные
     поля с равным внутренним отступом дают это, не ломая колонку. */
  margin: 0 -16px 14px;
  padding: 2px 16px 0;
}
.чипы::-webkit-scrollbar {
  display: none;
}
.чип {
  flex: none;
  border: 0;
  border-radius: var(--р-пилюли);
  padding: 10px 17px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  background: var(--слой-1);
  color: var(--текст-2);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.чип:active {
  transform: scale(0.96);
}
.чип[aria-pressed="true"] {
  background: var(--текст);
  color: #0a0a0c;
  font-weight: 600;
}
/* Оранжевая заливка — там, где чип означает деньги, а не отбор. */
.чип.денежный[aria-pressed="true"] {
  background: #3d2415;
  color: var(--деньги);
}

/* ── СОСТОЯНИЯ ──────────────────────────────────────────────────────────
   🔴 ЦВЕТ МЕТКИ И ЦВЕТ ЕЁ ПОДЛОЖКИ — РАЗНЫЕ ВЕЛИЧИНЫ.

   Круг 3 замерил: насыщенный цвет на своей же бледной подложке даёт низкий
   контраст по построению — «отклонена» выходила 3,27:1 при норме 4,5.
   Разводим роли: подложка — тёмная ступень, текст — светлая. */
.метка {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--р-пилюли);
  font-size: 11.5px;
  font-weight: 600;
  flex: none;
  text-transform: none;
  letter-spacing: 0;
}
.метка.ждёт {
  color: var(--ждёт);
  background: #251c40;
}
.метка.идёт {
  color: var(--идёт);
  background: #14243d;
}
.метка.зачтено {
  color: var(--зачтено);
  background: #10321f;
}
.метка.отказ {
  color: var(--отказ);
  background: #3a1620;
}

/* ── ОРГАНЫ УПРАВЛЕНИЯ ─────────────────────────────────────────────────── */
button,
.кнопка {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  border-radius: var(--р-плашки);
  padding: 13px 18px;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Главная кнопка — оранжевая. Их на экране не больше ОДНОЙ: две главные
   кнопки означают, что главной нет. */
.главная {
  width: 100%;
  background: var(--деньги);
  color: var(--на-деньгах);
  padding: 17px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.главная:active {
  transform: scale(0.985);
}
.главная:disabled {
  background: var(--слой-2);
  color: var(--текст-тихо);
  cursor: not-allowed;
}

/* 🔴 ТИХАЯ КНОПКА СВЕТЛЕЕ КАРТОЧКИ, А НЕ РАВНА ЕЙ.
   Прежде и карточка, и кнопка внутри неё были одного цвета — кнопка
   «Спросить в поддержке» исчезала на подложке, оставался только текст без
   границ, и нажимать было не на что видимое. */
.тихая {
  background: var(--слой-2);
  color: var(--текст);
  border: 0;
}
.карта .тихая,
.карта.воздух .тихая {
  background: var(--слой-3);
}
.тихая:active {
  transform: scale(0.985);
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--текст-тихо);
  text-transform: none;
  letter-spacing: 0;
}

input,
textarea,
select {
  width: 100%;
  padding: 16px;
  background: var(--слой-1);
  border: 0;
  border-radius: var(--р-плашки);
  color: var(--текст);
  font: inherit;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}
input::placeholder,
textarea::placeholder {
  color: var(--текст-тихо);
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--деньги);
  outline-offset: 1px;
}
textarea {
  resize: vertical;
  min-height: 88px;
}

.поле {
  margin-bottom: 14px;
}

/* Переключатель, который говорит ДЕЙСТВИЕМ, а не состоянием.
   🔴 `width: 100%` ОБЯЗАТЕЛЕН: у `<button>` ширина по содержимому даже
   когда он `display: flex` и стоит блоком — браузер считает кнопку
   замещаемым элементом. Три тумблера подряд выходили РАЗНОЙ ширины, и
   список читался как случайная россыпь. Видно только глазами. */
.тумблер {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  background: var(--слой-1);
  border: 0;
  border-radius: var(--р-плашки);
  margin-bottom: 10px;
  cursor: pointer;
}
.тумблер[aria-pressed="true"] {
  background: #3d2415;
}
.тумблер .что {
  font-weight: 600;
  color: var(--текст);
  text-align: left;
}
.тумблер .цена {
  font-size: 12.5px;
  color: var(--текст-тихо);
  display: block;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.тумблер[aria-pressed="true"] .цена {
  color: var(--деньги);
}
.галка {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--слой-3);
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 13px;
}
.тумблер[aria-pressed="true"] .галка {
  background: var(--деньги);
  color: var(--на-деньгах);
}

/* ── ПЕРЕПИСКА ПОДДЕРЖКИ — ЛЕНТА, А НЕ ПОЛОТНО ────────────────────────────
   🔴 Его слова: «мне че каждый раз вверх листать в переписке с админом??»
   Свежее ВСЕГДА внизу.

   🔴 У ЛЕНТЫ ЕСТЬ ЗАПАС СНИЗУ — ИНАЧЕ СВЕЖЕЕ ЧИТАТЬ НЕЧЕМ. Круг 3
   промерил: самый свежий пузырь занимал 761–844, а форма письма 712–772 и
   рейка 784–844 накрывали его на 71 пиксель из 83. */
.лента {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
  padding-bottom: calc(var(--низ-панели) + 76px);
}
.пузырь {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 21px;
  font-size: 14.5px;
  line-height: 1.42;
  white-space: pre-wrap;
  word-break: break-word;
}
.пузырь.мой {
  align-self: flex-end;
  background: var(--деньги);
  color: var(--на-деньгах);
  border-bottom-right-radius: 7px;
  font-weight: 500;
}
.пузырь.их {
  align-self: flex-start;
  background: var(--слой-1);
  color: var(--текст);
  border-bottom-left-radius: 7px;
}
.пузырь.служебный {
  align-self: center;
  background: transparent;
  color: var(--текст-тихо);
  font-size: 12px;
  text-align: center;
  padding: 4px 0;
}
/* 🔴 ВРЕМЯ В СВОЁМ ПУЗЫРЕ БЫЛО НЕЧИТАЕМО — 3,66:1 при 10 px. Пересчитано
   по каждому шагу прозрачности: 0,65 → 3,66; 0,75 → 4,50 (ровно на грани);
   0,85 → 5,42. Берём 0,85 и 11 px. */
.когда {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.85;
}

/* Три точки «печатает» — движение объясняет ожидание. */
.печатает {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 15px 16px;
  background: var(--слой-1);
  border-radius: 21px;
  border-bottom-left-radius: 7px;
}
.печатает i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--текст-тихо);
  animation: прыг 1.3s infinite;
}
.печатает i:nth-child(2) {
  animation-delay: 0.18s;
}
.печатает i:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes прыг {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* 🔴 ЗАПИСЬ ЭКРАНА — ЭТО ДОКАЗАТЕЛЬСТВО, А НЕ ВЛОЖЕНИЕ. У неё карточка с
   кадром: человек обязан УВИДЕТЬ, что уехало именно то. По этой записи
   разбирается спор о просмотрах (§39.3). */
.запись {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: var(--слой-1);
  border-radius: var(--р-карты);
  padding: 16px;
}
.запись-верх {
  display: flex;
  align-items: center;
  gap: 13px;
}
.запись-кадр {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--слой-2);
}
.запись-кадр img,
.запись-кадр video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ход {
  height: 6px;
  border-radius: var(--р-пилюли);
  background: var(--слой-3);
  overflow: hidden;
}
.ход i {
  display: block;
  height: 100%;
  border-radius: var(--р-пилюли);
  background: var(--деньги);
  transition: width 0.25s ease;
}

.написать {
  position: sticky;
  /* Запас над панелью — 14, а не 8: на живом экране кнопка отправки
     заезжала на рейку углом, и касание попадало то по одной, то по другой. */
  bottom: calc(var(--низ-панели) + 14px);
  display: flex;
  gap: 9px;
  align-items: flex-end;
  padding: 0;
  background: transparent;
  border: 0;
}
/* 🔴 РАЗГОВОР ЗАНИМАЕТ ЭКРАН, А ПОЛЕ СТОИТ ВНИЗУ.
   Найдено рядом с правкой поля: при трёх сообщениях `position: sticky` не
   держал ничего — прижиматься было не к чему, высота `main` равнялась
   высоте содержимого. Поле висело посреди чёрной пустоты, а под ним
   оставалось четыреста пустых точек.

   `svh`, а не `dvh`: `dvh` меняется, когда браузер прячет адресную строку,
   и страница на телефоне дёргается. `svh` — наименьшая высота, она
   постоянна. 72 — шапка, 82 — рейка внизу, 24 — воздух над ней. */
main[data-наэкране="поддержка"] {
  display: flex;
  flex-direction: column;
  /* Высота до самого низа окна (72 — шапка), а НЕ до низа содержимого. */
  min-height: calc(100svh - 72px);
  /* Свой отступ снизу вместо общего: он обязан совпасть с тем, на котором
     стоит липкое поле, иначе между полем и рейкой остаётся дыра. Общий
     отступ у main на 24 точки больше — из-за него дыра и была. */
  padding-bottom: calc(var(--низ-панели) + env(safe-area-inset-bottom, 0px) + 14px);
}
main[data-наэкране="поддержка"] .написать {
  margin-top: auto;
}

/* 🔴 ПОЛЕ РАСТЁТ САМО, А НЕ ТЯНЕТСЯ ЗА УГОЛОК.
   Общее правило `textarea { resize: vertical }` доставало и сюда, и в углу
   поля висел серый уголок-расширитель. В ленте переписки он лишний вдвойне:
   таскать поле руками никто не будет, а из вида он выбивается — это
   единственная деталь экрана, нарисованная не нами, а браузером.
   Высоту ведёт `подогнатьПоле` в app.js; здесь только потолок и рамки. */
.написать textarea {
  min-height: 48px;
  max-height: 132px;
  height: 48px;
  border: 0;
  background: var(--слой-1);
  border-radius: 24px;
  padding: 14px 18px;
  resize: none;
  overflow-y: auto;
  /* Скруглить по высоте строки, а не по прямоугольнику: пока текст в одну
     строку, поле остаётся пилюлей, как кнопки рядом. */
  line-height: 20px;
  scrollbar-width: thin;
}
.написать .скрепка {
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  background: var(--слой-1);
  color: var(--текст-2);
  display: grid;
  place-items: center;
}
.написать .скрепка svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.написать .шлём {
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  background: var(--деньги);
  color: var(--на-деньгах);
  display: grid;
  place-items: center;
}
.написать .шлём svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.написать .шлём:disabled {
  background: var(--слой-2);
  color: var(--текст-тихо);
}

/* ── НИЖНЯЯ ПАНЕЛЬ: плавающая пилюля, активный — ЗАЛИТЫЙ КРУГ ─────────── */
.панель {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  height: 66px;
  max-width: 612px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  /* 🔴 ФОН НЕПРОЗРАЧНЫЙ, И ЭТО ПОЧИНКА ПО ЖИВОМУ ЭКРАНУ.
     Прозрачная плёнка с размытием выглядела нарядно на макете, где под
     телефоном была светлая доска, — а на настоящем ЧЁРНОМ фоне панель
     слилась с ним начисто: он это и увидел первым делом. Размытие
     оставлено, но поверх плотной подложки: там, где под панель заезжает
     список, оно даёт глубину, а не спасает читаемость. */
  background: #1c1c20;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 8px 30px -10px #000;
  border-radius: var(--р-пилюли);
  border: 0;
  padding: 0;
}
.панель button {
  background: none;
  border-radius: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--текст-тихо);
  position: relative;
}
.панель button .гнездо {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.панель button svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Активный значок — ЗАЛИТЫЙ: у обоих референсов активная вкладка это
   сплошной круг, а не подкрашенная линия. Два готовых значка в разметке, а
   не подмена цвета у одного: залитая форма читается боковым зрением, а
   подкрашенная линия на цветном круге теряется. */
.панель button[aria-current="page"] .гнездо {
  background: var(--деньги);
  color: var(--на-деньгах);
}
.панель button .зал {
  display: none;
  fill: currentColor;
  stroke: none;
}
.панель button[aria-current="page"] .лин {
  display: none;
}
.панель button[aria-current="page"] .зал {
  display: block;
}
/* Точка непрочитанного на вкладке. Ставится СПРАВА СВЕРХУ от гнезда. */
.панель button .метка-вкладки {
  position: absolute;
  top: 9px;
  left: 50%;
  margin-left: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--отказ);
  border: 2.5px solid #131315;
}

/* ── ШТОРКА-МЕНЮ (три полоски) ───────────────────────────────────────────
   То, что нужно, но не заслуживает места в пяти вкладках: реквизиты,
   сотрудничество, материалы, профиль, уведомления, правила.

   Открывается СЛЕВА, как в референсе. Затемнение — не украшение: без него
   шторка читается как ещё один экран, и человек не понимает, что позади
   осталось прежнее место. */
.шторка-фон {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.шторка-фон.открыта {
  opacity: 1;
  pointer-events: auto;
}
.шторка {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 31;
  width: min(310px, 84vw);
  background: var(--слой-1);
  border-radius: 0 26px 26px 0;
  transform: translateX(-102%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  padding: max(18px, env(safe-area-inset-top, 0px)) 0
    max(18px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.шторка.открыта {
  transform: translateX(0);
}
.шторка-шапка {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 18px;
}
.шторка-шапка .привет b {
  font-size: 17px;
}
.пункт-меню {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 18px;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-weight: 500;
  color: var(--текст);
  text-align: left;
  cursor: pointer;
}
.пункт-меню:active {
  background: var(--слой-2);
}
.пункт-меню .кружок {
  width: 36px;
  height: 36px;
}
.пункт-меню .кружок svg {
  width: 18px;
  height: 18px;
}
.пункт-меню .подпись {
  flex: 1;
  min-width: 0;
}
.пункт-меню .подпись b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.пункт-меню .подпись small {
  display: block;
  font-size: 12.5px;
  color: var(--текст-тихо);
}
.шторка-низ {
  margin-top: auto;
  padding: 16px 18px 0;
  color: var(--текст-тихо);
  font-size: 12.5px;
}

/* ── ПУСТО, ОШИБКИ, МЕЛОЧИ ─────────────────────────────────────────────── */
.пусто {
  text-align: center;
  padding: 38px 18px;
  color: var(--текст-тихо);
}
.пусто .круг-пусто {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: var(--слой-1);
  display: grid;
  place-items: center;
  color: var(--текст-тихо);
}
.пусто .круг-пусто svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.пусто strong {
  display: block;
  color: var(--текст);
  font-size: 16px;
  margin-bottom: 6px;
}

.беда {
  background: #3a1620;
  color: #ffd7dd;
  border: 0;
  border-radius: var(--р-плашки);
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 14px;
}

.подсказка {
  color: var(--текст-тихо);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 8px 0 0;
}

.ряд {
  display: flex;
  gap: 8px;
}
.ряд > * {
  flex: 1;
}

a {
  color: var(--деньги);
  text-decoration: none;
}

/* Движение — только там, где оно объясняет. Появление ленты снизу вверх
   повторяет то, как приходит сообщение. */
@keyframes всплыть {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.карта,
.карта-денег,
.пузырь {
  animation: всплыть 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── АКЦИИ ──────────────────────────────────────────────────────────────
   Акция — единственное место, где мы что-то ПРЕДЛАГАЕМ, а не отчитываемся.
   Поэтому у неё карточка цвета денег: это и есть «снимите вот так, и будет
   больше». */
.карта.акции {
  padding: 0;
  background: none;
  margin-bottom: 12px;
  overflow: visible;
}
.акция {
  background: var(--деньги);
  color: var(--на-деньгах);
  border-radius: var(--р-карты);
  padding: 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.акция:last-child {
  margin-bottom: 0;
}
.акция-шапка {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.акция-выгода {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.акция-имя {
  font-weight: 600;
  font-size: 14.5px;
  opacity: 0.75;
}
.акция-текст {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.75;
}
.акция-срок {
  margin: 6px 0 0;
  font-size: 12.5px;
  opacity: 0.62;
}

/* ── ЖИВОЙ РАСЧЁТ ПОД ФОРМОЙ ПОДАЧИ ──────────────────────────────────────
   🔴 Это ответ на главный вопрос человека — «сколько мне заплатят», — и
   потому выглядит как ответ, а не как подсказка: сумма крупная, разбор
   мелкий и тихий под ней. */
.подсказка.расчёт-готов {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: var(--р-карты);
  background: var(--слой-1);
  border: 0;
  color: var(--текст-2);
}
.расчёт-сумма {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--текст);
  font-variant-numeric: tabular-nums;
}
.расчёт-сноска {
  font-size: 12.5px;
  color: var(--текст-тихо);
}
/* Разбор — то, чем человек пересчитает сумму на калькуляторе и убедится,
   что мы не выдумали её. */
.расчёт-разбор {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--текст-тихо);
}
.расчёт-разбор .ступень {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.расчёт-разбор .ступень b {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--текст);
}

/* Клетки под карточкой заявки: ставка · акция · сумма. */
.клетки {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.клетка {
  /* 🔴 Одна клетка не растягивается во всю строку: «Выйдет
     $25 200.00» на всю ширину читается как отдельный блок, а не как одно
     из чисел. Растут они только когда их несколько. */
  flex: 0 1 auto;
  min-width: 96px;
  background: var(--слой-2);
  border-radius: 14px;
  padding: 11px 12px;
  min-width: 0;
}
.клетка small {
  display: block;
  color: var(--текст-тихо);
  font-size: 11.5px;
}
.клетка b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Строка сводки «название — сумма» внутри карточки (dl). Осталась там, где
   столбец нужен для пересчёта калькулятором. */
.строка {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.строка:last-child {
  border-bottom: 0;
}
.строка dt {
  color: var(--текст-тихо);
  font-size: 13.5px;
}
.строка dd {
  margin: 0;
  font-weight: 700;
  color: var(--текст);
  font-variant-numeric: tabular-nums;
}
/* Пояснение прямо под названием строки, а не отдельным абзацем внизу. */
.строка.остаток dt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.остаток-почему {
  font-size: 11px;
  line-height: 1.4;
  color: var(--текст-тихо);
  max-width: 26ch;
}

/* Примета ролика: площадка, день и ссылка. Ссылка обязана переноситься —
   адреса длиннее экрана, и без переноса карточка разъезжается вбок. */
.примета {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--текст-тихо);
}
.примета a {
  overflow-wrap: anywhere;
  color: var(--текст-2);
}

/* Метка только для чтения с экрана: поле без метки читается как «правка
   текста», и человек не знает, куда пишет. Прятать через `display:none`
   нельзя — тогда её не прочтёт и читалка. */
.невидимка {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Сколько дойдёт после комиссии — зелёным, когда сумма годится, и красным,
   когда ниже порога: ответ на «нажимать или нет» ДО нажатия. */
#дойдёт.дойдёт-готово {
  color: var(--зачтено);
}
#дойдёт.дойдёт-мало {
  color: var(--отказ);
}

/* ── СТОЛБЧАТЫЙ ГРАФИК ЗАРАБОТКА ────────────────────────────────────────
   Выделенный столбец с биркой — приём второго референса. Столбец метит
   САМЫЙ ДОРОГОЙ день, а не последний: человек ищет глазами свой лучший
   результат, а не хронологию. */
.график {
  padding: 18px 16px 14px;
}
.график .сумма-графика {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.график .рост {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--зачтено);
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}
.график .рост.вниз {
  color: var(--текст-тихо);
}
.график .рост svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.столбцы {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 108px;
  margin-top: 26px;
}
.столб {
  flex: 1;
  background: var(--слой-2);
  border-radius: 7px;
  position: relative;
  /* 🔴 ПУСТОЙ ДЕНЬ ВИДЕН. При 4 пикселях столбец нулевого дня
     сливался с фоном, и неделя из одного заработка выглядела как один
     столбец в пустоте — то есть график не читался как неделя вовсе. */
  min-height: 8px;
}
.столб.жив {
  background: var(--деньги);
}
.бирка {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: var(--текст);
  color: #0a0a0c;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--р-пилюли);
  padding: 4px 9px;
  white-space: nowrap;
}
/* Крайние бирки прижимаются к своему краю: по центру они вылезают за
   карточку и обрезаются. Модификаторы идут ПОСЛЕ основного правила —
   иначе основное перебьёт их обратно на центр. */
.бирка.слева {
  left: 0;
  transform: none;
}
.бирка.справа {
  left: auto;
  right: 0;
  transform: none;
}
.дни {
  display: flex;
  justify-content: space-between;
  color: var(--текст-тихо);
  font-size: 11.5px;
  margin-top: 10px;
}
.дни span {
  flex: 1;
  text-align: center;
}

/* ── КРУПНЫЙ ВВОД СУММЫ ────────────────────────────────────────────────── */
.сумма-ввод {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.045em;
  padding: 14px 0 6px;
}
.сумма-ввод input {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  width: 100%;
  outline: 0;
}
.сумма-ввод input:focus {
  outline: 0;
}


/* ── ЭКРАН ВЫВОДА ───────────────────────────────────────────────────────
   🔴 Всё, что здесь есть, нарисовано НАМИ. Его слова 26.08: «у нас
   даже там селект дефолт браузерный когда все должно быть кастомное и
   красивое». Браузерных органов на экране, где человек забирает свои
   деньги, быть не должно ни одного: они выглядят чужими ровно там, где
   доверие важнее всего. */

/* Подпись группы — та же роль, что у `label`, но группе `label` не
   положен: подписываем через `aria-labelledby`. */
.поле .подпись {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--текст-тихо);
}

/* Поле суммы: знак валюты слева, «Всё» справа, ввод посередине и крупный —
   это главное число экрана, и набирают его пальцем. */
.поле-суммы {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--слой-1);
  border-radius: var(--р-плашки);
  padding: 0 8px 0 16px;
}
.поле-суммы .знак {
  font-size: 26px;
  font-weight: 800;
  color: var(--текст-тихо);
  line-height: 1;
}
.поле-суммы input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 16px 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.поле-суммы input:focus {
  outline: none;
}
/* Обод рисует ВСЁ поле целиком, а не одну его середину: иначе рамка
   обрезает знак валюты и кнопку, и поле разваливается на три предмета. */
.поле-суммы:focus-within {
  outline: 2px solid var(--деньги);
  outline-offset: 1px;
}
.поле-суммы .всё {
  flex: none;
  border: 0;
  background: var(--слой-3);
  color: var(--текст);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.поле-суммы .всё:active {
  transform: scale(0.95);
}

/* Ссылка на правила — одна на всё приложение (§61). Тихая строка, но
   настоящая кнопка: по ней целятся пальцем, значит ей нужна высота. */
.ссылка-правила {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--слой-1);
  border: 0;
  border-radius: var(--р-плашки);
  color: var(--текст-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.ссылка-правила .знак {
  display: grid;
  place-items: center;
  color: var(--деньги);
}
.ссылка-правила .знак svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ссылка-правила .слова {
  flex: 1;
  min-width: 0;
}
.ссылка-правила .стрелка {
  display: grid;
  place-items: center;
  color: var(--текст-тихо);
}
.ссылка-правила .стрелка svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ссылка-правила:active {
  background: var(--слой-2);
}