/*
 * Правила страниц поверх дизайн-системы Nocturne.
 *
 * Токены системы не трогаем — здесь только то, что задал макет:
 * графитовый акцент, светлая тема, сетки и мобильная раскладка.
 *
 * Мобильная версия — не «то же самое в одну колонку»: на телефоне
 * покупка вынесена на отдельный экран, поэтому часть блоков прячется,
 * а часть появляется. Классы .v4-only-desk и .v4-only-mob задают это
 * явно, чтобы не гадать по ширинам в разметке.
 */

:root {
  --color-bg: #23253a;
  --color-accent: #9397ab;
  --color-accent-100: #f3f5fe; --color-accent-200: #e4e7f5; --color-accent-300: #cfd3e5;
  --color-accent-400: #b2b6ca; --color-accent-500: #9397ab; --color-accent-600: #75798c;
  --color-accent-700: #595d6c; --color-accent-800: #3f424d; --color-accent-900: #292b31;
  --color-accent-2: #9397ab;
  --color-accent-2-100: #f3f5fe; --color-accent-2-200: #e4e7f5; --color-accent-2-300: #cfd3e5;
  --color-accent-2-400: #b2b6ca; --color-accent-2-500: #9397ab; --color-accent-2-600: #75798c;
  --color-accent-2-700: #595d6c; --color-accent-2-800: #3f424d; --color-accent-2-900: #292b31;
  --color-section: #24262f; --color-section-glow: #33363f; --color-section-ghost: #4a4d58;
}

html.v4-light {
  --color-bg: #d5d8e4; --color-surface: #eceef5; --color-text: #24262f;
  --color-divider: color-mix(in srgb, #24262f 14%, transparent);
  --color-neutral-100: #292b31; --color-neutral-200: #3f424d; --color-neutral-300: #595d6c;
  --color-neutral-400: #75798c; --color-neutral-500: #6b6f80; --color-neutral-600: #75798c;
  --color-neutral-700: #cfd3e5; --color-neutral-800: #dfe2ee; --color-neutral-900: #eceef6;
  --color-accent: #595d6c;
  --color-accent-100: #24262f; --color-accent-200: #292b31; --color-accent-300: #3f424d;
  --color-accent-400: #4a4d59; --color-accent-500: #595d6c; --color-accent-600: #75798c;
  --color-accent-700: #c9cddd; --color-accent-800: #dfe2ee; --color-accent-900: #eceef6;
  --color-accent-2: #595d6c; --color-accent-2-300: #3f424d; --color-accent-2-500: #595d6c;
  --color-accent-2-700: #c9cddd; --color-accent-2-800: #dfe2ee; --color-accent-2-900: #eceef6;
  --color-section: #e4e7f2; --color-section-glow: #eef0f8; --color-section-ghost: #cfd3e5;
  --shadow-sm: 0 0 0 1px #dfe2ee;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-400); }

.v4-page {
  min-height: 100%;
  background:
    radial-gradient(1100px 640px at 88% -160px, rgba(233,233,237,0.16), transparent 62%),
    radial-gradient(900px 620px at 10% 8%, rgba(233,233,237,0.08), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
  background-attachment: fixed, fixed, fixed, fixed;
  font-family: var(--font-body);
  color: var(--color-text);
}

html.v4-light .v4-page {
  background:
    radial-gradient(1100px 640px at 88% -160px, rgba(36,38,47,0.34), transparent 64%),
    radial-gradient(900px 620px at 8% 6%, rgba(36,38,47,0.16), transparent 62%),
    var(--color-bg);
  background-attachment: fixed, fixed, fixed;
}

/* ------------------------------------------------------- показ по ширине */

.v4-only-mob { display: none; }

@media (max-width: 760px) {
  .v4-only-desk { display: none !important; }
  .v4-only-mob { display: block; }
  .v4-only-mob.v4-flex { display: flex; }
}

/* ------------------------------------------------------------------ шапка */

.v4-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
  border-bottom: 1px solid var(--color-divider);
  padding-inline: clamp(20px, 5vw, 72px);
  /* Высоту панели задаёт не отступ, а самый высокий элемент — логотип.
     Поэтому «панель ниже, элементы прежние» — это отступ: 92 px высоты
     минус 10 % дают 83, из них 61 занимает логотип. */
  padding-block: 10.4px;
  gap: 15px;
}

/* Логотип — крупный, как в макете: он там заметно выше кнопок в шапке.
   Селектор из двух классов намеренно: у системы есть `.nav a` с размером
   14px, и по специфичности она перебивает одиночный класс. */
.v4-nav .v4-brand {
  letter-spacing: -0.02em;
  font-size: 48px;
  line-height: 1;
  color: var(--color-text);
  font-weight: 500;
  margin-right: auto;
  /* Картинка и название стоят в строку и выравниваются по средней линии,
     а не по базовой: у логотипа своя высота, и по базовой он проваливается. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Высоту логотипа привязываем к размеру названия: на телефоне название
   меньше, и логотип обязан уменьшиться вместе с ним, иначе он выдавит
   переключатель темы за край. */
.v4-nav .v4-logo {
  height: 1.28em;
  width: auto;
  flex: none;
}

/* Размеры переключателя — переменными: их пять штук и они связаны между
   собой, а на узком экране всё это надо уменьшить разом. Разъехавшись по
   правилам, кружок съезжает с дорожки при первой же правке. */
.v4-switch {
  --sw-w: 82px;
  --sw-h: 41px;
  --sw-knob: 31px;
  --sw-pad: 4px;
  --sw-icon: 17px;
  --sw-inset: 11px;

  position: relative;
  width: var(--sw-w); height: var(--sw-h);
  flex: none;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-700);
  background: var(--color-neutral-800);
  cursor: pointer;
  transition: background .2s ease;
}
.v4-switch:hover { background: var(--color-neutral-700); }

/* Иконки по бокам и внутри кружка выравниваем по центру своей половины:
   абсолютный отступ сверху съезжает при смене размера переключателя. */
.v4-switch > svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.v4-switch .v4-sun { left: var(--sw-inset); }
.v4-switch .v4-moon { right: var(--sw-inset); }

/* Размер иконок задаём стилем, а не атрибутами в разметке: атрибуты
   пришлось бы править в каждом svg по отдельности. */
.v4-switch svg { width: var(--sw-icon); height: var(--sw-icon); }

.v4-knob {
  position: absolute; top: 50%; left: var(--sw-pad);
  width: var(--sw-knob); height: var(--sw-knob);
  margin-top: calc(var(--sw-knob) / -2);
  border-radius: 999px;
  background: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  /* Сдвиг считаем из ширины, а не подбираем: ширина дорожки минус кружок,
     минус отступы с двух сторон и рамка. */
  transform: translateX(calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad) * 2 - 2px));
}
.v4-knob svg { display: block; }
html.v4-light .v4-knob { transform: translateX(0); }
.v4-switch .v4-sun { opacity: .35; }
html.v4-light .v4-switch .v4-sun { opacity: 1; }
html.v4-light .v4-switch .v4-moon { opacity: .35; }
.v4-knob .v4-sun-in { display: none; }
html.v4-light .v4-knob .v4-sun-in { display: block; }
html.v4-light .v4-knob .v4-moon-in { display: none; }

