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

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

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

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

:root {
  --ink:      #102D28;  /* заголовки и основной текст */
  --paper:    #FBFBF0;  /* цвет шапки и светлых поверхностей */
  --page-bg:  #F7F9EE;  /* основной фон */
  --payment-card: #F7F9F0; /* карточки выбора срока и цены */
  --concrete: #EDEFDE;  /* фон статичной информации */
  --divider:  #DFE5D7;  /* разделители внутри статичных сеток */
  --steel:    #5E7467;  /* вторичный текст, подписи */
  --steel-2:  #42594C;  /* текст на сером фоне */
  --sky:      #E6F2BD;  /* мягкое выбранное состояние */
  --lime:     #CDEB4A;  /* главное действие */
  --danger:   #B00020;  /* удаление */
  --ok:       #1E7A3C;  /* онлайн */
  --warn:     #C58A00;  /* ожидание */

  --bw: 1px;            /* тонкие разделители интерфейса */
  --tap: 44px;          /* минимальная площадь касания */
  --tap-row: 52px;      /* строки списков и поля */
  --gap: 12px;
  --pad: 16px;
  --maxw: 920px;        /* удобная ширина кабинета на телефоне и компьютере */

  --font-head: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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%; background: var(--page-bg); }

/* Мягкая движущаяся тень от оконной рамы поверх почти статичного фона. */
body { isolation: isolate; background: transparent; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -9%;
  pointer-events: none;
  opacity: .84;
  background:
    linear-gradient(90deg, transparent 21.5%, rgba(25, 42, 32, .035) 22.5%, rgba(25, 42, 32, .17) 23%, rgba(25, 42, 32, .045) 23.5%, transparent 24.5%),
    linear-gradient(90deg, transparent 65%, rgba(25, 42, 32, .025) 68%, rgba(25, 42, 32, .16) 72%, rgba(25, 42, 32, .07) 78%, transparent 82%),
    linear-gradient(0deg, transparent 51%, rgba(25, 42, 32, .025) 54%, rgba(25, 42, 32, .11) 56%, rgba(25, 42, 32, .035) 59%, transparent 62%),
    radial-gradient(42rem 32rem at 18% 28%, rgba(211, 224, 177, .12), transparent 72%),
    radial-gradient(38rem 34rem at 82% 22%, rgba(197, 216, 189, .09), transparent 72%),
    radial-gradient(46rem 38rem at 68% 82%, rgba(248, 235, 190, .13), transparent 74%);
  transform: translate3d(0, 0, 0);
  animation: soft-background-drift 12s ease-in-out infinite alternate;
}
@keyframes soft-background-drift {
  to { transform: translate3d(7%, -5%, 0) scale(1.08); opacity: .95; }
}

body {
  background: transparent;
  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;
  overflow-wrap: anywhere;   /* длинное имя/слово в заголовке (Привет, <name>) не рвёт вёрстку вширь */
  min-width: 0;              /* как flex-элемент заголовок должен сжиматься, а не толкать тело */
}
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-note    { font-size: 15px; }
.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-row.is-wrap { flex-wrap: wrap; }
.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-dot.is-danger { background: var(--danger); }

/* Строка «ключ — значение» внутри статичного блока */
.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; }
.promo-controls { display: flex; gap: 8px; align-items: stretch; }
.promo-controls .u-input { flex: 1; min-width: 0; }
.promo-controls .is-secondary { width: auto; flex: none; }
#btn-apply-promo {
  white-space: nowrap;
}
#btn-apply-promo:hover,
#btn-apply-promo:focus,
#btn-apply-promo:active {
  background: var(--paper);
  transform: none;
}
@media (max-width: 380px) {
  .promo-controls { gap: 6px; }
  .promo-controls .is-secondary { padding-left: 10px; padding-right: 10px; font-size: 14px; }
}

/* Поле только для чтения (ключ, ссылка) — это статика, не кликабельно */
.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: 20px;
            text-transform: uppercase; letter-spacing: .02em; }
.l-logo b small { font-size: 11px; vertical-align: super; margin-left: 2px; letter-spacing: .06em; }
.tg-link-btn { justify-content: flex-start; align-items: center; }
.tg-link-btn svg { width: 22px; height: 22px; flex: none; transform: rotate(-28deg); }
.tg-link-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tg-link-copy b { font-weight: 700; font-size: 16px; line-height: 1.2; }
.tg-link-copy span { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--steel); }

