/* ══════════════════════════════════════════════════════════════════════════
   BatTunnel VPN — новый вид Mini App (ребрендинг, этап D). Только для v2.html.
   Старая страница (index.html + styles.css) этот файл не грузит.

   СТИЛЬ (решения владельца 29.10.2026, docs/rebrand_spec_2026-10-29.md §1, лист «Стиль»):
   • фон ВСЕГДА #FFFFFF — тема Telegram не читается (никаких var(--tg-theme-*));
   • цвета только токены ниже: --v2-ink #000 (текст, главные кнопки), --v2-ink2 #3A3A3A
     (текст описаний), --v2-muted #6B6B6B (подписи — светлее нельзя), --v2-line #E6E6E6
     (рамки), --v2-line2 #EEEEEE (разделители строк), --v2-fill #F4F4F4 (плашки, плитки);
     ни красного, ни зелёного: статус — значком ✓ / ✕ и словом;
   • Unbounded 600 — заголовки экранов, крупные числа и цены (класс .v2-display или
     компоненты ниже), всё остальное — Inter; шрифты свои (./fonts, OFL);
   • иконки — тела lucide (константа V2_ICONS в app.v2.js), руками SVG не рисовать.
   Знак ₽ (U+20BD) загружается отдельным подмножеством тех же шрифтов (currency-*).

   КАРКАС
   #app2                 корень страницы (колонка ≤ 540px по центру)
   #screen.v2-screen     сюда app.v2.js монтирует экран
   .v2-stage             обёртка каждого экрана (её создаёт render()): колонка, поля 20px
   body.v2-has-tabbar    на экранах-вкладках (#/, #/referrals, #/support) — место под меню
   body.kb-open          клавиатура открыта (меню прячется)
   body.is-browser       сайт (не Telegram)

   КОМПОНЕНТЫ (разметку экранов пишем этими классами; свои стили экрана — в КОНЕЦ файла
   отдельной секцией «/* ── Экран: <имя> ── *\/», с префиксом v2-<экран>-…)
   Шапка
     .v2-head                     шапка внутреннего экрана «‹ Заголовок» (52px)
       .v2-head__back             кнопка «назад» 40×40 (внутри — svg chevron-left);
                                  data-action="back" — общий обработчик app.v2.js
       .v2-head__title            h1, Unbounded 22/600, в одну строку
       .v2-head__action           необязательная текстовая кнопка справа
     .v2-head--tab                шапка экрана-вкладки: только заголовок, без «назад»
     .v2-logo                     логотип сверху главной (<img src="./logo.svg">, 128px)
   Текст
     .v2-display                  Unbounded 600 (любой размер задаёт компонент)
     .v2-num / --m / --s          крупное число: 32 / 28 / 20px («26 дней», «2 из 3», «+15 дней»)
     .v2-price / --s              цена Unbounded: 28 / 20px («719 ₽»)
     .v2-h2                       заголовок секции, 15/600
     .v2-label                    подпись над полем / группой, 13/500, серый
     .v2-sub                      строка под числом, 15, серый
     .v2-text                     абзац описания, 15/1.4, #3A3A3A;  .v2-text--s 13/1.35 серый
     .v2-muted / .v2-ink2         цвет подписи / описания
     .v2-link                     текстовая ссылка (чёрная, подчёркнутая)
   Блоки
     .v2-card                     карточка: рамка, радиус 20, поля 18, колонка gap 14
       .v2-card--tight            поля 16/18, gap 10
       .v2-card__top              строка «подпись слева — пилюля справа»
       .v2-card__label            «Подписка», «Получено за друзей» — 13/500 серый
     .v2-section                  секция: .v2-h2 / .v2-label + содержимое, gap 6
     .v2-tiles / .v2-tiles--4     сетка плиток 2 колонки / 4 колонки (компактные)
       .v2-tile                   плитка-ссылка на подложке F4: svg + .v2-tile__title (+ .v2-tile__sub)
     .v2-note                     плашка-подсказка F4: svg info + текст #3A3A3A
     .v2-dashed                   пунктирная рамка («Свободное место»)
     .v2-dl                       сводка заказа: .v2-dl__row > dt (серый) + dd (600)
     .v2-total                    строка «К оплате» + .v2-price
     .v2-foot                     нижняя зона действий экрана (липнет к низу): кнопка + .v2-foot__note
       .v2-foot--line             с линией сверху (конструктор)
     .v2-links                    подвал главной: .v2-links__main (чёрные) и .v2-links__docs (серые)
   Кнопки
     .v2-btn                      база: 52px, радиус 14, Inter 15/600, во всю ширину
       .v2-btn--primary           чёрная (главное действие экрана — одна)
       .v2-btn--secondary         белая с чёрной рамкой 1.5px
       .v2-btn--text              текстовая, подчёркнутая
       .v2-btn--m / --s           46px (14px текст) / 40px (радиус 12)
       .v2-btn--inline            по ширине текста (поля 0 18px)
       .v2-btn--icon              круглая только-иконка 40×40 (+ --primary: чёрная 52×52 «Отправить»)
       [disabled] / .is-busy      неактивна / ждёт ответа (внутри можно .v2-spin)
     .v2-btns                     две кнопки в ряд;  .v2-btn-stack — колонкой, gap 8
     .v2-step-btn                 круглая «− / +» 40×40 (конструктор)
   Списки
     .v2-list                     <ul>/<div> строк; .v2-list--box — в рамке с радиусом 16 (поля 4px 16px);
                                  .v2-list--closed — с линией и под последней строкой
       .v2-row                    строка: линия сверху (первая в .v2-list--box — без линии), ≥ 52px
         .v2-row__ic              квадрат 40×40 на подложке с иконкой (устройство)
         .v2-row__main            колонка: .v2-row__title (15) + .v2-row__sub (13 серый)
         .v2-row__value           значение справа серым + svg chevron-right 18px («2 из 3 ›»)
         .v2-row__end             правый край: сумма + статус колонкой (история платежей)
       .v2-row--link              вся строка нажимается (a/button)
       .v2-row--s                 48px (строки внутри карточки)
       .v2-row--stack             строка с прогрессом под ней (колонка: .v2-row__line + .v2-progress)
       .v2-row--off               погашенная (отменённый счёт): весь текст серый
     .v2-avatar                   кружок 36px с буквой (приглашённые)
   Статусы и прогресс
     .v2-pill                     пилюля 26px:  --solid ✓ Активна (чёрная) · --outline ✕ Истекла (рамка)
                                  · --muted «Ждёт оплаты» (F4 / #3A3A3A)
     .v2-progress > .v2-progress__bar   полоса 4px; ширина бара — style.width в %
     .v2-dots > .v2-dots__set > .v2-dot (.is-done) + .v2-dots__text   кружки друзей 32px: чёрный ✓ /
                                  пунктир (элемент пустой — ✓ рисует CSS), «1 из 2»; подпись — role="img" + aria-label
     .v2-step-num                 кружок с номером шага 28px (инструкция)
   Выбор
     .v2-seg (+ style="--n:4")    сегмент-переключатель на подложке; .v2-seg__opt[aria-checked="true"]
                                  выбран; .v2-seg__opt small — вторая строка («−20%»); .v2-seg--tall 48px
     .v2-chips > .v2-chip         чипы-кнопки (сбой): [aria-pressed="true"] — чёрный
     .v2-opts > .v2-opt           сетка вариантов 3 в ряд (обходы ГБ): [aria-checked="true"] — рамка 2px;
                                  .v2-opt--wide на 2 колонки
     .v2-pack                     вариант-карточка (пакет тарифа): [aria-checked="true"] — рамка 2px
       .v2-pack__main / __title / __sub / __end / __per
     .v2-radio-row                строка-радио (способ оплаты): svg + текст + .v2-radio;
                                  [aria-checked="true"] — жирный текст и точка
     .v2-toggle-row               строка «текст слева — .v2-switch / .v2-check справа» с линией сверху
     .v2-switch                   <button role="switch" aria-checked> 48×28 со «шляпкой» <span>
     .v2-check                    <input type="checkbox" class="v2-check"> 22×22, отмечен — чёрный с ✓
   Поля
     .v2-field                    колонка: <label class="v2-label"> + поле
     .v2-input / .v2-textarea     поле 52px / многострочное 96px; .v2-input--mono — моноширинный
     .v2-inputbar                 рамка-поле с кнопкой внутри (ссылка + «копировать»): input + .v2-btn--icon
     .v2-composer                 строка чата: .v2-input + .v2-btn--icon.v2-btn--primary
     .v2-err / .v2-ok             строка ошибки «✕ …» / успеха «✓ …» (чёрным, без цвета)
   Аккордеон (частые вопросы)
     .v2-acc > .v2-acc__item > .v2-acc__q[aria-expanded] + .v2-acc__a (hidden, когда свёрнут)
   Чат
     .v2-chat > .v2-msg.v2-msg--me | .v2-msg--them  (.v2-msg__who, .v2-msg__text, .v2-msg__time)
   Служебное
     .v2-modal                    своё окно подтверждения (белое, НЕ tg.showConfirm) — строит
                                  confirmDialog() в app.v2.js: .v2-modal__box > __title, __text, __actions
     .v2-toast (#toast)           тост; .is-show — виден
     .v2-empty                    пустое состояние: .v2-empty__ic, .v2-empty__title, .v2-empty__text, кнопка
     .v2-skel                     скелет загрузки: --line, --title, --num, --card, --row, --tile, --logo
     .v2-spin                     маленький круговой индикатор (внутри кнопки или строки)
     .v2-tabbar > .v2-tab (.is-active) > .v2-tab__ic + .v2-tab__lbl   нижнее меню (строит app.v2.js)
     .v2-sr                       текст только для экранного диктора
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Шрифты (свои, OFL; @fontsource 5.1.1) ──────────────────────────────────
   unicode-range — как у Google Fonts: браузер качает только нужное подмножество.
   font-display: swap — текст виден сразу системным шрифтом, потом подменяется. */
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/unbounded-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/unbounded-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/unbounded-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/unbounded-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('./fonts/unbounded-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('./fonts/unbounded-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/inter-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('./fonts/inter-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('./fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Токены ──────────────────────────────────────────────────────────────── */
:root {
  --v2-bg: #FFFFFF;
  --v2-ink: #000000;        /* текст, главные кнопки, выбранное */
  --v2-ink2: #3A3A3A;       /* текст описаний, ответы, подсказки */
  --v2-muted: #6B6B6B;      /* подписи, неактивное — светлее НЕЛЬЗЯ */
  --v2-line: #E6E6E6;       /* рамки карточек и полей */
  --v2-line2: #EEEEEE;      /* разделители строк, пустая часть полосы */
  --v2-fill: #F4F4F4;       /* плашки, плитки, подложка сегмента */
  --v2-dim: rgba(0, 0, 0, 0.40);   /* затемнение под окном подтверждения */

  --v2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --v2-font-head: 'Unbounded', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --v2-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --v2-gutter: 20px;        /* поля экрана слева/справа */
  --v2-r-card: 20px;
  --v2-r-box: 16px;         /* плитка, список в рамке, вариант-карточка */
  --v2-r-btn: 14px;
  --v2-r-s: 12px;           /* малая кнопка, сегмент, вариант */
  --v2-r-pill: 999px;

  --v2-h-btn: 52px;
  --v2-h-btn-m: 46px;
  --v2-h-btn-s: 40px;
  --v2-tabbar-h: 62px;      /* без нижнего безопасного поля */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* ── База ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: var(--v2-font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}
body { min-height: 100vh; min-height: 100dvh; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }

a { color: var(--v2-ink); text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
input, textarea, select {
  font: inherit;
  color: var(--v2-ink);
  margin: 0;
}
input::placeholder, textarea::placeholder { color: var(--v2-muted); opacity: 1; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 2px; }
::selection { background: var(--v2-line); color: var(--v2-ink); }

/* ── Каркас ──────────────────────────────────────────────────────────────── */
#app2 {
  max-width: 540px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 24px);
  display: flex;
  flex-direction: column;
  background: var(--v2-bg);
}
#screen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.v2-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  flex: 1 1 auto;
  padding: 0 var(--v2-gutter);
}
/* Место под нижнее меню на экранах-вкладках. */
body.v2-has-tabbar #app2 { padding-bottom: calc(var(--safe-bottom) + var(--v2-tabbar-h) + 20px); }
body.v2-has-tabbar.kb-open #app2 { padding-bottom: calc(var(--safe-bottom) + 12px); }

/* Стартовый скелет в v2.html (до первого экрана; обычно его закрывает заставка). */
.v2-boot { display: flex; flex-direction: column; gap: 14px; padding: 10px var(--v2-gutter); }

/* ── Шапка экрана ────────────────────────────────────────────────────────── */
.v2-head {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 calc(-1 * (var(--v2-gutter) - 8px));   /* «назад» — в 8px от края, как на макете */
  padding: 0 var(--v2-gutter) 0 8px;
}
.v2-head--tab { margin: 0; padding: 0; }
.v2-head__back {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--v2-r-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--v2-ink);
}
.v2-head__back svg { width: 24px; height: 24px; }
.v2-head__back:active { background: var(--v2-fill); }
.v2-head__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--v2-font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-head__action {
  flex-shrink: 0;
  height: 40px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v2-logo { display: flex; justify-content: center; padding: 6px 0 2px; }
.v2-logo img, .v2-logo svg { width: 128px; height: auto; }

/* ── Текст ───────────────────────────────────────────────────────────────── */
.v2-display { font-family: var(--v2-font-head); font-weight: 600; }
.v2-num {
  font-family: var(--v2-font-head);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.v2-num--m { font-size: 28px; line-height: 1.15; }
.v2-num--s { font-size: 20px; line-height: 1.2; }
.v2-price {
  font-family: var(--v2-font-head);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.v2-price--s { font-size: 20px; line-height: 1.2; }
.v2-h2 { font-size: 15px; font-weight: 600; line-height: 20px; }
.v2-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--v2-muted); }
.v2-sub { font-size: 15px; color: var(--v2-muted); }
.v2-text { font-size: 15px; line-height: 1.4; color: var(--v2-ink2); }
.v2-text--s { font-size: 13px; line-height: 1.35; color: var(--v2-muted); }
.v2-muted { color: var(--v2-muted); }
.v2-ink2 { color: var(--v2-ink2); }
.v2-center { text-align: center; }
.v2-link {
  color: var(--v2-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Карточка, секция, плитки, плашки ────────────────────────────────────── */
.v2-card {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--v2-bg);
}
.v2-card--tight { padding: 16px 18px; gap: 10px; }
.v2-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-card__label { font-size: 13px; font-weight: 500; color: var(--v2-muted); }

.v2-section { display: flex; flex-direction: column; gap: 6px; }

.v2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-tile {
  background: var(--v2-fill);
  border-radius: var(--v2-r-box);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--v2-ink);
  text-align: left;
  min-width: 0;
}
.v2-tile svg { width: 22px; height: 22px; }
.v2-tile__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.v2-tile__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--v2-muted); }
.v2-tile:active { background: var(--v2-line2); }
.v2-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v2-tiles--4 .v2-tile { padding: 12px 4px; align-items: center; gap: 8px; text-align: center; }
.v2-tiles--4 .v2-tile__title { font-size: 12px; }