.v4-lang {
  display: flex; align-items: stretch; flex: none;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--color-neutral-700);
  background: var(--color-neutral-800);
}
.v4-lang button {
  padding: 6px 17px;
  border: 0; border-radius: 8px;
  font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  transition: background .18s ease, color .18s ease;
}
.v4-lang button[aria-pressed="true"] { background: var(--color-accent-400); color: var(--color-accent-900); }

/* Кнопки шапки крупнее остальных на сайте: тот же множитель 1.2,
   что у названия и переключателей. Трогать общий .btn нельзя — он живёт
   на всех страницах. */
.v4-nav .btn {
  font-size: 17px;
  padding: calc(var(--space-2) * 1.2) calc(var(--space-3) * 1.44);
}

.v4-avatar svg { width: 22px; height: 22px; }

.v4-avatar {
  width: 41px; height: 41px; flex: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-700);
  border: 1px solid var(--color-accent-600);
}

/* ------------------------------------------------------------- поверхности */

/* ------------------------------------------------------- розовый акцент */

/* Второй акцент помимо сиреневого: им обведены плитки и подсвечены главные
   действия. Держим отдельным цветом, а не подменяем сиреневый: текст,
   ссылки и подписи остаются на нём, иначе страница станет одноцветной. */
:root {
  --color-pink: #ff2e88;
  --color-pink-line: color-mix(in srgb, var(--color-pink) 42%, transparent);
  --color-pink-dim: color-mix(in srgb, var(--color-pink) 18%, transparent);
  /* Огонёк «подключено». Зелёный тут не украшение, а общепринятый знак
     живого соединения — акцентным цветом он читался как часть оформления. */
  --color-live: #3ddc84;

  /* Все тонкие линии сайта — того же семейства, что и окантовки плиток:
     поля ввода, вторичные кнопки, разделители, кольца переключателей.
     Переопределяем токен дизайн-системы, а не правим каждое место: иначе
     половина линий останется серой и разнобой видно сразу. */
  --color-divider: color-mix(in srgb, #ff2e88 20%, transparent);
}

/* Тени дизайн-системы начинаются с серого кольца в один пиксель
   (`0 0 0 1px #595d6c`). Рядом с нашей розовой рамкой оно выглядит второй
   линией — оставляем только мягкую тень, без кольца. */
:root {
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .65);
}
html.v4-light {
  --shadow-md: 0 6px 18px rgba(36, 38, 47, .08);
  --shadow-lg: 0 16px 40px rgba(36, 38, 47, .12);
}

.v4-tile,
.v4-panel {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  border: 1px solid var(--color-pink-line);
  border-radius: var(--radius-lg);
}

/* Карточки тарифов и технологий живут в дизайн-системе без рамки —
   обводим их тем же розовым, чтобы блоки читались одной семьёй. */
.card {
  border: 1px solid var(--color-pink-line);
}

/* Разделители внутри плиток — тот же розовый, но едва заметный: сплошная
   линия в полную силу превращает плитку в таблицу. */
.v4a-step,
.v4a-steps .v4a-step:first-child { border-color: var(--color-pink-dim); }