/* — Оконная рама: створки делят общие рамки 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)); }
.frame.cols3 > .tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 10px 8px; background: var(--paper); color: var(--ink);
}
.frame.cols3 > .tile span { color: var(--steel); font-size: 12px; line-height: 1.2; }
.frame.cols3 > .tile b { font-size: 14px; line-height: 1.25; }
.pane { background: var(--paper); padding: 16px; min-width: 0; }
.pane.is-static { background: var(--concrete); }   /* статичная створка */

/* — Сводка: всегда 4 колонки в один ряд. Размер текста от ширины плашки,
     чтобы «Без лимита» и подписи не вылезали за рамку ни на телефоне, ни на 560px. — */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
         border: var(--bw) solid var(--ink); background: var(--concrete);
         border-radius: 18px; overflow: hidden; container-type: inline-size; }
.stats-item { display: flex; align-items: center; justify-content: center;
              gap: 2px; padding: 10px 2px; min-width: 0; overflow: hidden; }
.stats-item + .stats-item { border-left: 1px solid var(--ink); }
.stats svg { width: clamp(10px, 2.8cqi, 20px); height: clamp(10px, 2.8cqi, 20px); flex: none;
             fill: none; stroke: var(--ink); stroke-width: 1.8;
             stroke-linecap: round; stroke-linejoin: round; }
.stats-copy { display: flex; flex-direction: column; align-items: center; text-align: center;
              gap: 2px; min-width: 0; max-width: 100%; overflow: hidden; }
.stats-copy span { font-size: clamp(7px, 2.45cqi, 10px); font-weight: 700; text-transform: uppercase;
                   letter-spacing: .01em; color: var(--steel); line-height: 1.15;
                   white-space: nowrap; max-width: 100%; }
.stats-copy b { font-family: var(--font-head); font-weight: 400;
                font-size: clamp(8px, 2.95cqi, 15px); line-height: 1.1;
                font-variant-numeric: tabular-nums; white-space: nowrap;
                max-width: 100%; }

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

/* Карточка почты — низкая строка: заголовок, текст, поле и кнопка рядом.
   На узком экране поле и кнопка переносятся, не вылезая за рамку. */
#email-card .pane { padding: 10px 12px; }
#email-card .pane-head { margin-bottom: 4px; gap: 8px; }
#email-card .email-lead { margin: 0 0 8px; line-height: 1.35; }
#email-card .email-compose {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
}
#email-card .email-compose .u-input {
  flex: 1 1 160px; min-width: 0; width: auto;
  min-height: 44px; height: 44px; padding: 8px 12px;
}
#email-card .email-compose .is-primary {
  width: auto; flex: 0 0 auto; min-height: 44px;
  padding: 8px 12px; white-space: nowrap;
}
#email-card .email-compose .is-primary .u-arrow { margin-left: 8px; }
#email-card #emailStatus1:not([hidden]) { margin-top: 6px; }
@media (max-width: 420px) {
  #email-card .email-compose .u-input,
  #email-card .email-compose .is-primary { flex: 1 1 100%; width: 100%; }
}
.u-checks { list-style: none; padding: 0; margin: 0 0 16px; }
.u-checks li + li { margin-top: 4px; }
.is-close { width: 32px; height: 32px; flex: none; border: var(--bw) solid var(--ink);
            background: var(--paper); font-size: 22px; line-height: 1; padding: 0; }

/* — Поле со ссылкой/ключом: статичный текст + действие копирования — */
.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); cursor: text;
              user-select: text; -webkit-user-select: text; }
.field input[readonly] { text-overflow: clip; }
.field textarea {
  flex: 1; width: 100%; min-width: 0; min-height: 68px; height: auto;
  padding: 10px 12px; border: 0; resize: none;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: 14px; font-weight: 600; line-height: 1.4;
  white-space: pre-wrap; word-break: break-all; overflow: auto; cursor: text;
  user-select: text; -webkit-user-select: text;
}
.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; }
/* Каждое устройство — отдельная карточка; фон связывает раскрытое содержимое. */
#keys-list { gap: 16px; }
.key-card { border: var(--bw) solid var(--ink); }
.key-card.is-open .dev-body { background: var(--concrete); }
.key-card.is-open .dev-head .u-chev { transform: rotate(180deg); }
.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-weight: 700; 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)); }