.v2-note {
  background: var(--v2-fill);
  border-radius: var(--v2-r-box);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--v2-ink2);
}
.v2-note svg { width: 20px; height: 20px; margin-top: 1px; color: var(--v2-ink2); }
.v2-note--s { border-radius: var(--v2-r-s); padding: 10px 14px; font-size: 13px; line-height: 18px; }

.v2-dashed {
  border: 1.5px dashed var(--v2-muted);
  border-radius: var(--v2-r-box);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.v2-dl { display: flex; flex-direction: column; }
.v2-dl__row { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-dl__row dt { font-size: 15px; color: var(--v2-muted); }
.v2-dl__row dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; }

.v2-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-total > span:first-child { font-size: 15px; font-weight: 600; }

/* Нижняя зона действий: липнет к низу экрана (над безопасным полем). */
.v2-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: auto calc(-1 * var(--v2-gutter)) 0;
  padding: 12px var(--v2-gutter) calc(var(--safe-bottom) + 20px);
  background: var(--v2-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-foot--line { border-top: 1px solid var(--v2-line2); padding-top: 14px; gap: 12px; }
.v2-foot__note { font-size: 12px; line-height: 1.35; color: var(--v2-muted); text-align: center; }
.v2-foot__note a { color: var(--v2-muted); text-decoration: underline; }
/* У экрана с .v2-foot своё нижнее поле уже есть. */
#app2:has(.v2-foot) { padding-bottom: 0; }

.v2-links { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 4px; }
.v2-links__main { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; font-weight: 500; }
.v2-links__main a { color: var(--v2-ink); text-decoration: underline; text-underline-offset: 3px; }
.v2-links__docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12px; }
.v2-links__docs a { color: var(--v2-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.v2-btn {
  width: 100%;
  height: var(--v2-h-btn);
  padding: 0 12px;
  border-radius: var(--v2-r-btn);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--v2-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--v2-ink);
  background: transparent;
  transition: transform .12s ease, background-color .12s ease;
}
.v2-btn svg { width: 20px; height: 20px; }
.v2-btn:active:not(:disabled) { transform: scale(0.985); }
.v2-btn--primary { background: var(--v2-ink); border-color: var(--v2-ink); color: var(--v2-bg); }
.v2-btn--secondary { background: var(--v2-bg); border-color: var(--v2-ink); color: var(--v2-ink); }
.v2-btn--secondary:active:not(:disabled) { background: var(--v2-fill); }
.v2-btn--text {
  width: auto;
  height: 44px;
  padding: 0 16px;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: center;
}
.v2-btn--m { height: var(--v2-h-btn-m); padding: 0 8px; font-size: 14px; }
.v2-btn--s { height: var(--v2-h-btn-s); padding: 0 8px; font-size: 14px; border-radius: var(--v2-r-s); }
.v2-btn--inline { width: auto; flex-shrink: 0; padding: 0 18px; }
.v2-btn--icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
}
.v2-btn--icon.v2-btn--primary { width: 52px; height: 52px; border-radius: var(--v2-r-pill); }
.v2-btn--icon svg { width: 20px; height: 20px; }
/* Неактивная — серая (не полупрозрачная: светлее #6B6B6B цвета нет). */
.v2-btn:disabled, .v2-btn[aria-disabled="true"] { cursor: default; transform: none; }
.v2-btn--primary:disabled, .v2-btn--primary[aria-disabled="true"] {
  background: var(--v2-line); border-color: var(--v2-line); color: var(--v2-muted);
}
.v2-btn--secondary:disabled, .v2-btn--secondary[aria-disabled="true"],
.v2-btn--text:disabled { border-color: var(--v2-line); color: var(--v2-muted); }
.v2-btn.is-busy { pointer-events: none; }

.v2-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Две кнопки в ряд на узком телефоне (≤ 375px): длинная подпись («Скопировать ссылку») переносится
   на вторую строку, а не обрезается. */
.v2-btns > .v2-btn { white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
.v2-btn-stack { display: flex; flex-direction: column; gap: 8px; }

.v2-step-btn {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--v2-ink);
  border-radius: var(--v2-r-pill);
  background: var(--v2-bg);
  color: var(--v2-ink);
  display: flex; align-items: center; justify-content: center;
}
.v2-step-btn svg { width: 20px; height: 20px; }
.v2-step-btn:disabled { border-color: var(--v2-line); color: var(--v2-muted); }

/* ── Списки ──────────────────────────────────────────────────────────────── */
.v2-list { display: flex; flex-direction: column; }
.v2-list--box { border: 1px solid var(--v2-line); border-radius: var(--v2-r-box); padding: 4px 16px; }
.v2-list--closed { border-bottom: 1px solid var(--v2-line2); }
.v2-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--v2-line2);
  padding: 6px 0;
  width: 100%;
  color: var(--v2-ink);
  text-align: left;
  font-size: 15px;
}
.v2-list--box > .v2-row:first-child { border-top: 0; }
.v2-row--s { min-height: 48px; }
.v2-row--link { cursor: pointer; }
.v2-row--link:active { background: var(--v2-fill); }
.v2-row__ic {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--v2-r-s);
  background: var(--v2-fill);
  display: flex; align-items: center; justify-content: center;
  color: var(--v2-ink);
}
.v2-row__ic svg { width: 20px; height: 20px; }
.v2-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-row__title { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.v2-row__title--b { font-weight: 600; }
.v2-row__sub { font-size: 13px; line-height: 17px; color: var(--v2-muted); }
.v2-row__value {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: var(--v2-muted);
  white-space: nowrap;
}
.v2-row__value svg { width: 18px; height: 18px; }
.v2-row__end {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.v2-row__end > :first-child { font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.v2-row__end > :nth-child(2) { font-size: 12px; line-height: 16px; color: var(--v2-ink2); white-space: nowrap; }
.v2-row--stack { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; min-height: 60px; }
.v2-row__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-row--off, .v2-row--off .v2-row__title, .v2-row--off .v2-row__end > * { color: var(--v2-muted); }
.v2-card .v2-row { padding: 0; }

.v2-avatar {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Статусы и прогресс ──────────────────────────────────────────────────── */
.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--v2-r-pill);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-pill--solid { background: var(--v2-ink); border-color: var(--v2-ink); color: var(--v2-bg); }
.v2-pill--outline { background: var(--v2-bg); border-color: var(--v2-ink); color: var(--v2-ink); }
.v2-pill--muted { background: var(--v2-fill); border-color: var(--v2-fill); color: var(--v2-ink2); }

.v2-progress {
  display: block;
  height: 4px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-line2);
  overflow: hidden;
}
.v2-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  max-width: 100%;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink);
  transition: width .3s ease;
}

