:root {
  color-scheme: dark;
  --page-bg: #000000;
  --app-bg: #18191b;
  --panel: #2b2c30;
  --sky-badge: #3a3b41;
  --home-sky: #4d8fda;
  --home-sky-soft: #5aa2dd;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.58);
  --accent: var(--tg-theme-button-color, var(--tg-theme-link-color, #d86bff));
  --line: rgba(255, 255, 255, 0.16);
  --action-link-size: 17px;
  --action-link-gap: 7px;
  --action-link-arrow-width: 8px;
  --action-link-arrow-height: 13px;
  --action-link-arrow-stroke: 1.7;
  --action-link-arrow-y: 1px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

button,
input,
select {
  font: inherit;
  touch-action: manipulation;
}

button {
  border: 0;
  color: inherit;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  padding: 0 18px;
  background: var(--app-bg);
  overflow: visible;
}

.tab-screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 116px);
  overflow: visible;
}

.tab-screen.is-active {
  display: block;
}

.tab-screen--search {
  margin: 0 -18px;
  padding: 0 18px calc(env(safe-area-inset-bottom) + 116px);
  background: var(--app-bg);
}

.tab-screen--page {
  padding-top: 74px;
}

.delivery-scroll {
  padding-top: 46px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 116px);
}

.tab-screen--orders {
  padding-top: 14px;
}

