/* ==========================================================================
   Форточка VPN — система состояний. Единственный источник правды по стилям.

   ЧЕТЫРЕ ПРАВИЛА. Исключений нет.
   1. Чёрная заливка  = главное действие экрана. Максимум одно на блок.
   2. Белое + рамка 3px = кликабельно, но не выбрано. Hover — sky, active — сдвиг.
   3. sky + залитый квадрат-маркер = текущий выбор. Маркер есть у ВСЕХ вариантов
      группы (пустой у невыбранных) — цвет не единственный носитель состояния.
   4. concrete без рамки = статичная информация. Не кликается никогда.

   Запрещено: чёрная/голубая заливка и рамка 3px у некликабельного;
   разные цвета у равнозначных кнопок одной группы; голубой «для красоты».

   Классы именованы по РОЛИ, а не по виду: .is-primary, .is-secondary,
   .is-option, .is-static. Роль видна в разметке — это и есть предмет ревью.
   ========================================================================== */

:root {
  --ink:      #000000;  /* текст, рамки, главное действие */
  --paper:    #FFFFFF;  /* фон экрана и кликабельных элементов */
  --concrete: #EFEFEF;  /* фон статичной информации */
  --divider:  #DDDDDD;  /* разделители внутри статичных сеток */
  --steel:    #6E6E6E;  /* вторичный текст, подписи */
  --steel-2:  #4A4A4A;  /* текст на сером фоне */
  --sky:      #DCEBFF;  /* ТОЛЬКО выбранное состояние и hover */
  --danger:   #B00020;  /* удаление */
  --ok:       #1E7A3C;  /* онлайн */
  --warn:     #C58A00;  /* ожидание */

  --bw: 3px;            /* единственная толщина рамки */
  --tap: 44px;          /* минимальная площадь касания */
  --tap-row: 52px;      /* строки списков и поля */
  --gap: 12px;
  --pad: 16px;
  --maxw: 560px;        /* мини-апп — одна колонка */

  --font-head: 'Russo One', 'Arial Black', Impact, sans-serif;
  --font-text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  /* Мини-апп в Telegram: контент не должен уезжать под системные полосы */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Радиусов и теней в системе нет — обнуляем на случай наследования. */
button, input, select, textarea, a, div { border-radius: 0; box-shadow: none; }

img { max-width: 100%; display: block; }

/* Атрибут hidden должен побеждать любые display у классов: .frame{display:grid}
   и .pane{display:flex} иначе показывают спрятанный блок (найдено прогоном:
   блок «Сменить регион» висел внизу главной). */
[hidden] { display: none !important; }

/* Ссылка в тексте: цвет системы, подчёркивание как признак кликабельности.
   Без этого браузер красит её синим — цветом, которого в палитре нет. */
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Типографика
   -------------------------------------------------------------------------- */

h1, h2, h3, .u-head {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; margin-bottom: var(--gap); }
h3 { font-size: 16px; }

.u-muted   { color: var(--steel); }
.u-small   { font-size: 13px; }
.u-tiny    { font-size: 12px; }
.u-bold    { font-weight: 700; }
.u-num     { font-variant-numeric: tabular-nums; }
.u-center  { text-align: center; }
.u-right   { text-align: right; }
.u-nowrap  { white-space: nowrap; }
.u-break   { word-break: break-all; }

/* --------------------------------------------------------------------------
   Раскладка
   -------------------------------------------------------------------------- */

.l-page   { max-width: var(--maxw); margin: 0 auto; padding: var(--pad); }
.l-stack  { display: flex; flex-direction: column; gap: var(--gap); }
.l-stack-lg { display: flex; flex-direction: column; gap: 24px; }
.l-row    { display: flex; align-items: center; gap: var(--gap); }
.l-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.l-grow   { flex: 1; min-width: 0; }

.l-section { margin-bottom: 28px; }
.l-section > h2 { margin-bottom: var(--gap); }

/* Шапка секции: заголовок слева, статичная подпись справа */
.l-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap); margin-bottom: var(--gap);
}

/* --------------------------------------------------------------------------
   ПРАВИЛО 1 — главное действие. Чёрная заливка, одно на блок.
   -------------------------------------------------------------------------- */