.v2-dots { display: flex; align-items: center; gap: 12px; }
.v2-dots__set { display: flex; gap: 8px; }
.v2-dot {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--v2-r-pill);
  border: 1.5px dashed var(--v2-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
.v2-dot.is-done { background: var(--v2-ink); border: 0; color: var(--v2-bg); }
.v2-dot.is-done::before { content: '✓'; }
.v2-dots__text { font-size: 15px; font-weight: 600; }

.v2-step-num {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink);
  color: var(--v2-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

/* ── Выбор: сегмент, чипы, варианты, пакеты, радио, переключатель, флажок ── */
.v2-seg {
  --n: 4;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--v2-r-s);
  background: var(--v2-fill);
}
.v2-seg__opt {
  height: 40px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  white-space: nowrap;
}
.v2-seg__opt small { font-size: 12px; font-weight: 500; color: var(--v2-muted); }
.v2-seg__opt[aria-checked="true"], .v2-seg__opt.is-on { background: var(--v2-bg); border-color: var(--v2-ink); }
.v2-seg--tall .v2-seg__opt { height: 48px; }
/* Сегмент «устройство» на инструкции: невыбранные — #3A3A3A и 500, как на макете. */
.v2-seg--soft .v2-seg__opt { color: var(--v2-ink2); font-weight: 500; }
.v2-seg--soft .v2-seg__opt[aria-checked="true"] { color: var(--v2-ink); font-weight: 600; }

.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-chip {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-pill);
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-chip[aria-pressed="true"], .v2-chip.is-on {
  background: var(--v2-ink); border-color: var(--v2-ink); color: var(--v2-bg); font-weight: 600;
}

.v2-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2-opt {
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-s);
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.v2-opt--wide { grid-column: span 2; }
/* Выбран — рамка 2px (box-shadow, чтобы текст не прыгал на 1px). */
.v2-opt[aria-checked="true"], .v2-opt.is-on { border-color: var(--v2-ink); box-shadow: inset 0 0 0 1px var(--v2-ink); }
.v2-opt:disabled { color: var(--v2-muted); }

.v2-pack {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-box);
  background: var(--v2-bg);
  color: var(--v2-ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-pack[aria-checked="true"], .v2-pack.is-on { border-color: var(--v2-ink); box-shadow: inset 0 0 0 1px var(--v2-ink); }
.v2-pack__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v2-pack__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 600; }
.v2-pack__sub { font-size: 13px; color: var(--v2-muted); }
.v2-pack__end { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.v2-pack__end .v2-price { font-size: 20px; line-height: 1.2; }
.v2-pack__per { font-size: 12px; color: var(--v2-muted); }

.v2-radios { display: flex; flex-direction: column; border-bottom: 1px solid var(--v2-line2); }
.v2-radio-row {
  width: 100%;
  min-height: 46px;
  padding: 0;
  border-top: 1px solid var(--v2-line2);
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-radio-row svg { width: 20px; height: 20px; }
.v2-radio-row > span:not(.v2-radio) { flex: 1 1 auto; min-width: 0; }
.v2-radio-row[aria-checked="true"] { font-weight: 600; }
.v2-radio {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--v2-muted);
  border-radius: var(--v2-r-pill);
  display: flex; align-items: center; justify-content: center;
}
.v2-radio-row[aria-checked="true"] .v2-radio { border: 2px solid var(--v2-ink); }
.v2-radio-row[aria-checked="true"] .v2-radio::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink);
}