/* Плавающая поддержка: угол экрана, над вкладками, не на всю ширину. */
.support-fab {
  position: fixed; z-index: 45;
  right: max(12px, calc((100vw - var(--maxw)) / 2 + 12px));
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: min(190px, calc(100vw - 24px)); min-height: 46px;
  padding: 9px 8px 9px 10px; gap: 8px;
  font-size: 13px; line-height: 1.3; font-weight: 700;
  white-space: normal;
}
.support-fab .sticker { width: 18px; height: 18px; flex: none; }

/* — Сообщение-плашка — */
.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); } }

/* --------------------------------------------------------------------------
   Правовой документ (.doc) — сырой HTML оферты/возврата/контактов внутри
   «бумаги» .pane. Сброс `* { margin:0; padding:0 }` обнуляет отступы списков —
   маркеры <ul>/<ol> уезжали за левую рамку карточки, а абзацы слипались.
   Здесь возвращаем читаемую документную типографику, НЕ трогая компоненты
   системы (класс есть только на legal.html). 07.09.2026
   -------------------------------------------------------------------------- */
.doc { color: var(--ink); font-size: 15px; line-height: 1.55; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 22px; margin: 0 0 12px; }
.doc h2 { font-size: 16px; margin: 26px 0 10px; }
.doc h3 { font-size: 14px; margin: 18px 0 8px; }
.doc p  { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }   /* маркеры внутри карточки */
.doc li { margin: 0 0 6px; }
.doc li::marker { color: var(--steel); }
.doc a:not(.is-primary):not(.is-secondary) { font-weight: 700; text-decoration: underline; word-break: break-word; }
.doc strong { font-weight: 700; }
.doc .updated { color: var(--steel); font-size: 13px; margin: 0 0 18px; }

/* Блок реквизитов/контактов в документе: серая плашка со своими отступами,
   раньше .contact-box не имел стилей и шёл как обычный текст. */
.doc .contact-box { background: var(--concrete); padding: 14px 16px; margin: 14px 0; }
.doc .contact-box p { margin: 0 0 8px; font-size: 14px; word-break: break-word; }
.doc .contact-box p:last-child { margin-bottom: 0; }

/* Кнопка-CTA внутри документа (напр. «Подать заявку на возврат»): отступ сверху,
   дальше — системная .is-primary. Подпись под ней — вторичным цветом. */
.doc .doc-cta { margin: 28px 0 8px; }
.doc .doc-note { font-size: 13px; color: var(--steel); margin: 0; }

