/* Оболочка мини-аппки.
   Подключается всегда, но работает только когда body получил data-mini="on" —
   то есть внутри Telegram. В обычном браузере ни один селектор отсюда
   не срабатывает, витрина остаётся нетронутой.

   Палитра своя, фирменная: аппка — это та же витрина, а не гость в чужой теме.
   За темой Telegram мы не следуем, но красим его служебные полосы под себя
   (см. paintChrome в tg.js). */

:root {
  --z-overlay: 45;
  --z-tabbar: 50;
  --z-toast: 70;
  --tabbar-h: 3.75rem;
}

/* ── Каркас ───────────────────────────────────────────────────────────────── */

body[data-mini='on'] {
  /* Панель перекрывает подвал; освобождаем под неё место вместе с safe-area. */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  /* Серый прямоугольник под пальцем — примета браузера, а не приложения.
     Отклик даёт :active, он быстрее и выглядит своим. */
  -webkit-tap-highlight-color: transparent;
}

/* Подписи и цифры не выделяются от долгого нажатия: в приложении длинный тап
   по кнопке — это нажатие, а не попытка скопировать текст. Поля ввода и
   реквизиты, которые как раз копируют, исключены ниже. */
body[data-mini='on'] .tabbar__item,
body[data-mini='on'] .mini-link,
body[data-mini='on'] .amounts__item,
body[data-mini='on'] .segmented__item,
body[data-mini='on'] .mini-view .button,
body[data-mini='on'] .mini-view .chip {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  /* Тач-таргет не меньше 44px даже на мелких экранах. */
  min-height: var(--tabbar-h);
  padding: 0.4rem 0.25rem;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: 0.66rem;
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}

/* Чёрточка над активной вкладкой. Растёт из центра, а не появляется целиком:
   так видно, что вкладка сменилась, даже если цвет иконки прошёл мимо взгляда. */
.tabbar__item::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 22%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.tabbar__item[data-active='true']::before { transform: scaleX(1); }

.tabbar__item[data-active='true'] { color: var(--accent-text); }
.tabbar__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Иконка чуть подрастает на активной вкладке и уходит вниз под пальцем —
   единственная обратная связь, которая на телефоне вообще заметна. */
.tabbar__item .mini-icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.tabbar__item[data-active='true'] .mini-icon { transform: translateY(-1px) scale(1.08); }
.tabbar__item:active .mini-icon { transform: scale(0.9); }

@media (hover: hover) {
  .tabbar__item:hover { color: var(--ink); }
  .tabbar__item[data-active='true']:hover { color: var(--accent-text); }
}

.tabbar__label { line-height: 1; }

.mini-icon { display: inline-flex; }
.mini-icon svg { width: 1.4rem; height: 1.4rem; display: block; }

/* ── Оверлей с экранами ───────────────────────────────────────────────────── */

.mini-overlay {
  position: fixed;
  inset: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.mini-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--shell-pad) var(--space-7);
  max-width: 46rem;
  margin-inline: auto;
}

/* Своя кнопка «назад» — только для клиентов старше Bot API 6.1, где у Telegram
   её нет вовсе. На всех остальных её не рисуют: две кнопки назад рядом сбивают
   с толку сильнее, чем отсутствие одной. */
.mini-back {
  position: sticky;
  top: var(--space-3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: var(--space-3) 0 calc(var(--space-3) * -1) var(--shell-pad);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.mini-back svg { width: 1.35rem; height: 1.35rem; }
.mini-back:active { transform: scale(0.92); }

@media (hover: hover) {
  .mini-back:hover { color: var(--ink); }
}

.mini-view__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-track);
  line-height: var(--headline-lh);
  color: var(--ink);
  margin: 0;
}

.mini-view__text { color: var(--ink-2); margin: 0; }
.mini-view__foot { color: var(--ink-3); font-size: var(--step--1); margin: var(--space-4) 0 0; }

/* ── Шапка кабинета ───────────────────────────────────────────────────────── */

.account__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.avatar {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Лежит поверх инициалов: не загрузилась — инициалы остались видны. */
  z-index: 1;
}

.avatar__initials {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--display-weight);
  color: var(--ink-3);
}