.is-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: var(--tap-row);
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s linear;
}
.is-primary:active { transform: translate(2px, 2px); }
.is-primary[disabled],
.is-primary.is-disabled {
  background: var(--steel); border-color: var(--steel); cursor: not-allowed; transform: none;
}

/* --------------------------------------------------------------------------
   ПРАВИЛО 2 — вторичное кликабельное. Белое + рамка 3px.
   -------------------------------------------------------------------------- */

.is-secondary {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: var(--tap-row);
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s linear;
}
.is-secondary:active { transform: translate(2px, 2px); }

/* Компактный вариант — всё ещё ≥44px */
.is-secondary.is-compact { min-height: var(--tap); padding: 10px 14px; font-size: 15px; }

/* Кнопка-переход обязана нести направление */
.is-secondary .u-arrow,
.is-primary .u-arrow { margin-left: auto; font-weight: 700; }

/* Удаление — единственное исключение по цвету текста, фон остаётся белым */
.is-secondary.is-danger { color: var(--danger); border-color: var(--danger); }

/* Ряд равнозначных кнопок: цвет одинаковый у всех — различает только выбор */
.l-btn-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.l-btn-row .is-secondary { justify-content: center; text-align: center; }
@media (max-width: 380px) { .l-btn-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   ПРАВИЛО 3 — выбор в группе. sky + квадрат-маркер 13px.
   Маркер обязателен у ВСЕХ вариантов: пустой у невыбранных, залитый у выбранного.
   -------------------------------------------------------------------------- */

.is-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: var(--tap-row);
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform .06s linear;
}
.is-option:active { transform: translate(2px, 2px); }

.is-option .u-marker,
.u-marker {
  flex: none;
  width: 13px; height: 13px;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
}

.is-option.is-selected,
.is-option[aria-checked="true"],
.is-option[aria-pressed="true"] { background: var(--sky); }

.is-option.is-selected .u-marker,
.is-option[aria-checked="true"] .u-marker,
.is-option[aria-pressed="true"] .u-marker { background: var(--ink); }

/* Подпись под названием варианта */
.is-option .u-sub { display: block; font-size: 13px; font-weight: 500; color: var(--steel-2); }
.is-option.is-selected .u-sub { color: var(--steel-2); }

/* Группа вариантов */
.l-options { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   ПРАВИЛО 4 — статичная информация. concrete, без рамки, без обработчиков.
   -------------------------------------------------------------------------- */

.is-static {
  background: var(--concrete);
  color: var(--ink);
  border: 0;
  padding: 14px 16px;
}

/* Плитка статистики: подпись сверху, значение снизу */
.is-static .u-key { font-size: 12px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .04em; color: var(--steel); margin-bottom: 4px; }
.is-static .u-val { font-family: var(--font-head); font-size: 20px; }

/* Сетка статичных плиток с разделителями (по правилу — только внутри статики) */
.l-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--bw);
  background: var(--divider);   /* разделители = просвет между плитками */
  border: 0;
}
.l-tiles > .is-static { margin: 0; }
.l-tiles.l-tiles-3 { grid-template-columns: repeat(3, 1fr); }

/* Чип — статичная метка, текст steel-2 на concrete */
.u-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--concrete);
  color: var(--steel-2);
  font-size: 13px; font-weight: 600;
}

/* Индикаторы состояния: цвет + текст, цвет не единственный носитель */
.u-dot { width: 10px; height: 10px; flex: none; background: var(--steel); }
.u-dot.is-ok   { background: var(--ok); }
.u-dot.is-warn { background: var(--warn); }

/* Строка «ключ — значение» внутри статичного блока */
.u-kv { display: flex; justify-content: space-between; gap: var(--gap); padding: 10px 0; }
.u-kv + .u-kv { border-top: 1px solid var(--divider); }
.u-kv .u-k { color: var(--steel); }
.u-kv .u-v { font-weight: 700; text-align: right; }

/* --------------------------------------------------------------------------
   Раскрывающаяся строка. Шеврон-квадрат: при открытии заливается и вращается.
   -------------------------------------------------------------------------- */