.v4-kicker {
  font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase;
  text-align: center; color: var(--color-pink); margin: 0 0 18px;
}

/* Заголовок первого экрана. Размер живёт здесь, а не в разметке: инлайн
   перебивает медиазапрос, и на телефоне он остался бы десктопным. */
.v4-h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 24px -0.06em;
}

.v4-h2 {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.025em;
  text-align: center; margin: 0 0 clamp(20px, 2.2vw, 28px);
}

.v4-lead {
  font-size: 16px; line-height: 1.65; color: var(--color-text); opacity: .85;
  text-align: center; max-width: 56ch; margin: 0 auto clamp(36px, 4vw, 52px);
}

.v4-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }

.v4-band {
  background: radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%), var(--color-section);
  padding-block: clamp(52px, 6.5vw, 92px);
}

/* Первый экран: слева заголовок и плитки, справа покупка во всю высоту.
   На узком экране всё выстраивается в одну колонку и покупка встаёт сразу
   под заголовком — по порядку в разметке. */
#v4-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px);
  /* По горизонтали — воздух между колонками, по вертикали — обычный отступ
     до плиток: одинаковый зазор развалил бы первый экран. */
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 28px;
  align-items: start;
}
#v4-hero > .v4-hero-text { grid-column: 1; grid-row: 1; }
#v4-hero > .v4-hero-tiles { grid-column: 1; grid-row: 2; margin-top: 28px; }
#v4-hero > .v4-hero-buy { grid-column: 2; grid-row: 1 / span 2; }

.v4-grid { display: grid; gap: 16px; }
.v4-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v4-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v4-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Технологий три, а не четыре: в сетке на четыре колонки одна оставалась
   бы пустой, и блок выглядел бы недогруженным. */
#v4-tech { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Сетки кабинета живут здесь, а не в разметке: инлайновый стиль перебивает
   медиазапрос, и на телефоне колонки остаются двумя с обрезанным текстом. */
/* В шапке кабинета одна плитка — карточка подписки. «Аккаунт» уехал вниз,
   к устройствам, поэтому вторая колонка тут больше не нужна. */
#v4a-head { grid-template-columns: minmax(0, 1fr); }
#v4a-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
#v4a-grid { align-items: start; }

.card-kicker { text-transform: uppercase; letter-spacing: 0.1em; }

/* ------------------------------------------------------- строки выбора */

.v4-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-pink-line);
  background: transparent;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text);
}
.v4-row:hover { border-color: color-mix(in srgb, var(--color-pink) 60%, transparent); }
.v4-row.is-picked {
  border-color: var(--color-pink);
  background: color-mix(in srgb, var(--color-pink) 10%, color-mix(in srgb, var(--color-surface) 70%, transparent));
}

/* Кружок выбора рисуем сами: браузерный radio на тёмном фоне заливается
   белым и в макет не попадает — там пустое кольцо, а выбранный с точкой. */
.v4-row input[type="radio"],
[data-plan-row] input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  flex: none;
  margin: 0;
  border-radius: 999px;
  border: 1.5px solid var(--color-pink-line);
  background: transparent;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .16s ease;
}
.v4-row input[type="radio"]::before,
[data-plan-row] input[type="radio"]::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-text);
  transform: scale(0);
  transition: transform .14s ease;
}
.v4-row input[type="radio"]:checked,
[data-plan-row] input[type="radio"]:checked { border-color: var(--color-text); }
.v4-row input[type="radio"]:checked::before,
[data-plan-row] input[type="radio"]:checked::before { transform: scale(1); }

/* --------------------------------------------------------- документы */

.v4-doc { font-size: 15px; line-height: 1.75; }
.v4-doc p { margin: 0 0 14px; opacity: .88; }
.v4-doc h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 36px 0 14px;
}
.v4-doc a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- анимации */