.v2-toggle-row {
  min-height: 58px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-line2);
  display: flex;
  align-items: center;
  gap: 16px;
}
.v2-toggle-row > :first-child { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.v2-switch {
  width: 48px; height: 28px;
  flex-shrink: 0;
  padding: 0 4px;
  border: 1.5px solid var(--v2-muted);
  border-radius: var(--v2-r-pill);
  background: var(--v2-bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background-color .15s ease, border-color .15s ease;
}
.v2-switch > span {
  width: 18px; height: 18px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-muted);
  transition: transform .15s ease, background-color .15s ease;
}
.v2-switch[aria-checked="true"] { background: var(--v2-ink); border-color: var(--v2-ink); }
.v2-switch[aria-checked="true"] > span { background: var(--v2-bg); transform: translateX(17px); }
.v2-switch:disabled { border-color: var(--v2-line); }
.v2-switch:disabled > span { background: var(--v2-line); }

.v2-check {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--v2-ink);
  border-radius: 6px;
  background: var(--v2-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.v2-check:checked { background: var(--v2-ink); }
.v2-check:checked::after { content: '✓'; color: var(--v2-bg); font-size: 14px; font-weight: 700; line-height: 1; }
.v2-check:disabled { border-color: var(--v2-line); cursor: default; }

/* ── Поля ────────────────────────────────────────────────────────────────── */
.v2-field { display: flex; flex-direction: column; gap: 6px; }
.v2-input, .v2-textarea {
  width: 100%;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-btn);
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: var(--v2-font);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.v2-input { height: 52px; padding: 0 16px; }
.v2-textarea { min-height: 96px; padding: 14px 16px; line-height: 21px; resize: none; display: block; }
.v2-input:focus, .v2-textarea:focus { border-color: var(--v2-ink); outline: none; }
.v2-input--mono { font-family: var(--v2-font-mono); font-size: 13px; }
.v2-input[aria-invalid="true"], .v2-textarea[aria-invalid="true"] { border-color: var(--v2-ink); border-width: 1.5px; }

.v2-inputbar {
  height: 52px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-btn);
  padding: 0 4px 0 12px;
  display: flex;
  align-items: center;
}
.v2-inputbar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  text-overflow: ellipsis;
}
.v2-composer { display: flex; align-items: center; gap: 8px; }
.v2-composer .v2-input { flex: 1 1 auto; min-width: 0; }

.v2-err, .v2-ok { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--v2-ink); }
.v2-err::before { content: '✕ '; }
.v2-ok::before { content: '✓ '; }
.v2-err:empty, .v2-ok:empty { display: none; }