.is-expand { /* сам заголовок — вторичное кликабельное */
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: var(--tap-row);
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 16px; font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.is-expand:active { transform: translate(2px, 2px); }

.is-expand .u-hint { display: block; font-size: 13px; font-weight: 500; color: var(--steel-2); }

.is-expand .u-chev {
  flex: none; margin-left: auto;
  width: 22px; height: 22px;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  transition: transform .12s linear;
}
.is-expand[aria-expanded="true"] { background: var(--sky); }
.is-expand[aria-expanded="true"] .u-chev { background: var(--ink); color: var(--paper); transform: rotate(180deg); }
/* Открытая строка прячет подсказку — она нужна только в закрытом состоянии */
.is-expand[aria-expanded="true"] .u-hint { display: none; }

/* Тело раскрытия — статичное содержимое под заголовком */
.is-expand-body {
  display: none;
  border: var(--bw) solid var(--ink);
  border-top: 0;
  padding: var(--pad);
  background: var(--paper);
}
.is-expand-body.is-open { display: block; }

/* --------------------------------------------------------------------------
   Шаги многошаговых форм
   -------------------------------------------------------------------------- */

.u-step {
  font-family: var(--font-head);
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--steel);
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Поля ввода
   -------------------------------------------------------------------------- */

.u-input {
  width: 100%;
  min-height: var(--tap-row);
  padding: 12px 14px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 16px;        /* 16px — иначе iOS зумит при фокусе */
  font-weight: 600;
}
.u-input::placeholder { color: var(--steel); font-weight: 500; }
.u-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }

/* Поле только для чтения (ключ, ссылка) — это статика, не кликабельно */
.u-readonly {
  background: var(--concrete);
  border: 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--steel-2);
  word-break: break-all;
  user-select: all;
}

/* --------------------------------------------------------------------------
   Фокус — одинаковый у всего интерактивного
   -------------------------------------------------------------------------- */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Навигация. Ссылки — вторичное кликабельное; текущая страница — выбор.
   -------------------------------------------------------------------------- */

.l-nav {
  border-bottom: var(--bw) solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.l-nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 10px var(--pad);
               display: flex; align-items: center; gap: var(--gap); }
.l-brand { font-family: var(--font-head); font-size: 18px; text-transform: uppercase;
           color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.l-brand img { width: 28px; height: 28px; }

.l-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--pad);
          max-width: var(--maxw); margin: 0 auto; scrollbar-width: none; }
.l-tabs::-webkit-scrollbar { display: none; }
.l-tab {
  flex: none;
  min-height: var(--tap);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.l-tab.is-selected { background: var(--sky); }
.l-tab .u-marker { width: 11px; height: 11px; }
.l-tab.is-selected .u-marker { background: var(--ink); }

/* --------------------------------------------------------------------------
   Служебное
   -------------------------------------------------------------------------- */

.u-hr { height: var(--bw); background: var(--ink); border: 0; margin: 20px 0; }
.u-divider { height: 1px; background: var(--divider); border: 0; margin: 12px 0; }

.u-notice {           /* статичное сообщение: успех/ошибка словом, не только цветом */
  background: var(--concrete);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}
.u-notice .u-dot { display: inline-block; vertical-align: middle; margin-right: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .is-primary:active, .is-secondary:active, .is-option:active { transform: none; }
}

/* ==========================================================================
   ОБОЛОЧКА МИНИ-АППА. Структура взята из макета fortochka-vpn-app.html,
   цветовые роли приведены к четырём правилам.

   Что изменено против макета и почему:
   · плитки статистики («Подписка», «Статус», «На счёте») были чёрные и голубые
     — стали concrete: они ничего не делают (правило 4);
   · выбранный срок/тариф был чёрной заливкой — стал sky + залитый маркер
     (правило 3; чёрный остаётся только за действием);
   · кнопки платформ были разного цвета (Android/iPhone голубые, Mac/Windows
     белые) — стали одинаковыми: цвет разойдётся только при выборе;
   · активная вкладка внизу была чёрной — стала sky + маркер.
   ========================================================================== */

/* — Шапка: логотип-форточка и имя пользователя — */
.app-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
  padding-top: env(safe-area-inset-top, 0px);
}
.app-header .l-row { height: 60px; padding: 0 var(--pad); justify-content: space-between;
                     max-width: var(--maxw); margin: 0 auto; }