@keyframes v4-pulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.35); } }
@keyframes v4-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.v4-armed [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.v4-armed [data-reveal].v4-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .v4-armed [data-reveal] { opacity: 1; transform: none; transition: none; }
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .v4-plus { transform: rotate(45deg); }

/* --------------------------------------------------------------- узкие окна */

@media (max-width: 1120px) {
  /* Между покупкой и плитками нужен заметный разрыв: карточки выглядят
     одинаково, и при зазоре наравне с внутренним они читаются как один
     слипшийся блок. */
  #v4-hero { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 44px; }
  #v4-hero > .v4-hero-text,
  #v4-hero > .v4-hero-buy,
  #v4-hero > .v4-hero-tiles { grid-column: 1; grid-row: auto; margin-top: 0; }

  /* Порядок на узком экране: заголовок → покупка → плитки. Задаём его
     здесь, а не перестановкой в разметке: на широком экране места блоков
     закреплены сеткой, и порядок в HTML там ни на что не влияет. */
  #v4-hero > .v4-hero-text { order: 1; }
  #v4-hero > .v4-hero-buy { order: 2; }
  #v4-hero > .v4-hero-tiles { order: 3; }
  #v4-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  #v4-inside, #v4-priv, #v4-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v4a-head, #v4a-grid { grid-template-columns: minmax(0, 1fr); }
  #v4a-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #v4-steps, #v4-inside, #v4-priv { grid-template-columns: minmax(0, 1fr); }
  #v4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v4a-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-h2 { font-size: clamp(26px, 7vw, 34px); }

  /* Поля тоже в процентах от ширины: с фиксированными 20 px доля, которую
     занимает заголовок, менялась от экрана к экрану — на 390 px строка
     переносилась, на 412 оставался пустой край. */
  .v4-wrap { padding-inline: 5vw; }

  /* Заголовок в всю ширину. Замер: строка «Интернет без границ.» шириной
     примерно 9,4 своих кегля, доступно 90vw — значит 9,3vw дают около 97 %
     заполнения на любом телефоне, с запасом от переноса. */
  .v4-h1 { font-size: 8.7vw; }

  /* В полоске шагов на телефоне подписана только текущая ступень. */
  [data-step-label]:not(.is-active) { display: none; }

  /* Ссылка-подписка: на телефоне код идёт первым и по центру, а не сбоку —
     иначе и ссылка, и код сжимаются в нечитаемые полоски. */
  #v4a-conn { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
  #v4a-conn > div:last-child { order: -1; }
  #v4a-conn > div:first-child { width: 100%; }
}
@media (max-width: 560px) {
  #v4-plans, #v4-tech { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- установка клиента */

/* Выбор устройства и приложения. Скрытые вкладки прячем классом, а не
   атрибутом hidden: у кнопок и плиток свой display, и браузерное
   [hidden] { display: none } они перебивают. */
.v4a-pane:not(.is-active),
.v4a-steps:not(.is-active) { display: none; }

/* Ключ: код слева, действия рядом. Ссылку показывать незачем — её
   копируют значком, а читать в ней нечего. */
.v4a-key {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Кнопки стоят справа от кода на любой ширине: перенос строкой ниже
     отрывал их от того, к чему они относятся. */
  flex-wrap: nowrap;
  margin: 0 0 20px;
}

.v4a-qr {
  display: inline-flex;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #fff;
  flex: none;
}

.v4a-key-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* Квадратная кнопка со значком: рядом с обычной она не должна выглядеть
   обрезанной, поэтому высота и ширина заданы явно. */
.v4a-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-color: var(--color-divider);
  color: var(--color-text);
}
.v4a-icon:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.v4a-copy-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Подтверждение копирования: появляется справа от кнопки и исчезает само.
   Занимает место только пока видно — иначе на узком экране оно раздвигало
   бы колонку и выталкивало кнопки за плитку. */
.v4a-copied {
  display: none;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: .75;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v4a-copied.is-on { display: inline; }

/* Устройство и приложение — двумя списками в одну строку: вкладками это
   занимало на телефоне пол-экрана. */
.v4a-pick {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}

/* Списки на витрине и в кабинете рисуем сами — как в панели. Родные на
   маке выходят светлыми, с серой стрелкой, и в тёмном кабинете выглядят
   деталью из чужого интерфейса. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  color-scheme: dark;
  border-color: color-mix(in srgb, var(--color-pink) 55%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff2d94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
html.v4-light select.input {
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff0f86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.v4a-pick select {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  font-size: 14px;
  cursor: pointer;
}

/* Список приложений свой у каждой платформы: показываем тот, что подходит
   выбранному устройству. */
.v4a-pick select[data-app-select]:not(.is-active) { display: none; }

/* Полноценная кнопка: заливка, а не обводка. Ей нажимают «поставить» и
   «добавить ключ» — это главные действия экрана, и они должны выглядеть
   нажимаемыми, а не ссылкой. */
.v4a-go {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: #fff;
  font-weight: 600;
  min-height: 42px;
}
.v4a-go:hover {
  background: color-mix(in srgb, var(--color-pink) 82%, #fff);
  border-color: color-mix(in srgb, var(--color-pink) 82%, #fff);
}

/* Кнопка перехода в приложение — во всю строку: на телефоне по ней целятся
   пальцем, и половина ширины тут ни к чему. */
.v4a-go-wide { flex: 1 1 100%; }

/* Шаги идут прямо в плитке ключа: своя рамка вокруг них давала третий
   вложенный прямоугольник и растягивала блок на пол-экрана. */
.v4a-steps { margin-top: 4px; }

.v4a-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-divider);
}
.v4a-step:first-child { border-top: 0; padding-top: 0; }

.v4a-num {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
}

.v4a-step-head {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  margin: 2px 0 6px;
}

.v4a-step-text {
  font-size: 14px;
  line-height: 1.6;
  opacity: .85;
  margin: 0;
}

.v4a-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.v4a-links .btn { font-size: 13.5px; padding: 8px 14px; }

/* Подсказка на случай, когда ссылка не открыла приложение: спокойным
   тоном и мельче основной инструкции — она нужна не всем. */
.v4a-fallback {
  font-size: 13px;
  line-height: 1.55;
  opacity: .75;
  margin: 10px 0 0;
}

/* Оговорка про российский App Store — не сноска мелким шрифтом: без неё
   человек не найдёт приложение и решит, что мы продали ему пустоту.
   Поэтому белым, крупнее соседнего текста и с подчёркиванием. */
/* Строка «рекомендуем» над шагами: тихая подсказка, не баннер. */
.v4a-recommend {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-pink) 45%, transparent);
  background: color-mix(in srgb, var(--color-pink) 10%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
}

.v4a-note {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 1;
  margin: 14px 0 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-underline-offset: 3px;
}

/* Вопрос — своей строкой: так видно, что дальше идёт готовое решение,
   а не продолжение жалобы. */
.v4a-note-q { display: block; }

/* Сама ссылка — розовая и жирная: это единственное место инструкции, где
   человеку надо уйти на сторону и что-то сделать, и оно должно быть
   заметно с первого взгляда. */
.v4a-note a {
  color: var(--color-pink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-pink);
  text-underline-offset: 3px;
}
.v4a-note a:hover { filter: brightness(1.15); }

/* Плитки рефералки: три штуки в ряд на любой ширине, как в макете. */
.v4-ref-tile { padding: 26px 24px 28px; }

.v4-ref-figure {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
}

.v4-ref-text {
  font-size: 14.5px;
  line-height: 1.6;
  opacity: .85;
  margin: 0;
}

@media (max-width: 760px) {
  /* На телефоне плитка шириной около ста точек: с полями по 24 px внутри
     остаётся полсотни, и слово «бесплатный» вылезает за край. Поля режем,
     шрифт уменьшаем — иначе три плитки в ряд не живут. */
  .v4-ref-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px 10px 22px;
  }

  .v4-ref-figure { font-size: 28px; }
  .v4-ref-text { font-size: 12.5px; line-height: 1.5; }
}
@media (max-width: 640px) {
  .v4-nav { padding-block: 9.6px; }
  .v4-nav .v4-brand { font-size: 32px; }
  #v4-tiles { gap: 10px; }
  .table th, .table td { font-size: 12.5px; padding-inline: 8px; }
}