.account__identity { min-width: 0; }

.account__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-track);
  line-height: var(--headline-lh);
  color: var(--ink);
  /* Длинное имя не должно расталкивать вёрстку на узком экране. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account__handle {
  margin: 0.2rem 0 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Баланс ───────────────────────────────────────────────────────────────── */

.balance {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--r-block);
  background: var(--field);
  color: var(--field-ink);
}

.balance__label {
  font-size: var(--step--1);
  letter-spacing: var(--label-track);
  color: var(--field-ink-2);
}

.balance__value {
  font-family: var(--font-display);
  /* clamp, потому что шестизначная сумма на 380px обязана поместиться. */
  font-size: clamp(2rem, 1.2rem + 4.2vw, 3rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
}

.balance__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.balance__actions .button { flex: 1 1 10rem; }

/* ── Блоки и строки ───────────────────────────────────────────────────────── */

.mini-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: var(--card-border);
  box-shadow: var(--elevation);
}

.mini-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-track);
  color: var(--ink);
}

.mini-rows { display: flex; flex-direction: column; }

.mini-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.mini-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-row:first-child { padding-top: 0; }

.mini-row__label { color: var(--ink-3); font-size: var(--step--1); flex: none; }

.mini-row__value {
  margin-inline-start: auto;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .mini-copy:hover { background: var(--line); color: var(--ink); }
}

.mini-copy:active { background: var(--line); transform: scale(0.92); }
.mini-copy svg { width: 1.15rem; height: 1.15rem; }

/* Скопировалось. Всплывашка говорит то же самое, но она внизу экрана, а палец
   и взгляд — здесь: подтверждение должно быть там, куда нажали. */
.mini-copy[data-ok='true'],
.card-req__copy[data-ok='true'] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  animation: mini-pop var(--dur-2) var(--ease-out);
}

/* ── История ──────────────────────────────────────────────────────────────── */

.history { display: flex; flex-direction: column; }

.history__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

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

.history__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.history__title { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history__meta { color: var(--ink-3); font-size: var(--step--1); }

.history__delta {
  margin-inline-start: auto;
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--price-weight);
  letter-spacing: var(--price-track);
}

.history__delta[data-sign='plus'] { color: var(--accent-text); }
.history__delta[data-sign='minus'] { color: var(--ink-2); }

/* ── Баннеры решений ──────────────────────────────────────────────────────── */

.mini-banners { display: flex; flex-direction: column; gap: var(--space-2); }

.mini-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-card);
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-2);
}

.mini-banner--bad { border-inline-start-color: var(--danger-text); }
.mini-banner__body { min-width: 0; }
.mini-banner__title { margin: 0; color: var(--ink); font-weight: 500; }
.mini-banner__text { margin: 0.25rem 0 0; color: var(--ink-2); font-size: var(--step--1); }

.mini-banner__close {
  margin-inline-start: auto;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-3);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

/* ── Список ссылок ────────────────────────────────────────────────────────── */

.mini-links {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--surface);
  border: var(--card-border);
  box-shadow: var(--elevation);
  overflow: hidden;
}

.mini-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  text-align: start;
  cursor: pointer;
}

.mini-link {
  transition: background var(--dur-1) var(--ease-out);
}

.mini-link:last-child { border-bottom: 0; }
.mini-link:active { background: var(--surface-2); }

@media (hover: hover) {
  .mini-link:hover { background: var(--surface-2); }
  .mini-link:hover .mini-link__arrow { transform: translateX(3px); color: var(--ink-2); }
  .mini-link:hover .mini-link__label { color: var(--accent-text); }
}

.mini-link__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mini-link__label { color: var(--ink); transition: color var(--dur-1) var(--ease-out); }
.mini-link__hint { color: var(--ink-3); font-size: var(--step--1); }

.mini-link__arrow {
  margin-inline-start: auto;
  flex: none;
  color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.mini-link__arrow svg { width: 1.25rem; height: 1.25rem; display: block; }

/* ── Служебные состояния ──────────────────────────────────────────────────── */

.mini-skeleton { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }

.mini-skeleton__line {
  height: 1rem;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2));
  background-size: 200% 100%;
  animation: mini-shimmer 1.4s linear infinite;
}