.l-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -8px; flex: none;
  border: 0; background: transparent; color: var(--ink); text-decoration: none;
}
.l-back:active { transform: translate(2px, 2px); }
@media (hover: hover) and (pointer: fine) { .l-back:hover { background: var(--sky); } }
.l-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
          min-height: var(--tap); padding-right: 4px; }   /* зона касания не меньше 44px */
.l-logo svg { width: 36px; height: 36px; flex: none; }
.l-logo b { font-family: var(--font-head); font-weight: 400; font-size: 17px;
            text-transform: uppercase; letter-spacing: .02em; }
.l-logo b small { font-size: 9px; vertical-align: super; margin-left: 2px; letter-spacing: .06em; }

/* — Оконная рама: створки делят общие рамки 3px — */
.frame { border: var(--bw) solid var(--ink); background: var(--ink); display: grid; gap: var(--bw); }
.frame.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frame.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pane { background: var(--paper); padding: 16px; min-width: 0; }
.pane.is-static { background: var(--concrete); }   /* статичная створка */

/* — Плитка показателя: всегда статика — */
.tile { padding: 12px 14px; min-height: 74px; display: flex; flex-direction: column;
        justify-content: space-between; gap: 6px; background: var(--concrete); }
.tile span { font-size: 11px; font-weight: 700; text-transform: uppercase;
             letter-spacing: .08em; color: var(--steel); }
.tile b { font-family: var(--font-head); font-weight: 400; font-size: 18px; line-height: 1;
          font-variant-numeric: tabular-nums; }

/* — Заголовок створки — */
.pane-head { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; margin-bottom: 12px; }
.pane-head h3 { flex: 1; }

/* — Поле со ссылкой/ключом: статичный текст + действие копирования — */
.field { display: flex; border: var(--bw) solid var(--ink); background: var(--paper); }
.field code, .field input {
  flex: 1; min-width: 0; height: 48px; line-height: 48px; padding: 0 12px;
  border: 0; background: var(--concrete); color: var(--steel-2);
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.field input { background: var(--paper); color: var(--ink); }
.field button {
  flex: none; height: 48px; padding: 0 16px; border: 0;
  border-left: var(--bw) solid var(--ink);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-text); font-weight: 700; font-size: 14px; cursor: pointer;
}
.field button:active { transform: translate(2px, 2px); }

/* — Строка ключа/устройства: заголовок раскрывает тело — */
.dev { padding: 0; }
.dev-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
            min-height: var(--tap-row); background: var(--paper); border: 0; text-align: left;
            font-family: var(--font-text); cursor: pointer; }
.dev.is-open .dev-head { background: var(--sky); }
.dev-head .t { flex: 1; min-width: 0; }
.dev-head .t b { display: block; font-size: 15px; font-weight: 700; }
.dev-head .t span { display: block; font-size: 13px; color: var(--steel-2); font-weight: 600; }
.dev-body { display: none; border-top: var(--bw) solid var(--ink); padding: 16px; }
.dev.is-open .dev-body { display: block; }
.u-badge { flex: none; width: 40px; height: 40px; border: var(--bw) solid var(--ink);
           display: grid; place-items: center; background: var(--paper); }
.u-badge svg { width: 26px; height: 26px; }

/* — Переключатель из нескольких равных вариантов (тариф) — */
.seg { display: flex; border: var(--bw) solid var(--ink); }
.seg button {
  flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-left: var(--bw) solid var(--ink); background: var(--paper);
  font-family: var(--font-head); font-weight: 400; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer; color: var(--ink);
}
.seg button:first-child { border-left: 0; }
.seg button[aria-checked="true"] { background: var(--sky); }
.seg .u-marker { width: 11px; height: 11px; }
.seg button[aria-checked="true"] .u-marker { background: var(--ink); }

/* — Карточка срока подписки — */
.period { position: relative; width: 100%; min-height: 104px; padding: 14px;
          display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
          background: var(--paper); border: 0; cursor: pointer;
          font-family: var(--font-text); text-align: left; color: var(--ink); }