/* Узкие телефоны: увеличенная шапка в 320–390 px просто не помещается —
   кнопка «Войти» уезжает за край. Здесь она меньше не «на глаз», а ровно
   настолько, чтобы влезть. */
@media (max-width: 420px) {
  /* Код ужимаем: рядом с ним должны поместиться кнопки, а не уехать вниз. */
  .v4a-qr { padding: 8px; }
  .v4a-qr svg { width: 118px; height: 118px; }
  .v4a-key { gap: 12px; }
  .v4a-key-actions .btn { font-size: 13px; padding-inline: 12px; }
  .v4a-copied { font-size: 12px; }

  .v4-nav {
    padding-inline: 14px;
    gap: 10px;
    /* Свой отступ: логотип здесь ещё меньше, и общий мобильный отступ
       срезал бы панель на 11 % вместо 10. */
    padding-block: 9.9px;
  }
  .v4-nav .v4-brand { font-size: 27px; }
  .v4-nav .btn { font-size: 15px; padding: var(--space-2) var(--space-3); }

  .v4-switch {
    --sw-w: 62px;
    --sw-h: 31px;
    --sw-knob: 23px;
    --sw-pad: 3px;
    --sw-icon: 13px;
    --sw-inset: 8px;
  }
}

/* Главное действие экрана — розовой заливкой: в макете это единственная
   кнопка, которую видно с другого конца страницы. Остальные кнопки
   дизайн-системы не трогаем, иначе розовым зальёт всё подряд. */
.btn-primary {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: #fff;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--color-pink) 82%, #fff);
  border-color: color-mix(in srgb, var(--color-pink) 82%, #fff);
}
.btn-primary:disabled { background: var(--color-pink-dim); border-color: var(--color-pink-line); color: var(--color-text); }

/* Значок «выгодно» на тарифе и кружок выбора — той же семьи. */
.tag-accent { background: var(--color-pink); color: #fff; }
.v4-row input[type="radio"]:checked,
[data-plan-row] input[type="radio"]:checked { border-color: var(--color-pink); }

/* Точку внутри кольца рисует ::before — правило для ::after не работало
   вовсе, и выбранный тариф отмечался белой точкой в розовом кольце. */
.v4-row input[type="radio"]::before,
[data-plan-row] input[type="radio"]::before { background: var(--color-pink); }

/* Поле ввода и вторичные кнопки подсвечиваем тем же розовым. */
.input { caret-color: var(--color-pink); }
.input:hover { border-color: color-mix(in srgb, var(--color-pink) 55%, transparent); }
.input:focus-visible { border-color: var(--color-pink); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-pink) 12%, transparent); border-color: color-mix(in srgb, var(--color-pink) 60%, transparent); }
.card-kicker { color: var(--color-pink); }

/* Кнопка-ссылка не перекрашивается правилами для ссылок: у кнопки свой
   цвет текста, и наведение его не меняет. Иначе «Войти» под курсором
   становилась сиреневой на розовом — из-за `a:hover`, а не из-за кнопки. */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible,