/* ── Аккордеон: частые вопросы ───────────────────────────────────────────── */
.v2-acc { border: 1px solid var(--v2-line); border-radius: var(--v2-r-card); padding: 0 16px; }
.v2-acc__item + .v2-acc__item { border-top: 1px solid var(--v2-line2); }
.v2-acc__q {
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.v2-acc__q svg { width: 20px; height: 20px; transition: transform .2s ease; }
.v2-acc__q[aria-expanded="true"] { font-weight: 600; }
.v2-acc__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.v2-acc__a { padding: 0 0 14px; font-size: 14px; line-height: 20px; color: var(--v2-ink2); white-space: pre-line; }

/* ── Чат поддержки ───────────────────────────────────────────────────────── */
.v2-chat { display: flex; flex-direction: column; gap: 8px; }
.v2-msg {
  max-width: min(280px, 82%);
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.v2-msg--me { align-self: flex-end; background: var(--v2-line); border-radius: 18px 18px 6px 18px; }
.v2-msg--them { align-self: flex-start; background: var(--v2-bg); border: 1px solid var(--v2-line); border-radius: 18px 18px 18px 6px; }
.v2-msg__who { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--v2-ink2); }
.v2-msg__text { white-space: pre-wrap; }
.v2-msg__time { align-self: flex-end; font-size: 11px; line-height: 14px; color: var(--v2-muted); }
.v2-msg--me .v2-msg__time { color: var(--v2-ink2); }
.v2-msg img { border-radius: 12px; max-width: 100%; }

/* ── Окно подтверждения (своё, белое) ────────────────────────────────────── */
.v2-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(var(--safe-bottom) + 16px);
  background: var(--v2-dim);
  opacity: 0;
  transition: opacity .18s ease;
}
.v2-modal.is-open { opacity: 1; }
.v2-modal__box {
  width: 100%;
  max-width: 400px;
  background: var(--v2-bg);
  border-radius: var(--v2-r-card);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(16px);
  transition: transform .2s cubic-bezier(.3, 0, .2, 1);
}
.v2-modal.is-open .v2-modal__box { transform: none; }
.v2-modal__title { font-family: var(--v2-font-head); font-size: 17px; font-weight: 600; line-height: 1.25; }
.v2-modal__text { font-size: 15px; line-height: 1.4; color: var(--v2-ink2); white-space: pre-line; }
.v2-modal__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
@media (min-width: 560px) { .v2-modal { align-items: center; } }

/* ── Тост ────────────────────────────────────────────────────────────────── */
.v2-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 24px);
  z-index: 2500;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--v2-r-btn);
  background: var(--v2-ink);
  color: var(--v2-bg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease;
}
.v2-toast:empty { display: none; }
.v2-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
body.v2-has-tabbar .v2-toast { bottom: calc(var(--safe-bottom) + var(--v2-tabbar-h) + 16px); }
body:has(.v2-foot) .v2-toast { bottom: calc(var(--safe-bottom) + 96px); }

/* ── Пустое состояние ────────────────────────────────────────────────────── */
.v2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 32px 12px;
}
.v2-empty__ic {
  width: 56px; height: 56px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-fill);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.v2-empty__ic svg { width: 24px; height: 24px; }
.v2-empty__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.v2-empty__text { font-size: 14px; line-height: 1.4; color: var(--v2-muted); max-width: 300px; }
.v2-empty .v2-btn { margin-top: 8px; max-width: 320px; }

/* ── Скелет загрузки ─────────────────────────────────────────────────────── */
.v2-skel {
  display: block;
  border-radius: var(--v2-r-s);
  background: linear-gradient(90deg, var(--v2-fill) 0%, var(--v2-line2) 45%, var(--v2-fill) 90%) var(--v2-fill);
  background-size: 220% 100%;
  animation: v2-skel 1.3s ease-in-out infinite;
}
.v2-skel--line { height: 14px; width: 70%; border-radius: 7px; }
.v2-skel--title { height: 28px; width: 55%; border-radius: 8px; }
.v2-skel--num { height: 36px; width: 40%; border-radius: 10px; }
.v2-skel--row { height: 52px; }
.v2-skel--tile { height: 92px; border-radius: var(--v2-r-box); }
.v2-skel--card { height: 220px; border-radius: var(--v2-r-card); }
.v2-skel--logo { height: 46px; width: 113px; align-self: center; border-radius: 10px; }
@keyframes v2-skel { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }

.v2-spin {
  display: inline-block;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: var(--v2-r-pill);
  border: 2px solid var(--v2-line);
  border-top-color: var(--v2-ink);
  animation: v2-spin .8s linear infinite;
}
.v2-btn--primary .v2-spin { border-color: var(--v2-muted); border-top-color: var(--v2-bg); }
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* ── Нижнее меню ─────────────────────────────────────────────────────────── */
.v2-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  max-width: 540px;
  margin: 0 auto;
  display: none;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  padding: 8px 0 calc(var(--safe-bottom) + 10px);
  border-top: 1px solid var(--v2-line);
  background: var(--v2-bg);
}
body.v2-has-tabbar .v2-tabbar { display: grid; }
body.kb-open .v2-tabbar { display: none; }
.v2-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}
.v2-tab[hidden] { display: none; }
.v2-tab__ic { width: 24px; height: 24px; }
.v2-tab__ic svg { width: 100%; height: 100%; }
.v2-tab.is-active { color: var(--v2-ink); font-weight: 700; }
.v2-tab:active .v2-tab__ic { transform: scale(0.92); }

/* ── Доступность и движение ──────────────────────────────────────────────── */
.v2-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .v2-skel, .v2-spin { animation: none; }
  .v2-modal, .v2-modal__box, .v2-toast, .v2-progress__bar, .v2-switch, .v2-switch > span, .v2-acc__q svg { transition: none; }
  .v2-btn:active:not(:disabled) { transform: none; }
}

/* ── Сайт (не Telegram): колонка по центру, наведение ────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.is-browser .v2-btn--primary:not(:disabled):hover { background: var(--v2-ink2); border-color: var(--v2-ink2); }
  body.is-browser .v2-btn--secondary:not(:disabled):hover,
  body.is-browser .v2-row--link:hover { background: var(--v2-fill); }
  body.is-browser .v2-tile:hover { background: var(--v2-line2); }
  body.is-browser .v2-chip:not([aria-pressed="true"]):hover,
  body.is-browser .v2-opt:not([aria-checked="true"]):hover,
  body.is-browser .v2-pack:not([aria-checked="true"]):hover { border-color: var(--v2-muted); }
  body.is-browser a:hover { color: var(--v2-ink2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ЭКРАНЫ — ниже секции экранов (каждая: «── Экран: <имя> ──», классы v2-<экран>-…).
   ══════════════════════════════════════════════════════════════════════════ */

/* screens-a */
/* Главная (App-Home, App-HomeNew), «Друзья» (App-Friends), «Поддержка» (App-Support).
   Разметку строит app.v2.js (v2HomeActive / v2HomeNew / v2TrialFriendsCard / v2HomeTiles /
   v2HomeLinks, маршруты #/referrals и #/support) из компонентов v2-* выше; здесь — только
   отличия этих экранов. Цвета — только токены палитры. */