.period[aria-checked="true"] { background: var(--sky); }
.period small { font-size: 12px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .06em; color: var(--steel); }
.period .p { font-family: var(--font-head); font-size: 24px; line-height: 1;
             font-variant-numeric: tabular-nums; }
.period .per { font-size: 13px; color: var(--steel-2); font-weight: 600; }
.period .save { position: absolute; top: 0; right: 0; background: var(--concrete);
                color: var(--steel-2); font-size: 11px; font-weight: 700; padding: 5px 8px; }
.period .u-marker { position: absolute; right: 14px; bottom: 14px; }
/* Выбранный срок обязан отличаться не только фоном — маркер заливается. */
.period[aria-checked="true"] .u-marker { background: var(--ink); }

/* — Список переходов («Ещё») — */
.list { border: var(--bw) solid var(--ink); }
.list > a, .list > button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--tap-row);
  padding: 14px 16px; background: var(--paper); color: var(--ink); border: 0;
  border-top: var(--bw) solid var(--ink); text-decoration: none; text-align: left;
  font-family: var(--font-text); font-weight: 700; font-size: 15px; cursor: pointer;
}
.list > a:first-child, .list > button:first-child { border-top: 0; }
.list .t { flex: 1; min-width: 0; }
.list .t span { display: block; font-size: 13px; color: var(--steel-2); font-weight: 600; }
.list .u-arrow { margin-left: auto; }

/* — Нижние вкладки — */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--paper); border-top: var(--bw) solid var(--ink);
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1; min-height: 64px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); text-decoration: none; background: var(--paper);
  border-left: 1px solid var(--divider);
}
.tabbar a:first-child { border-left: 0; }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { background: var(--sky); }
/* Маркер под подписью — состояние читается и без цвета */
.tabbar a i { display: block; width: 11px; height: 11px; border: var(--bw) solid var(--ink);
              background: var(--paper); }
.tabbar a[aria-current="page"] i { background: var(--ink); }

/* Контент не должен уезжать под нижние вкладки */
body.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* — Сообщение-плашка — */
.toast {
  position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px);
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .3s cubic-bezier(.2,.8,.2,1); z-index: 60; white-space: nowrap;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* — Иллюстрации-стикеры (lk/static/stickers.svg) — */
.sticker { display: block; }
.sticker-lg { width: 96px; height: 96px; }
.sticker-md { width: 56px; height: 56px; }
.sticker-sm { width: 26px; height: 26px; }

/* ==========================================================================
   ДОБАВЛЕНИЯ: мелочи, которых не хватало экранам. Только аддитивно —
   ничего из перечисленного выше не переименовано и не удалено.
   ========================================================================== */

/* — Утилиты видимости и отступов —
   Отступы кратны шагу системы: 8 / 12(--gap) / 16(--pad) / 24. */
.u-hidden   { display: none !important; }

.u-mt-0  { margin-top: 0; }
.u-mt-sm { margin-top: 8px; }
.u-mt    { margin-top: var(--gap); }
.u-mt-lg { margin-top: var(--pad); }
.u-mt-xl { margin-top: 24px; }

.u-mb-0  { margin-bottom: 0; }
.u-mb-sm { margin-bottom: 8px; }
.u-mb    { margin-bottom: var(--gap); }
.u-mb-lg { margin-bottom: var(--pad); }
.u-mb-xl { margin-bottom: 24px; }

/* Две равные колонки — для пар статичных плиток и пар кнопок. */
.u-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 380px) { .u-grid-2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Таблицы — статичная информация (правило 4): шапка --steel, строки
   разделены --divider, рамок и заливок нет.
   -------------------------------------------------------------------------- */

.u-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th {
  padding: 10px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--steel);
  border-bottom: var(--bw) solid var(--ink);
  white-space: nowrap;
}
td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child,  td:last-child  { padding-right: 0; }
td.u-num, th.u-num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Формы. Поле и подпись уже есть (.u-input, .u-label); здесь — обвязка.
   -------------------------------------------------------------------------- */

form { display: block; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
         font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; }
label { font-size: 14px; font-weight: 600; }