.v4a-go,
.v4a-go:hover,
.v4a-go:active,
.v4a-go:focus-visible { color: #fff; }

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus-visible { color: var(--color-text); }

/* В шапке у системы своё правило `.nav a:hover` — по весу оно перебивает
   класс кнопки, поэтому здесь селектор длиннее нарочно. Тот же случай с
   обычными ссылками-кнопками на странице. */
a.btn-primary,
a.btn-primary:hover,
.v4-nav a.btn-primary,
.v4-nav a.btn-primary:hover,
.nav a.btn-primary:hover { color: #fff; }

a.btn-secondary:hover,
.v4-nav a.btn-secondary:hover,
.nav a.btn-secondary:hover { color: var(--color-text); }

/* Остатки сиреневого в самой дизайн-системе: фокус поля, точка радио,
   сегментированный переключатель и обводка тега. Перекрываем здесь —
   систему не трогаем, она общая для админки. */

/* Кольцо фокуса у системы своё, сиреневое, и рисуется поверх наших рамок.
   Красим его в розовый, а у полей убираем вовсе: там уже есть своя рамка,
   и кольцо рядом с ней читалось двойной обводкой. Видимость фокуса при
   этом не теряется — рамка меняет цвет и получает мягкое свечение. */
:focus-visible { outline-color: var(--color-pink); }

.input:focus-visible {
  outline: none;
  border-color: var(--color-pink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pink) 20%, transparent);
}
.radio:hover .dot { border-color: var(--color-pink); }
.radio input:checked + .dot { border-color: var(--color-pink); background: var(--color-pink); }
.seg-opt:has(input:checked) { color: var(--color-pink); box-shadow: inset 0 0 0 1px var(--color-pink); }
.seg-opt:has(input:focus-visible) { outline-color: var(--color-pink); }
.tag-outline { border-color: var(--color-pink); color: var(--color-pink); }

/* ---------------------------------------------------------------- админка */

/* Две колонки: боковое меню и содержимое. На узком экране меню уезжает
   наверх строкой — иначе половина ширины уходит под навигацию. */
/* Хорошо и тревожно — переменными: в светлой теме те же оттенки, что в
   тёмной, сливаются с фоном. */
:root { --color-good: #3ddc97; --color-warn: #ffc860; }
html.v4-light { --color-good: #0e8f5a; --color-warn: #9a6b00; }

#v4-admin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  background: radial-gradient(1100px 640px at 88% -160px, color-mix(in srgb, var(--color-pink) 10%, transparent), transparent 70%);
  /* Разделители в панели розовые в полную силу: в макете рамки карточек
     видны, а не угадываются. */
  --color-divider: color-mix(in srgb, var(--color-pink) 42%, transparent);
}

#v4-side {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 16px;
  border-right: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-pink) 6%, var(--color-bg));
}

/* Кнопки и поля внутри панели обведены розовым: в макете любая кнопка
   читается рамкой, а не только заливкой у главной. */
#v4-admin .btn { border: 1px solid color-mix(in srgb, var(--color-pink) 55%, transparent); }
#v4-admin .btn-primary { border-color: var(--color-pink); }
#v4-admin .btn:hover,
#v4-admin .btn:focus-visible {
  border-color: var(--color-pink);
  background: var(--color-pink);
  color: #fff;
}
#v4-admin .input,
#v4-admin .table { border-color: var(--color-divider); }

#v4-nav { display: flex; flex-direction: column; gap: 3px; }

.v4a-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease;
}
.v4a-link:hover { background: color-mix(in srgb, var(--color-pink) 8%, transparent); color: var(--color-text); }
.v4a-link.is-active {
  border-color: var(--color-pink);
  background: color-mix(in srgb, var(--color-pink) 16%, transparent);
}

/* Значок пункта — просто контур, без плашки вокруг. */
.v4a-ico { display: flex; align-items: center; justify-content: center; width: 17px; flex: none; }

/* Счётчик у «Пользователей»: подписки, которые вот-вот кончатся. */
.v4a-count {
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-pink);
  color: #fff;
}

.v4a-state {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

.v4a-main { min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 44px) 64px; }

.v4a-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

/* Чип с почтой владельца. Закрытый выглядит как в макете, открытый
   показывает выход — случайно нажать «Выйти» из-за этого нельзя. */
.v4a-who { position: relative; }
.v4a-who summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  list-style: none;
}
.v4a-who summary::-webkit-details-marker { display: none; }
.v4a-who-ava {
  width: 28px; height: 28px;
  border-radius: 999px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-700);
}
.v4a-who-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.v4a-who-menu a { padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--color-text); }
.v4a-who-menu a:hover { background: color-mix(in srgb, var(--color-pink) 12%, transparent); color: var(--color-text); }

/* Плашка ответа на действие: зелёная — получилось, розовая — нет. */
.v4a-flash {
  margin: 0 0 18px;
  padding: 13px 16px;
  font-size: 14px;
  border-radius: var(--radius-md);
  border: 1px solid #3ddc97;
  background: rgba(61, 220, 151, .12);
}
.v4a-flash.is-bad { border-color: var(--color-pink); background: color-mix(in srgb, var(--color-pink) 12%, transparent); }

/* Карточка показателя и любой блок панели. */
.v4a-box {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

.v4a-kpi { padding: 18px 18px 20px; }
.v4a-kpi-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin: 0 0 12px; }
.v4a-kpi-value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -.03em;
  margin: 0 0 6px;
}
.v4a-kpi-value.is-small { font-size: clamp(26px, 2.4vw, 34px); }
.v4a-kpi-delta { font-size: 12.5px; margin: 0; }

