/* strAImer site — visual tokens mirrored from the app design system
   (core/src/main/sdk/design-system.css) so the site matches the app. */
:root {
  --bg: hsl(255, 30%, 4%);
  --bg-2: hsl(255, 32%, 6%);
  --card-bg: rgba(18, 14, 38, 0.55);
  --card-border: rgba(139, 92, 246, 0.15);
  --card-border-active: rgba(139, 92, 246, 0.45);
  --accent: hsl(258, 90%, 66%);
  --accent-hover: hsl(258, 95%, 72%);
  --accent-glow: rgba(139, 92, 246, 0.35);
  --accent-soft: rgba(139, 92, 246, 0.08);
  --success: hsl(150, 85%, 45%);
  --danger: hsl(355, 85%, 55%);
  --warning: hsl(38, 95%, 50%);
  --text-primary: hsl(210, 20%, 98%);
  --text-secondary: hsl(250, 15%, 78%);
  --text-muted: hsl(250, 12%, 52%);
  --input-bg: rgba(10, 8, 20, 0.6);
  --input-border: rgba(139, 92, 246, 0.18);
  /* Выпадающий список: почти непрозрачный, иначе сквозь него читается страница. */
  --menu-bg: rgba(16, 12, 34, 0.97);

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* Волосяная линия разделителей и общая кривая ускорения: нужны и странице,
     и общему фону (shared/backdrop.css), поэтому живут в токенах. */
  --hair: rgba(139, 92, 246, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 35px rgba(0, 0, 0, 0.8);
  --glow: 0 0 12px var(--accent-glow);

  /* Совпадает с приложением (core/src/main/sdk/design-system.css). Веб-шрифт не
     подключается: Plus Jakarta Sans не покрывает русские буквы, а сайт двуязычный. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}

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

/* Полоса прокрутки в цвет страницы, а не системная.

   На тёмном сайте системная полоса выходит светлой плашкой — единственным
   белым пятном на экране. Заметнее всего это в поле комментария: серый ползунок
   со стрелками поперёк тёмной рамки выдаёт окно программы, а не страницу.

   Правило одно на весь документ и на любой прокручиваемый элемент внутри:
   поля ввода, оглавление статьи, таблицы свода, выпадающие списки, ленты
   переписки в кабинете и таблицы админки. До 13.08.2026 такие правила стояли
   по месту — у ленты переписки и у страницы стримера, — а всё остальное
   оставалось системным.

   Обе записи нужны: `scrollbar-*` понимают Firefox и свежие Chromium,
   `::-webkit-scrollbar` — те, что постарше. Одной не хватает. */
html { scrollbar-width: thin; scrollbar-color: var(--card-border-active) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--card-border-active);
  border-radius: 999px;
  /* Прозрачная рамка внутри ползунка: он становится тоньше дорожки и не
     упирается в её края. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Атрибут `hidden` прячет насовсем.
   Браузер задаёт ему `display: none` правилом самой низкой силы, и любое наше
   `display` его отменяет — то есть элемент с `hidden` остаётся на экране. Ловится
   это только глазом: разметка выглядит правильной. Стоит в шапке (`data-user-*`),
   где показ и скрытие — вся работа скрипта. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139, 92, 246, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  min-height: 100vh;
  line-height: 1.5;
}

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

/* Ширины сайта — две, и обе названы.

   `--frame` — рамка страницы. Её держат шапка, подвал и **всё содержимое**:
   карточки, сетки, тарифы, оглавления. Страница обязана занимать рамку целиком.

   `--read` — не ширина страницы, а длина строки. Больше 70–80 знаков читать
   тяжело, поэтому длинный текст остаётся узким — но не «прижатым влево к пустому
   месту»: рядом с ним встаёт оглавление статьи, и рамка заполняется целиком
   (`.page-toc`, собирает shared/toc.js).

   Была третья, `--wide` (1000): ею резались тарифы, помощь и страница модуля.
   13.08.2026 разработчик открыл сайт и увидел ровно то, чем это и было, —
   страницу, сжатую и приклеенную к левому краю при широкой шапке над ней. */
:root {
  --frame: 1240px;
  --read: 780px;
}

.container { max-width: var(--frame); margin: 0 auto; padding: 0 20px; }

/* Страница с длинным текстом: колонка чтения слева, оглавление справа.

   Сетка объявлена на самом контейнере, а не обёрткой внутри, — тогда правовым
   страницам и статьям помощи не нужен лишний слой разметки, а оглавление
   вставляет скрипт (shared/toc.js) первым ребёнком.

   Первая колонка ограничена длиной строки, вторая забирает остаток: рамка
   заполняется целиком, а строка не растягивается. */
.with-toc { display: grid; grid-template-columns: minmax(0, var(--read)) 1fr; column-gap: 48px; }
.with-toc > * { grid-column: 1; min-width: 0; }

.page-toc {
  grid-column: 2;
  /* `span 9999`, а не `1 / -1`.

     `-1` указывает на последнюю линию ЯВНОЙ сетки, а строк мы не объявляли —
     они создаются размещением. Для браузера `1 / -1` там превращается в одну
     строку: оглавление вставало в строку хлебных крошек и раздвигало её на
     свою высоту, отчего заголовок статьи уезжал вниз на пустое место.
     Поймано глазом 13.08.2026 — разметка при этом выглядела правильной. */
  grid-row: 1 / span 9999;
  /* `align-self: start` обязателен: растянутый на всю высоту элемент липким
     не бывает — прилипать ему некуда. */
  align-self: start;
  position: sticky;
  top: 88px;
  padding-left: 20px;
  border-left: 1px solid var(--hair);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.page-toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.page-toc a {
  display: block;
  padding: 5px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.page-toc a:hover { color: var(--text-secondary); text-decoration: none; }
.page-toc a.is-current { color: var(--accent-hover); }

/* Оглавление живёт только там, где рядом с текстом есть свободное место.
   Ниже порога оно превратилось бы в список ссылок перед статьёй — то есть в
   пересказ её начала. */
@media (max-width: 1100px) {
  .with-toc { display: block; }
  .page-toc { display: none; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  padding: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
  background: var(--input-bg);
  border-color: var(--input-border);
}
.btn:hover { border-color: var(--card-border-active); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow); }
.btn-danger { color: var(--danger); border-color: rgba(240, 70, 90, 0.3); }
.btn-danger:hover { background: rgba(240, 70, 90, 0.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid var(--card-border);
}
.pill-success { background: rgba(30, 200, 130, 0.12); color: var(--success); border-color: rgba(30, 200, 130, 0.25); }
.pill-warning { background: rgba(240, 170, 20, 0.12); color: var(--warning); border-color: rgba(240, 170, 20, 0.25); }
.pill-muted { background: rgba(120, 120, 140, 0.1); color: var(--text-muted); }

/* Общая типографика страниц сайта: подпись раздела, крупный подзаголовок
   и градиентный акцент на главном заголовке. Используют обе страницы. */
.eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hover);
}
.lead { font-size: 1.06rem; color: var(--text-secondary); margin: 0 0 26px; max-width: 620px; }
.grad {
  background: linear-gradient(100deg, var(--accent-hover), hsl(190, 95%, 62%) 55%, hsl(320, 90%, 68%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Заливка рисуется только внутри рамки элемента, а плотная строка
     (line-height 1.05) обрезает хвосты «у», «р», «g»: они уходят на 0.25em
     ниже базовой линии, а места под ней строка не оставляет вовсе. Запас
     считан замером, а не подобран на глаз.

     Компенсировать это отрицательным `margin-bottom` нельзя: у заголовка нет
     нижней рамки, отступ схлопывается с его собственным — и абзац под
     заголовком прижимается вплотную (проверено: зазор падал с 20px до 2px).
     Поэтому padding просто добавляет воздуха снизу, а нижний отступ заголовка
     уменьшен на ту же величину там, где это заметно. */
  padding-bottom: 0.32em;
}

.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* Переключатель языка — общий для лендинга и кабинета.
   `.lang-switcher` — исходный `<select>`: он остаётся запасным вариантом, если
   свой список собрать не удалось. Раскрытый список системного `<select>` рисует
   операционная система, поэтому на тёмном сайте он выпадал белым — ради этого
   и построен свой (`.lang-menu`, собирается в shared/i18n.js). */
.lang-switcher {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}
.lang-switcher:hover { border-color: var(--card-border-active); color: var(--text-primary); }

.lang-menu { position: relative; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.lang-btn:hover { border-color: var(--card-border-active); color: var(--text-primary); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-btn-arrow { font-size: 0.7em; color: var(--text-muted); transition: transform 0.18s; }
.lang-btn[aria-expanded="true"] { border-color: var(--card-border-active); color: var(--text-primary); }
.lang-btn[aria-expanded="true"] .lang-btn-arrow { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--menu-bg);
  border: 1px solid var(--card-border-active);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}

.lang-item {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-item:hover,
.lang-item:focus-visible { background: var(--accent-soft); color: var(--text-primary); outline: none; }
.lang-item[aria-selected="true"] { color: var(--accent-hover); font-weight: 600; }

.header-right { display: flex; align-items: center; gap: 12px; }

/* Шапка и подвал сайта. Живут здесь, а не в стилях лендинга, потому что их
   носит каждая страница: лендинг, кабинет и правовые страницы. Пока правила
   лежали в landing.css, вторая страница могла получить их только копией —
   а копия расходится с оригиналом молча. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(10, 8, 20, 0.55);
  border-bottom: 1px solid var(--hair);
}
/* Разделы стоят вплотную к логотипу, а «про меня» уходит вправо распоркой.
   `space-between` растащил бы три части поровну и повесил разделы посреди
   пустой шапки — с двумя пунктами это читается как случайность. */
.header-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.header-right { margin-left: auto; }
/* Логотип в шапке — картинка, а не набранный текст: у надписи своя гарнитура,
   переведённая в кривые (shared/logo.svg, исходник в brand/). */
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-full { height: 26px; width: auto; display: block; }
.brand-mark { height: 28px; width: auto; display: none; }
/* На узком экране полная надпись (~190px) не оставляет места кнопке входа
   и переключателю языка, поэтому сокращаемся до знака. */
@media (max-width: 560px) {
  .brand-full { display: none; }
  .brand-mark { display: block; }
}
.header-nav { display: flex; align-items: center; gap: 20px; }
.header-nav a { color: var(--text-secondary); font-weight: 500; font-size: 0.92rem; }
.header-nav a:hover { color: var(--text-primary); text-decoration: none; }
.header-nav a.btn { color: var(--text-primary); }

/* Кнопка поменьше — вход в шапке. Обычная `.btn` рассчитана на призыв к
   действию посреди страницы и рядом с переключателем языка выглядит выше него. */
.btn-compact { padding: 6px 14px; font-size: 0.85rem; }

/* --- кто вошёл ------------------------------------------------------------
   Список под аватаркой повторяет переключатель языка (`.lang-*` выше) не из
   экономии, а нарочно: два списка в одной шапке, ведущие себя по-разному,
   читаются как недоделка. Поведение — в shared/header.js. */

.user-box { display: flex; align-items: center; }
.user-menu { position: relative; }

.user-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.user-btn:hover,
.user-btn[aria-expanded="true"] { border-color: var(--card-border-active); color: var(--text-primary); }
.user-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-btn-arrow { font-size: 0.7em; color: var(--text-muted); transition: transform 0.18s; }
.user-btn[aria-expanded="true"] .user-btn-arrow { transform: rotate(180deg); }

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
/* Аватарки может не быть: площадка её не отдала или человек не ставил.
   Пустой кружок читается как незагрузившаяся картинка, буква — как задумано. */
.user-avatar-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

/* Место аватарки, пока идёт ответ сервера: без него шапка дёргается шириной
   в тот момент, когда «Войти» сменяется кружком. */
.user-skeleton {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* Точка непрочитанного. Стоит на самой аватарке, потому что вкладку кабинета
   со значком не видно, пока кабинет не открыт, а другого канала связи нет. */
.user-dot {
  position: absolute;
  top: 2px;
  left: 24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}

.user-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--menu-bg);
  border: 1px solid var(--card-border-active);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
/* Имя — подпись, а не пункт: по нему нечего нажимать, оно отвечает на вопрос
   «а под кем я вошёл», который на чужом компьютере задают первым. */
.user-name {
  padding: 6px 14px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hair);
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.user-item:hover,
.user-item:focus-visible { background: var(--accent-soft); color: var(--text-primary); outline: none; text-decoration: none; }

/* --- разделы на узком экране ---------------------------------------------
   Порог 760 совпадает с остальной вёрсткой сайта и с числом в
   shared/header.js: разъехавшись, они дали бы кнопку там, где список ещё
   виден, — и наоборот. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--card-border-active); color: var(--text-primary); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Три полоски рисуются рамками, а не тремя элементами: значок один на весь
   сайт, и лишняя разметка в общем куске стоила бы дороже правила. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

/* Подпись для скринридера: у кнопки внутри только полоски, и без текста она
   объявляется как «кнопка» без имени. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .header-inner { gap: 12px; }
  /* Список уезжает под шапку целиком. Без скрипта он остаётся видимым —
     то же правило, что у фильтра каталога: сначала разметка, потом надстройка. */
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 14px;
    background: var(--menu-bg);
    border-bottom: 1px solid var(--card-border-active);
    backdrop-filter: blur(12px);
  }
  .header-nav[data-open] { display: flex; }
  .header-nav a { padding: 11px 0; font-size: 0.95rem; }
}

/* Подвал. Разметка общая для всех страниц и лежит одним файлом
   (cloud/web/partials/footer.html), поэтому и стили — здесь. */
.site-footer { border-top: 1px solid var(--hair); margin-top: 64px; padding: 40px 0 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.footer-brand .brand-full { height: 24px; }
.footer-brand p { margin: 0; font-size: 0.86rem; line-height: 1.6; }

.footer-col { display: flex; flex-direction: column; gap: 10px; }
/* Заголовок колонки — `h2` ради структуры документа для робота и скринридера,
   но по размеру это подпись, а не заголовок раздела. */
.footer-col-title {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-col a { color: var(--text-secondary); font-size: 0.88rem; }
.footer-col a:hover { color: var(--text-primary); text-decoration: none; }

.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.footer-social-icon { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.footer-social:hover .footer-social-icon { color: var(--accent-hover); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 0.84rem;
}
.footer-bottom-links { display: flex; align-items: center; gap: 20px; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Полоса согласия на куки. Узкая и снизу: полноэкранное окно на телефоне
   Google считает навязчивым и понижает страницу в выдаче, а нижняя полоса
   в их же рекомендациях названа допустимой. */
/* Плашка «код автора принят». Показывается один раз, сразу после перехода по
   ссылке автора: без неё переход выглядит так, будто ничего не произошло.

   Сверху, а не снизу: внизу живёт полоса согласия, и две полосы, наехавшие друг
   на друга при первом заходе, — это ровно тот случай, когда обе перестают
   читаться. */
.ref-bar {
  padding: 10px 20px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-primary);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--card-border-active);
}

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(12, 9, 26, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--card-border);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
}
.cookie-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.cookie-bar-text { margin: 0; font-size: 0.84rem; color: var(--text-secondary); }
.cookie-bar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cookie-bar-link { font-size: 0.84rem; white-space: nowrap; }
.cookie-bar .btn { padding: 7px 14px; font-size: 0.84rem; white-space: nowrap; }
/* Пока полоса на экране, ей нужно место: иначе она накрывает низ подвала. */
body.has-cookie-bar { padding-bottom: 84px; }

@media (max-width: 760px) {
  .cookie-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-bar-actions { justify-content: flex-end; }
  body.has-cookie-bar { padding-bottom: 148px; }
}

/* Диалоги страницы вместо браузерных `confirm()` и `alert()` — `shared/dialog.js`.
   Разметку создаёт скрипт, здесь только вид. Лежит в общих токенах, потому что
   их подключают все три страницы: лендинг, кабинет и админка. */
.site-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 4, 16, 0.72);
  backdrop-filter: blur(4px);
}

.site-dialog {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border: 1px solid var(--card-border-active);
  border-radius: var(--radius-lg);
  background: var(--menu-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.site-dialog-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.site-dialog-message {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
  /* Имя пользователя или текст ошибки сервера могут прийти одним длинным словом. */
  overflow-wrap: anywhere;
}

/* Ссылка в окне: отдельной строкой под сообщением, чтобы её было видно и по
   ней можно было попасть пальцем на телефоне. */
.site-dialog-link {
  display: inline-block;
  margin: 2px 0 0;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-dialog-link:hover { text-decoration: underline; }

.site-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Окно появляется мгновенно, если человек просил не двигать интерфейс. */
@media (prefers-reduced-motion: no-preference) {
  .site-dialog { animation: site-dialog-in 120ms ease-out; }
  @keyframes site-dialog-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

.site-dialog-input {
  width: 100%;
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-primary);
  font: inherit;
}
.site-dialog-input:focus { outline: none; border-color: var(--accent); }

/* --- ПОЛЯ ВВОДА ---
   До 10.08.2026 на сайте не было ни одного `<input>` и ни одного `<textarea>`:
   единственным элементом ввода был переключатель языка, а поле внутри диалога
   (выше) стилизовалось само по себе. Обращения в поддержку стали первой формой,
   и её вид живёт здесь, а не в CSS одной страницы, — иначе следующая форма
   получит второй набор стилей, отличающийся от этого на пару пикселей. */
.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-primary);
  font: inherit;
}
.field:focus { outline: none; border-color: var(--accent); }
.field::placeholder { color: var(--text-muted); }
textarea.field { resize: vertical; min-height: 96px; }

.field-row { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 0.85rem; font-weight: 600; }
.field-error { font-size: 0.85rem; color: var(--danger); }

/* Лента переписки. Своя сторона прижата вправо и подкрашена — иначе десять
   реплик читаются как один монолог.

   `pre-wrap` стоит ТОЛЬКО на теле сообщения. На пузыре целиком он печатал бы в
   сообщение переносы и отступы шаблона, которым собирается эта разметка, — так
   и было до 10.08.2026, и на экране это выглядело как сбитая вёрстка. */
/* Лента прокручивается внутри себя, а не тянет страницу. Иначе после десятка
   сообщений поле ответа уезжало под нижний край экрана: чтобы ответить, надо было
   сперва промотать всю переписку, а чтобы перечитать её — вернуться обратно.
   Потолок в долях экрана, а не в пикселях: на ноутбуке и на большом мониторе
   переписке отводится одна и та же доля высоты. */
.msg-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  /* Рамка вокруг ленты не украшение: прокручиваемая область без границ читается
     как оборванная страница, и непонятно, где переписка кончилась, а где её
     просто не видно. */
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.15);
  /* Своей полосы прокрутки здесь больше нет: она общая на весь сайт, правило
     стоит в начале этого файла. Копия жила тут с 10.08.2026, пока лента
     переписки была единственным прокручиваемым местом. */
}
.msg-row { display: flex; }
.msg-row.mine { justify-content: flex-end; }
.msg {
  max-width: 68%;
  padding: 9px 12px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
}
.msg-row.mine .msg,
.msg.mine {
  border-radius: 14px 14px 4px 14px;
  background: var(--accent-soft);
  border-color: var(--accent);
}
.msg .who { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 3px; }
.msg .body { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.msg .time { font-size: 0.7rem; color: var(--text-muted); text-align: right; margin-top: 4px; }
.msg .files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }