/* Стили ОткудаЛида. Порядок секций: base → layout → components → utilities.
 * Токены (цвета, отступы, шрифт) живут в tokens.css и подключаются отдельно. */

/* ─── base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden слабее любого класса, задающего display: .btn с display:inline-block
 * перебивал его, и «спрятанные» кнопки показывались все разом. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1 { margin-top: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; }
h2 { margin-top: 0; font-size: var(--text-md); font-weight: 600; }

code, pre { font-family: var(--font-mono); }

/* Числа в плитках и таблицах не должны «дёргаться» при смене значения. */
.tile-value, .table td, .table th { font-variant-numeric: tabular-nums; }

/* ─── layout ───────────────────────────────────────────────────────────────── */

.container { max-width: 1120px; margin: var(--space-8) auto; padding: 0 var(--space-6); }

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Бургер и выпадающее меню — только на узком экране (см. блок «адаптив» внизу файла). */
.nav-toggle, .burger, .nav-user { display: none; }

.logo {
  font-weight: 600;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--text);
  letter-spacing: -.01em;
}
.logo span { color: var(--accent); }

.nav { display: flex; gap: var(--space-4); }
.nav a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); }

.user { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* Шапка кабинета клиента: имя клиента справа, бургера здесь нет — прятать нечего. */
.client-name { margin-left: auto; min-width: 0; }
.client-name .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
/* Внутри карточки заголовок и так отбит паддингом — второй отступ там лишний. */
.card > .page-head { margin-bottom: var(--space-4); }

/* ─── components ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.card-narrow { max-width: 420px; margin: var(--space-12) auto; }
/* Вход и регистрация: кнопка во всю ширину формы — так она читается как завершение формы,
 * а не как случайный элемент под полями. */
.card-narrow .form .btn { width: 100%; }
.card-narrow .form input { min-width: 0; }
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* Заголовок карточки с действием справа: «Площадки» и кнопка «Добавить». */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.card-head h2 { margin: 0; }

/* Удаление отделяется от обычных настроек чертой: соседство с «Переименовать»
 * превращало необратимое действие в рядовую кнопку. */
.danger-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Цифры проекта на карточке в списке. flex: none обязателен: без него колонка сжимается
 * под ширину числа, а подпись вылезает наружу и наезжает на соседнюю. */
.card-stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
}
.card-stat { flex: none; }
.card-stat-value { font-size: var(--text-lg); font-weight: 600; }
.card-stat-label { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* Формы */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 500;
  font-size: var(--text-base);
}
.form input, .form select {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  min-width: 200px;
}
.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form input[aria-invalid="true"] { border-color: var(--danger); }

/* Поле, в которое пишут фразу, а не слово: 200px обрезали подсказку на полуслове.
 * Селектор с .form обязателен — иначе его перебивает min-width из `.form input` выше.
 * max-width, чтобы на широком экране поле не растягивалось через всю карточку. */
.form .input-wide { min-width: 360px; max-width: 100%; }

.form-tight { display: flex; gap: var(--space-1); align-items: center; }
.form-tight input {
  font: inherit;
  width: 68px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* Кнопки */
.btn {
  font: inherit;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-sunken); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); }

.btn-danger { border-color: transparent; background: transparent; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }

/* Сплошная красная — только в диалоге подтверждения, где это главное действие. */
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #97220f; border-color: #97220f; }

.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-md); }

.actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
/* Действия в строке таблицы: в один ряд и без переноса — иначе кнопки сваливаются
 * в кучу и непонятно, какая к какой строке относится. Таблица уже умеет прокручиваться. */
.row-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; }
.row-actions .btn { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }

/* Сообщения */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-warn { background: var(--warning-soft); color: var(--warning); }

/* Диалог подтверждения опасных действий (создаётся в app.js) */
.confirm {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: calc(100% - var(--space-8));
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font-sans);
}
.confirm::backdrop { background: rgba(20, 22, 26, .4); }
.confirm-text { margin: 0 0 var(--space-6); font-size: var(--text-md); line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Бейджи */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }

/* Блок с ключом/ссылкой и кнопкой «Копировать» */
.key-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.key-box code {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  word-break: break-all;
}

/* Код подключения — главное действие шага, а не служебная подпись: он должен звать
 * скопировать себя, а не теряться серым пятном. */
.code-accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: .06em;
  padding: var(--space-3) var(--space-4);
}

/* Аватары каналов */
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-xl { width: 104px; height: 104px; }

/* Заглушка: цветной круг с первой буквой названия. Цвет считает avatar_color() —
 * он детерминированный, поэтому канал не меняет цвет между заходами. */
.avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.avatar-empty.avatar-sm { font-size: 13px; }
.avatar-empty.avatar-lg { font-size: 28px; }
.avatar-empty.avatar-xl { font-size: 40px; }

/* Форма создания ссылки под таблицей ссылок: отделена от неё воздухом. */
.link-form { margin-top: var(--space-6); }

/* Колонка с кнопкой действия: прижата вправо и не переносится. */
.cell-action { text-align: right; white-space: nowrap; }

/* Блок, который живёт только на узком экране (см. адаптив внизу файла). */
.only-narrow { display: none; }

/* Действие под блоком (перевыпуск ссылки): отбито от него воздухом, а не прижато вплотную. */
.block-action { margin-top: var(--space-4); margin-bottom: var(--space-3); }

/* Мини-приложение ВКонтакте. Открывается в чужом окне, у людей с телефона — поэтому одна
 * карточка по центру, крупная кнопка и ничего лишнего: человек пришёл сюда из объявления
 * ради одного действия. */
.vk-app {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}
.vk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.vk-card h1 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.vk-card .btn { width: 100%; margin-top: var(--space-6); }
.vk-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-4);
}

/* Площадка в таблице: аватар и название одной кликабельной строкой. */
.channel-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--accent);
}
.channel-cell:hover { text-decoration: underline; }

.channel-head { display: flex; align-items: center; gap: var(--space-4); }
.channel-head h1, .channel-head h2 { margin: 0; }
.channel-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* Плитки показателей */
.tiles {
  display: grid;
  /* minmax(min(128px, 100%), 1fr), а не голый 1fr: иначе длинная подпись распирает
   * колонку и сетка съезжает. */
  grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.tile-value { font-size: var(--text-xl); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.tile-label { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Воронка: три шага пути, между ними — конверсия и отток */
.funnel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
}
.funnel-step { flex: 1; min-width: 0; }
.funnel-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.funnel-label { color: var(--text-muted); font-size: var(--text-base); margin-top: var(--space-1); }
.funnel-step-final .funnel-value { color: var(--accent); }

/* Переход между шагами: стрелка, процент и подпись под ним */
.funnel-link { flex: none; text-align: center; color: var(--text-muted); padding: 0 var(--space-2); }
.funnel-arrow { font-size: var(--text-lg); line-height: 1; color: var(--text-muted); }
.funnel-rate {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.funnel-rate-loss { color: var(--data-leaves); }
.funnel-rate-label { font-size: var(--text-xs); }
.funnel-note { margin-top: calc(var(--space-4) * -1 + var(--space-2)); margin-bottom: var(--space-6); }

/* Переключатель периода и кнопки рядом с ним */
.head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.range { display: flex; gap: var(--space-1); }
.range-item {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.range-item:hover { background: var(--surface-sunken); }
.range-item.active { background: var(--accent); color: #fff; }

/* График */
.chart-wrap { height: 260px; }
.chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.chart-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--space-1);
}
.dot-clicks { background: var(--data-clicks); }
.dot-joins { background: var(--data-joins); }
.dot-leaves { background: var(--data-leaves); }

/* Таблицы */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tr.revoked td { opacity: .5; }

/* Инструкция по подключению. Ширина ограничена: строка через весь экран не читается —
 * глаз теряет начало следующей. */
.card-setup { max-width: 720px; }
.onboarding { max-width: 720px; }
.onboarding .btn { margin-top: var(--space-6); }
.steps { padding-left: var(--space-4); margin: 0; }
.steps li { margin-bottom: var(--space-6); }
.steps li:last-child { margin-bottom: 0; }
.steps .hint { margin-top: var(--space-2); }
.steps .key-box { margin-top: var(--space-2); }

.bot-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  font-weight: 600;
}
.bot-link:hover { border-color: var(--accent); }

/* Права бота: чек-лист, а не абзац текста. Это ключевое место инструкции —
 * без этих прав канал не подключится, и объяснить их надо один раз и внятно. */
.perms {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  overflow: hidden;
}
.perm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.perm:last-child { border-bottom: none; }
.perm-body { min-width: 0; }

/* Галочка обязательного права и крестик того, что включать не надо. */
.perm-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--success-soft);
  color: var(--success);
}
.perm-off .perm-mark { background: var(--danger-soft); color: var(--danger); }