.v4a-card-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.02em;
  margin: 0;
}

#v4a-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
#v4a-kpi.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#v4a-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin: 0 0 16px; }
#v4a-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
#v4a-pair.is-wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
#v4a-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Столбики оплат: высота приходит инлайном из данных, всё остальное здесь. */
.v4a-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.v4a-bar {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--color-pink) 38%, transparent);
  min-height: 2px;
}
.v4a-bar.is-last { background: var(--color-pink); }

/* Дорожка доли: серый жёлоб, розовая заливка. */
.v4a-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--color-neutral-800);
  overflow: hidden;
}
.v4a-track > span { display: block; height: 100%; border-radius: 999px; background: var(--color-pink); }

.v4a-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--color-divider);
}

/* Таблица в собственной рамке — без внутренней рамки самой таблицы.
   На узком экране прокручивается вбок сама, а не обрезается и не тащит
   за собой страницу: иначе с телефона недоступны колонки и кнопки. */
.v4a-table-box {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

/* То же для таблиц, которые лежат прямо в карточке (финансы, тарифы). */
.v4a-box > .table { display: block; overflow-x: auto; white-space: nowrap; }
.v4a-box > .table thead,
.v4a-box > .table tbody { display: table; width: 100%; }

/* Поля панели: тёмная заливка, розовая обводка и наша стрелка вместо
   системной. Родные списки на маке рисуются светлыми и выпадают из
   тёмной панели, как чужая деталь. */
#v4-admin .input {
  border-color: color-mix(in srgb, var(--color-pink) 55%, transparent);
  color-scheme: dark;
}
/* В светлой теме системные части полей должны быть светлыми. */
html.v4-light #v4-admin .input { color-scheme: light; }
#v4-admin select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff2d94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* В светлой теме розовый другой — стрелка рисуется отдельным файлом,
   переменную в адрес картинки не подставить. */
html.v4-light #v4-admin select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff0f86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Родной степпер у чисел тоже системный и серый — прячем и рисуем свой. */
#v4-admin input[type="number"] { -moz-appearance: textfield; }
#v4-admin input[type="number"]::-webkit-outer-spin-button,
#v4-admin input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v4a-stepper { position: relative; display: inline-flex; }
.v4a-stepper > .input { width: 100%; padding-right: 26px; }
.v4a-stepper-btns {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.v4a-stepper-btns button {
  width: 14px;
  height: 11px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-pink);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v4a-stepper-btns button:hover { filter: brightness(1.25); }

/* Строка отбора: подписи над полями, поля в ряд с переносом. */
.v4a-filter > summary { list-style: none; cursor: pointer; display: inline-flex; }
.v4a-filter > summary::-webkit-details-marker { display: none; }
.v4a-filter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0 0 14px;
  padding: 14px 16px;
}
.v4a-filter-form select { min-width: 150px; }

/* Атрибут hidden сам по себе бессилен против display:flex и display:grid —
   блок оставался на экране, хотя разметка считала его скрытым. */
.v4a-filter-form[hidden],
.v4a-seg[hidden] { display: none; }

/* Отбор получателей рассылки: те же поля, что в фильтре таблицы. */
/* Отбор получателей стоит в узкой карточке рассылки, поэтому в две
   колонки: в строку семь полей не влезают, а столбиком занимают пол-экрана. */
.v4a-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
  margin: 0 0 14px;
}
.v4a-seg select { width: 100%; min-width: 0; }

@media (max-width: 700px) {
  .v4a-seg { grid-template-columns: minmax(0, 1fr); }
}

/* Плотная таблица: строк много, а данных в каждой прибавилось. Вторая
   строка ячейки — приглушённая подпись, вместо отдельной колонки. */
.v4a-tight th,
.v4a-tight td { padding: 8px 10px; font-size: 13px; }
.v4a-tight th:first-child,
.v4a-tight td:first-child { padding-left: 4px; }
.v4a-sub { display: block; font-size: 11px; opacity: .55; }

/* Чип фильтра. Выбранный залит розовым — как в макете. */
.v4a-chip { font-size: 13px; padding: 6px 12px; }
.v4a-chip.is-on { background: color-mix(in srgb, var(--color-pink) 16%, transparent); }

/* Тумблеры уведомлений в две колонки: их семь, в столбик они растягивают
   карточку на пол-экрана. */
#v4a-alerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }

@media (max-width: 900px) {
  #v4a-alerts { grid-template-columns: minmax(0, 1fr); }
}

/* Мелкая кнопка в строке таблицы. */
.v4a-mini { font-size: 12px; padding: 4px 9px; }
.v4a-mini.is-off { opacity: .45; cursor: default; }

/* Вопрос под кнопкой в строке таблицы: всплывает поверх, не растягивая
   строку и не сдвигая соседние колонки. */
.v4a-ask { position: relative; display: inline-block; }
.v4a-ask > summary { list-style: none; cursor: pointer; display: inline-flex; }
.v4a-ask > summary::-webkit-details-marker { display: none; }
.v4a-ask-body {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  text-align: left;
  white-space: nowrap;
}
.v4a-ask-title { font-size: 12.5px; opacity: .75; }
.v4a-ask-row { display: flex; gap: 6px; align-items: center; }
.v4a-ask-row .input { width: 90px; }