/* Группа «подпись + поле». Подпись всегда над полем. */
.u-field { display: block; }
.u-field + .u-field { margin-top: var(--gap); }
.u-field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.u-field > .u-note { display: block; font-size: 13px; color: var(--steel); margin-top: 6px; }

select.u-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  /* Стрелка нарисована рамкой самого поля — без картинок и без цвета. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
textarea.u-input { min-height: 96px; line-height: 1.45; resize: vertical; }

/* --------------------------------------------------------------------------
   Подсветка наведения — только для настоящей мыши.
   На телефоне :hover залипает после тапа: элемент остаётся голубым и
   читается как выбранный, хотя выбор ещё не сделан (жалоба 2026-09-04).
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .is-primary:hover  { background: #1a1a1a; }
  .is-secondary:hover  { background: var(--sky); }
  .is-secondary.is-danger:hover { background: #FFF0F2; }
  .is-option:hover  { background: var(--sky); }
  .is-expand:hover  { background: var(--sky); }
  .l-tab:hover { background: var(--sky); }
  .dev-head:hover { background: var(--sky); }
  .seg button:hover { background: var(--sky); }
  .period:hover { background: var(--sky); }
  .list > a:hover, .list > button:hover { background: var(--sky); }
}

/* Группа вариантов на время запроса: клики не принимаются, видно, что идёт работа. */
.l-options.is-busy { opacity: .55; pointer-events: none; }
.is-option[aria-busy="true"] { background: var(--sky); }
.is-option[aria-busy="true"] .u-marker { background: var(--ink); }

/* --------------------------------------------------------------------------
   Логотип: форточка открывается.
   Створка поворачивается на правой петле, за ней остаётся небо, следом
   проявляется распахнутая створка — знак приходит в своё привычное состояние.
   Приём взят с лендинга ФорточкаVDS и уменьшен до 36px: угол меньше (105°),
   длительность короче, чтобы в шапке это читалось как жест, а не как ролик.
   -------------------------------------------------------------------------- */
.l-mark .l-sash {
  transform-box: view-box;
  transform-origin: 62px 52px;          /* правая кромка окна — петля */
  transform: perspective(220px) rotateY(0deg);
  animation: l-open-sash .9s cubic-bezier(.2, .9, .2, 1) .35s forwards;
}
@keyframes l-open-sash { to { transform: perspective(220px) rotateY(105deg); } }

.l-mark .l-open {
  opacity: 0;
  animation: l-show-sash .35s linear .95s forwards;
}
@keyframes l-show-sash { to { opacity: 1; } }

/* Повторный показ по наведению — только там, где есть мышь. */
@media (hover: hover) and (pointer: fine) {
  .l-logo:hover .l-mark .l-sash { animation: l-open-sash .7s cubic-bezier(.2,.9,.2,1) 0s forwards; }
  .l-logo:hover .l-mark .l-open { animation: l-show-sash .3s linear .5s forwards; }
}

/* Кому анимация мешает — сразу конечное состояние: форточка открыта. */
@media (prefers-reduced-motion: reduce) {
  .l-mark .l-sash { animation: none; transform: perspective(220px) rotateY(105deg); }
  .l-mark .l-open { animation: none; opacity: 1; }
}

/* Раскрытие без собственной рамки — когда оно уже внутри створки. */
.is-expand-body.u-flush { border: 0; padding: 0; }

/* Согласие с офертой в формах: чекбокс не налезает на текст, вся строка кликабельна. */
.u-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 2px 0 6px; }
.u-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.u-consent span { font-size: 13px; font-weight: 600; color: var(--steel-2); line-height: 1.45; }
.u-consent a { color: var(--ink); }

/* Быстрые суммы пополнения: сетка чипов, маркер не налезает на цифру (mobile). */
.preset-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.preset-btn {
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--bw) solid var(--ink); background: var(--paper); cursor: pointer;
  font-family: var(--font-head); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.preset-btn[aria-checked="true"] { background: var(--sky); }
.preset-btn[aria-checked="true"] .u-marker { background: var(--ink); }
.preset-btn:active { transform: translate(2px, 2px); }
@media (hover: hover) and (pointer: fine) { .preset-btn:hover { background: var(--sky); } }