/* ── Экран: Главная ──────────────────────────────────────────────────────── */
.v2-stage.v2-home--new { gap: 10px; }                 /* новичок: плотнее, как на макете */
.v2-logo--s { padding-top: 2px; }
.v2-logo--s img { width: 113px; }
.v2-home-main, .v2-home-tail { display: flex; flex-direction: column; gap: inherit; }

/* «Вам подарок» — единственный баннер главной: строка в рамке. */
.v2-home-gift {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-box);
  background: var(--v2-bg);
  color: var(--v2-ink);
  text-align: left;
}
.v2-home-gift:active { background: var(--v2-fill); }
.v2-home-gift__chev { color: var(--v2-muted); }
.v2-home-gift__chev svg { width: 18px; height: 18px; }

/* Карточка подписки: «26 дней» / «до 24 ноября», строки «Устройства» и «Обходы». */
.v2-home-term { display: flex; flex-direction: column; gap: 4px; }
.v2-home-title {
  font-family: var(--v2-font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.v2-home-rows .v2-row { font-size: 15px; }
.v2-home-rows .v2-row--stack { padding: 8px 0; }
.v2-home-rowhint { display: block; font-size: 12px; line-height: 1.35; color: var(--v2-ink2); }
.v2-home-rows .v2-row__value { min-width: 0; }
/* «Скопировать ссылку» и «Продлить» в ряд: первой — чуть шире и почти без полей, чтобы подпись
   влезла в одну строку от 375px (уже — переносится, см. .v2-btns > .v2-btn). */
.v2-home-sub .v2-btns { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.v2-home-sub .v2-btns > .v2-btn { padding: 0 2px; }

/* Пробный период (за двух друзей / прежний) и «от N ₽ в месяц». */
.v2-home-trial { padding: 18px; }
.v2-home-trial__body { display: flex; flex-direction: column; gap: 6px; }
.v2-home-trial .v2-text { line-height: 1.35; }
.v2-home-trial .v2-dots { margin-top: 2px; }
.v2-home-trial .v2-btn-stack, .v2-home-trial > .v2-btn { margin-top: 4px; }
.v2-home-price { gap: 12px; }
.v2-home-price__body { display: flex; flex-direction: column; gap: 6px; }

/* Плитки: кнопки во всю ячейку; 3 плитки (без подарка — сайт / подарки закрыты): в сетке 2×2
   последняя на всю ширину, в ряду из 4 — три колонки. */
.v2-tiles > .v2-tile { width: 100%; }
.v2-tile__txt { display: block; min-width: 0; }
.v2-tiles:not(.v2-tiles--4) > .v2-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.v2-tiles--4.v2-home-tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Подвал: «Выйти» (только сайт) — кнопкой, в виде ссылки. */
.v2-home-logout {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Экран: Друзья ───────────────────────────────────────────────────────── */
.v2-stage.v2-friends { gap: 12px; }
.v2-friends-skel { display: flex; flex-direction: column; gap: 12px; }
.v2-friends-gain { gap: 12px; }
.v2-friends-gain__v {
  width: 108px;
  flex-shrink: 0;
  font-family: var(--v2-font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
.v2-friends-gain__t { font-size: 14px; line-height: 18px; color: var(--v2-ink2); }
.v2-friends-share { display: flex; flex-direction: column; gap: 10px; }
.v2-friends-link {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: all;
  user-select: all;
}
.v2-friends-list .v2-row { min-height: 48px; }
.v2-friends-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.v2-friends-st { flex-shrink: 0; margin-left: auto; font-size: 13px; color: var(--v2-ink2); white-space: nowrap; }
.v2-friends-more {
  width: 100%;
  height: 40px;
  border-top: 1px solid var(--v2-line2);
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink);
}
.v2-friends-more svg { width: 16px; height: 16px; }

/* ── Экран: Поддержка ────────────────────────────────────────────────────── */
.v2-stage.v2-support { gap: 18px; }
.v2-support-faq, .v2-support-chat { gap: 8px; }
.v2-acc__qt { flex: 1 1 auto; min-width: 0; }
.v2-acc__q svg { width: 18px; height: 18px; color: var(--v2-muted); }
.v2-acc__q[aria-expanded="true"] svg { color: var(--v2-ink); }
/* Лента чата прокручивается сама (вопросы остаются над ней); пустая — без рамок. */
.v2-support-log {
  max-height: min(50vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}
.v2-support-log.is-empty { max-height: none; overflow: visible; }
.v2-support-empty { font-size: 14px; line-height: 1.4; color: var(--v2-muted); }
.v2-support-sys {
  align-self: center;
  max-width: 90%;
  padding: 2px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--v2-muted);
  white-space: pre-wrap;
}
.v2-support-media { display: block; max-width: 100%; max-height: 280px; border-radius: 12px; margin-bottom: 2px; }
img.v2-support-media { cursor: zoom-in; }
.v2-support-typing .v2-msg__text { color: var(--v2-muted); }
.v2-support-up .v2-progress { width: 160px; max-width: 100%; margin: 4px 0 2px; background: var(--v2-bg); }
.v2-support-composer { margin-top: 4px; }
.v2-support-attach { color: var(--v2-ink); }
.v2-support-attach:disabled { color: var(--v2-muted); }
.v2-support-close { height: 40px; font-size: 14px; }

/* screens-b */
/* «Тарифы» (App-Tariffs), «Собрать свой» (App-Constructor), «Оплата» (App-Checkout), «История
   платежей» (App-Payments). Разметку строит app.v2.js (renderPackagesScreen / renderLegacyTariffs,
   renderConstructorScreen, маршруты #/tariffs, #/checkout, #/payments) из компонентов v2-* выше;
   здесь — только отличия этих экранов. Цвета — только токены палитры. */

/* ── Экран: Тарифы ───────────────────────────────────────────────────────── */
.v2-stage.v2-tariffs { gap: 20px; }
.v2-tariffs .v2-section, .v2-ctor .v2-section { gap: 8px; }
.v2-tariffs-skel { display: flex; flex-direction: column; gap: 10px; }
.v2-tariffs-packs { display: flex; flex-direction: column; gap: 10px; }
.v2-pack__title > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.v2-pack__end .v2-price { font-variant-numeric: tabular-nums; }
.v2-pack__per { white-space: nowrap; }
/* Пакета нет на выбранный срок: серый и не нажимается (светлее #6B6B6B нельзя). */
.v2-pack[aria-disabled="true"] { cursor: default; }
.v2-pack[aria-disabled="true"], .v2-pack[aria-disabled="true"] .v2-price { color: var(--v2-muted); }
/* «Собрать свой» и предложения — строки между линиями (макет: 56px). */
.v2-tariffs-row { min-height: 56px; padding: 8px 0; }
.v2-tariffs-row > span:first-child svg { width: 20px; height: 20px; }
.v2-tariffs-more:empty { display: none; }

/* ── Экран: Собрать свой (конструктор) ───────────────────────────────────── */
.v2-stage.v2-ctor { gap: 24px; }
.v2-ctor-dev {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-box);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v2-ctor-dev__ctl { display: flex; align-items: center; gap: 18px; }
.v2-ctor-dev__n {
  min-width: 28px;
  text-align: center;
  font-family: var(--v2-font-head);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.v2-opt--full { grid-column: 1 / -1; }
/* «Без обходов» под вариантами объёма (макет: отступ 8 + линия + 14). */
.v2-ctor-simple { margin-top: 8px; padding: 14px 0 0; min-height: 0; align-items: flex-start; }
.v2-ctor-simple .v2-row__title { display: block; }
.v2-ctor .v2-note { margin-top: 4px; }
.v2-ctor-sum { display: flex; flex-direction: column; gap: 2px; }

/* ── Экран: Оплата ───────────────────────────────────────────────────────── */
.v2-stage.v2-checkout { gap: 12px; }
.v2-checkout-order { gap: 6px; }
.v2-checkout-title {
  font-family: var(--v2-font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.v2-checkout-note { margin-top: 2px; }
.v2-checkout-step { display: inline-flex; align-items: center; gap: 12px; }
.v2-checkout-step .v2-step-btn { width: 34px; height: 34px; }
.v2-checkout-step .v2-step-btn svg { width: 18px; height: 18px; }
.v2-checkout-step__n { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* Промокод, бонусы, реф-кошелёк — строки между линиями одной группой. */
.v2-checkout-extras { display: flex; flex-direction: column; border-bottom: 1px solid var(--v2-line2); }
.v2-checkout-promo__q {
  width: 100%;
  min-height: 48px;
  border-top: 1px solid var(--v2-line2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  text-align: left;
  color: var(--v2-ink);
}
.v2-checkout-promo__q > span:last-child { color: var(--v2-muted); }
.v2-checkout-promo__q svg { width: 18px; height: 18px; transition: transform .2s ease; }
.v2-checkout-promo__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.v2-checkout-promo__body { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; }
.v2-checkout-promo__bar { padding-right: 6px; gap: 8px; }
.v2-checkout-promo__bar input { font-family: var(--v2-font); font-size: 15px; }
/* Фокус — рамкой всего поля, не обводкой поля ввода внутри неё. */
.v2-checkout-promo__bar input:focus-visible { outline: none; }
.v2-checkout-promo__bar:focus-within { border-color: var(--v2-ink); }
.v2-checkout-line { font-size: 15px; }
.v2-checkout-minus { flex-shrink: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.v2-checkout-wallet { cursor: pointer; }
.v2-checkout-wallet .v2-check { margin-right: 13px; }   /* по оси переключателя, как на макете */
.v2-checkout-total { padding: 2px 0; }
.v2-checkout-pay { display: flex; flex-direction: column; gap: 12px; }
.v2-checkout-methods { gap: 4px; }
.v2-checkout-consent { font-size: 12px; line-height: 1.4; color: var(--v2-muted); }
.v2-checkout-consent a { color: var(--v2-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ── Экран: История платежей ─────────────────────────────────────────────── */
.v2-stage.v2-payments { gap: 22px; }
.v2-pay-ref:empty { display: none; }
.v2-pay-body { display: flex; flex-direction: column; gap: 22px; }
.v2-pay-body > .v2-skel { margin-bottom: -12px; }
.v2-pay-card { gap: 12px; }
.v2-pay-card__top { display: flex; }
.v2-pay-card__body { display: flex; flex-direction: column; gap: 4px; }
.v2-pay-card__title { font-size: 15px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.v2-pay-card__acts { margin-top: 2px; }
.v2-pay-card__acts--one { grid-template-columns: minmax(0, 1fr); }
.v2-pay-card__msg { font-size: 13px; line-height: 18px; color: var(--v2-ink2); }
.v2-pay-past { gap: 6px; }
.v2-pay-row { min-height: 56px; }
.v2-pay-date { width: 48px; flex-shrink: 0; font-size: 12px; line-height: 16px; color: var(--v2-muted); }
.v2-pay-row .v2-row__sub { overflow-wrap: anywhere; }

/* screens-c */
/* «Устройства» (App-Devices), «Обходы» и «Добавить обходы» (App-Obhody), «Инструкция»
   (App-Guide), «Подарить подписку», «Мои подарки», «Вам подарок» (App-Gift), «Сообщить о сбое»
   (App-Report), опрос и отзыв, промокод и бонус за канал, переход от другого VPN, уведомления,
   «О сервисе», связка аккаунтов и вход на сайте. Разметку строит app.v2.js из компонентов v2-*
   выше; здесь — только отличия этих экранов. Цвета — только токены палитры. */

/* ── Служебные классы, которые ставит app.v2.js (каркас и экраны частей выше) ── */
body.support-mode { overscroll-behavior-y: none; }   /* чат поддержки: без «резинки» страницы */
body.auth-mode #app2 { justify-content: center; }    /* вход на сайте: карточка по центру */
.v2-tab__lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-home-gifthost { display: flex; flex-direction: column; }
.v2-checkout-bonus { cursor: default; }
.v2-checkout-email { scroll-margin-top: 16px; }       /* к полю e-mail чекаут прокручивает сам */
.v2-friends-got { gap: 6px; }

/* ── Экран: Инструкция ───────────────────────────────────────────────────── */
.v2-stage.v2-guide { gap: 12px; }
.v2-guide-top { display: flex; flex-direction: column; gap: 8px; }
.v2-guide-steps { display: flex; flex-direction: column; gap: 12px; }
.v2-guide-step { gap: 10px; }
.v2-guide-step__head { display: flex; align-items: center; gap: 12px; }
.v2-guide-step__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.v2-guide-step > .v2-text { line-height: 21px; }
.v2-guide-step > .v2-btn { margin-top: 2px; }
.v2-guide-step > .v2-btn--secondary svg { width: 18px; height: 18px; }
.v2-guide-acts { gap: 4px; margin-top: 2px; }
.v2-guide-acts .v2-btn--text { height: 40px; }
.v2-guide-how { display: inline; font-size: 13px; line-height: 18px; }

/* ── Экран: Обходы и «Добавить обходы» ───────────────────────────────────── */
.v2-stage.v2-obhody { gap: 20px; }
.v2-obhody-left { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.v2-obhody-left .v2-pill { align-self: center; }
.v2-progress--l { height: 8px; }
.v2-obhody-buy { gap: 10px; }
.v2-obhody-keep { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; color: var(--v2-ink2); }
.v2-obhody-keep svg { width: 18px; height: 18px; }
/* Варианты объёма «10 ГБ / 49 ₽» 2 в ряд; выбран — рамка 2px (box-shadow, текст не прыгает). */
.v2-vols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-vol {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-box);
  background: var(--v2-bg);
  color: var(--v2-ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-vol[aria-checked="true"] { border-color: var(--v2-ink); box-shadow: inset 0 0 0 1px var(--v2-ink); }
.v2-vol:active { background: var(--v2-fill); }
.v2-vol__gb {
  font-family: var(--v2-font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.v2-vol__price { font-size: 15px; font-weight: 500; color: var(--v2-ink2); }

/* ── Экран: Устройства ───────────────────────────────────────────────────── */
.v2-stage.v2-devices { gap: 18px; }
.v2-dev-skel { display: flex; flex-direction: column; gap: 10px; }
.v2-dev-count { display: flex; flex-direction: column; gap: 4px; }
.v2-dev-list { display: flex; flex-direction: column; gap: 10px; }
.v2-dev-row { min-height: 64px; }
.v2-dev-row .v2-row__sub { overflow-wrap: anywhere; }
/* «Отвязать» / «Удалить» справа — текстовая кнопка, подчёркнутая. */
.v2-dev-act {
  flex-shrink: 0;
  height: 40px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v2-dev-act:disabled { color: var(--v2-muted); }
.v2-dev-copy { align-self: flex-start; margin-top: 2px; font-size: 13px; }
/* «Свободное место» — пунктиром, нажимается (ведёт в «Инструкцию»). */
.v2-dev-free { width: 100%; color: var(--v2-ink); text-align: left; }
.v2-dev-free:active { background: var(--v2-fill); }
.v2-dev-free:disabled { color: var(--v2-muted); }
.v2-dev-free__ic {
  width: 40px; height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--v2-muted);
}
.v2-dev-free__ic svg { width: 20px; height: 20px; }
.v2-dev-addon { flex-direction: row; align-items: center; gap: 14px; }
.v2-dev-addon__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* «Пересоздать ссылку» — внизу экрана, с предупреждением под кнопкой. */
.v2-dev-recreate {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.v2-dev-recreate .v2-text--s { max-width: 310px; }

/* ── Экран: Подарить подписку, Мои подарки, Вам подарок ──────────────────── */
.v2-stage.v2-gift { gap: 18px; }
.v2-gift-sec { gap: 8px; }
.v2-gift-field { margin-top: 4px; }
.v2-gift-opt { font-size: 13px; font-weight: 400; color: var(--v2-muted); }
.v2-gift-note { height: 88px; min-height: 88px; }
.v2-gift-anon { min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--v2-line2); }
.v2-gift-go { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.v2-gift-mine {
  align-self: center;
  height: 32px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink);
}
.v2-gift-mine svg { width: 16px; height: 16px; }
/* Карточка «Кому» над конструктором и оплатой подарка. */
.v2-gift-recip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-box);
}
.v2-gift-recip__edit { flex-shrink: 0; font-size: 14px; }
.v2-gift-list { display: flex; flex-direction: column; gap: 12px; }
.v2-gift-item.is-new { border-color: var(--v2-ink); }
.v2-gift-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v2-gift-item__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-gift-item__meta .v2-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.v2-gift-item__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-gift-item__acts .v2-btn { width: auto; flex: 1 1 120px; }
.v2-gift-quote { font-size: 14px; line-height: 1.4; color: var(--v2-ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.v2-gift-claim { display: flex; flex-direction: column; gap: 12px; }
.v2-gift-claim__head { display: flex; align-items: center; gap: 12px; }
.v2-gift-claim__title { font-family: var(--v2-font-head); font-size: 20px; font-weight: 600; line-height: 1.2; }
/* Списки «✓ строка»: что изменится с подарком, «О сервисе». */
.v2-gift-lines, .v2-about-list { display: flex; flex-direction: column; gap: 8px; }
.v2-gift-lines li, .v2-about-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--v2-ink2); }
.v2-gift-lines svg, .v2-about-list svg { width: 18px; height: 18px; margin-top: 1px; color: var(--v2-ink); }

/* ── Экран: Сообщить о сбое, опрос, отзыв ────────────────────────────────── */
.v2-stage.v2-report { gap: 16px; }
.v2-report-field { margin-top: 6px; }
.v2-report-go { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.v2-survey-row { display: flex; flex-direction: column; gap: 6px; }
.v2-survey-stars { display: flex; gap: 6px; margin-top: 2px; }
.v2-survey-star {
  width: 44px; height: 44px;
  border-radius: var(--v2-r-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--v2-muted);
}
.v2-survey-star svg { width: 28px; height: 28px; }
.v2-survey-star.is-on { color: var(--v2-ink); }
.v2-survey-star.is-on svg path { fill: currentColor; }

/* ── Экран: Промокод, бонус за канал, переход от другого VPN ─────────────── */
.v2-stage.v2-promo, .v2-stage.v2-swoffer { gap: 16px; }
/* Выпадающий список — со своей стрелкой системы (.v2-input её снимает). */
.v2-select { -webkit-appearance: menulist; appearance: auto; padding-right: 12px; }
.v2-promo-result { display: flex; flex-direction: column; gap: 4px; }
.v2-promo-title { font-family: var(--v2-font-head); font-size: 20px; font-weight: 600; line-height: 1.2; }
.v2-inputbar .v2-swoffer-code { font-size: 16px; font-weight: 600; letter-spacing: .04em; }

/* ── Экран: Уведомления ──────────────────────────────────────────────────── */
.v2-notif { align-items: flex-start; padding: 12px 0; }
.v2-notif:not(.is-unread) .v2-row__title--b { font-weight: 500; }
.v2-notif__body { font-size: 14px; line-height: 1.4; color: var(--v2-ink2); white-space: pre-line; overflow-wrap: anywhere; }
.v2-notif__dot { width: 8px; height: 8px; flex-shrink: 0; margin-top: 8px; border-radius: var(--v2-r-pill); background: var(--v2-ink); }

/* ── Экран: О сервисе, связка аккаунтов ──────────────────────────────────── */
.v2-stage.v2-about, .v2-stage.v2-linkacc { gap: 16px; }
.v2-about-title { font-family: var(--v2-font-head); font-size: 20px; font-weight: 600; line-height: 1.2; }
.v2-about-list li { font-size: 15px; color: var(--v2-ink); }

/* ── Вход на сайте (#/login, #/register, #/forgot, #/verify, #/reset) ────── */
.v2-auth {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px var(--v2-gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.v2-auth__card { gap: 12px; }
.v2-auth__title { font-family: var(--v2-font-head); font-size: 22px; font-weight: 600; line-height: 1.2; }
.v2-auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 14px; }
.v2-auth__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--v2-ink2); cursor: pointer; }
.v2-auth__consent .v2-link { font-weight: 500; }

@media (hover: hover) and (pointer: fine) {
  body.is-browser .v2-vol:not([aria-checked="true"]):hover { border-color: var(--v2-muted); }
  body.is-browser .v2-dev-free:not(:disabled):hover,
  body.is-browser .v2-survey-star:hover { background: var(--v2-fill); }
}

/* Знак рубля из того же шрифта; отдельное подмножество U+20BD (OFL). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-currency-400-normal.woff2') format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-currency-500-normal.woff2') format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-currency-600-normal.woff2') format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/inter-currency-700-normal.woff2') format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/unbounded-currency-500-normal.woff2') format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/unbounded-currency-600-normal.woff2') format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/unbounded-currency-700-normal.woff2') format('woff2'); unicode-range: U+20BD; }

/* Видеоинструкция: исходный портретный ролик, без обрезки и автозапуска. */
.v2-purchase-guide {
  display: block;
  width: min(100%, 360px, 39.375vh);
  height: auto;
  max-height: 70vh;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  align-self: center;
  border-radius: 12px;
  background: var(--v2-ink);
}
.v2-purchase-guide-error { margin: 0; }