.hero-section {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 -18px;
  padding-right: 18px;
  padding-left: 18px;
  padding-top: 46px;
  padding-bottom: 42px;
  background: linear-gradient(180deg, #2f74d6 0%, var(--home-sky) 35%, var(--home-sky) 100%);
}

.hero-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -144px;
  left: 0;
  z-index: 0;
  height: 320px;
  background:
    linear-gradient(
      180deg,
      var(--home-sky) 0%,
      var(--home-sky-soft) 42%,
      #3f95df 68%,
      var(--app-bg) 94%,
      var(--app-bg) 100%
    );
  pointer-events: none;
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

/* Ростом с кнопкой «Сравнить» напротив: два элемента в одной строке экрана
   должны быть одной высоты, иначе один читается как ошибка. */
.home-menu-button {
  position: absolute;
  top: 2px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  /* Контур тот же, что у «Сравнить»: ровный по всему кольцу, светлый, в одну
     точку. Перелив пробовался и снят вместе с ним у кнопки — свет с одной
     стороны на круге читается бликом, а не границей. Под контуром белый слой —
     он и виден в прорези фигурки, поэтому заменить его на цвет подложки
     нельзя, а рисовать под кольцом он не должен: `padding-box`. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.78) padding-box;
  -webkit-tap-highlight-color: transparent;
}

.home-menu-button svg {
  /* Во всю внутреннюю площадь: рамка занимает точку, и фигурка должна лечь
     ровно под неё, без белого зазора между диском и кольцом. */
  width: 100%;
  height: 100%;
  /* Тёмный диск с прорезями: фигурку рисует не заливка, а дырки в ней —
     сквозь них виден белый слой кнопки. Поэтому здесь именно `fill`, а не цвет
     фона, и менять его на прозрачный нельзя: диск исчезнет вместе с фигуркой.
     Раньше тон был общим с кнопкой «Сравнить» напротив; она с тех пор стала
     уплотнением неба и своего цвета не имеет — связь разорвана осознанно. */
  fill: var(--sky-badge);
}

.home-agent-badge {
  position: absolute;
  /* Пузырь ниже кружка меню на 4 точки, поэтому опущен на 2: середины обоих
     оказываются на одной линии, и верх экрана читается ровным. */
  top: 2px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 11px;
  border-radius: 17px;
  /* Уплотнённое небо, а не краска поверх него: кнопка ровно на 16% темнее
     того, что под ней. Ориентир — мини-приложение Mira, где таблетка наверху
     гуще фона, а не светлее; там это и создаёт зону.

     Осветление пробовалось во всех видах — белая вуаль, сиреневая, свой цвет
     заливки — и всякий раз давало обратное: светлое пятно на светлом небе
     размывалось, а не отделялось. Направление важнее оттенка.

     Ни один цвет здесь не задан числом, только плотность. Поэтому кнопка не
     разъедется, если мы тронем градиент фона, и не зависит от темы Telegram —
     на этом уже обожглись, см. правило 19 в RULES.md. */
  border: 0;
  background: rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  /* Волосяной светлый контур — как в референсе. Он не спорит с уплотнением:
     уплотняется вся плоскость, а контур очерчивает край, и именно от него
     кнопка читается чёткой, а не расплывшейся. Падающей тени нет. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1;
  /* 600, не 700: жирное начертание спорило с заголовком «Что найдем?». */
  font-weight: 600;
}

/* Браузер центрирует не буквы, а строку целиком — вместе с пустым местом,
   которое шрифт держит под хвостики. Из-за этого слово садится ниже середины:
   замер до правки — сверху над буквами 14,4 точки, снизу 9,1. Поднимаем. */
.home-agent-badge span {
  transform: translateY(-1.3px);
}

/* Стрелка выровнена по полосе слова — от верха прописной «С» до базовой линии.
   Замер при 17px/600: верх прописной 10,58, база 21,97 от верха пузыря, центр
   полосы 15,83. Стрелка встаёт в 10,58…21,07 — внутри полосы, по её центру.

   Привязка к строчной букве пробовалась и отвергнута: слово начинается с
   прописной и читается по ней, поэтому стрелка на высоте «н» повисала внизу.
   Центрирование по коробке строки — тоже мимо: коробка включает пустое место
   под хвостики, и стрелка садилась между строчными и прописными.

   Высота в CSS больше рисованной: viewBox 12 единиц, линия занимает 9, плюс
   половина обводки с каждой стороны. Пропорция 7,43 × 11,15 повторяет viewBox
   8 × 12 — иначе неравномерный масштаб делает обводку разной по осям.

   Обводка 2,3 единицы — это 2,14 точки на экране, вровень со стволом буквы при
   начертании 600. Прозрачности нет: стрелка часть слова, а не тень от него. */
.home-agent-badge svg {
  width: 7.43px;
  height: 11.15px;
  margin-left: 6px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transform: translateY(-1.17px);
}

.hero-section h1 {
  margin: 54px 0 10px;
  text-align: center;
  font-size: clamp(30px, 7.8vw, 38px);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 650;
}

/* Заголовок, ссылка и строка поиска опущены к карточке. Сдвиг именно
   относительный: он не занимает места, поэтому синий блок не становится выше.
   Прибавка отступа сверху была бы проще, но она растит блок, а к его нижнему
   краю привязан шлейф затемнения (`.hero-section::after`, `bottom: -144px`) —
   стык синего с тёмным уехал бы вниз вместе с ним. Проверено на себе однажды.

   Верхнюю строку — кружок меню и «Сравнить» — не задевает: они стоят на
   абсолютных координатах и живут отдельно от этого потока. */
.hero-section h1,
.hero-section .how-link,
.hero-section .search-form {
  position: relative;
  top: 7px;
}

.search-form {
  position: relative;
  width: min(92%, 344px);
  transition: width 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.search-form:focus-within {
  width: min(100%, 368px);
}

.search-form input {
  width: 100%;
  height: 52px;
  padding: 0 66px 0 20px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(236, 250, 255, 0.72);
  border-radius: 999px;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-form input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(236, 250, 255, 0.85);
}

.search-form input::placeholder {
  color: rgba(255, 255, 255, 0.46);
}

.send-button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 42px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

.send-button svg {
  width: 24px;
  height: 24px;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.search-form.has-query .send-button {
  background: var(--tg-theme-button-color, var(--tg-theme-link-color, var(--accent)));
}

.search-form.has-query .send-button svg {
  stroke: var(--tg-theme-button-text-color, #ffffff);
}

.how-link {
  display: inline-flex;
  align-items: center;
  gap: var(--action-link-gap);
  margin-top: 12px;
  padding: 0;
  color: var(--tg-theme-link-color, var(--accent));
  background: transparent;
  font-size: var(--action-link-size);
  line-height: 1;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.hero-section .how-link {
  margin: 0 0 52px;
  color: rgba(120, 248, 255, 0.82);
  font-size: 15px;
}

.hero-section .how-link:active {
  background: transparent;
}

.how-link svg {
  width: var(--action-link-arrow-width);
  height: var(--action-link-arrow-height);
  margin-right: calc((var(--action-link-arrow-width) + var(--action-link-gap)) * -1);
  overflow: visible;
  stroke: currentColor;
  stroke-width: var(--action-link-arrow-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transform: translateY(var(--action-link-arrow-y));
}

.main-section {
  position: relative;
  z-index: 2;
  /* Карточки подтянуты к строке ввода. Поднимать их можно ТОЛЬКО этим
     отступом: нижнее поле синего блока трогать нельзя — к нему привязан шлейф
     затемнения (`.hero-section::after`, `bottom: -144px`), и стык синего с
     тёмным уезжает вместе с полем. Проверено на себе: сдвинул поле — стык ушёл
     на 21 пиксель вверх. Величина подобрана так, чтобы разделительная линия
     внутри главной карточки легла ровно на этот стык. */
  margin-top: -13px;
}

.placeholder-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 180px;
  padding: 0;
  background: var(--panel);
  border-radius: 28px;
}

.placeholder-card__body {
  width: 100%;
  padding: 12px 28px 12px 16px;
}

.placeholder-card__eyebrow {
  margin: 0 0 7px;
  /* Единственный тёплый акцент на экране, и взят он не со стороны: это конец
     градиента у карточки дохода. Системный цвет здесь не годится — им набраны
     действия, а это рубрика. */
  color: #e0561f;
  /* Именно `ui-rounded`, а не имя шрифта: Apple не отдаёт странице системные
     шрифты по названию, и «SF Pro Rounded» молча падало в обычный. Ключевое
     слово — это запрос «дай свой округлый», и на него WebKit отвечает. */
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 720;
}

.placeholder-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.12;
  font-weight: 800;
}

.placeholder-card__text {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.24;
  font-weight: 500;
}

.placeholder-card__more {
  appearance: none;
  width: calc(100% - 32px);
  min-height: 42px;
  margin: 0 16px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  /* Системный цвет клиента — тот же, что у остальных действий приложения:
     «Добавить», «Скрыть», соглашение. Серым набирают подпись, а не действие. */
  color: var(--tg-theme-link-color, var(--accent));
  font: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 580;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease;
}

.placeholder-card__more:active {
  background: transparent;
  opacity: 0.72;
}

.business-categories {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.business-categories h2 {
  margin: 0;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
}

.business-categories__card {
  display: grid;
  padding: 0 18px;
  border-radius: 28px;
  background: var(--panel);
}

.business-categories__card + .business-categories__card {
  margin-top: 2px;
}

.business-categories__item {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 64px;
  align-content: center;
  padding: 12px 0;
}

.business-categories__item--featured {
  padding-left: 54px;
}

/* Same disc as the payment links carry: a white drawing whose own lines are
   cut in the colour of the disc under it. */
.business-categories__icon {
  position: absolute;
  top: 50%;
  left: 0;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3fd6ea, #2f5fd6);
  object-fit: contain;
  transform: translateY(-50%);
}

/* В наборе иконок у каждой свой цвет: синий у автозапчастей, зелёный у оплаты,
   сиреневый у обмена. Доход — золотой: он единственный тёплый на экране, и
   карточка, которую нужно заметить, перебивает соседей вниманием. */
/* Доставка — бирюзовый: синий уже занят автозапчастями, зелёный оплатой,
   золотой доходом. Иконка временная, владелец подберёт свою. */
.business-categories__icon--delivery {
  background: linear-gradient(145deg, #7fe05f, #1f9e8e);
}

.business-categories__icon--income {
  background: linear-gradient(145deg, #ffd23f, #e0561f);
}

.business-categories__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.business-categories__item strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.08;
  font-weight: 620;
}

/* Ставка стоит рядом с названием и набрана округлым — тем же, что «Поиск» и
   кнопка «Сравни». Цвет тот же, что у заголовка: цифра не должна выглядеть
   нажимаемой, сиреневым в приложении помечено только то, что жмётся. */
.business-categories__percent {
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-style: normal;
}

.business-categories__item span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
  line-height: 1.24;
  font-weight: 420;
}

.home-faq {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.home-faq h2 {
  margin: 0;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
}

.home-faq__card {
  display: grid;
  padding: 6px 18px 10px;
  border-radius: 28px;
  background: var(--panel);
}

.home-faq__item {
  position: relative;
}

.home-faq__item + .home-faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-faq__item summary {
  position: relative;
  min-height: 52px;
  padding: 12px 22px 12px 0;
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 15px;
  line-height: 1.16;
  font-weight: 620;
  list-style: none;
  cursor: pointer;
}

.home-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Та же стрелка, что в карточках «Доставка» и «Доход», но повёрнутая вниз.
   Раньше здесь был уголок из двух рамок под 45°: приём другой, и размер
   получался другой — по диагонали 14 точек против 11 у настоящей стрелки.
   Единственное место в приложении, где стрелка рисовалась не как везде.

   Вниз, а не вправо, хотя правка началась именно с «как в карточках». Вправо в
   этом приложении означает «уведёт в другое место» — так у «Доставки»,
   «Дохода», «Как это работает». Пункт FAQ никуда не уводит, он раскрывается
   здесь же, поэтому обещать переход нельзя. Совпадать должны размер и толщина,
   а не направление. */
.home-faq__arrow {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 8px;
  height: 12px;
  overflow: visible;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.16s ease;
}

.home-faq__arrow path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-faq__item[open] .home-faq__arrow {
  transform: translateY(-50%) rotate(-90deg);
}

.home-faq__item p {
  margin: -2px 0 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.34;
  font-weight: 430;
}

.amount-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 12px 0 42px;
}

.amount-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
}

.amount-row--delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  column-gap: 8px;
}

.amount-row--delivery .amount-value {
  grid-column: 2;
}

.amount-row--delivery .amount-currency {
  grid-column: 3;
  justify-self: start;
}

.amount-value {
  font-size: 52px;
  line-height: 1;
  font-weight: 560;
  letter-spacing: 0;
}

.amount-value--empty {
  color: var(--text);
}

.amount-currency {
  color: rgba(255, 255, 255, 0.58);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

.amount-note {
  min-height: 16px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
}

.delivery-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.42);
  visibility: visible;
  pointer-events: auto;
  transition: background-color 420ms ease, visibility 0s linear;
}

.delivery-sheet.hidden {
  background-color: rgba(0, 0, 0, 0);
  visibility: hidden;
  pointer-events: none;
  transition: background-color 420ms ease, visibility 0s linear 420ms;
}

.delivery-sheet__card {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 32px 44px max(30px, calc(env(safe-area-inset-bottom) + 28px));
  background: var(--panel);
  border-radius: 34px 34px 0 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.delivery-sheet.hidden .delivery-sheet__card {
  transform: translateY(100%);
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
}

/* Крестик — тот же знак «×», крупный и серый: рисованный линиями выходит
   жёстче и мельче, чем нужно. Кривым он выглядел не от разметки: чернила знака
   сидят ниже середины своей строки, поэтому знак поднят на 1.25 пикселя —
   величина подобрана замером: после сдвига центр чернил совпадает с центром
   кружка. */
.delivery-sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.82);
  font-size: 26px;
  line-height: 1;
}

.delivery-sheet__close span {
  display: block;
  transform: translateY(-1.25px);
}

.delivery-sheet__title {
  margin: 0 0 26px;
  color: var(--text);
  font-size: 23px;
  line-height: 1.05;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}

.delivery-sheet__copy {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.24;
  font-weight: 400;
  padding-left: 8px;
}

.delivery-sheet__copy p {
  margin: 0;
}

.delivery-sheet__copy strong {
  color: #ffffff;
  font-weight: 650;
}

/* «Как это работает» — сплошной текст, а не список коротких строк, поэтому он
   крупнее и просторнее: 17px при высоте строки 1.45 и 14 воздуха между абзацами.
   На условиях доставки шесть коротких пунктов, там плотность уместна. */
#howItWorksSheet .delivery-sheet__copy {
  gap: 14px;
  font-size: 17px;
  line-height: 1.45;
}

.delivery-sheet__action {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--action-link-gap);
  margin-top: 26px;
  padding: 0;
  background: transparent;
  color: var(--tg-theme-link-color, var(--accent));
  font-size: var(--action-link-size);
  line-height: 1;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

.delivery-sheet__action svg {
  width: var(--action-link-arrow-width);
  height: var(--action-link-arrow-height);
  margin-right: calc((var(--action-link-arrow-width) + var(--action-link-gap)) * -1);
  overflow: visible;
  stroke: currentColor;
  stroke-width: var(--action-link-arrow-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transform: translateY(var(--action-link-arrow-y));
}

.data-card {
  background: var(--panel);
  border-radius: 28px;
}

.payment-overview {
  display: grid;
  gap: 26px;
  margin-top: -58px;
}

.payment-section {
  display: grid;
  gap: 14px;
}

.payment-orders-list {
  display: grid;
  gap: 26px;
}

/* Unpaid orders come in two kinds - goods and delivery - so each kind is a
   titled group whose rows are joined into one panel, split by hairlines. */
.payment-group {
  display: grid;
  gap: 14px;
}

/* The group heading speaks in the same voice as `Всего` above it, and holds
   the group's own total on the right. */
.payment-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 0;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 620;
}

.payment-group__title > span {
  white-space: nowrap;
}

/* The group total keeps to one line and moves under the heading rather than
   squeezing it, on the rare total long enough to need the room. */
.payment-group__total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  white-space: nowrap;
}

.payment-group__total em {
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  font-style: normal;
  font-weight: 440;
}

.payment-group__total strong {
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  font-weight: 520;
}

.payment-rows {
  display: grid;
  border-radius: 22px;
  overflow: hidden;
}

.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--panel);
}

.payment-row + .payment-row {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* The number is the way into that order, so it carries the system accent. */
/* Номер заказа и есть кнопка: он выделен акцентом, как все нажимаемые слова
   приложения, и крупнее обычного текста. Кнопке нужен сброс, а вертикальные
   отступы с равным отрицательным полем растят область касания, не сдвигая ни
   номер, ни сумму рядом. */
.payment-row__id {
  padding: 6px 0;
  margin: -6px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
  font-weight: 520;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.payment-row__id:active {
  opacity: 0.55;
}

.payment-row__sum {
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  font-weight: 440;
  white-space: nowrap;
}

/* Nothing owed in this group: the row keeps its place and carries the sum
   alone, held at the right where every other sum stands. Dimmed, so it reads
   as a place kept rather than a payment due. */
.payment-group--empty .payment-row {
  justify-content: flex-end;
}

.payment-group--empty .payment-row__sum,
.payment-group--empty .payment-group__total em,
.payment-group--empty .payment-group__total strong {
  color: rgba(255, 255, 255, 0.28);
}

.payment-exchange-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  margin-top: 6px;
  padding: 0 18px;
  border: 0;
  border-radius: 26px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

/* The links are a different subject from the debts above them, so they stand
   further off than the groups of the list stand from each other. */
.payment-action-list {
  display: grid;
  gap: 16px;
  /* 26px down from the last panel - the same step the home screen puts between
     a card and the next heading. The screen keeps one rhythm throughout: 14
     under a heading, 16 between rows, 26 between subjects. */
  margin-top: 0;
}

.payment-action-list .payment-exchange-link {
  margin-top: 0;
}

/* The exchange and the calculator are tools; the payment methods above them
   are the payment itself, so the heading starts below that row. Same voice as
   the group headings over the sums, and the home screen's own steps: 26 above
   the heading, 14 under it. */
.payment-tools-title {
  margin: 10px 0 -2px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 620;
}

/* Every row carries the same disc with a white drawing on it; only the stretch
   of the violet-to-blue ribbon changes. The drawing's own lines are cut in the
   colour of its disc, so the detail reads as a cut-out. */
.payment-exchange-link__disc {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.payment-exchange-link__disc img {
  width: 24px;
  height: 24px;
  display: block;
}

.payment-exchange-link__disc--methods {
  background: linear-gradient(145deg, #7fc93f, #1f9e6e);
}

.payment-exchange-link__disc--exchange {
  background: linear-gradient(145deg, #e05a7d, #8f4bd6);
}

.payment-exchange-link__disc--calculator {
  background: linear-gradient(145deg, #2fa39a, #3f6fd6);
}

.payment-exchange-link__copy {
  display: grid;
  gap: 4px;
  transform: translateY(-1px);
}

.payment-exchange-link__copy strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  font-weight: 580;
}

.payment-exchange-link__copy em {
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  font-weight: 420;
}

.payment-exchange-link__arrow {
  width: 8px;
  height: 12px;
  justify-self: end;
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-card {
  padding: 4px 16px;
  background: transparent;
}

.data-row {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  gap: 10px;
  justify-items: stretch;
}

.data-row span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 560;
}

.data-row:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: 0;
  left: -16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.data-row span {
  color: var(--text);
  font-size: 22px;
  font-weight: 560;
  white-space: nowrap;
}

.data-row select,
.data-row input {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 22px;
  line-height: 1;
  font-weight: 560;
  text-align: right;
  text-align-last: right;
}

.data-row input {
  font-size: 22px;
}

.data-row input::placeholder {
  color: transparent;
}

.data-row.has-value select,
.data-row.has-value input,
.data-row.is-focused select,
.data-row.is-focused input {
  padding-right: 0;
}

.data-row__chevron {
  display: none;
}

.data-row.has-value .data-row__chevron,
.data-row.is-focused .data-row__chevron {
  opacity: 0;
  pointer-events: none;
}

.orders-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 30px;
}

.orders-switch-button {
  padding: 6px 11px 7px;
  background: transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}

.orders-switch-button.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.orders-section {
  display: grid;
  gap: 14px;
}

.orders-section-title {
  margin: 0;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
}

.orders-empty {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.045);
  border: 0;
  border-radius: 32px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 22px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0;
}

.orders-list {
  display: grid;
  gap: 16px;
}

.order-docs-view {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 42px 0 calc(env(safe-area-inset-bottom) + 32px);
}

.home-menu-view.hidden,
.home-contacts-view.hidden,
.order-docs-view.hidden,
.delivery-calc-view.hidden,
.payment-methods-view.hidden,
.payment-exchange-view.hidden {
  display: none;
}

body.home-menu-open .tab-screen,
body.order-docs-open .tab-screen,
body.delivery-calc-open .tab-screen,
body.payment-methods-open .tab-screen,
body.payment-exchange-open .tab-screen,
body.income-open .tab-screen {
  display: none;
}

body.home-menu-open .bottom-tabs,
body.order-docs-open .bottom-tabs,
body.delivery-calc-open .bottom-tabs,
body.payment-methods-open .bottom-tabs,
body.payment-exchange-open .bottom-tabs,
body.income-open .bottom-tabs {
  pointer-events: none;
  transform: translateY(calc(100% + env(safe-area-inset-bottom) + 96px));
  transition-delay: 0ms;
}

.home-menu-view {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 calc(env(safe-area-inset-bottom) + 32px);
}

.home-shortcut-card {
  overflow: hidden;
  border-radius: 26px;
  background: var(--panel);
}

.home-shortcut-card.is-hidden {
  display: none;
}

.home-shortcut-card.is-hidden + .home-menu-groups .home-menu-group:first-child {
  margin-top: 0;
}

.home-shortcut-card__copy {
  padding: 18px 16px 16px;
}

.home-shortcut-card__copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 430;
  letter-spacing: 0;
}

.home-shortcut-card__action {
  display: block;
  width: calc(100% - 32px);
  height: 54px;
  margin: 0 16px;
  padding: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  text-align: left;
  font-size: var(--action-link-size);
  line-height: 1;
  font-weight: 520;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

.home-menu-groups {
  padding-bottom: 24px;
}

.home-menu-version {
  position: absolute;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  left: 0;
  margin: 0;
  color: rgba(241, 241, 239, 0.42);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
}

.home-menu-group {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.home-menu-group + .home-menu-group {
  margin-top: 16px;
}

.home-menu-group h2 {
  margin: 0;
  padding: 0 16px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
}

.home-menu-card {
  overflow: hidden;
  border-radius: 28px;
  background: var(--panel);
}

.home-menu-item {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 8px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.home-menu-item + .home-menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 1px;
  background: var(--line);
}

.home-menu-item--legal {
  grid-template-columns: minmax(0, 1fr);
}

.home-menu-item--legal + .home-menu-item--legal::before {
  left: 18px;
}

.home-menu-item--legal .home-menu-item__copy strong {
  color: var(--tg-theme-link-color, var(--accent));
  font-weight: 560;
}

.home-menu-item__copy {
  display: block;
  min-width: 0;
}

.home-menu-item__copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  font-size: 17px;
  line-height: 1.08;
  font-weight: 620;
}

.home-menu-item__arrow {
  width: 8px;
  height: 12px;
  overflow: visible;
}

.home-menu-item__arrow path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-contacts-view {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 42px 0 calc(env(safe-area-inset-bottom) + 32px);
}

.home-contacts-title {
  margin: 0 16px 22px;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
}

.home-contacts-card {
  background: transparent;
}

/* «О проекте» — сплошной текст, а не список строк, поэтому у него своя мера:
   ширина строки ограничена читаемой, между абзацами воздух больше межстрочного,
   цвет приглушён до того же, каким говорит вся спокойная часть приложения. */
.home-about-copy {
  display: grid;
  gap: 18px;
  margin: 0 16px;
  max-width: 42em;
}

.home-about-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

/* Документы длиннее «О проекте» и читаются по разделам, поэтому у них свои
   заголовки и более плотный шаг между абзацами внутри раздела. */
.legal-copy {
  gap: 10px;
  padding-bottom: 8px;
}

.legal-copy h3 {
  margin: 14px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 620;
}

.legal-copy h3:first-of-type {
  margin-top: 6px;
}

.legal-copy__meta {
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 14px !important;
}

.home-contacts-section {
  padding: 18px;
}

.home-contacts-section + .home-contacts-section {
  border-top: 1px solid var(--line);
}

.home-contacts-section h3 {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
}

.home-contact-row {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.home-contact-row + .home-contact-row {
  margin-top: 6px;
}

.home-contact-row--compact {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
}

.home-contact-row--moscow {
  grid-template-columns: 69px minmax(0, 1fr);
  gap: 10px;
}

.home-contact-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.home-contact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
}

.home-contact-icon svg {
  width: 20px;
  height: 20px;
}

.home-contact-icon svg path,
.home-contact-icon svg circle {
  vector-effect: non-scaling-stroke;
}

.home-contact-icon--wechat {
  background: #07c160;
}

.home-contact-icon--wechat svg path {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0.6;
}

.home-contact-icon--wechat svg circle {
  fill: #07c160;
  stroke: none;
}

.home-contact-icon--telegram {
  background: #2aabee;
}

.home-contact-icon--telegram svg path {
  fill: #ffffff;
  stroke: none;
}

.home-contact-icon--max {
  background: transparent;
}

.home-contact-icon--max img {
  display: block;
  width: 32px;
  height: 32px;
}

.home-contact-icon--phone {
  background: #34c759;
}

.home-contact-icon--location {
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.home-contact-icon--phone svg path,
.home-contact-icon--location svg path,
.home-contact-icon--location svg circle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-contact-value {
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 560;
  letter-spacing: 0;
  text-decoration: none;
}

.home-contact-row--address {
  grid-template-columns: 32px minmax(0, 1fr);
}

.payment-methods-view {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 42px 0 calc(env(safe-area-inset-bottom) + 94px);
}

.payment-methods-title {
  margin: 0 16px 22px;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  font-weight: 620;
}

.payment-methods-card {
  overflow: hidden;
  border-radius: 28px;
  background: var(--panel);
}

.payment-methods-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  font-weight: 560;
  text-align: left;
}

.payment-methods-option + .payment-methods-option::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 1px;
  background: var(--line);
}

.payment-methods-option__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: transparent;
  font-size: 15px;
  line-height: 1;
  font-weight: 720;
}

.payment-methods-option.is-selected .payment-methods-option__check {
  background: var(--accent);
  color: #ffffff;
}

.payment-methods-footer,
.payment-exchange-footer {
  position: fixed;
  right: 0;
  left: 0;
  bottom: -96px;
  z-index: 22;
  padding: 9px 18px calc(env(safe-area-inset-bottom) + 100px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.055);
  background: #242527;
}

.payment-methods-submit,
.payment-exchange-submit {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.28);
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
  text-align: center;
}

.payment-methods-submit:disabled,
.payment-exchange-submit:disabled {
  opacity: 1;
}

.payment-methods-submit.is-active,
.payment-exchange-submit.is-active {
  background: var(--accent);
  color: var(--text);
}

.payment-exchange-view {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 6px 0 calc(env(safe-area-inset-bottom) + 94px);
}

.payment-converter {
  display: grid;
  gap: 0;
}

.payment-converter-card {
  display: grid;
  gap: 4px;
  min-height: 138px;
  padding: 18px 4px 20px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.payment-converter-card + .payment-converter-card {
  margin-top: 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.payment-converter-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.payment-converter-card__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.payment-converter-card__label {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  font-weight: 560;
  white-space: nowrap;
}

.payment-converter-card__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  min-width: 0;
  min-height: 58px;
}

.payment-converter-card__currency {
  color: rgba(255, 255, 255, 0.46);
  font-size: 34px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.payment-converter-card__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.96);
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.payment-converter-card__icon--rub {
  background: linear-gradient(135deg, #57a3ff 0%, #2774f0 55%, #1557cf 100%);
}

.payment-converter-card__icon--cny {
  background: linear-gradient(135deg, #ff6464 0%, #f02f3b 54%, #c91020 100%);
}

.payment-converter-card__amount {
  display: block;
  width: 100%;
  min-width: 0;
  height: 58px;
  overflow: hidden;
  justify-self: stretch;
}

.payment-converter-card input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 42px;
  height: 58px;
  line-height: 58px;
  font-weight: 420;
  letter-spacing: 0;
  text-align: left;
}

.payment-converter-card input {
  appearance: none;
  outline: none;
  padding: 0;
}

.payment-converter-card input::placeholder {
  color: var(--text);
  opacity: 1;
}

.payment-converter-rate {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 72px);
  z-index: 21;
  display: grid;
  justify-items: center;
  padding: 0;
}

.payment-converter-rate__value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 7px;
  width: min(100%, 284px);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  font-weight: 440;
  letter-spacing: 0;
}

.payment-converter-rate__base {
  text-align: right;
}

.payment-converter-rate__sign {
  justify-self: center;
}

.payment-converter-rate__quote {
  text-align: left;
}

.delivery-calc-view {
  min-height: 100vh;
  min-height: 100dvh;
}

.order-docs-view__heading {
  display: grid;
  gap: 6px;
  margin: 0 0 30px;
  text-align: center;
}

.order-docs-view__order {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
}

.order-docs-view__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
}

.order-docs-list {
  display: grid;
  gap: 22px;
}

.order-docs-group {
  display: grid;
  gap: 14px;
}

.order-docs-group__title {
  margin: 0;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
}

.order-docs-group__files {
  display: grid;
  gap: 10px;
}

.order-docs-file {
  appearance: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 11px 14px;
  border-radius: 26px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

.order-docs-file__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(40, 139, 255, 0.14);
  color: #3f9cff;
}

.order-docs-file__icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-docs-file__name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.12;
  font-weight: 500;
}

.order-docs-file__content {
  display: block;
  min-width: 0;
}

.order-docs-file__meta {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 400;
}

/* The bottom padding is 4px because the last action row carries 12px of its
   own: together they match the 16px above the head, so the card sits even. */
.order-card {
  width: 100%;
  padding: 16px 18px 4px;
  background: var(--panel);
  border-radius: 28px;
  color: var(--text);
}

/* Карточка «Мой доход» на главной — та же карточка, что у категорий, но она
   нажимается, поэтому это кнопка: в webview Telegram обычный элемент съедает
   первое касание. */
/* Сброс для любой карточки-кнопки, а не только для дохода: без него браузер
   рисует её по-своему — текст встаёт по центру и ряд разъезжается. Правило
   писалось под одну карточку, и вторая тут же это вскрыла. */
button.business-categories__item {
  width: 100%;
  /* Место справа под стрелку: без него длинная подпись лезет ей под ноги. */
  padding-right: 18px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Стрелка та же, что у пунктов меню: это единственная карточка ряда, которая
   нажимается, и стрелка — то, чем приложение об этом говорит. */
.business-categories__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 12px;
  overflow: visible;
  transform: translateY(-50%);
}

.business-categories__arrow path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  line-height: 1;
  font-weight: 640;
}

.order-card__top strong {
  font-weight: inherit;
}

.order-card__id-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.order-card__created {
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

.order-card__status-block {
  display: grid;
  justify-items: end;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
  text-align: right;
}

/* The stage is set apart by its cut, not by colour. */
.order-card__status {
  font-size: 18px;
  line-height: 1;
  font-weight: 640;
  font-style: italic;
}

.order-card__status-date {
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

/* The first rule runs the full width of the card, out through its padding: it
   is not a separator between rows but the underline of the document's head -
   the order number and the stage it is at. */
.order-card__divider {
  width: calc(100% + 36px);
  height: 1px;
  margin: 12px -18px 0;
  background: rgba(255, 255, 255, 0.12);
}

/* The rules between the lines below stay inset, as separators should. */
.order-card__divider--info {
  width: calc(100% - 4px);
  margin-right: auto;
  margin-left: auto;
}

.order-card__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  padding: 12px 1px;
  font-size: 17px;
  line-height: 1;
  font-weight: 580;
  color: var(--text);
}

/* The sum carries the same weight and size it has on the payment rows: the
   figure leads, the label beside it stays quieter. */
.order-card__info-row span:last-child {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 19px;
  font-weight: 440;
}

.order-card__divider--info {
  margin-top: 6px;
}

/* Нажимается сам текст, а не вся ширина карточки: кнопка шириной в надпись
   стоит там же, где стояла, но случайное касание по пустому месту справа
   больше не открывает документы и не отправляет вопрос менеджеру. */
.order-card__action-row {
  appearance: none;
  display: flex;
  align-items: center;
  justify-self: start;
  width: auto;
  border: 0;
  background: transparent;
  color: var(--tg-theme-link-color, var(--accent));
  margin-top: 6px;
  padding: 12px 1px;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  font-weight: 580;
  letter-spacing: 0;
  text-align: left;
}

/* No rules divide the actions any more, so they close up into one group: 25px
   between their texts against the 37px the data rows keep across a rule. */
.order-card__action-row + .order-card__action-row {
  margin-top: 1px;
}

.order-card--completed .order-card__top,
.order-card--completed .order-card__divider,
.order-card--completed .order-card__info-row,
.order-card--completed .order-card__created,
.order-card--completed .order-card__status-date,
.order-card--completed .order-card__action-row:disabled {
  opacity: 0.36;
}

.order-card__action-row:disabled {
  pointer-events: none;
}

.bottom-tabs {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: calc(env(safe-area-inset-bottom) + 5px);
  z-index: 20;
  /* The bar is as wide as its buttons, not as wide as the screen: a button
     keeps the 80px it had when there were four of them, and the panel shrinks
     around however many are left. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80px;
  align-items: center;
  width: fit-content;
  max-width: 382px;
  height: 68px;
  margin: 0 auto;
  padding: 3px;
  background: rgba(36, 37, 41, 0.86);
  /* Кромка светлее, чем была (0,13): панель лежит на тёмном экране и без
     заметной границы читалась куском фона, а не предметом. Тот же приём, что у
     «Сравнить» наверху, — ровный светлый контур по краю.
     Блик по верхней кромке изнутри и тонкий подсвет снизу дают панели
     толщину: без них это плоская плашка со скруглением. */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 420ms;
  will-change: transform;
}

body.keyboard-open .bottom-tabs,
body.sheet-open .bottom-tabs,
body:has(#deliveryWeight:focus) .bottom-tabs,
body:has(#deliveryVolume:focus) .bottom-tabs {
  pointer-events: none;
  transform: translateY(calc(100% + 24px));
  transition-delay: 0ms;
}

/* Подсветка активной вкладки — отдельный предмет, а не фон кнопки. Пока она
   была фоном, переключение выглядело так: одна погасла, другая зажглась,
   переезжать нечему. Теперь она одна на всю панель и переезжает между
   кнопками; ширина колонки задана жёстко (80px), поэтому сдвиг считается
   умножением, а не измерением на ходу.

   Номер вкладки ставит `setActiveTab` в app.js — переменной `--tab-index`.
   Ноль по умолчанию: до первого переключения активна первая вкладка, как и в
   разметке. */
.bottom-tabs__pill {
  position: absolute;
  /* Замерено, а не прикинуто: при 4px подсветка вставала на точку ниже кнопки. */
  top: 3px;
  left: 3px;
  width: 80px;
  height: 60px;
  transform: translateX(calc(var(--tab-index, 0) * 80px));
  /* Лёгкий перелёт в конце: плашка чуть проскакивает цель и возвращается.
     Без него приезд выглядит как остановка по тормозам, а капля должна
     доплеснуться. */
  transition: transform 460ms cubic-bezier(0.34, 1.28, 0.52, 1);
  pointer-events: none;
}

/* Сама плашка вынесена внутрь, потому что растягивать и везти одним элементом
   нельзя: и переезд, и растяжение — это `transform`, они бы затирали друг
   друга. Снаружи едет, внутри тянется. */
.bottom-tabs__pill i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  /* Точка растяжения — на том краю, куда едем: плашка вытягивается назад, и
     позади остаётся хвост. Если тянуть от середины, хвоста нет, есть просто
     раздувшаяся таблетка. Сторону ставит app.js. */
  transform-origin: var(--tab-origin, 50%) center;
}

.bottom-tabs__pill.is-sliding i {
  animation: tab-pill-stretch 460ms cubic-bezier(0.34, 1.28, 0.52, 1);
}

/* Плашку тянет за движением и собирает на месте. Растяжение считается от
   пройденного расстояния (`--tab-travel` — сколько вкладок перескочили):
   через одну кнопку тянет вдвое сильнее, чем к соседней. Постоянная величина
   выглядела бы одинаково и для короткого, и для длинного переезда, а глаз
   ждёт разного.

   Возврат идёт не в один шаг: на 76% плашка коротко перебирает в другую
   сторону — сжимается уже, чем в покое. Это отдача, из-за неё движение
   читается как жидкость, а не как резинка. */
@keyframes tab-pill-stretch {
  0% {
    transform: scaleX(1) scaleY(1);
  }

  36% {
    transform: scaleX(calc(1 + 0.16 * var(--tab-travel, 1))) scaleY(0.84);
  }

  76% {
    transform: scaleX(calc(1 - 0.04 * var(--tab-travel, 1))) scaleY(1.06);
  }

  100% {
    transform: scaleX(1) scaleY(1);
  }
}

/* Переключение вкладки — одна волна по панели, а не три отдельные анимации.
   Импульс один, участники вступают по очереди: вкладка, с которой уходим,
   оседает сразу; плашка едет; значок на новой вкладке поднимается через 110 мс;
   подпись под ним — через 180. Общая кривая у всех одна, `--tab-ease`, — от
   этого движения и читаются как одно, а не как три разных характера.

   Значок больше не тянется вширь. Растяжение повторяло плашку буквально, но на
   предмете в 25 точек любая деформация выглядит вознёй: владелец назвал это
   «дёргаются» и «не ритм». Подъём — движение целиком, а не изменение формы, и
   мелкие предметы держат его спокойно.

   История подбора, чтобы не ходить по кругу: сперва значок двигали вместе с
   плашкой (дрожь), потом отодвинули за её прилёт (владелец откатил: просил
   замедлить, а не сдвинуть), потом замедлили с растяжением (стало плавно, но
   ритма не появилось). Растяжение и было лишним. */
.bottom-tabs {
  --tab-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes tab-icon-rise {
  0% {
    transform: translateY(0) scale(1);
  }

  44% {
    transform: translateY(-2.5px) scale(1.09);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* Подпись повторяет то же движение вдвое мельче: она вступает последней и
   должна закрывать волну, а не спорить со значком. */
@keyframes tab-label-rise {
  0% {
    transform: translateY(0) scale(1);
  }

  44% {
    transform: translateY(-1.5px) scale(1.04);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* Вкладка, с которой уходим, коротко оседает — с неё волна и начинается. */
@keyframes tab-icon-settle {
  0% {
    transform: translateY(0) scale(1);
  }

  40% {
    transform: translateY(1px) scale(0.95);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.tab-button.is-landing .tab-icon-mask {
  animation: tab-icon-rise 520ms var(--tab-ease) 110ms both;
}

.tab-button.is-landing span {
  animation: tab-label-rise 520ms var(--tab-ease) 180ms both;
}

.tab-button.is-leaving .tab-icon-mask {
  animation: tab-icon-settle 420ms var(--tab-ease) both;
}

.tab-button {
  /* Кнопки позиционированы, чтобы лечь поверх подсветки: она абсолютная и без
     этого закрыла бы значки собой. */
  position: relative;
  display: grid;
  grid-template-rows: 25px 13px;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  height: 60px;
  padding: 0 4px;
  background: transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  /* Цвет догоняет подсветку, а не переключается рывком. */
  transition: color 260ms ease;
}

.tab-button.is-active {
  color: var(--accent);
}

.tab-icon-mask {
  display: block;
  width: 25px;
  height: 25px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Отклик на палец: значок проседает под нажатием и отпускает. Без этого панель
   на касание не отвечает ничем — та самая «деревянность». */
.tab-button:active .tab-icon-mask {
  transform: scale(0.86);
}

/* Кому системно выключена анимация — ничего не едет, не тянется и не прыгает. */
@media (prefers-reduced-motion: reduce) {
  .bottom-tabs__pill,
  .tab-button,
  .tab-icon-mask {
    transition: none;
  }

  .bottom-tabs__pill.is-sliding i,
  .tab-button.is-landing .tab-icon-mask,
  .tab-button.is-landing span,
  .tab-button.is-leaving .tab-icon-mask {
    animation: none;
  }
}

.tab-icon-mask--search {
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAADbN2wMAAADvUlEQVRoBdVZvWtTURRvpUOGDB0yOGRwKJihQweHioXmD+jY0SFDBgfBjB0cHAoGKujg4ODQwa0B3RQU7FBQoWCHgoiBCioWVCpYsOCgv19Iyns375x77vsyPfBL3j3n3PN1P18yPZWNzqN7E7gCNIA5oAZUAdLhEH18vwF2gNfAf6UKvF8FngN/gL+B+AT9DYAJl0oz8HYd+AqEBi3pb8EWR61wWoKHd4AUSBY+R3Ed4MgWQjdhNc1UCU3qLfxcyDMDThkOcWggWfSP4I+jnZkYPBdplmDS9v0Fv+YkpoVUWflVQZbEfg/mM2Af6EcUZvE8DzCgZcA6z4+hexmgvWC6hR6W6nFdbAILgIV4NrQBJmixfwC9GhBErJRlwW5DL+0+zum5BvwGfIlwJpiJw2vZKtehxyCyEkeOh5oviVWro47BGHXyJF5FfEX7AB1vwVh93wnLyhdBnIrfAG0kWj7HbY+Bbci9VfA5UeQrkGkJ8JBTaQdSyQAXddoFqzp1hD0lBsZ2ydE/bdY9HTdPNYt9YJGkIpLfldxf83S07vOS/RA+D0MpiV3J0COlU6qTUHJk4LeUWJhYxbVxDox5lxlpv4g8l/Ho88dpFiMmcDHGiTfKHoHPcP8jHkKslZjA2LBEuvQjz2U9aj7HYuUITBqdKAHx5I7RJCYQC9BpHDvtKV8Cs26HEtpjVY74TEzgS0TBfdR2KFc3jzbnuLapcJHHiCOwF+PEG0vxZuGtRY+HsQXOBMQTDrJloOoxmqd4RTH2E7KPSfImmNLxTX47qVMBPE4f7Urfk3zOQKDdx00vFJLxAH4HulohW5qt+57Oa1rnHGTc7bQi8v1ZncoNKGjZ08ACUBQ9hmHN/wOL4yceI3wB1/Zoi48kna7HL1+o5pI6ujyOApW1SvAFnHp50W0Y0vxRZqr+KKA7BoOcq9p2N7KlfXPO+6YNg6evmmbIlVXA2AN8VaF8CzANLfRGRPsdQFuwUd/0EUwMir8SRw1pz0+h2wLqQBIx6CawAWj7vOTjLvoFE68Q/JVYMirxWdlXwMshuGYk3RB+qUmEBBaimyqJeVTwIKcqhgQr6aZKgrtAr+AkOPWsPlIlAfuDPzx4nZWqk4bPc+chMNoq7xntp06CF78WsG90JCXFqwkDT9qGC08Cfge0iM8usAtIgUb5R9DjNGkDVUAjaxId6T8yzXiSjAE1AFaU+34dOAG+A4cApx4RQkzihqcDbU80WUZiohNgcFoSPNnPBElJdM5E9MMgGezoLsXvQfD/AIntAjTb4GukAAAAAElFTkSuQmCC");
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAADbN2wMAAADvUlEQVRoBdVZvWtTURRvpUOGDB0yOGRwKJihQweHioXmD+jY0SFDBgfBjB0cHAoGKujg4ODQwa0B3RQU7FBQoWCHgoiBCioWVCpYsOCgv19Iyns375x77vsyPfBL3j3n3PN1P18yPZWNzqN7E7gCNIA5oAZUAdLhEH18vwF2gNfAf6UKvF8FngN/gL+B+AT9DYAJl0oz8HYd+AqEBi3pb8EWR61wWoKHd4AUSBY+R3Ed4MgWQjdhNc1UCU3qLfxcyDMDThkOcWggWfSP4I+jnZkYPBdplmDS9v0Fv+YkpoVUWflVQZbEfg/mM2Af6EcUZvE8DzCgZcA6z4+hexmgvWC6hR6W6nFdbAILgIV4NrQBJmixfwC9GhBErJRlwW5DL+0+zum5BvwGfIlwJpiJw2vZKtehxyCyEkeOh5oviVWro47BGHXyJF5FfEX7AB1vwVh93wnLyhdBnIrfAG0kWj7HbY+Bbci9VfA5UeQrkGkJ8JBTaQdSyQAXddoFqzp1hD0lBsZ2ydE/bdY9HTdPNYt9YJGkIpLfldxf83S07vOS/RA+D0MpiV3J0COlU6qTUHJk4LeUWJhYxbVxDox5lxlpv4g8l/Ho88dpFiMmcDHGiTfKHoHPcP8jHkKslZjA2LBEuvQjz2U9aj7HYuUITBqdKAHx5I7RJCYQC9BpHDvtKV8Cs26HEtpjVY74TEzgS0TBfdR2KFc3jzbnuLapcJHHiCOwF+PEG0vxZuGtRY+HsQXOBMQTDrJloOoxmqd4RTH2E7KPSfImmNLxTX47qVMBPE4f7Urfk3zOQKDdx00vFJLxAH4HulohW5qt+57Oa1rnHGTc7bQi8v1ZncoNKGjZ08ACUBQ9hmHN/wOL4yceI3wB1/Zoi48kna7HL1+o5pI6ujyOApW1SvAFnHp50W0Y0vxRZqr+KKA7BoOcq9p2N7KlfXPO+6YNg6evmmbIlVXA2AN8VaF8CzANLfRGRPsdQFuwUd/0EUwMir8SRw1pz0+h2wLqQBIx6CawAWj7vOTjLvoFE68Q/JVYMirxWdlXwMshuGYk3RB+qUmEBBaimyqJeVTwIKcqhgQr6aZKgrtAr+AkOPWsPlIlAfuDPzx4nZWqk4bPc+chMNoq7xntp06CF78WsG90JCXFqwkDT9qGC08Cfge0iM8usAtIgUb5R9DjNGkDVUAjaxId6T8yzXiSjAE1AFaU+34dOAG+A4cApx4RQkzihqcDbU80WUZiohNgcFoSPNnPBElJdM5E9MMgGezoLsXvQfD/AIntAjTb4GukAAAAAElFTkSuQmCC");
}

.tab-icon-mask--payment {
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACbUlEQVR4Ae3BMWhcZQAA4O/+95CTBokgNUOaRQsdTsjo0MFBsKJghkLjZMYMKQYJdCw3CZJQT2uMi7U0SDt5ndqh0CoduplAxA6FdHBotIEiwWY4ogc5eA0nJP/1vbsX6Pd5YcAqulUxjTOoYchgbWEN17CEbc+o2GsENzCunFbwPh7pSGSquI1x5TWCd3EZLW2JzAymlN8INnFPWyoz6eDuYgFNxRvFEj6QmcSX2hKZC3jJwYxhEqfxFGvYUYy/8Qs+kxnG59qCzJB4NVzCOmZRVYw/7DWkI5WPUVzAeTRwEY/1QSpfwziPc1hCAw8VKFWMKmYxg2U0sKIAqWKlmMIUmmjgjhyl+mcCE7iLBTTlINV/J3ESa1jAMlp6FAxODZfwOyb0KBi8N/ETpvUgKI+vURMpKI8UcyIF5fKeSEG5jIgUHHLBIRccckHxNrChIKniPMbHuGXXKVzBa3IUFOcsbsncxFk5C4rT1K0pZ0FxhnQb1ptRe23pCIozp9useKP41l6/6UhlNvC6/JzDEVyz6wxm7O9f+7uqoyLzAz5Rfqt4G9vagsw8WsptFaewrSOR+RN/4UPlsoVfsYBpPPGMim4TmMcbBqMiQqLbfSxiHcdxVH/VRUj8vx2sYBGrOIYx/VEXIbG/+/geP+NVnFCsugiJg3uIq7iOl1FDkL+6CIl4j9DEFVQwjlR+6iIkevcEN/EdnmIcVc9nE1+IkHh+/+AOGtjEW3hFb27jRxES+WnhHr7COo7jqDif4oEIifztYAWLWMUxjNnfZcyLVNEf72AWH+nWwjeYQ0ukiv6qYRIn7FrDMh544ZD6D5SPewK7pDWnAAAAAElFTkSuQmCC");
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACbUlEQVR4Ae3BMWhcZQAA4O/+95CTBokgNUOaRQsdTsjo0MFBsKJghkLjZMYMKQYJdCw3CZJQT2uMi7U0SDt5ndqh0CoduplAxA6FdHBotIEiwWY4ogc5eA0nJP/1vbsX6Pd5YcAqulUxjTOoYchgbWEN17CEbc+o2GsENzCunFbwPh7pSGSquI1x5TWCd3EZLW2JzAymlN8INnFPWyoz6eDuYgFNxRvFEj6QmcSX2hKZC3jJwYxhEqfxFGvYUYy/8Qs+kxnG59qCzJB4NVzCOmZRVYw/7DWkI5WPUVzAeTRwEY/1QSpfwziPc1hCAw8VKFWMKmYxg2U0sKIAqWKlmMIUmmjgjhyl+mcCE7iLBTTlINV/J3ESa1jAMlp6FAxODZfwOyb0KBi8N/ETpvUgKI+vURMpKI8UcyIF5fKeSEG5jIgUHHLBIRccckHxNrChIKniPMbHuGXXKVzBa3IUFOcsbsncxFk5C4rT1K0pZ0FxhnQb1ptRe23pCIozp9useKP41l6/6UhlNvC6/JzDEVyz6wxm7O9f+7uqoyLzAz5Rfqt4G9vagsw8WsptFaewrSOR+RN/4UPlsoVfsYBpPPGMim4TmMcbBqMiQqLbfSxiHcdxVH/VRUj8vx2sYBGrOIYx/VEXIbG/+/geP+NVnFCsugiJg3uIq7iOl1FDkL+6CIl4j9DEFVQwjlR+6iIkevcEN/EdnmIcVc9nE1+IkHh+/+AOGtjEW3hFb27jRxES+WnhHr7COo7jqDif4oEIifztYAWLWMUxjNnfZcyLVNEf72AWH+nWwjeYQ0ukiv6qYRIn7FrDMh544ZD6D5SPewK7pDWnAAAAAElFTkSuQmCC");
}

.tab-icon-mask--orders {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ij4KICA8ZyBpZD0icmVjZWlwdC1maWxsIj4KICAgIDxwYXRoIGlkPSJVbmlvbiIgZmlsbD0iIzAwMDAwMCIgZD0iTTExLjY2MDIgMS41NTk1N2MwLjI1NTkgLTAuMDkyNTIgMC41NDA2IC0wLjA3NzMzIDAuNzg3MSAwLjA0NTlsMy42MDkzIDEuODA0NjkgMy41OTE4IC0xLjM0NjY4YzAuMzA3IC0wLjExNTEyIDAuNjUxNCAtMC4wNzIzNiAwLjkyMDkgMC4xMTQyNUMyMC44Mzg5IDIuMzY0NTUgMjEgMi42NzIwMiAyMSAzdjE4YzAgMC4zMjggLTAuMTYxMSAwLjYzNTUgLTAuNDMwNyAwLjgyMjMgLTAuMjY5NSAwLjE4NjYgLTAuNjEzOSAwLjIyOTMgLTAuOTIwOSAwLjExNDJsLTMuNTkxOCAtMS4zNDc2IC0zLjYwOTMgMS44MDU2Yy0wLjI4MTYgMC4xNDA4IC0wLjYxMyAwLjE0MDggLTAuODk0NiAwbC0zLjYxMDMyIC0xLjgwNTYgLTMuNTkwODIgMS4zNDc2Yy0wLjMwNjk3IDAuMTE1MSAtMC42NTEzNyAwLjA3MjQgLTAuOTIwOSAtMC4xMTQyQzMuMTYxMDkgMjEuNjM1NSAzIDIxLjMyOCAzIDIxVjNjMCAtMC4zMjc5OCAwLjE2MTA5IC0wLjYzNTQ1IDAuNDMwNjYgLTAuODIyMjcgMC4yNjk1MyAtMC4xODY2MSAwLjYxMzkzIC0wLjIyOTM3IDAuOTIwOSAtMC4xMTQyNWwzLjU5MDgyIDEuMzQ2NjggMy42MTAzMiAtMS44MDQ2OXpNOCAxNWMtMC41NTIyOCAwIC0xIDAuNDQ3NyAtMSAxczAuNDQ3NzIgMSAxIDFoOGMwLjU1MjMgMCAxIC0wLjQ0NzcgMSAtMXMtMC40NDc3IC0xIC0xIC0xem0wIC00Yy0wLjU1MjI4IDAgLTEgMC40NDc3IC0xIDFzMC40NDc3MiAxIDEgMWg4YzAuNTUyMyAwIDEgLTAuNDQ3NyAxIC0xcy0wLjQ0NzcgLTEgLTEgLTF6bTAgLTRjLTAuNTUyMjggMCAtMSAwLjQ0NzcyIC0xIDFzMC40NDc3MiAxIDEgMWg4YzAuNTUyMyAwIDEgLTAuNDQ3NzIgMSAtMXMtMC40NDc3IC0xIC0xIC0xeiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ij4KICA8ZyBpZD0icmVjZWlwdC1maWxsIj4KICAgIDxwYXRoIGlkPSJVbmlvbiIgZmlsbD0iIzAwMDAwMCIgZD0iTTExLjY2MDIgMS41NTk1N2MwLjI1NTkgLTAuMDkyNTIgMC41NDA2IC0wLjA3NzMzIDAuNzg3MSAwLjA0NTlsMy42MDkzIDEuODA0NjkgMy41OTE4IC0xLjM0NjY4YzAuMzA3IC0wLjExNTEyIDAuNjUxNCAtMC4wNzIzNiAwLjkyMDkgMC4xMTQyNUMyMC44Mzg5IDIuMzY0NTUgMjEgMi42NzIwMiAyMSAzdjE4YzAgMC4zMjggLTAuMTYxMSAwLjYzNTUgLTAuNDMwNyAwLjgyMjMgLTAuMjY5NSAwLjE4NjYgLTAuNjEzOSAwLjIyOTMgLTAuOTIwOSAwLjExNDJsLTMuNTkxOCAtMS4zNDc2IC0zLjYwOTMgMS44MDU2Yy0wLjI4MTYgMC4xNDA4IC0wLjYxMyAwLjE0MDggLTAuODk0NiAwbC0zLjYxMDMyIC0xLjgwNTYgLTMuNTkwODIgMS4zNDc2Yy0wLjMwNjk3IDAuMTE1MSAtMC42NTEzNyAwLjA3MjQgLTAuOTIwOSAtMC4xMTQyQzMuMTYxMDkgMjEuNjM1NSAzIDIxLjMyOCAzIDIxVjNjMCAtMC4zMjc5OCAwLjE2MTA5IC0wLjYzNTQ1IDAuNDMwNjYgLTAuODIyMjcgMC4yNjk1MyAtMC4xODY2MSAwLjYxMzkzIC0wLjIyOTM3IDAuOTIwOSAtMC4xMTQyNWwzLjU5MDgyIDEuMzQ2NjggMy42MTAzMiAtMS44MDQ2OXpNOCAxNWMtMC41NTIyOCAwIC0xIDAuNDQ3NyAtMSAxczAuNDQ3NzIgMSAxIDFoOGMwLjU1MjMgMCAxIC0wLjQ0NzcgMSAtMXMtMC40NDc3IC0xIC0xIC0xem0wIC00Yy0wLjU1MjI4IDAgLTEgMC40NDc3IC0xIDFzMC40NDc3MiAxIDEgMWg4YzAuNTUyMyAwIDEgLTAuNDQ3NyAxIC0xcy0wLjQ0NzcgLTEgLTEgLTF6bTAgLTRjLTAuNTUyMjggMCAtMSAwLjQ0NzcyIC0xIDFzMC40NDc3MiAxIDEgMWg4YzAuNTUyMyAwIDEgLTAuNDQ3NzIgMSAtMXMtMC40NDc3IC0xIC0xIC0xeiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=");
}

.tab-button span {
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 520px) {
  body {
    display: grid;
    place-items: start center;
  }

  .app-shell {
    width: 430px;
  }
}

/* Opened outside Telegram the app has no user, no theme and no shell buttons.
   One line says so, on the app's own background. No panel and no button: there
   is nothing to press here, only somewhere else to go. */
.outside {
  display: none;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: var(--app-bg);
  text-align: center;
}

body.is-outside .app-shell {
  display: none;
}

body.is-outside .outside {
  display: grid;
}

/* «Не загрузилось» — не то же самое, что «вне Telegram». Первое лечится
   повтором, поэтому здесь есть кнопка, а во внешней заглушке её нет: там
   нажимать нечего, там надо уйти в бота. */
.offline {
  display: none;
  align-content: center;
  justify-items: center;
  gap: 18px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: var(--app-bg);
  text-align: center;
}

body.is-offline .app-shell {
  display: none;
}

body.is-offline .offline {
  display: grid;
}

.offline__retry {
  appearance: none;
  padding: 13px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
  color: var(--tg-theme-link-color, var(--accent));
  font-family: inherit;
  font-size: 16px;
  font-weight: 560;
  cursor: pointer;
}

/* The sentence is the explanation and the name is the way out, so the light
   falls on the name: dim line above, lit link under it with a hairline beneath
   to say it is a link and not a caption. */
.outside__line {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 440;
}

.outside__link {
  color: var(--text);
  font-size: 18px;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 4px;
}

/* Страница дохода. Открывается с карточки на главной, минуя меню: деньги —
   не пункт настроек. Сверху объяснение — оно тут главное, потому что человек
   приходит понять, откуда берутся проценты. Счёт под ним, а «Поделиться»
   прижата к низу той же кнопкой, что и «Обменять». */
.income-view {
  min-height: 100vh;
  min-height: 100dvh;
  /* Экран короткий, и прижатый к верху он выглядит обрубленным. Опускаем всё
     ниже — заголовок оказывается там, куда сам приходит взгляд. */
  padding-top: 76px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 94px);
}

/* Заголовок и объяснение стоят по центру: страница короткая и читается как
   одно обращение, а не как список настроек. На остальных подстраницах
   заголовок остаётся прежним. */
.income-view .home-contacts-title {
  /* Заголовок и текст под ним — одно высказывание, поэтому между ними тесно.
     Просторно — там, где начинается другое: строка счёта. */
  margin-bottom: 12px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  text-align: center;
}

.income-page__text {
  /* Зазор до строки счёта нарочно крупный: правило и деньги — разные вещи,
     и между ними нужен воздух, иначе экран читается одним комком. */
  margin: 0 6px 44px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 420;
  text-align: center;
  color: var(--text);
}

/* Приписка под счётом: тише основного текста, потому что это уточнение, а не
   само правило. Правило стоит наверху, под заголовком. */
.income-page__note {
  margin: 12px 6px 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 420;
  color: var(--muted);
}

.income-page__balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 12px 12px 24px;
  background: var(--panel);
  border-radius: 999px;
}

.income-page__balance {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 620;
  letter-spacing: -0.3px;
  color: var(--text);
}

.income-page__payout {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 560;
  cursor: pointer;
}

/* Выводить нечего — кнопка гаснет, но остаётся: без неё не видно, что вывод
   вообще есть. */
.income-page__payout:disabled {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.28);
  cursor: default;
}

.income-page__footer {
  position: fixed;
  right: 0;
  left: 0;
  bottom: -96px;
  z-index: 22;
  padding: 9px 18px calc(env(safe-area-inset-bottom) + 100px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.055);
  background: #242527;
}

.income-page__invite {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.28);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  font-weight: 620;
  text-align: center;
}

.income-page__invite.is-active {
  background: var(--accent);
  color: var(--text);
}