/* Форма, спрятанная под кнопкой: раскрывается на месте. */
.v4a-add { position: relative; }
.v4a-add > summary { list-style: none; cursor: pointer; }
.v4a-add > summary::-webkit-details-marker { display: none; }
.v4a-add-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 12px 0 0;
  width: 100%;
}
.v4a-field-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 6px;
}
.v4a-cell { font-size: 13px; padding: 6px 9px; box-sizing: border-box; }

/* Раскрывающиеся сведения об узле. */
.v4a-logs { position: relative; }
.v4a-logs > summary { list-style: none; cursor: pointer; display: inline-flex; }
.v4a-logs > summary::-webkit-details-marker { display: none; }
.v4a-logs-body {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .75;
  line-height: 1.55;
}

.v4a-node-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -.02em;
}
.v4a-node-cap { display: block; font-size: 11.5px; opacity: .6; }

/* Ручная выдача разворачивается во всю ширину строки с чипами. */
.v4a-add[open] { flex: 1 1 100%; }

@media (max-width: 1180px) {
  #v4a-nodes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  #v4-admin { grid-template-columns: minmax(0, 1fr); }
  #v4-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  #v4-nav { flex-direction: row; flex-wrap: wrap; }
  #v4a-kpi, #v4a-kpi.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #v4a-split, #v4a-pair, #v4a-pair.is-wide-left { grid-template-columns: minmax(0, 1fr); }
}

/* Выход — кнопка формы, но выглядеть должен ссылкой в том же меню. */
.v4a-who-out {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.v4a-who-out:hover { background: color-mix(in srgb, var(--color-pink) 12%, transparent); }

/* Выход стал кнопкой формы (GET разлогинивал чужой картинкой), но в подвале
   он должен по-прежнему выглядеть ссылкой. */
.v4-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  cursor: pointer;
}
.v4-linkbtn:hover { color: var(--color-accent-400); }

/* Список приложений с логотипами. Настоящий select прячем, но оставляем в
   разметке: на нём держится логика, и без скриптов он снова видим. */
.v4a-hidden-select { display: none; }

.v4a-apps { position: relative; flex: 1 1 0; min-width: 0; }

.v4a-apps-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding-right: 34px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff2d94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-color: color-mix(in srgb, var(--color-pink) 55%, transparent);
}

.v4a-apps-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-pink) 55%, transparent);
  background: var(--color-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.v4a-apps-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.v4a-apps-row:hover,
.v4a-apps-row:focus-visible { background: color-mix(in srgb, var(--color-pink) 14%, transparent); }

.v4a-apps-ico {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
}

/* ------------------------------------------------------- амбассадоры */

#v4a-partners { display: flex; flex-direction: column; gap: 12px; }

/* Карточка партнёра — вложенная, поэтому подложка темнее общей. */
.v4a-partner {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  background: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

.v4a-partner-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.v4a-partner-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.02em;
  margin: 0;
}

/* Реф-код — то, что партнёр вставляет в свои материалы: моноширинный, чтобы
   не спутать единицу с буквой. */
.v4a-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-pink);
  color: var(--color-pink);
}

.v4a-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.v4a-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  min-width: 0;
}
.v4a-link-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  flex: none;
}
.v4a-link-value {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.v4a-partner-foot {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-end;
}
/* Общая воронка на обзоре: те же метрики, что у партнёров, но во всю
   ширину — цифры расходятся поровну и на узком экране переносятся. */
.v4a-funnel { margin: 0 0 16px; }
.v4a-funnel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.v4a-funnel-head .v4a-card-title { margin: 0; }
.v4a-funnel-head select { width: auto; min-width: 150px; }
.v4a-funnel-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.v4a-funnel-row .v4a-metric span { font-size: 30px; }
.v4a-funnel-row .v4a-metric small { font-size: 12.5px; }

@media (max-width: 760px) {
  .v4a-funnel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .v4a-funnel-row .v4a-metric span { font-size: 24px; }
}

.v4a-metric span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
}
.v4a-metric small { display: block; font-size: 11.5px; opacity: .6; }

.v4a-rate { display: flex; flex-direction: column; margin: 0; }

.v4a-due { text-align: right; }
.v4a-due span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--color-pink);
}
.v4a-due small { display: block; font-size: 11.5px; opacity: .6; }

@media (max-width: 900px) {
  .v4a-links-grid { grid-template-columns: minmax(0, 1fr); }
  .v4a-partner-foot { gap: 18px; }
  .v4a-due { text-align: left; }
}

/* Строки для роутера: название слева, кнопка справа, между ними — воздух.
   Строка `vless://` наружу не печатается: она длинная и рвёт вёрстку, а
   человеку нужна не она сама, а кнопка «скопировать». */
.v4a-router-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-line, rgba(255,255,255,.08));
}
.v4a-router-row:last-child { border-bottom: 0; }
.v4a-router-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Команда установки: длинная строка, которую нельзя ни сократить, ни
   набрать руками. Переносим по любому символу, иначе она уезжает за край
   плитки и выглядит как обрывок мусора. */
.v4a-cmd-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 4px;
}
.v4a-cmd {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}