.perm-name { font-weight: 600; }
.perm-why { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }
.perm-off .perm-name { color: var(--danger); }

/* Баннер «смотрю чужими глазами» */
.impersonation-bar {
  background: var(--warning-soft);
  color: var(--warning);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.impersonation-bar a { color: var(--warning); font-weight: 600; }

/* Главная для гостя */
.hero { text-align: center; padding: var(--space-12) 0 var(--space-8); }
.hero h1 {
  font-size: var(--text-2xl);
  max-width: 20ch;
  margin: 0 auto;
  line-height: 1.2;
}
.hero-lead {
  color: var(--text-muted);
  font-size: var(--text-md);
  max-width: 60ch;
  margin: var(--space-4) auto 0;
}
.hero-actions { justify-content: center; }

/* Посадочная страница (её видит человек из объявления) */
.landing-body { background: var(--bg); }
.landing {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.landing-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.landing h1 {
  font-size: var(--text-xl);
  margin: var(--space-4) 0 0;
  overflow-wrap: anywhere;  /* длинное название канала не должно распирать карточку */
}
.landing-username { color: var(--text-muted); margin-top: var(--space-1); }
.landing-desc {
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  white-space: pre-line;
  text-align: left;
  overflow-wrap: anywhere;
}
/* Кнопка во всю ширину карточки: на телефоне в неё целятся большим пальцем. */
.landing-cta { display: block; margin-top: var(--space-6); }
.landing-note { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-3) 0 0; }

/* Документация API. Отдельная типографика: это длинный текст, который читают подряд,
 * а не панель, которую сканируют глазами. */
.doc {
  max-width: 820px;
  padding: var(--space-8);
  line-height: 1.65;
}
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }

.doc h1 { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
/* Рамки сверху нет: разделы уже отбиты линиями <hr> из самого текста, вторая линия
 * подряд читается как ошибка вёрстки. */
.doc h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-4); }
.doc h3 {
  font-size: var(--text-md);
  margin: var(--space-8) 0 var(--space-3);
  font-weight: 600;
}
/* Заголовок метода — это код: `GET /stats`. Пусть и выглядит как код. */
.doc h3 code {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

.doc p { margin: 0 0 var(--space-4); }
.doc ol, .doc ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.doc li { margin-bottom: var(--space-2); }
.doc hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

.doc code {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: var(--text-sm);
}
/* Блок кода. Обёртка нужна, чтобы кнопка «Копировать» встала в угол. */
.doc .hl { position: relative; margin: 0 0 var(--space-4); }
.doc pre {
  background: var(--text);
  color: #e8eaed;
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}
.doc .hl pre { margin: 0; }
.doc pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Кнопка копирования блока кода: появляется при наведении, чтобы не мозолила глаза. */
.copy-code {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--text-xs);
  color: #b8bcc4;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.doc .hl:hover .copy-code, .copy-code:focus-visible { opacity: 1; }
.copy-code:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* Подсветка кода (Pygments). Палитра приглушённая: код читают, а не любуются им. */
.hl .c, .hl .c1, .hl .cm { color: #8a919e; font-style: italic; }  /* комментарии */
.hl .k, .hl .kd, .hl .kn, .hl .kr { color: #c39ac9; }             /* ключевые слова */
.hl .s, .hl .s1, .hl .s2, .hl .sb, .hl .se { color: #9ccfa0; }    /* строки */
.hl .mi, .hl .mf, .hl .m { color: #e0b080; }                      /* числа */
.hl .nb, .hl .bp { color: #85b8e8; }                              /* встроенные имена */
.hl .nf, .hl .fm { color: #85b8e8; }                              /* функции */
.hl .nt { color: #85b8e8; }                                       /* ключи JSON и теги */
.hl .kc { color: #e0b080; }                                       /* true / false / null */
.hl .o, .hl .p { color: #c8cdd6; }                                /* операторы и скобки */
.hl .err { color: inherit; background: none; }                    /* «ошибку» не подсвечиваем */

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
}
.doc th {
  text-align: left;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
.doc td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc tr:last-child td { border-bottom: none; }

/* ─── utilities ────────────────────────────────────────────────────────────── */

.muted { color: var(--text-muted); }
.lead { font-size: var(--text-md); color: var(--text-muted); }
.hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ─── адаптив ──────────────────────────────────────────────────────────────── */

/* Шесть пунктов навигации и почта в одну строку не помещаются раньше, чем кончается
 * ширина, — поэтому меню уезжает под бургер. */
@media (max-width: 900px) {
  .topbar { gap: var(--space-3); }

  .user { display: none; }  /* почта и «Выйти» переезжают внутрь меню */

  .burger {
    display: block;
    margin-left: auto;
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .burger:hover { background: var(--surface-sunken); }

  /* Три полоски: средняя — сам span, крайние — его псевдоэлементы. */
  .burger span, .burger span::before, .burger span::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
  }
  .burger span::before, .burger span::after { content: ""; position: relative; }
  .burger span::before { top: -6px; }
  .burger span::after { top: 4px; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 10;
  }
  .nav-toggle:checked ~ .nav { display: flex; }

  .nav a {
    padding: var(--space-3);
    border-bottom: none;
    border-radius: var(--radius-sm);
  }
  .nav a:hover { background: var(--surface-sunken); }
  .nav a.active { color: var(--accent); background: var(--accent-soft); }

  .nav-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-top: var(--space-2);
    border-top: 1px solid var(--border);
  }
  .nav-user .muted { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 720px) {
  .container { margin: var(--space-6) auto; padding: 0 var(--space-4); }
  .card { padding: var(--space-4); }
  .card-narrow { margin: var(--space-6) auto; }
  .topbar { padding: var(--space-3) var(--space-4); }
  h1 { font-size: 24px; }

  /* Плитки: на телефоне две в ряд читаются, шесть — превращаются в кашу. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Воронка разворачивается в столбик: три шага в строку на 375px не живут. */
  .funnel { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .funnel-link { display: flex; align-items: baseline; gap: var(--space-2); text-align: left; }
  .funnel-arrow { transform: rotate(90deg); }
  .funnel-rate { margin-top: 0; }

  /* Кнопка действия под заголовком, а не сбоку — иначе заголовок сжимается в столбик. */
  .page-head { align-items: flex-start; }

  /* Таблица площадок: шесть колонок в 390px не влезают, и «Подписчиков» обрезалось на
   * полуслове. Второстепенные цифры прячем — название, статус и кнопка важнее; полные
   * данные всё равно на странице площадки. */
  .table-compact th.col-optional,
  .table-compact td.col-optional { display: none; }

  /* Статус переезжает под название: три колонки в 390px не живут даже без цифр. */
  .only-narrow { display: block; margin-top: var(--space-1); }
  .table-compact td, .table-compact th { padding-left: var(--space-2); padding-right: var(--space-2); }
}