/* Код входа через Telegram: шесть равных квадратов для 6 цифр. Фокус — обводкой,
   как у остальных полей; голубой не используем (правило 3 — только выбор). 07.09.2026 */
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input {
  width: 100%; min-width: 0; height: var(--tap-row); padding: 0; text-align: center;
  border: var(--bw) solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--font-head); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums;
  caret-color: var(--ink);
}
.otp input:focus { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Экран подключения (app-open): выбор приложения плиткой + пронумерованные
   шаги. Раньше эта страница была вне системы — тёмно-янтарная, не extends
   base.html. 07.09.2026
   -------------------------------------------------------------------------- */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-pick {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 78px; padding: 12px 6px;
  border: var(--bw) solid var(--ink); background: var(--paper); color: var(--ink);
  text-decoration: none; text-align: center; cursor: pointer;
  font-family: var(--font-text); font-size: 12px; font-weight: 700; line-height: 1.2;
}
.app-pick .ic { font-size: 22px; line-height: 1; }
.app-pick .u-marker { position: absolute; top: 7px; right: 7px; }
.app-pick.is-current { background: var(--sky); }
.app-pick.is-current .u-marker { background: var(--ink); }
.guide-app-grid { display: flex; flex-wrap: wrap; }
.guide-app-grid .app-pick {
  flex: 1 1 96px; min-height: 52px; flex-direction: row;
  padding: 10px 18px 10px 8px;
}
.guide-app-grid .app-pick .ic { font-size: 18px; }
.guide-app-grid .app-pick .u-marker { top: 5px; right: 5px; }
.app-pick:active { transform: translate(2px, 2px); }
button.app-pick { width: 100%; appearance: none; }
@media (hover: hover) and (pointer: fine) { .app-pick:hover:not(.is-current) { background: var(--sky); } }

/* --------------------------------------------------------------------------
   VPN Fortochka account skin: rounded cream surfaces, lime actions and SPA.
   -------------------------------------------------------------------------- */
button, input, select, textarea, a, div { border-radius: 0; box-shadow: none; }

body { color: var(--ink); }
.l-page { max-width: var(--maxw); padding: 22px clamp(16px, 3vw, 28px) 28px; }
.app-header {
  background: var(--paper);
  border-bottom: 1px solid rgba(16, 45, 40, .09);
}
.app-header .l-row { max-width: var(--maxw); }
.l-logo { gap: 10px; }
.l-logo svg { width: 34px; height: 34px; }
.l-logo b { font-family: var(--font-text); font-size: 19px; font-weight: 800; text-transform: none; letter-spacing: -.03em; }
.l-logo b small { display: none; }
.brand-vpn { display: inline-block; padding: 1px 5px; margin-right: 2px; border-radius: 6px; background: var(--lime); line-height: 1.2; }
.l-mark > path:first-child, .l-mark .l-open, .l-mark .l-sash { fill: var(--ink); }
.l-mark .l-view { fill: var(--lime); }

.is-primary, .is-primary.is-pay, .btn-primary, .btn-success {
  background: var(--lime);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(87, 112, 21, .13);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.is-primary[disabled], .is-primary.is-disabled { background: #D9DFCF; color: #718078; box-shadow: none; }
.is-secondary, .btn, .btn-outline {
  background: rgba(249, 250, 239, .94);
  color: var(--ink);
  border: 1px solid #BFCDBB;
  border-radius: 11px;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.is-option, .app-pick, .period, .preset-btn { border: 1px solid var(--divider); border-radius: 13px; background: rgba(249, 250, 239, .94); }
.period:not([aria-checked="true"]) { background: var(--payment-card); }
.is-option.is-selected, .is-option[aria-checked="true"], .is-option[aria-pressed="true"],
.l-tab.is-selected, .app-pick.is-current, .period[aria-checked="true"],
.preset-btn[aria-checked="true"], .seg button[aria-checked="true"] {
  background: var(--lime); border-color: var(--lime);
}
.is-static, .pane, .card, .key-card {
  background: rgba(249, 250, 239, .86);
  border: 1px solid rgba(174, 190, 165, .42);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(46, 66, 45, .07);
}
.card[style*="border"], .key-card[style*="border"] { border: 1px solid rgba(174, 190, 165, .42) !important; }
.stats, .frame { border: 1px solid var(--divider); border-radius: 15px; background: rgba(237, 239, 222, .86); overflow: hidden; }
.stats-item + .stats-item { border-left: 1px solid var(--divider); }
.field, .u-input, .field input, .field textarea { border-radius: 10px; }
.field { border-color: var(--divider); overflow: hidden; }
.field .btn-primary, .field .btn-success { background: var(--lime); color: var(--ink); border-color: transparent; }
.field .btn:not(.btn-primary):not(.btn-success) { background: rgba(249, 250, 239, .94); border-color: #BFCDBB; color: var(--ink); }
.field .btn:not(.btn-primary):not(.btn-success):hover { background: #EDEFDE; }
.field code, .field input, .field textarea { background: rgba(237, 239, 222, .82); }
.dev { border: 1px solid var(--divider); border-radius: 15px; overflow: hidden; }
.dev-head { border-radius: 14px; }
.dev.is-open .dev-head { background: var(--sky); }
.dev-body { border-top: 1px solid var(--divider); }
.list { border: 1px solid var(--divider); border-radius: 15px; overflow: hidden; }
.list > a, .list > button { border-top: 1px solid var(--divider); background: transparent; }
.list > a:first-child, .list > button:first-child { border-top: 0; }
.app-pick .u-marker, .u-marker { border-radius: 50%; }
.page-title { margin-bottom: 20px; font-size: clamp(22px, 4vw, 28px); letter-spacing: -.025em; }
.subscribe-title { font-weight: 800; letter-spacing: -.025em; }
.dashboard-greeting {
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(20px, 4.8vw, 26px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.dashboard-greeting .greeting-name { display: inline-block; max-width: 100%; font-size: .92em; overflow-wrap: anywhere; }
.dashboard-status { flex: 0 1 150px; max-width: 36%; }
.trial-title { min-width: 0; font-size: clamp(15px, 4vw, 18px); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }

.tabbar {
  left: max(0px, calc((100vw - var(--maxw)) / 2));
  right: max(0px, calc((100vw - var(--maxw)) / 2));
  background: var(--paper);
  border: 1px solid rgba(174, 190, 165, .52);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 22px rgba(46, 66, 45, .08);
}
.tabbar a { min-height: 70px; gap: 4px; background: transparent; border: 0; border-right: 1px solid var(--divider); font-size: 10px; letter-spacing: .025em; transition: background-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.tabbar a:last-child { border-right: 0; }
.tabbar a svg { width: 21px; height: 21px; stroke: var(--ink); }
.tabbar a[aria-current="page"] { background: transparent; }
.tabbar a[aria-current="page"] span { background: var(--lime); border: 1px solid transparent; border-radius: 9px; padding: 4px 9px; }
.tabbar a[aria-current="page"]:hover { background: transparent; }
.tabbar a i { display: none; }
body.has-tabbar { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
/* Let the last dashboard action scroll fully above the floating support link. */
body.has-tabbar.has-support-fab { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }

.toast { border-radius: 12px; background: var(--ink); color: white; box-shadow: 0 8px 26px rgba(16, 45, 40, .18); }
.spa-progress { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.spa-progress i { display: block; width: 35%; height: 100%; background: var(--lime); transform: translateX(-110%); }
body.is-navigating .spa-progress { opacity: 1; }
body.is-navigating .spa-progress i { animation: spa-progress-run 1.05s ease-in-out infinite; }
@keyframes spa-progress-run { to { transform: translateX(320%); } }
.l-page.is-spa-arriving { animation: spa-page-arrive .22s ease-out both; }
@keyframes spa-page-arrive { from { opacity: .68; transform: translateY(5px); } to { opacity: 1; transform: none; } }
body.is-navigating main.l-page { cursor: progress; }

/* Плавная отдача на нажатие и полностью непрозрачная шапка поверх фона. */
.app-header { background: var(--paper); opacity: 1; }
.is-primary, .is-secondary, .btn, .btn-primary, .btn-success, .btn-outline,
.is-option, .app-pick, .period, .preset-btn {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease,
    box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.is-primary:active, .is-secondary:active, .btn:active, .btn-primary:active,
.btn-success:active, .btn-outline:active, .is-option:active, .app-pick:active,
.period:active, .preset-btn:active {
  transform: scale(.985) translateY(1px);
  transition-duration: .12s;
}
.tabbar a:active { transform: scale(.97); transition-duration: .12s; }

@media (hover: hover) and (pointer: fine) {
  .is-primary:hover, .is-primary.is-pay:hover, .btn-primary:hover, .btn-success:hover {
    background: #BFE13E; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(87, 112, 21, .18);
  }
  .is-secondary:hover, .btn:hover, .btn-outline:hover { background: #EEF1E1; border-color: #A9BBA6; }
  .tabbar a:hover { background: rgba(230, 242, 189, .62); }
}
@media (max-width: 560px) {
  .l-page { padding-top: 18px; padding-bottom: 22px; }
  .app-header .l-row { height: 56px; }
  .l-logo b { font-size: 17px; }
  .is-static, .pane, .card, .key-card { border-radius: 14px; }
  .tabbar { border-left: 0; border-right: 0; border-radius: 16px 16px 0 0; }
  .tabbar a { min-height: 66px; font-size: 9px; }
  .l-section-head.greeting-head { align-items: flex-start; }
  .dashboard-greeting { font-size: clamp(19px, 5vw, 23px); }
  .dashboard-status { flex-basis: 34%; max-width: 34%; }
  .seg { min-width: 0; }
  .seg button { min-width: 0; gap: 3px; padding: 7px 3px; font-size: clamp(10px, 2.7vw, 12px); line-height: 1.2; letter-spacing: 0; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .seg .u-marker { flex: none; }
  .login-page .seg button { font-size: clamp(10px, 2.7vw, 12px); font-weight: 800; }
  .login-page .pane-head h3 { font-size: clamp(16px, 4.2vw, 18px); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .l-page.is-spa-arriving, body.is-navigating .spa-progress i { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Пронумерованные шаги инструкции — залитый номер + текст. */
.steps { display: flex; flex-direction: column; }
.steps .step-line { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.steps .step-line + .step-line { border-top: 1px solid var(--divider); }
.steps .n {
  flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); font-family: var(--font-head); font-size: 13px;
}
.steps .tx { font-size: 14px; line-height: 1.5; color: var(--ink); }

/* Нажатое состояние важнее hover-подъёма на устройствах с мышью. */
.is-primary:active, .is-secondary:active, .btn:active, .btn-primary:active,
.btn-success:active, .btn-outline:active, .is-option:active, .app-pick:active,
.period:active, .preset-btn:active, .tabbar a:active {
  transform: scale(.985) translateY(1px);
  transition-duration: .12s;
}

/* Ссылки в разделе «Ещё» читаются как отдельные строки-действия. */
.list.more-menu > a { background: #F9FAEF; }
.list.more-menu > a:hover, .list.more-menu > a:focus-visible { background: #F9FAEF; }

/* Вход: равные скруглённые вкладки и заметные заголовки способов входа. */
.login-page .seg { border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; background: var(--paper); }
.login-page .seg button { border-left: 1px solid var(--divider); border-radius: 0; font-weight: 800; letter-spacing: .015em; }
.login-page .seg button:first-child { border-left: 0; }
.login-page .frame { border-radius: 18px; }
.login-page .pane { border-radius: 17px; }
.login-page .pane-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.subscription-chip { background: var(--sky); color: var(--ink); font-weight: 700; }
.trial-benefits li { line-height: 1.5; }

/* Сводка кабинета: компактные ячейки, заметные значения и ровные разделители. */
.stats {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(46, 66, 45, .08);
}
.stats-item {
  min-height: 62px;
  gap: clamp(4px, 1.5cqi, 9px);
  padding: 9px clamp(4px, 1.8cqi, 12px);
  justify-content: center;
}
.stats-item + .stats-item { border-left: 1px solid rgba(174, 190, 165, .58); }
.stats svg { width: clamp(13px, 3.5cqi, 18px); height: clamp(13px, 3.5cqi, 18px); color: var(--steel-2); }
.stats-copy { align-items: flex-start; gap: 4px; text-align: left; }
.stats-copy span { font-size: clamp(8px, 2.8cqi, 12px); font-weight: 800; letter-spacing: .025em; }
.stats-copy > span { letter-spacing: 0; }
.stats-copy b { font-size: clamp(10px, 3.4cqi, 17px); font-weight: 800; }
.stats-copy b.is-fit { font-size: clamp(9px, 2.9cqi, 14px); }
.stats-item:first-child .stats-copy span,
.stats-item:first-child .stats-copy b { font-weight: 800; }

/* On narrow cards the icon gets its own line, leaving the full cell for text. */
@container (max-width: 620px) {
  .stats-item { flex-direction: column; gap: 5px; padding: 10px 3px; }
  .stats-copy { width: 100%; align-items: center; text-align: center; overflow: visible; }
  .stats-copy > span { font-size: clamp(9px, 3cqi, 12px); }
  .stats-copy b { font-size: clamp(12px, 3.6cqi, 17px); white-space: normal; overflow-wrap: anywhere; }
  .stats-copy b.is-fit { font-size: clamp(11px, 3.2cqi, 14px); }
}

#email-reopen > a { background: #EDEFDE; }

.keys-title { font-weight: 800; }
.key-card .dev-head { background: var(--sky); }
.key-card > .dev-head { border-radius: 0; }

/* Родительская рамка задаёт один общий внешний контур; дочерние плашки не
   рисуют внутри второй набор скруглённых углов. */
#pay-device.frame { gap: 0; }
#pay-device > .pane {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#pay-device > .pane + .pane { border-top: 1px solid var(--divider); }

/* Ключ: QR слева, действия справа, пояснение отдельной строкой снизу. */
.key-connection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "qr actions" "caption caption";
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(10px, 3vw, 18px);
  row-gap: 10px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.key-qr-block {
  grid-area: qr;
  display: flex;
  align-items: center;
  min-width: 0;
}
.key-qr {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(46, 66, 45, .08);
}
.key-qr-caption {
  grid-area: caption;
  margin: 0;
  padding-top: 0;
  width: 100%;
  text-align: center;
  font-size: clamp(12px, 3vw, 14px);
  line-height: 1.35;
}
.key-action-stack {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  gap: 10px;
  min-width: 0;
}
.key-open-action,
.key-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: start;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px clamp(8px, 2vw, 14px);
  text-align: center;
  line-height: 1.2;
  font-size: clamp(13px, 3.4vw, 16px);
}
.key-action-stack > .key-subscription-field {
  width: 100%;
  margin: 0;
  min-width: 0;
  align-self: start;
}
.key-action-stack > .key-subscription-field input[readonly] {
  background: var(--paper);
  height: 46px;
  padding: 0 8px;
  font-size: clamp(13px, 3.5vw, 16px);
  text-overflow: ellipsis;
}
.key-action-stack > .key-subscription-field { background: var(--paper); }
.key-copy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 46px;
  padding: 0;
  background: rgba(249, 250, 239, .94) !important;
  color: var(--ink) !important;
  border-left: 1px solid var(--divider) !important;
  transition: background-color .18s ease, color .18s ease;
}
.key-copy-icon svg { display: block; flex: none; width: 20px; height: 20px; }
.field button.key-copy-icon { flex: 0 0 28px; width: 28px; height: 46px; min-width: 28px; padding: 0; }
.key-copy-icon:hover { background: var(--sky) !important; }
.key-copy-icon:active { background: var(--lime) !important; }
.key-more-toggle {
  justify-content: space-between;
  background: rgba(249, 250, 239, .94);
  border: 1px solid #BFCDBB;
  border-radius: 11px;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.key-more-toggle[aria-expanded="true"] { background: var(--sky); }
.key-subscription-field, .key-config-field { margin-top: 14px; }
.key-subscription-field input, .key-config-field input { min-width: 0; }
.key-more-body {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--divider);
  border-radius: 13px;
  background: var(--paper);
}

.device-picker > a { background: #F9FAEF; }
.guide-key-name { font-weight: 750; overflow-wrap: anywhere; }
.guide-connection .field { min-width: 0; }
.guide-connection .field code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.guide-connection-selected { border-color: var(--lime); }
@media (max-width: 420px) {
  .guide-connection .field code { padding: 0 12px; }
  .guide-connection .field button { padding: 0 12px; }
}

/* В составных сетках внешнюю форму задаёт общая рамка, а не скругления плиток. */
.frame.cols2 > .pane,
.frame.cols2 > .period { border-radius: 0; }

#pay-device .is-expand.is-primary {
  min-height: 48px;
  background: var(--lime);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 750;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* На телефонах убираем синий системный tap flash; фокус и нажатие подсвечиваются мягким лаймом. */
a, button, [role="button"], input[type="button"], input[type="submit"] {
  -webkit-tap-highlight-color: rgba(199, 232, 61, .22);
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #B7D93E;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(199, 232, 61, .22);
  transition: outline-color .22s ease, box-shadow .22s ease;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 232, 61, .28);
  transition: box-shadow .22s ease;
}
.is-primary:active, .btn-primary:active, .btn-success:active {
  background-color: #CBEA43;
  box-shadow: 0 0 0 4px rgba(199, 232, 61, .22), 0 3px 10px rgba(87, 112, 21, .12);
}
.is-secondary:active, .btn:active, .btn-outline:active {
  background-color: #EFF5D9;
  border-color: #B7D93E;
  box-shadow: 0 0 0 4px rgba(199, 232, 61, .2);
}
.trial-terms { line-height: 1.5; }
.trial-terms strong { font-weight: 800; }