@keyframes mini-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.mini-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}

.mini-empty__title { margin: 0; color: var(--ink); font-weight: 500; }
.mini-empty__text { margin: 0; color: var(--ink-3); font-size: var(--step--1); }

.mini-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  z-index: var(--z-toast);
  transform: translate(-50%, 1rem);
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-pill);
  background: var(--field);
  color: var(--field-ink);
  font-size: var(--step--1);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.mini-toast[data-show='true'] { opacity: 1; transform: translate(-50%, 0); }
.mini-toast[data-kind='error'] { background: var(--danger-text); color: var(--accent-ink); }

/* ── Пополнение ───────────────────────────────────────────────────────────── */

.topup { display: contents; }

.topup__hint { margin: 0; color: var(--ink-3); font-size: var(--step--1); }
.topup__hint[data-bad='true'] { color: var(--danger-text); }

.promo { display: flex; flex-direction: column; gap: var(--space-2); }

.promo__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  min-width: 0;
}

.promo__row .field__input { flex: 1 1 auto; min-width: 0; }
.promo__row .button { flex: none; }

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.segmented__item {
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: var(--step--1);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.segmented__item[data-active='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elevation);
}

.amounts {
  display: grid;
  /* Пять пресетов на телефоне ложатся в две-три колонки, на десктопе в ряд. */
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-2);
}

.amounts__item {
  min-height: 3rem;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--price-weight);
  letter-spacing: var(--price-track);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .amounts__item:hover { border-color: var(--line-strong); background: var(--surface-2); }
}

.amounts__item:active { transform: scale(0.96); }

.amounts__item[data-active='true'] {
  border-color: var(--accent);
  color: var(--accent-text);
  animation: mini-pop var(--dur-2) var(--ease-out);
}

.segmented__item:active { transform: scale(0.97); }
.segmented__item[data-active='true'] { animation: mini-pop var(--dur-2) var(--ease-out); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { color: var(--ink-3); font-size: var(--step--1); }

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .field__input:hover { border-color: var(--line-strong); }
}

/* Кольцо вместо голого outline: поле с фокусом видно с той же дистанции, что и
   активную вкладку, и оно не прыгает по вёрстке. */
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

.field__input:focus-visible { outline: none; }

.field__hint { color: var(--ink-3); font-size: var(--step--1); }

.field__input--area {
  min-height: 5.5rem;
  resize: vertical;
  line-height: var(--body-lh);
}

select.field__input {
  /* Своя стрелка: системная в тёмной теме на iOS почти не видна */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.35rem, calc(100% - 0.75rem) 1.35rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.25rem;
}

.switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  cursor: pointer;
}

/* Тумблер рисуем сами. Системный чекбокс в аппке читается как элемент формы на
   сайте, а здесь нужна настройка, которую переключают, — и видно это должно
   быть по положению, а не по галочке. */
.switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2.9rem;
  height: 1.7rem;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}

.switch input::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: calc(1.7rem - 4px);
  height: calc(1.7rem - 4px);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform var(--dur-2) var(--ease-out);
}

.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(1.2rem); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:active::after { transform: scale(0.92); }
.switch input:checked:active::after { transform: translateX(1.2rem) scale(0.92); }

.switch__label { color: var(--ink); }

@media (hover: hover) {
  .switch:hover input { background: var(--ink-3); }
  .switch:hover input:checked { background: var(--accent-hover); }
}

/* Реквизиты */

.card-req {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--r-card);
  background: var(--field);
  color: var(--field-ink);
}

.card-req__label { font-size: var(--step--1); color: var(--field-ink-2); }

.card-req__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.card-req__number {
  font-family: var(--font-display);
  /* Шестнадцать цифр обязаны поместиться на 360px без переноса. */
  font-size: clamp(1.25rem, 0.75rem + 2.6vw, 1.75rem);
  font-weight: var(--price-weight);
  letter-spacing: 0.02em;
  /* Выделение мышью на десктопе — тоже способ скопировать */
  user-select: all;
}

.card-req__holder { font-size: var(--step--1); color: var(--field-ink-2); }

.card-req__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: auto;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-line);
  border-radius: var(--r-pill);
  background: var(--field-2);
  color: var(--field-ink);
  font-family: var(--font-text);
  font-size: var(--step--1);
  cursor: pointer;
}

.card-req__copy:active { background: var(--field-line); }
.card-req__copy svg { width: 1.1rem; height: 1.1rem; }

/* Предупреждение */

.notice {
  padding: var(--space-4);
  border-radius: var(--r-card);
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-2);
  color: var(--ink-2);
}

.notice p { margin: 0; }
.notice--warn { border-inline-start-color: var(--danger-text); }

/* Выбор файлов */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
}

.dropzone[data-over='true'] { border-color: var(--accent); color: var(--accent-text); }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone__title { color: var(--ink); font-weight: 500; }
.dropzone__hint { color: var(--ink-3); font-size: var(--step--1); }

.filelist { display: flex; flex-direction: column; gap: var(--space-2); }

.filelist__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  min-width: 0;
}

.filelist__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.filelist__name {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filelist__size { color: var(--ink-3); font-size: var(--step--1); }

.filelist__remove {
  margin-inline-start: auto;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-3);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

/* Итоговый экран */

.result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--r-block);
  background: var(--surface-2);
}

.result__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-track);
  line-height: var(--headline-lh);
  color: var(--ink);
}

.result__text { margin: 0; color: var(--ink-2); }

.result__image {
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
  border-radius: var(--r-card);
  margin-bottom: var(--space-2);
}

/* Заглушка на месте картинки, пока владелец её не поставил */
.result__placeholder {
  display: grid;
  place-items: center;
  min-height: 9rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  color: var(--ink-3);
  font-size: var(--step--1);
  text-align: center;
  padding: var(--space-4);
}

/* ── Товар по ссылке ──────────────────────────────────────────────────────── */

.secret__media { display: flex; flex-direction: column; gap: var(--space-2); }

/* Кадры листаются пальцем и защёлкиваются: полкадра в проёме читается как
   недогруз, а не как «дальше есть ещё». */
.secret__gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-block);
}

.secret__gallery::-webkit-scrollbar { display: none; }

.secret__frame {
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  overflow: hidden;
}

.secret__frame img,
.secret__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.secret__dots { display: flex; gap: 0.4rem; justify-content: center; }

.secret__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
}

.secret__dot[aria-current='true'] { background: var(--accent); }

/* Таймер — единственное место в аппке, которому позволено кричать: он и есть
   причина решать сейчас. */
.secret__timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-block);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}

.secret__timer[data-hot='true'] { border-color: var(--danger-text); }

.secret__timer-label { color: var(--ink-3); font-size: var(--step--1); }

.secret__timer-value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--headline-weight);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.secret__timer[data-hot='true'] .secret__timer-value { color: var(--danger-text); }

.secret__description { display: flex; flex-direction: column; gap: var(--space-2); }
.secret__description p { margin: 0; color: var(--ink-2); }

.secret__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.secret__price-label { color: var(--ink-3); font-size: var(--step--1); }

.secret__price-value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--headline-weight);
  color: var(--ink);
}

/* Кнопка покупки не уезжает вместе с описанием: она прилипает к низу экрана и
   всплывает над фоном мягкой подложкой, чтобы текст под ней не мешал читать. */
.secret__cta {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-inline: calc(var(--shell-pad) * -1);
  margin-bottom: calc(var(--space-5) * -1);
  padding: var(--space-3) var(--shell-pad) var(--space-4);
  background: linear-gradient(to top,
              var(--bg) 55%,
              color-mix(in oklab, var(--bg) 80%, transparent) 80%,
              transparent);
}

.secret__cta .button { width: 100%; }

/* ── Панель: товары по ссылке ─────────────────────────────────────────────── */

.chips--mini { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Точка состояния в списке скрытых товаров */
.status-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-3);
}

.status-dot[data-status='timer'] {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  animation: mini-pulse 1.6s var(--ease-in-out) infinite;
}

.status-dot[data-status='open'] { background: var(--accent-text); }
.status-dot[data-status='ended'] { background: var(--danger-text); }
.status-dot[data-status='off'] { background: var(--line-strong); }

.mini-link[data-status='off'] .mini-link__label,
.mini-link[data-status='ended'] .mini-link__label { color: var(--ink-3); }

.secret-link {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--step--1);
  word-break: break-all;
}

.button[data-danger='true'] { color: var(--danger-text); }

.media-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.media-picker__list { display: flex; flex-direction: column; gap: var(--space-2); }

.media-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.media-picker__preview {
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
  border-radius: calc(var(--r-card) - 2px);
  overflow: hidden;
  background: var(--line);
}

.media-picker__preview img,
.media-picker__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-picker__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.media-picker__name { color: var(--ink); }

.media-picker__url {
  color: var(--ink-3);
  font-size: var(--step--1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-picker__actions { display: flex; gap: 0.3rem; margin-inline-start: auto; flex: none; }

.media-picker__button {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.media-picker__button:active { background: var(--line); }

/* ── Движение ─────────────────────────────────────────────────────────────── */

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

@keyframes mini-view-in {
  from { opacity: 0; transform: translate3d(var(--slide, 1.25rem), 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes mini-rise {
  from { opacity: 0; transform: translate3d(0, 0.6rem, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes mini-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes mini-bump {
  0%   { transform: none; }
  35%  { transform: translateY(-0.18rem) scale(1.03); }
  100% { transform: none; }
}

@keyframes mini-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes mini-spin { to { transform: rotate(1turn); } }

/* Экран въезжает со стороны, откуда пришёл: вперёд — справа, назад — слева.
   Направление ставит mini.js, потому что знает, положили экран в стопку или
   сняли. Без этого движение есть, а понимания, куда идёшь, нет. */
.mini-overlay .mini-view {
  animation: mini-view-in var(--dur-2) var(--ease-out) both;
}

.mini-overlay[data-nav='back'] .mini-view { --slide: -1.25rem; }
.mini-overlay[data-nav='tab'] .mini-view { --slide: 0; }

/* Содержимое подтягивается следом короткой лесенкой. Дальше восьмого блока
   задержку не наращиваем: ожидание перестаёт читаться как отклик. */
.mini-overlay .mini-view > *,
.mini-overlay .mini-view > .topup > * {
  animation: mini-rise var(--dur-2) var(--ease-out) both;
}

.mini-view > :nth-child(1),  .mini-view > .topup > :nth-child(1)  { animation-delay: 20ms; }
.mini-view > :nth-child(2),  .mini-view > .topup > :nth-child(2)  { animation-delay: 45ms; }
.mini-view > :nth-child(3),  .mini-view > .topup > :nth-child(3)  { animation-delay: 70ms; }
.mini-view > :nth-child(4),  .mini-view > .topup > :nth-child(4)  { animation-delay: 95ms; }
.mini-view > :nth-child(5),  .mini-view > .topup > :nth-child(5)  { animation-delay: 115ms; }
.mini-view > :nth-child(6),  .mini-view > .topup > :nth-child(6)  { animation-delay: 130ms; }
.mini-view > :nth-child(n+7), .mini-view > .topup > :nth-child(n+7) { animation-delay: 145ms; }

/* Карточки и списки: на десктопе приподнимаются под курсором, на телефоне
   отзываются на нажатие. Проверка hover обязательна — иначе на тач-экране
   состояние залипает после тапа. */
.mini-block,
.mini-links {
  transition: box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}

@media (hover: hover) {
  .mini-block:hover,
  .mini-links:hover {
    box-shadow: var(--elevation-hover);
  }
}

.history__item {
  border-radius: var(--r-xs);
  transition: background var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .history__item:hover { background: var(--surface-2); }
}

/* Баннер о решении по пополнению въезжает сверху: он появляется поверх уже
   прочитанного экрана, и без движения его просто не замечают. */
.mini-banner { animation: mini-rise var(--dur-2) var(--ease-out) both; }

.mini-banner__close,
.filelist__remove {
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .mini-banner__close:hover,
  .filelist__remove:hover { background: var(--line); color: var(--ink); }
}

.mini-banner__close:active,
.filelist__remove:active { transform: scale(0.9); }

/* Баланс. Цифра меняется сама собой — после одобренного пополнения или покупки,
   без единого действия на экране. Поэтому изменение надо показать: карточка
   коротко подпрыгивает, цифра вспыхивает акцентом. */
.balance {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out);
}

.balance::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%);
  pointer-events: none;
}

.balance[data-bump='true'] { animation: mini-bump var(--dur-3) var(--ease-out); }

.balance__value { transition: color var(--dur-2) var(--ease-out); }
.balance[data-bump='true'] .balance__value { color: var(--accent); }

/* Кнопки. Базовый вид приходит из витрины, здесь только отклик на палец и
   состояние ожидания: «Оформляем…» без движения читается как зависание. */
.mini-view .button {
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}

.mini-view .button:active { transform: scale(0.975); }

@media (hover: hover) {
  .mini-view .button--primary:hover { box-shadow: var(--elevation-pop); }
}

.mini-view .button:disabled { opacity: 0.55; cursor: default; }
.mini-view .button:disabled:active { transform: none; }

.mini-view .button[data-loading='true'] {
  position: relative;
  color: transparent;
}

.mini-view .button[data-loading='true']::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--accent-ink);
  animation: mini-spin 620ms linear infinite;
}

.mini-view .button--ghost[data-loading='true']::after { color: var(--ink-2); }

/* Копирование реквизитов — самое частое действие на экране пополнения. */
.card-req__copy {
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.card-req__copy:active { transform: scale(0.96); }

@media (hover: hover) {
  .card-req__copy:hover { background: var(--field-line); }
  .dropzone:hover { border-color: var(--accent); color: var(--ink); }
  .media-picker__item:hover { background: var(--line); }
}

.dropzone {
  transition: border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}

.dropzone:active { background: var(--surface-2); }
.media-picker__item { transition: background var(--dur-1) var(--ease-out); }
.media-picker__button:active { transform: scale(0.9); }
.media-picker__button { transition: transform var(--dur-1) var(--ease-out),
                                    background var(--dur-1) var(--ease-out); }

/* Товар по ссылке: кадры проявляются, таймер в последнюю минуту начинает
   пульсировать — к этому моменту решение уже принимают, а не читают описание. */
.secret__frame img,
.secret__frame video { animation: mini-rise var(--dur-3) var(--ease-out) both; }

.secret__timer {
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}

.secret__timer[data-hot='true'] .secret__timer-value {
  animation: mini-pulse 1s var(--ease-in-out) infinite;
}

.secret__dot { transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.secret__dot[aria-current='true'] { transform: scale(1.25); }

/* Всплывашка вылетает снизу, из-под панели: оттуда же приходят все ответы
   приложения, и взгляд там её уже ищет. */
.mini-toast {
  transform: translate(-50%, 1.25rem) scale(0.96);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.mini-toast[data-show='true'] { transform: translate(-50%, 0) scale(1); }
.mini-toast[data-kind='ok'] { background: var(--accent); color: var(--accent-ink); }

.mini-empty { animation: mini-rise var(--dur-2) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .mini-skeleton__line { animation: none; }
  .mini-toast { transition-duration: 1ms; }

  /* Движение выключаем целиком, а не ускоряем: просьба однозначная.
     Состояния при этом остаются — цвет, тень, положение тумблера. */
  .mini-overlay .mini-view,
  .mini-overlay .mini-view > *,
  .mini-overlay .mini-view > .topup > *,
  .mini-banner,
  .mini-empty,
  .secret__frame img,
  .secret__frame video,
  .balance[data-bump='true'],
  .secret__timer[data-hot='true'] .secret__timer-value,
  .status-dot[data-status='timer'],
  .amounts__item[data-active='true'],
  .segmented__item[data-active='true'],
  .mini-copy[data-ok='true'] {
    animation: none;
  }

  .mini-view .button:active,
  .mini-copy:active,
  .amounts__item:active,
  .segmented__item:active,
  .tabbar__item:active .mini-icon,
  .card-req__copy:active,
  .media-picker__button:active { transform: none; }
}