/*
  СЛОЙ ОТДЕЛКИ — ПОСЛЕДНИЙ В КАСКАДЕ.

  Зачем отдельный файл, а не правки по месту. Стили сайта накопились слоями
  за восемь версий (styles-v8, forum, mobile, controls), и в каждом файле
  одни и те же значения отступов и размеров повторены десятками строк.
  Править плотность по одному правилу — значит трогать сотни строк в четырёх
  файлах и спорить с их порядком. Слой поверх делает то же самое из одного
  места и подключается последним, поэтому его слово решающее.

  Что здесь делается:
    1. ПЛОТНОСТЬ. Панели, отступы между ними, кегль подписей, высота
       кнопок — везде на шаг компактнее. Информации на экране больше,
       воздуха между ней меньше, но не меньше, чем нужно пальцу.
    2. ФОРУМ В ДВЕ КОЛОНКИ. На мониторе контекст (сводка, горячее, топ,
       правила) уходит в правую колонку, лента начинается сверху. На телефоне
       складывается в одну колонку в прежнем порядке.
    3. ЕДИНАЯ СИСТЕМА СОСТОЯНИЙ. Одинаковый фокус, наведение, нажатие
       у всех кнопок и ссылок — сейчас они у форума и у таблиц разные.
    4. АККУРАТНЫЕ ДЕТАЛИ: полосы прокрутки, выделение, скругления,
       тени — один набор на весь сайт.
*/

/* ── Токены плотности ─────────────────────────────────────────────────────── */
:root {
  --r-sm: 7px;
  --r: 12px;
  --r-lg: 16px;
  --gap: 12px;
  --pad: 16px;
  --shadow: 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent) inset, 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.8);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Тонкая полоса прокрутки на всём сайте: системная широкая белая на тёмном
   фоне выглядит чужеродно. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 14%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { border-radius: 4px; background: color-mix(in srgb, var(--text) 12%, transparent); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 22%, transparent); }

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

/* ── Единая система состояний ─────────────────────────────────────────────── */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.forum-field input:focus,
.forum-field select:focus,
.forum-field textarea:focus,
.forum-editor:focus,
.search input:focus { box-shadow: var(--ring); }

/* Наведение на карточки и строки — одно и то же лёгкое поднятие. */
@media (hover: hover) {
  .forum-post:not(.forum-post--deleted):hover,
  .forum-hot__item a:hover,
  .forum-lead__row:hover,
  .quart-card:hover,
  .achievement:hover {
    border-color: color-mix(in srgb, var(--text) 14%, transparent);
  }
}

/* ── ФОРУМ: две колонки ───────────────────────────────────────────────────── */
.forum-layout { display: grid; gap: 0; align-items: start; }
.forum-side, .forum-main { min-width: 0; }

@media (min-width: 1180px) {
  .forum-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
  }
  /* Лента — слева, контекст — справа. В разметке контекст стоит первым,
     чтобы на телефоне он же был первым в потоке. */
  .forum-side { order: 2; position: sticky; top: 76px; }
  .forum-main { order: 1; }
  /* В колонке панели уже: убираем крупные отступы героя. */
  .forum-side .hero, .forum-side .panel { padding: 14px 16px; }
  .forum-side .forum-chron__title { font-size: 19px; }
  .forum-side .forum-chron__stats { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 10px; }
  .forum-side .forum-chron__stat { padding: 8px 9px; border-radius: 9px; }
  .forum-side .forum-chron__stat b { font-size: 17px; }
  .forum-side .forum-chron__stat span { font-size: 9.5px; }
  .forum-side .forum-chron__feed { gap: 5px; margin-bottom: 10px; }
  .forum-side .forum-chron__item { padding: 4px 9px; font-size: 11.5px; }
  .forum-side .hero::after { display: none; }
}
@media (min-width: 1440px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
}

/* Боковая колонка выше экрана — пусть прокручивается сама, а не обрезается. */
@media (min-width: 1180px) {
  .forum-side {
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: none;
  }
  .forum-side::-webkit-scrollbar { display: none; }
}

/* ── Появление контента ──────────────────────────────────────────────────── */
/* Панели появляются мягко и один раз, без скачков. */
@media (prefers-reduced-motion: no-preference) {
  .forum-main > .panel,
  .forum-main > .forum-feed > .forum-post {
    animation: refine-in .32s var(--ease) both;
  }
  .forum-feed > .forum-post:nth-child(2) { animation-delay: 30ms; }
  .forum-feed > .forum-post:nth-child(3) { animation-delay: 60ms; }
  .forum-feed > .forum-post:nth-child(4) { animation-delay: 90ms; }
  .forum-feed > .forum-post:nth-child(n+5) { animation-delay: 110ms; }
}
@keyframes refine-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/*
  ПЛОТНОСТЬ — ТОЛЬКО ОТ ПЛАНШЕТА И ШИРЕ.

  Телефонная вёрстка в mobile.css выверена по 360px вручную: размеры под
  палец, кегль под чтение на ходу. Ужимать её сверху — значит ломать её
  (первая версия слоя так и сделала: колокольчик уведомлений сжался до
  пустого квадрата, ник — до нуля). Поэтому всё, что про плотность,
  живёт от 761px, а телефон получает только точечные правки ниже.
*/
@media (min-width: 761px) {
/* ── Общие блоки: компактнее ──────────────────────────────────────────────── */
#app { padding-top: 18px; padding-bottom: 40px; }
@media (min-width: 760px) { #app { padding-top: 22px; } }

.panel {
  padding: var(--pad);
  margin-bottom: var(--gap);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
@media (min-width: 760px) { .panel { padding: 18px 20px; } }

.hero {
  padding: 18px var(--pad);
  margin-bottom: var(--gap);
  border-radius: var(--r-lg);
}
@media (min-width: 760px) { .hero { padding: 22px 24px; } }

.panel__head { margin-bottom: 12px; }
.panel__head h2 { font-size: clamp(16px, 2.2vw, 19px); }
.eyebrow { font-size: 10px; letter-spacing: .14em; }
.grid-2 { gap: var(--gap); }
.muted { font-size: .86em; }

/* ── Кнопки: один рост на весь сайт ───────────────────────────────────────── */
.forum-btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px;
}
.forum-btn--wide { margin: 2px 0 var(--gap); }
.forum-act { padding: 4px 8px; font-size: 11px; border-radius: 7px; }

.seg__btn { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.pick__btn { min-height: 34px; }

/* ── Боковое меню сайта ───────────────────────────────────────────────────── */
:root { --side-w: 220px; }
.side { gap: 14px; padding: 14px 12px 12px; }
.side .nav__link { padding: 8px 12px; font-size: 13px; }

/* ── ФОРУМ: сводка ─────────────────────────────────────────────────────────── */
.forum-chron { padding-bottom: 14px; }
.forum-chron__head { margin-bottom: 6px; }
.forum-chron__title { font-size: clamp(19px, 2.8vw, 26px); }
.forum-chron__date { margin-top: 5px; font-size: 12px; }
.forum-chron__stats { margin: 12px 0 10px; gap: 8px; }
.forum-chron__stat { padding: 9px 10px; border-radius: 10px; }
.forum-chron__stat b { font-size: 18px; }
.forum-chron__stat span { margin-top: 3px; font-size: 10px; }
.forum-chron__feed { margin-bottom: 10px; gap: 6px; }
.forum-chron__item { padding: 5px 10px; font-size: 11.5px; }
.forum-chron__more { font-size: 12px; }

/* ── ФОРУМ: блоки контекста ───────────────────────────────────────────────── */
.forum-welcome { padding: 12px 14px; gap: 10px; }
.forum-welcome__mark { font-size: 20px; }
.forum-welcome__body b { font-size: 13.5px; }
.forum-welcome__body p { margin: 2px 0 0; font-size: 12.5px; }

.forum-theme { padding: 12px 14px; }
.forum-theme__title { font-size: 15px; margin: 4px 0 0; }
.forum-theme__body { font-size: 12.5px; margin-top: 4px; }

.forum-hot { padding: 12px 14px; }
.forum-hot__head { margin-bottom: 6px; font-size: 13px; }
.forum-hot__list { display: grid; gap: 4px; }
.forum-hot__item a { padding: 7px 9px; border-radius: 8px; }
.forum-hot__title { font-size: 12.5px; }
.forum-hot__meta { font-size: 11px; }

.forum-lead { padding: 12px 14px; }
.forum-lead__head { margin-bottom: 8px; font-size: 13px; }
.forum-lead__list { gap: 2px; }
.forum-lead__row { padding: 6px 6px; gap: 8px; border-radius: 8px; }
.forum-lead__rank { width: 20px; font-size: 11.5px; }
.forum-lead__row .forum-ava { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.forum-lead__who b { font-size: 12.5px; }
.forum-lead__who small { font-size: 10.5px; }
.forum-lead__score b { font-size: 12.5px; }
.seg--lead .seg__btn { min-height: 26px; padding: 0 9px; font-size: 11px; }

.forum-rules { padding: 0; }
.forum-rules__summary { padding: 11px 14px; gap: 10px; }
.forum-rules__mark { width: 26px; height: 26px; font-size: 13px; }
.forum-rules__label b { font-size: 13px; }
.forum-rules__label small { font-size: 11px; }
.forum-rules__list { padding: 0 14px 4px 30px; }
.forum-rules__item { margin-bottom: 8px; }
.forum-rules__item b { font-size: 12.5px; }
.forum-rules__item p { margin: 2px 0 0; font-size: 12px; }
.forum-rules__sanctions { margin: 8px 14px; padding: 10px 12px; }
.forum-rules__sanctions li { font-size: 12px; }
.forum-rules__note { margin: 0 14px 12px; font-size: 11.5px; }

/* ── ФОРУМ: аккаунт и уведомления ─────────────────────────────────────────── */
.forum-account { padding: 10px 14px; }
.forum-me { gap: 9px; }
.forum-me .forum-ava { width: 30px; height: 30px; border-radius: 8px; font-size: 12.5px; }
.forum-me__body b { font-size: 13px; }
.forum-me__body small { font-size: 10.5px; }
.forum-me .forum-btn { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.forum-bell__badge { top: -6px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }

.forum-notice { padding: 12px 14px; }
.forum-notice p { font-size: 12.5px; }

.forum-notify { padding: 10px 14px; }
.forum-notify__link { padding: 7px 8px; }
.forum-notify__text { font-size: 12.5px; }
.forum-notify__preview { font-size: 11.5px; }
.forum-notify__time { font-size: 10.5px; }

.forum-auth__head { margin-bottom: 8px; }
.forum-auth__fields { gap: 8px; }
.forum-auth__actions { margin-top: 10px; gap: 6px; }
.forum-auth__note { margin-top: 8px; font-size: 11.5px; }

/* ── ФОРУМ: формы ──────────────────────────────────────────────────────────── */
.forum-field { margin-bottom: 9px; }
.forum-field > span { margin-bottom: 4px; font-size: 11px; }
.forum-field input,
.forum-field select,
.forum-field textarea { padding: 8px 11px; border-radius: 9px; }
.forum-editor { padding: 9px 11px; border-radius: 9px; min-height: 96px; }
.forum-reply .forum-editor { min-height: 64px; }

.forum-composer { padding: 0; }
.forum-composer__summary { padding: 11px 14px; gap: 10px; }
.forum-composer__plus { width: 26px; height: 26px; font-size: 16px; }
.forum-composer__summary b { font-size: 13px; }
.forum-composer form { padding: 4px 14px 14px; }
.forum-composer__rules { margin: 8px 0; font-size: 11.5px; }
.forum-composer__actions { gap: 6px; }

.forum-md { padding: 6px; gap: 4px; margin: 6px 0 8px; border-radius: 9px; }
.forum-md__row { gap: 3px; }
.forum-md__btn { min-width: 28px; height: 28px; padding: 0 7px; font-size: 12px; border-radius: 6px; }
.forum-md__color { width: 16px; height: 16px; }
.forum-md__capt { font-size: 10px; }

.forum-attach { gap: 8px; }
.forum-attach__btn { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.forum-attach__hint { font-size: 10.5px; }

.forum-poll-creator { margin: 4px 0 8px; }
.forum-poll-form { padding: 10px 12px; margin-top: 8px; }

/* ── ФОРУМ: управление лентой ──────────────────────────────────────────────── */
.ctl--forum { gap: 6px; margin-bottom: var(--gap); }
.forum-search { flex: 1 1 200px; }
.forum-search input { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }

/* ── ФОРУМ: лента ──────────────────────────────────────────────────────────── */
.forum-feed { gap: 8px; }
.forum-post { padding: 13px 15px; }
@media (min-width: 760px) { .forum-post { padding: 14px 18px; } }

.forum-post__head { gap: 9px; margin-bottom: 8px; }
.forum-post__head .forum-ava { width: 30px; height: 30px; border-radius: 8px; font-size: 12.5px; }
.forum-post__by b { font-size: 13px; }
.forum-post__by time { font-size: 10.5px; }
.forum-post__cat { padding: 3px 8px; font-size: 10px; }
.forum-post__trail { padding: 2px 8px; font-size: 10px; }

.forum-post__title { margin-bottom: 5px; font-size: clamp(15px, 1.9vw, 17.5px); line-height: 1.25; }
.forum-post__body { font-size: 13px; line-height: 1.58; }
.forum-post__body p { margin-bottom: 6px; }
.forum-post__expand { margin-top: 2px; font-size: 12px; }

.forum-shots { margin-top: 8px; gap: 6px; }
.forum-shots img { border-radius: 8px; }

.forum-post__foot { gap: 8px; margin-top: 9px; padding-top: 8px; }
.forum-post__comments, .forum-post__views { font-size: 12px; }
.forum-post__acts { gap: 2px; }

.forum-react { gap: 4px; }
.forum-react__btn { min-height: 28px; padding: 3px 8px; font-size: 12px; border-radius: 7px; }
.forum-react__btn b { font-size: 11.5px; }
.forum-emoji__pop { padding: 4px; gap: 2px; border-radius: 9px; }
.forum-emoji__item { min-width: 30px; height: 30px; font-size: 14px; }

.forum-post--deleted { padding: 10px 14px; }
.forum-post__gone { gap: 9px; }
.forum-post__gone b { font-size: 12.5px; }
.forum-post__gone p { margin: 1px 0 0; font-size: 12px; }

/* Опрос */
.forum-poll { margin-top: 8px; padding: 10px 12px; border-radius: 9px; }
.forum-poll__head { margin-bottom: 6px; }
.forum-poll__question { font-size: 13px; }
.forum-poll__total { font-size: 11px; }
.forum-poll__options { gap: 4px; }
.forum-poll__opt { padding: 6px 9px; border-radius: 7px; }
.forum-poll__text { font-size: 12.5px; }
.forum-poll__num { font-size: 11px; }
.forum-poll__hint { margin-top: 6px; font-size: 11px; }

/* Обсуждение */
.forum-thread { margin-top: 10px; padding-top: 10px; }
.forum-thread__title { margin-bottom: 6px; font-size: 13px; }
.forum-thread__list { margin-bottom: 10px; }
.forum-comment { gap: 8px; padding: 8px 0; }
.forum-comment .forum-ava--sm { width: 24px; height: 24px; border-radius: 6px; font-size: 10.5px; }
.forum-comment__head { gap: 6px; margin-bottom: 2px; }
.forum-comment__head b { font-size: 12.5px; }
.forum-comment__head time { font-size: 10px; }
.forum-comment__body p { margin-bottom: 4px; font-size: 12.5px; line-height: 1.55; }
.forum-comment__foot { gap: 4px; margin-top: 4px; }
.forum-comment__foot .forum-react__btn { min-height: 24px; padding: 2px 7px; font-size: 11px; }
.forum-comment--none, .forum-comment--deleted { padding: 6px 0; font-size: 12px; }
.forum-reply__actions { margin-top: 6px; }

.forum-empty { padding: 26px 18px; text-align: center; }
.forum-empty h2 { font-size: 17px; margin: 4px 0 6px; }
.forum-empty p { font-size: 12.5px; }

/* Окна */
.forum-modal__box { padding: 16px; border-radius: var(--r-lg); }
.forum-modal__box h3 { font-size: 15px; margin-bottom: 10px; }
.forum-modal__rules { gap: 4px; }
.forum-modal__rule { padding: 7px 9px; border-radius: 8px; }
.forum-modal__rule b { font-size: 12.5px; }
.forum-modal__rule small { font-size: 11px; }
.forum-modal__actions { gap: 6px; margin-top: 10px; }

.forum-toast { padding: 9px 14px; font-size: 12.5px; }

/* ── ФОРУМ: страница участника ────────────────────────────────────────────── */
.forum-profile__top { gap: 12px; }
.forum-profile__nick { font-size: clamp(18px, 3vw, 24px); }
.forum-profile__meta { gap: 6px; font-size: 12px; }
.forum-profile__about { font-size: 13px; }
.forum-profile__stats { gap: 8px; }
.forum-profile__stat { padding: 9px 10px; border-radius: 10px; }
.forum-profile__stat b { font-size: 18px; }
.forum-profile__stat span { font-size: 10px; }
.forum-rank { padding: 12px 14px; }
.forum-rank__achs { gap: 4px; }
.forum-rank__ach { padding: 3px 8px; font-size: 11px; }
.forum-profile__posts li { padding: 8px 0; }
.forum-profile__posts a { font-size: 13px; }
.forum-profile__post-meta { font-size: 11px; }
.forum-profile__post-text { font-size: 12px; margin-top: 2px; }

/* ── Остальной сайт: та же плотность ──────────────────────────────────────── */
.hero__num { font-size: clamp(46px, 11vw, 80px); }
.hero__dates { margin-top: 6px; font-size: 13px; }
.leader { margin-top: 16px; padding: 11px 13px; gap: 12px; }
.leader__name { font-size: clamp(17px, 4vw, 23px); }
.leader__pts { font-size: clamp(26px, 7vw, 38px); }
.split { margin-top: 14px; gap: 12px; }
.tiles { gap: 5px; }

.lad__row { min-height: 0; }
.site-foot { padding: 14px 18px 26px; font-size: 12px; }
.site-foot p { font-size: 12px; }

/* Кнопка меню в шапке — компактнее. */
.burger { min-height: 36px; padding: 0 11px; }

}

/* ── Колокольчик уведомлений ─────────────────────────────────────────────── */
/* Иконка стоит всегда: на широком экране — перед словом, на телефоне —
   одна (mobile.css прячет подпись), и тогда кнопка — квадрат под палец. */
.forum-bell { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.forum-bell__icon { width: 17px; height: 17px; flex: 0 0 auto; }

@media (max-width: 760px) {
  .forum-bell { min-width: 44px; min-height: 44px; padding: 0 11px; }
  .forum-bell__icon { width: 20px; height: 20px; }
  /* Строка «аватар · ник · кнопки» переносится, а не давит ник до нуля. */
  .forum-me { flex-wrap: wrap; gap: 8px 10px; }
  .forum-me__body { flex: 1 1 120px; }
  .forum-me .forum-btn { flex: 0 0 auto; }
}

/* ── ЧАТЫ: ПОЛНОЭКРАННЫЙ МЕССЕНДЖЕР ──────────────────────────────────────── */

/*
  Чат — не страница для чтения, а мессенджер: он занимает всё окно под шапкой
  сайта, список и комната скроллятся каждая сама, ввод прижат к низу. Тогда
  сообщение, на которое отвечаешь, не уезжает за экран, а кнопка отправки
  всегда на одном месте.

  Высота считается от шапки: её рост меряет и кладёт в --chat-head-h
  поведение (fitFullscreen в src/forum/chats.js) — шапка меняется
  (президентская доска приезжает с данными, альбомный телефон переносит
  строку), и зашитая здесь цифра то оставляла бы щель, то уводила ввод под
  край экрана.
*/
body:has(.chat-layout) #app { padding-top: 0; padding-bottom: 0; }

/*
  Подвал сайта — примечание к таблицам («данные вносятся вручную»). В режиме
  мессенджера он отнимал бы экран у ленты, поэтому под чатом его нет.
*/
body:has(.chat-layout) .site-foot { display: none; }

.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  height: calc(100vh - var(--chat-head-h, 58px));
  height: calc(100dvh - var(--chat-head-h, 58px));
  /*
    Поверх — высота от visualViewport. На телефоне она честно уменьшается,
    когда открыта клавиатура, и ввод остаётся над ней, а не под ней.
  */
  height: calc(var(--chat-vh, 100dvh) - var(--chat-head-h, 58px));
}

/*
  Телефон: один экран за раз. Открытый чат занимает место списка — иначе
  на 360px вышли бы две колонки по 170 пикселов.
*/
.chat-layout:not(.is-open) > .chat-room { display: none; }
.chat-layout.is-open > .chat-list { display: none; }

/* Обе колонки — панели на всю высоту; служебное не сжимается, скролл — внутри. */
.chat-list,
.chat-room {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, #000));
  overflow: hidden;
}

/* ── Список чатов ────────────────────────────────────────────────────────── */

.chat-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  padding: 12px 12px 8px;
}
.chat-list__title { margin: 2px 0 0; font-size: 16px; }
.chat-list__new { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }

.chat-join {
  display: flex;
  gap: 6px;
  flex: none;
  padding: 0 10px 8px;
}
.chat-join .forum-btn { min-height: 38px; padding: 7px 12px; }
.chat-join__input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.chat-join__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,43,.12);
}

.chat-create { flex: none; padding: 0 10px 10px; }
.chat-create .forum-field { margin-bottom: 8px; }
.chat-create__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.chat-create__note { margin: 0 0 8px; font-size: 11px; line-height: 1.45; }
.chat-create__acts { display: flex; gap: 6px; }

.chat-list__items {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Пустой список стоит по середине колонки, а не прилипает к шапке. */
.chat-list__empty { margin: auto; padding: 20px 16px; text-align: center; }
.chat-list__empty b { font-size: 13px; }
.chat-list__empty p { margin: 4px 0 0; }

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.chat-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.chat-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chat-item.is-closed { opacity: .6; }

/* Метка чата — та же цветная клетка, что у аватаров форума: цвет считается
   из названия, и свой чат узнаётся по цвету раньше, чем читается название. */
.chat-item__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ava, var(--raised-2));
  color: #10131a;
  font-family: Unbounded, sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.chat-item__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
}
.chat-room__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
}

.chat-item__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-item__row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chat-item__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}
.chat-item__time { flex: none; color: var(--mute); font-size: 10.5px; }
.chat-item__last {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
  font-size: 12px;
}
.chat-item__unread {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #14100c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── Комната: шапка с меню ⋯ ─────────────────────────────────────────────── */

/*
  Шапка комнаты — как в привычных мессенджерах: метка, название, сжатая
  подпись («альянсовый · 34 участника») и кнопка ⋯. Все действия собраны
  в выпадающее меню: строка кнопок «Пригласить · Выйти · Закрыть»
  переносилась на телефоне и толкала название в две строки.
*/
.chat-room {
  position: relative;
}
.chat-room__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 8px 8px 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.chat-room__back {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: -4px;
  border-radius: 10px;
  color: var(--dim);
}
.chat-room__back:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

.chat-room__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ava, var(--raised-2));
  color: #10131a;
  font-family: Unbounded, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.chat-room__who { flex: 1; min-width: 0; }
.chat-room__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.chat-room__sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  font-size: 11px;
}
.chat-room__closed { color: var(--gold); }

/* Кнопка ⋯ и её меню — то же устройство, что у выбора раздела форума
   (.pick в mobile.css): позиция на родителе, появление сменой классов
   здесь не нужно — меню живёт один кадр и перерисовывается вместе со
   страницей. */
.chat-menu { position: relative; flex: none; }
.chat-room__dots {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-room__dots:hover { border-color: var(--line); color: var(--text); }

.chat-menu__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 216px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised-2);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.85), 0 4px 18px -10px rgba(0,0,0,.6);
}

.chat-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-menu__item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.chat-menu__item--danger:hover { background: rgba(255,71,87,.12); color: var(--soft-bad); }
.chat-menu__count {
  color: var(--mute);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Участники и приглашение ─────────────────────────────────────────────── */

.chat-members {
  flex: none;
  max-height: 44%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.chat-member { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.chat-member__who { flex: 1; min-width: 0; }
.chat-member__who a { font-size: 13px; font-weight: 600; }
.chat-member__who small { display: block; margin-top: 1px; }
.chat-member__acts { display: flex; gap: 2px; flex: none; }

.chat-invite {
  flex: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,201,60,.05);
}
.chat-invite__code { display: flex; align-items: baseline; gap: 10px; }
.chat-invite__code .num {
  font-family: Unbounded, sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--gold);
}
.chat-invite__acts { display: flex; gap: 4px; margin-top: 8px; }
.chat-invite__note { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }

/* ── Лента ───────────────────────────────────────────────────────────────── */

.chat-room__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 14px;
}

.chat-room__blank {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: var(--dim);
}
.chat-room__blank b { font-size: 14px; }
.chat-room__blank p { margin: 0; font-size: 12.5px; }
.chat-room__blank-mark { font-size: 34px; opacity: .65; }
.chat-room__blank .forum-btn { margin-top: 8px; }

.chat-day { display: grid; place-items: center; margin: 12px 0 8px; }
.chat-day span {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Разделитель «Новые сообщения» ────────────────────────────────────────
   Ставится перед первым непрочитанным сообщением. Спокойный акцент: линии
   приглушённые, подпись в мягкой капсуле — не выглядит как предупреждение. */

.chat-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 2px 12px;
}
.chat-divider__line {
  height: 1px;
  background: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.chat-divider__label {
  padding: 3px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--raised));
  color: color-mix(in srgb, var(--accent) 82%, var(--dim));
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chat-msgs { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.chat-msg { display: flex; align-items: flex-end; gap: 8px; }
.chat-msg.is-mine { flex-direction: row-reverse; }
.chat-msg__gap { flex: none; width: 28px; }

/*
  Пузырь. Своё — с оранжевым отсветом и хвостом справа, чужое — нейтральное
  с хвостом слева; подряд идущие от одного автора склеиваются в блок
  (is-grouped) без аватарки и без крупного угла.
*/
.chat-msg__bubble {
  max-width: min(78%, 560px);
  padding: 6px 11px 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  border-bottom-left-radius: 5px;
  background: var(--raised);
}
.chat-msg.is-mine .chat-msg__bubble {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 13px;
  border-bottom-right-radius: 5px;
  background: color-mix(in srgb, var(--accent) 14%, var(--raised));
}
.chat-msg.is-grouped .chat-msg__bubble,
.chat-msg.is-grouped.is-mine .chat-msg__bubble { border-radius: 10px; }

.chat-msg__head { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.chat-msg__head .forum-nick { font-size: 12.5px; font-weight: 700; }
.chat-msg__tag {
  padding: 0 5px;
  border: 1px solid rgba(255,201,60,.26);
  border-radius: 999px;
  color: var(--gold);
  font-family: Unbounded, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
}

.chat-msg__body { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg__body p { margin: 0 0 3px; }
.chat-msg__body p:last-child { margin-bottom: 0; }
.chat-msg__body a { color: var(--accent); }

.chat-msg__del {
  padding: 1px 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mute);
  font-size: 11px;
  cursor: pointer;
}
.chat-msg__del:hover { background: rgba(255,71,87,.14); color: var(--soft-bad); }

/* Удалённое сообщение не занимает пузырь: это сноска, а не реплика. */
.chat-msg--gone { justify-content: center; }
.chat-msg--gone.is-mine { flex-direction: row; }
.chat-msg__gone { color: var(--mute); font-size: 11.5px; font-style: italic; }

/* ── Ввод ────────────────────────────────────────────────────────────────── */

.chat-compose-wrap { flex: none; border-top: 1px solid var(--line-soft); }

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: none;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
}
.chat-compose-wrap .chat-compose { border-top: none; }

.chat-compose__acts-left { display: flex; align-items: center; gap: 4px; flex: none; padding-bottom: 1px; }
.chat-compose__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 17px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chat-compose__btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

.chat-compose__input {
  flex: 1;
  min-width: 0;
  max-height: 160px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  /*
    contenteditable по умолчанию не переносит неразрывное: длинная ссылка
    или случайный набор символов без пробелов растягивала поле за границы
    compose-панели. Перенос «где угодно» держит слово внутри рамки.
  */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chat-compose__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,43,.12);
}
/* Плейсхолдер для contenteditable — как в редакторе форума. */
.chat-compose__input:empty::before {
  content: attr(data-placeholder);
  color: var(--mute);
  pointer-events: none;
}
.chat-compose__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9a4a, var(--accent));
  color: #14100c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chat-compose__send:not(:disabled):hover { box-shadow: 0 8px 20px -12px var(--accent); }
.chat-compose__send:disabled { opacity: .55; cursor: progress; }

.chat-compose__locked {
  flex: none;
  margin: 0;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  text-align: center;
}

/* ── Прикреплённый опрос над полем ───────────────────────────────────────── */

.chat-pending-poll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 8px 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 12px;
}
.chat-pending-poll__drop { border: 0; background: none; color: var(--mute); cursor: pointer; }
.chat-pending-poll__drop:hover { color: var(--soft-bad); }

/* ── Выбранные вложения над полем ────────────────────────────────────────── */

.chat-pending-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
.chat-pending-files[hidden] { display: none; }
.chat-pending-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  font-size: 11.5px;
  max-width: 220px;
}
.chat-pending-file img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.chat-pending-file__icon { font-size: 18px; }
.chat-pending-file__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-pending-file__drop {
  border: 0;
  background: none;
  color: var(--mute);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.chat-pending-file__drop:hover { color: var(--soft-bad); }

/* ── Вложения в сообщении ────────────────────────────────────────────────── */

.chat-attachments { display: grid; gap: 6px; margin: 4px 0 2px; }
.chat-attach--img img {
  display: block;
  max-width: min(280px, 100%);
  max-height: 220px;
  border-radius: 10px;
  cursor: zoom-in;
  object-fit: cover;
}
.chat-attach--video video {
  display: block;
  max-width: min(300px, 100%);
  border-radius: 10px;
  background: #000;
}
.chat-attach--audio audio { width: min(280px, 100%); height: 36px; }
.chat-attach--file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.chat-attach--file:hover { border-color: var(--accent); }
.chat-attach__icon { font-size: 20px; }
.chat-attach__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}
.chat-attach__size { flex: none; font-size: 10.5px; }

/* ── Лайтбокс ────────────────────────────────────────────────────────────── */

.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.86);
  cursor: zoom-out;
  padding: 24px;
}
.chat-lightbox__img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.chat-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.chat-lightbox__close:hover { background: color-mix(in srgb, var(--text) 18%, transparent); }

/* ── Опрос в сообщении ───────────────────────────────────────────────────── */

.chat-poll {
  display: grid;
  gap: 6px;
  margin: 5px 0 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.chat-poll__head { display: grid; gap: 2px; }
.chat-poll__badge { color: var(--accent); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.chat-poll__question { font-size: 13px; line-height: 1.4; }
.chat-poll__options { display: grid; gap: 5px; }
.chat-poll__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.chat-poll__opt:hover { border-color: var(--accent); }
.chat-poll__opt.is-voted { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chat-poll__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: inherit;
  transition: width .18s ease;
}
.chat-poll__text { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-poll__stat { position: relative; flex: none; color: var(--mute); font-size: 11px; }
.chat-poll__opt.is-voted .chat-poll__stat { color: var(--accent); }
.chat-poll__foot { display: flex; gap: 8px; font-size: 11px; }

/* ── Создание опроса ─────────────────────────────────────────────────────── */

.chat-poll-creator {
  display: grid;
  gap: 8px;
  margin: 0 8px 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.chat-poll-creator__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.chat-poll-creator__close { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 15px; }
.chat-poll-creator__close:hover { color: var(--soft-bad); }
.chat-poll-creator__q, .chat-poll-creator__opt {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.chat-poll-creator__q:focus, .chat-poll-creator__opt:focus { outline: none; border-color: var(--accent); }
.chat-poll-creator__options { display: grid; gap: 6px; }
.chat-poll-creator__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-poll-creator__multi { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }

/* ── Ответ на сообщение ──────────────────────────────────────────────────── */

.chat-reply-quote {
  display: grid;
  gap: 1px;
  margin: 1px 0 4px;
  padding: 5px 8px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 11.5px;
  cursor: pointer;
}
.chat-reply-quote__nick { color: var(--accent); font-weight: 700; }
.chat-reply-quote__body { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-reply-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 4px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.chat-reply-banner__info { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 11.5px; }
.chat-reply-banner__label b { color: var(--accent); }
.chat-reply-banner__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.chat-reply-banner__cancel { border: 0; background: none; color: var(--mute); cursor: pointer; }
.chat-reply-banner__cancel:hover { color: var(--soft-bad); }

/* ── Реакции ─────────────────────────────────────────────────────────────── */

/* Раньше правило было разорвано на два места файла: здесь оно одно —
   выравнивание по правому краю, тихий цвет и мелкий кегль подписи. */
.chat-msg__meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 1px; color: var(--mute); font-size: 10px; }
.chat-msg__reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}
.chat-msg__reply-ico {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}
.chat-msg__reply-label { font-size: 11px; letter-spacing: .01em; }
.chat-msg__reply-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent); }
.chat-msg__reply-btn:hover .chat-msg__reply-ico { background: color-mix(in srgb, var(--text) 16%, transparent); }
.chat-msg__react-btn {
  border: 0;
  background: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 3px;
  border-radius: 6px;
  line-height: 1;
}
.chat-msg__react-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--text) 5%, transparent); }

.chat-msg__react-trigger { position: relative; }
.chat-msg__reactions-pop {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  display: none;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.7);
  z-index: 12;
}
.chat-msg__reactions-pop.is-open,
.chat-msg__react-trigger:hover .chat-msg__reactions-pop { display: flex; }
.chat-msg__em-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.chat-msg__em-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.chat-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.chat-reaction-chip:hover { border-color: var(--accent); }
.chat-reaction-chip.is-mine {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.chat-reaction-chip b { color: var(--mute); font-size: 10.5px; }
.chat-reaction-chip.is-mine b { color: var(--accent); }

/* ── Кнопка «вниз» ──────────────────────────────────────────────────────── */

.chat-go-bottom {
  position: absolute;
  bottom: 72px;
  right: 14px;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised-2);
  color: var(--dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.6);
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
}
.chat-go-bottom:hover { color: var(--text); border-color: var(--accent); }
.chat-go-bottom.is-visible { display: inline-flex; }
.chat-go-bottom span { min-width: 18px; text-align: center; }

/* ── Кнопка «К новым» ──────────────────────────────────────────────────────
   Плавающая кнопка к границе непрочитанных. Живёт над кнопкой «вниз» на
   одной стороне: стрелка вверх + счётчик. Видна только при непрочитанных,
   когда пользователь ещё не дошёл до границы новых сообщений. */

.chat-go-new {
  position: absolute;
  bottom: 128px;
  right: 14px;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--raised-2));
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.6);
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.chat-go-new:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 24%, var(--raised-2));
}
.chat-go-new:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-go-new.is-visible { display: inline-flex; }
.chat-go-new span { min-width: 18px; text-align: center; }

/* ── Поиск по сообщениям ────────────────────────────────────────────────── */

.chat-search {
  flex: none;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.chat-search__input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.chat-search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,43,.12);
}

/* ── Меню редких действий в карточке поста ───────────────────────────────────
   У автора-модератора действий набиралось пять в строку, и на телефоне они
   уезжали за край. Кнопки те же, но сложены за «⋯». */
#app:has(.forum-modal) { animation: none; }
#app:has(.forum-modal:not([hidden])) { z-index: 60; }
.forum-post:has(.forum-act-menu[open]) { z-index: 3; }
.forum-post > .forum-post__foot:has(.forum-act-menu[open]) { z-index: 3; }
.forum-act-menu { position: relative; }
.forum-act-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.forum-act-menu > summary::-webkit-details-marker { display: none; }
.forum-act-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 170px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.5), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}
.forum-act-menu__list .forum-act {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--dim);
}
.forum-act-menu__list .forum-act:hover { border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.forum-act-menu__list .forum-act--danger { color: var(--loss); }
.forum-act-menu__list .forum-act--danger:hover { background: color-mix(in srgb, var(--loss) 12%, transparent); color: var(--loss); }
.forum-act-menu--up .forum-act-menu__list {
  top: auto;
  bottom: calc(100% + 4px);
}
:root[data-theme="light"] .forum-act-menu__list { box-shadow: 0 16px 40px -18px rgba(22,32,44,.28), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); }

/* ── Упоминания @ник в сообщениях ────────────────────────────────────────── */

.chat-msg__body a[href^="#/user/"] {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.chat-msg__body a[href^="#/user/"]:hover {
  text-decoration: underline;
}

/* ── Чаты без базы и без входа ───────────────────────────────────────────── */

.chat-empty {
  max-width: 460px;
  margin: 24px auto;
  padding: 28px 22px;
  text-align: center;
}
.chat-empty .forum-btn { margin-top: 14px; }

/* ── Закреплённое сообщение ──────────────────────────────────────────────── */

.chat-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,201,60,.04);
  font-size: 12px;
}
.chat-pinned__badge { font-size: 14px; }
.chat-pinned__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-pinned__unpin {
  border: 0;
  background: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 14px;
}
.chat-pinned__unpin:hover { color: var(--soft-bad); }

/* ── Онлайн в шапке ─────────────────────────────────────────────────────── */

.chat-room__online { color: #31c5b5; }

/* ── Лидерборд чатов ─────────────────────────────────────────────────────── */

.chat-leaderboard {
  flex: none;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.chat-leaderboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.chat-leaderboard__close {
  border: 0;
  background: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 14px;
}
.chat-leaderboard__close:hover { color: var(--soft-bad); }
.chat-leaderboard__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.chat-leaderboard__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.chat-leaderboard__place {
  width: 20px;
  text-align: center;
  color: var(--mute);
  font-size: 11px;
  font-weight: 700;
}
.chat-leaderboard__nick {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}
.chat-leaderboard__nick a { color: var(--text); text-decoration: none; }
.chat-leaderboard__nick a:hover { color: var(--accent); }
.chat-leaderboard__nick small { display: block; font-size: 10px; }
.chat-leaderboard__count {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Личные сообщения (форма) ─────────────────────────────────────────────── */

.chat-dm {
  flex: none;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.chat-dm__acts {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ── Кнопки в шапке списка ───────────────────────────────────────────────── */

.chat-list__head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Кнопки в сообщении (закреп) ──────────────────────────────────────────── */

.chat-msg__pin-btn {
  padding: 1px 3px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mute);
  font-size: 11px;
  cursor: pointer;
}
.chat-msg__pin-btn:hover { color: var(--gold); }

/* ── Индикатор «печатает…» ───────────────────────────────────────────────── */

.chat-typing {
  padding: 4px 10px 0;
  color: var(--mute);
  font-size: 11px;
  font-style: italic;
}

/* ── Телефон: плотнее ────────────────────────────────────────────────────── */

/*
  На 360px у мессенджера в высоту ~640 пикселов: шапка сайта, шапка чата,
  ввод — и что осталось, то и лента. Поэтому всё служебное уже на шаг,
  а поля ввода не меньше 16px — иначе Safari масштабирует страницу при
  фокусе (см. mobile.css, «шрифт полей не меньше 16px»).
*/
@media (max-width: 759px) {
  /* Экран всегда один — зазор между колонками не виден и не нужен. */
  .chat-layout { gap: 0; }

  .chat-list__head { padding: 10px 10px 6px; }
  .chat-list__new { min-height: 40px; }
  .chat-join { padding: 0 8px 6px; }
  .chat-join__input { font-size: 16px; }
  .chat-create { padding: 0 8px 8px; }
  .chat-item { padding: 7px 4px; gap: 9px; }
  .chat-item__mark { width: 40px; height: 40px; border-radius: 11px; }

  .chat-room__head { padding: 5px 6px 5px 8px; gap: 9px; }
  .chat-menu__pop { right: 2px; }
  .chat-room__scroll { padding: 8px 8px 12px; }
  .chat-msg__bubble { max-width: 84%; }
  .chat-msg__body { font-size: 13px; }

  .chat-compose { padding: 6px; gap: 6px; }
  .chat-compose__input { padding: 9px 13px; font-size: 16px; }
  .chat-compose__send { width: 44px; height: 44px; }
  /*
    Safari на телефоне масштабирует страницу при фокусе, если шрифт поля
    меньше 16px. Все поля чата — не исключение: форма создания чата и форма
    опроса тоже должны иметь 16px, иначе пользователь увидит «дёргание»
    экрана при нажатии.
  */
  .chat-create input,
  .chat-poll-creator__q,
  .chat-poll-creator__opt { font-size: 16px; }
}

/* ── Монитор: список и комната рядом ──────────────────────────────────────── */

@media (min-width: 880px) {
  .chat-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 12px;
  }
  .chat-layout:not(.is-open) > .chat-room { display: flex; }
  .chat-layout.is-open > .chat-list { display: flex; }

  /* Список всегда на виду — кнопка «назад» не нужна. */
  .chat-room__back { display: none; }

  .chat-list__head { padding: 14px 12px 8px; }
  .chat-item { padding: 9px 6px; }
  .chat-room__head { padding: 10px 12px; }
  .chat-room__scroll { padding: 12px 16px 16px; }
  .chat-compose { padding: 10px 12px; }
  .chat-menu__pop { min-width: 232px; }
  .chat-empty { margin: 48px auto; }
}

/* Панель администратора: результаты вносят с телефона, там клетки крупные
   намеренно — плотность только от планшета. */
@media (min-width: 761px) {
/* ── Панель администратора: та же плотность ───────────────────────────────── */
.adm-top { padding: 9px 14px; gap: 8px 12px; }
.adm-nav__link { padding: 7px 11px; font-size: 12.5px; }
.adm-btn { min-height: 36px; padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.adm-main { padding-top: 18px; }
.adm-hero { margin-bottom: 16px; }
.adm-lead { font-size: 13.5px; margin-top: 6px; }
.adm-stats { gap: 8px; }
.adm-stat { padding: 10px 12px; border-radius: 10px; }
.adm-grid { gap: var(--gap); }
.adm-kv { gap: 7px; }
.adm-chip { min-height: 32px; font-size: 12.5px; }
}

/* ── Турниры ─────────────────────────────────────────────────────────────── */

.tour-page { padding: 18px; }
.tour-gen { display: grid; gap: 8px; margin: 4px 0 18px; }
.tour-gen__row { display: flex; align-items: center; gap: 8px; }
.tour-gen select {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.tour-gen input {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.tour-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tour-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
}
.tour-card.is-finished { opacity: .8; }
.tour-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tour-card__head b { font-size: 14px; }
.tour-card__status { color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tour-score { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.tour-side { display: grid; justify-items: center; gap: 3px; min-width: 90px; }
.tour-side b { font-family: Unbounded, sans-serif; font-size: 26px; line-height: 1; }
.tour-side small { color: var(--dim); font-size: 11px; }
.tour-side.is-win b { color: var(--win); }
.tour-vs { font-size: 20px; font-weight: 700; color: var(--mute); }
.tour-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ava, var(--raised-2));
  color: #10131a;
  font-family: Unbounded, sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.tour-rounds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.forum-btn--sm { min-height: 32px; padding: 5px 10px; font-size: 12px; }
@media (max-width: 759px) {
  .tour-gen select, .tour-gen input { font-size: 16px; }
  .tour-side { min-width: 64px; }
}

/* ══ Светлая тема: «Arctic Command» — холодный командный центр AAA ═══════ */

/*
  ФОН: светло-серый с голубым подтоном (не белый!), едва заметный янтарный
  отсвет в правом верхнем углу и техническая сетка с альфой ~0.03. Сетка
  создаёт ощущение приборной панели, но не спорит с текстом.
*/
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 85% 0%, rgba(217,130,43,.08), transparent 28rem),
    linear-gradient(rgba(23,33,43,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,33,43,.03) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 46px 46px, 46px 46px, auto;
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(760px 460px at 96% 2%, rgba(217,130,43,.05), transparent 58%),
    radial-gradient(900px 520px at 8% -8%, rgba(122,152,182,.06), transparent 62%);
}

/*
  ТИПОГРАФИКА: в светлой теме заголовки и крупные числа набираются
  Space Grotesk — техничный, плотный гротеск из AAA-интерфейсов. Тёмная
  тема сохраняет фирменный Unbounded: у каждой темы свой характер.
*/
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .brand__num,
:root[data-theme="light"] .brand__text b,
:root[data-theme="light"] .hero__num,
:root[data-theme="light"] .stat b,
:root[data-theme="light"] .forum-chron__stat b,
:root[data-theme="light"] .adm-stat b,
:root[data-theme="light"] .wk__num,
:root[data-theme="light"] .leader__pts,
:root[data-theme="light"] .lad__place b,
:root[data-theme="light"] .quart-dial b,
:root[data-theme="light"] .tour-side b,
:root[data-theme="light"] .tl__year span,
:root[data-theme="light"] .president-board__name,
:root[data-theme="light"] .president-board__alliance {
  font-family: 'Space Grotesk', Inter, sans-serif;
}

/*
  ШАПКА: стеклянная командная панель. «LIVE // SERVER 33» превращается
  в статусный бейдж ONLINE — капсула с зелёной точкой, без неона.
*/
:root[data-theme="light"] .site-head {
  border-bottom-color: rgba(217,130,43,.35);
  box-shadow: 0 10px 30px -24px rgba(31,48,64,.25);
}
:root[data-theme="light"] .site-head:hover { box-shadow: 0 10px 26px -20px rgba(31,48,64,.3); }
:root[data-theme="light"] .site-head__inner::before {
  content: '● ONLINE';
  top: 5px; right: 12px;
  padding: 3px 9px;
  border: 1px solid #b9dfcc;
  border-radius: 999px;
  background: #e1f2ea;
  color: #267b5b;
  font: 700 8px/1 Inter, sans-serif;
  letter-spacing: .14em;
}
:root[data-theme="light"] #app::before { color: #267b5b; }

/*
  ПЛИТКА «33» — янтарная сигнальная табличка с чернильной цифрой; активная
  вкладка — та же янтарь, но плоская и строгая.
*/
:root[data-theme="light"] .brand__num {
  animation: none;
  color: #241a0e;
  background: linear-gradient(145deg, #e89440, #c8751f);
  box-shadow: 0 3px 10px -3px rgba(217,130,43,.4);
}
:root[data-theme="light"] .nav__link.is-active {
  color: #241a0e;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent);
  box-shadow: 0 3px 10px -4px rgba(217,130,43,.5);
}

/*
  ПАНЕЛИ — белое стекло: полупрозрачный белый, blur, тонкая граница и
  двухслойная мягкая тень. Наведение поднимает карточку на 2px и подсвечивает
  границу янтарём. Верхняя линия .panel::before — короткий янтарный штрих
  слева (сигнальный маркер, не полноширинная полоса).
*/
:root[data-theme="light"] .panel {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--line);
  box-shadow: 0 2px 5px rgba(31,48,64,.04), 0 12px 30px rgba(31,48,64,.08);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
:root[data-theme="light"] .panel:hover {
  transform: translateY(-2px);
  border-color: rgba(217,130,43,.45);
  box-shadow: 0 4px 8px rgba(31,48,64,.05), 0 18px 40px rgba(31,48,64,.12);
}
:root[data-theme="light"] .panel::before {
  right: auto;
  width: 56px;
  background: var(--accent);
  opacity: .85;
}
:root[data-theme="light"] .panel::after { opacity: 0; }
:root[data-theme="light"] .panel__head h2 { text-shadow: none; }

/* На телефоне стекло дорого: blur выключаем, карточки не поднимаем —
   жестом листают список, а не наводят на карточки. */
@media (hover: none) and (pointer: coarse) {
  :root[data-theme="light"] .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  :root[data-theme="light"] .panel:hover { transform: none; }
}

/*
  ВАУ-ГЕРОЙ: та же белая стеклянная карточка, но крупнее и с HUD-уголком —
  короткий янтарный уголок сверху справа, дозированный декор командного
  центра. Диагональная штриховка тёмной темы здесь почти выключена.
*/
:root[data-theme="light"] .hero {
  border-color: var(--line);
  background:
    radial-gradient(480px 220px at 88% 8%, rgba(122,152,182,.07), transparent 66%),
    radial-gradient(300px 260px at 2% 100%, rgba(217,130,43,.06), transparent 70%),
    rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 5px rgba(31,48,64,.04), 0 16px 36px rgba(31,48,64,.1);
}
:root[data-theme="light"] .hero::after { opacity: .1; }
:root[data-theme="light"] .hero__num {
  background: linear-gradient(172deg, #25333f 18%, #6b7d8c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
:root[data-theme="light"] .hero__top::after { color: var(--dim); }

:root[data-theme="light"] .lad__row:hover { box-shadow: inset 3px 0 0 var(--accent), 0 10px 22px -18px rgba(31,48,64,.4); }
:root[data-theme="light"] .tl__img:hover { box-shadow: 0 14px 28px -18px rgba(31,48,64,.35); }
:root[data-theme="light"] .tl__year { text-shadow: none; }
:root[data-theme="light"] .adm-publish--top { box-shadow: 0 10px 26px -20px rgba(31,48,64,.35); }
:root[data-theme="light"] .adm-modal__box { box-shadow: 0 24px 80px -40px rgba(31,48,64,.35); }

/*
  ПУСТЫЕ СОСТОЯНИЯ: вместо голой белой площади — пунктирная рамка и короткий
  янтарный индикатор перед заголовком. «Данных нет» — тоже часть интерфейса.
  Индикатор вешаем на .eyebrow: .forum-empty — это .panel, и его ::before
  уже занят верхней сигнальной линией.
*/
:root[data-theme="light"] .forum-empty { border-style: dashed; }
:root[data-theme="light"] .forum-empty .eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--accent);
}

/* Лидер: тёплая кромка на белом стекле. */
:root[data-theme="light"] .leader {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  background: linear-gradient(100deg, rgba(201,138,40,.1), rgba(23,33,43,.02) 58%, rgba(81,96,110,.05));
  box-shadow: inset 3px 0 0 var(--gold), 0 10px 24px -18px rgba(31,48,64,.35);
}
:root[data-theme="light"] .leader__crown { filter: none; }
:root[data-theme="light"] .leader__pts { text-shadow: none; }

/* Кварт-герой живёт внутри тёмного «острова» .quart-page — там правим
   только тень, рамка островная. */
:root[data-theme="light"] .quart-hero { box-shadow: 0 18px 50px -28px rgba(31,48,64,.5); }

/* Поповеры, модалки, тосты: белое стекло над холодным фоном. */
:root[data-theme="light"] .forum-emoji__pop { box-shadow: 0 16px 40px -18px rgba(31,48,64,.3); }
:root[data-theme="light"] .forum-modal__box { box-shadow: 0 30px 80px -30px rgba(31,48,64,.35); }
:root[data-theme="light"] .forum-toast { box-shadow: 0 18px 44px -20px rgba(31,48,64,.3); }
:root[data-theme="light"] .chat-menu__pop { box-shadow: 0 18px 44px -18px rgba(31,48,64,.3), 0 4px 18px -10px rgba(31,48,64,.18); }
:root[data-theme="light"] .chat-msg__reactions-pop { box-shadow: 0 8px 24px -12px rgba(31,48,64,.28); }
:root[data-theme="light"] .chat-go-bottom { box-shadow: 0 4px 14px -6px rgba(31,48,64,.3); }
:root[data-theme="light"] .chat-go-new { box-shadow: 0 4px 14px -6px rgba(31,48,64,.3); }
:root[data-theme="light"] .chat-divider__label {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}
:root[data-theme="light"] .pick__menu { box-shadow: 0 18px 44px -18px rgba(31,48,64,.3), 0 4px 18px -10px rgba(31,48,64,.18); }

/* Тёмные «острова» (бот, роли, кварт) остаются тёмными: на холодном светлом
   фоне они читаются как тактические экраны ночного режима. */
:root[data-theme="light"] .bot-hero,
:root[data-theme="light"] .bot-feature,
:root[data-theme="light"] .roles-panel,
:root[data-theme="light"] .role-card,
:root[data-theme="light"] .quart-page {
  --text: #f4f6f9;
  --dim:  #99a1ad;
  --mute:  #666e7b;
  --electric: #a7a3c2;
  --accent: #ff6a2b;
  --accent-dk: #d4501a;
  --gold:  #ffc93c;
  --win:   #35d07f;
  --loss:  #ff4757;
  --line: #23272f;
  color: #f4f6f9;
}
:root[data-theme="light"] .bot-cta,
:root[data-theme="light"] .bot-launch__mark {
  border-color: color-mix(in srgb, var(--electric) 55%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--electric) 60%, #fff), color-mix(in srgb, var(--electric) 40%, #fff));
  color: #221f35;
}
:root[data-theme="light"] .bot-cta:hover { color: #081011; background: #b9fff4; }
:root[data-theme="light"] .roles-notice__mark { border-color: #d9b83a; background: linear-gradient(145deg, #ffd968, #f5c44a); color: #4a3a06; }
:root[data-theme="light"] .quart-controls .search input { color: #e9f3e7; }

/*
  КНОПКИ: янтарные, тактильные — плоский янтарь с чернильным текстом,
  hover осветляет и приподнимает. Никаких градиентных «конфет».
*/
:root[data-theme="light"] .forum-btn,
:root[data-theme="light"] .chat-compose__send {
  background: var(--accent);
  color: #241a0e;
}
:root[data-theme="light"] .forum-btn:hover:not(:disabled) {
  background: #e08e39;
  box-shadow: 0 6px 16px -8px rgba(217,130,43,.55);
}

/* Переключатель темы: тёмно-графитовая кнопка, hover — янтарный. */
:root[data-theme="light"] .theme-toggle {
  background: #22303e;
  border-color: #22303e;
  color: #e8edf2;
}
:root[data-theme="light"] .theme-toggle:hover {
  color: #f0b46a;
  border-color: #2c3d4e;
  background: #22303e;
}

/* Бургер: холодный тон шапки вместо оранжевых брызг. */
:root[data-theme="light"] .burger {
  background: color-mix(in srgb, #22303e 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22303e 14%, transparent);
}
:root[data-theme="light"] .burger__lines i { background: var(--dim); }
:root[data-theme="light"] .burger:hover,
:root[data-theme="light"] .is-side-open .burger {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
:root[data-theme="light"] .is-side-open .burger__lines i { background: var(--accent); }

/* Мелочи, хардкодящие сигнальный оранжевый: стрелка селекта и кольцо
   фокуса полей — янтарные, в тон акценту. */
:root[data-theme="light"] .forum-field select,
:root[data-theme="light"] .adm-field select,
:root[data-theme="light"] .adm-form .adm-field select {
  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' stroke='%23b06818' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .forum-field input:focus,
:root[data-theme="light"] .forum-field textarea:focus,
:root[data-theme="light"] .adm-field input:focus,
:root[data-theme="light"] .adm-field textarea:focus,
:root[data-theme="light"] .adm-field select:focus { box-shadow: 0 0 0 3px rgba(217,130,43,.18); }

/* ── Проверка ников ──────────────────────────────────────────────────────────
   Две соседних метки: «✓ проверен» (зелёная) и «! не проверен» (серая).
   Зелёная повторяет тон победы, серая — текст подписи, так что состояние
   читается с одного взгляда, не перебивая роль и сам ник. По правилу выше
   в постах и комментариях исчезает слово — остаётся значок. */
.role-badge--verified {
  --role-tone: var(--win);
  border-color: color-mix(in srgb, var(--role-tone) 45%, transparent);
  background: color-mix(in srgb, var(--role-tone) 14%, transparent);
  color: var(--role-tone);
}
.role-badge--unverified {
  --role-tone: var(--mute);
  border-color: color-mix(in srgb, var(--role-tone) 40%, transparent);
  background: color-mix(in srgb, var(--role-tone) 10%, transparent);
  color: var(--role-tone);
}

/* ── Подтверждение ника и журнал имён (страница участника) ────────────────────
   Панель подтверждения видна только лидеру альянса игрока и модерации,
   журнал — самому игроку и модерации. Обе — панели на странице профиля,
   поэтому держим их в плотности соседних блоков, без отдельного «сцены». */
.forum-verify { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.forum-verify__text b { display: block; margin-bottom: 4px; }
.forum-verify__text p { margin: 0; font-size: 13px; line-height: 1.5; }
.forum-verify .forum-btn { flex-shrink: 0; }
.forum-nicklog__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.forum-nicklog__item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; flex-wrap: wrap; padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--r-sm, 8px);
}
.forum-nicklog__item code { color: var(--accent); overflow-wrap: anywhere; }
.forum-nicklog__item .muted { font-size: 12px; }
@media (max-width: 640px) {
  .forum-verify .forum-btn { width: 100%; min-height: 44px; }
}

/* ── Светлая тема: «пыль, бумага и сталь» ───────────────────────────────── */
:root[data-theme="light"] body {
  background:
    radial-gradient(900px 480px at 100% -8%, rgba(192,90,36,.10), transparent 62%),
    radial-gradient(720px 420px at -8% 24%, rgba(108,93,67,.08), transparent 66%),
    linear-gradient(135deg, #ebe7dd 0%, var(--bg) 48%, #e7e1d5 100%);
}
:root[data-theme="light"] body::before {
  opacity: .72;
  background:
    repeating-linear-gradient(115deg, rgba(74,59,40,.018) 0 1px, transparent 1px 11px),
    radial-gradient(760px 400px at 50% -12%, rgba(255,255,255,.68), transparent 70%);
}
:root[data-theme="light"] body::after { opacity: .018; mix-blend-mode: multiply; }

:root[data-theme="light"] .site-head {
  background: rgba(247,244,236,.88);
  border-bottom-color: rgba(123,101,69,.22);
  box-shadow: 0 8px 26px -24px rgba(59,43,25,.55);
  backdrop-filter: blur(18px) saturate(.86);
}
:root[data-theme="light"] .site-head__inner::before {
  content: 'Z ROUTE // 33';
  color: var(--mute);
  background: transparent;
  border: 0;
  padding: 0;
  letter-spacing: .18em;
}
:root[data-theme="light"] .site-head::after { background: linear-gradient(90deg, transparent, rgba(192,90,36,.7), transparent); }
:root[data-theme="light"] .brand__num {
  color: #fff7ea;
  background: linear-gradient(145deg, #c56430, #913c1e);
  box-shadow: 0 7px 16px -10px rgba(104,43,19,.7);
}
:root[data-theme="light"] .nav__link { color: var(--dim); }
:root[data-theme="light"] .nav__link:hover { background: rgba(114,91,55,.08); color: var(--text); }
:root[data-theme="light"] .nav__link.is-active {
  color: #fffaf1;
  background: #40382e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px -11px rgba(53,42,29,.7);
}
:root[data-theme="light"] .theme-toggle {
  color: #fffaf1;
  background: #40382e;
  border-color: #40382e;
}
:root[data-theme="light"] .theme-toggle:hover { color: #ffe0bb; background: #51463a; border-color: #51463a; }

:root[data-theme="light"] .panel,
:root[data-theme="light"] .forum-post,
:root[data-theme="light"] .forum-hot,
:root[data-theme="light"] .forum-lead,
:root[data-theme="light"] .forum-theme,
:root[data-theme="light"] .forum-welcome {
  background: linear-gradient(145deg, rgba(251,248,241,.96), rgba(244,239,229,.94));
  border-color: rgba(116,96,65,.20);
  box-shadow: 0 1px 0 rgba(255,255,255,.82) inset, 0 16px 36px -32px rgba(69,51,30,.5);
  backdrop-filter: none;
}
:root[data-theme="light"] .panel::before {
  width: 100%;
  opacity: 1;
  background: linear-gradient(90deg, transparent 2%, rgba(192,90,36,.40) 22%, rgba(154,106,36,.24) 52%, transparent 96%);
}
@media (hover: hover) {
  :root[data-theme="light"] .panel:hover {
    transform: none;
    border-color: rgba(145,94,52,.34);
    box-shadow: 0 1px 0 rgba(255,255,255,.84) inset, 0 20px 42px -34px rgba(69,51,30,.58);
  }
}
:root[data-theme="light"] .hero {
  border-color: rgba(112,88,53,.26);
  background:
    linear-gradient(105deg, rgba(46,40,32,.04) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(560px 250px at 92% 6%, rgba(192,90,36,.17), transparent 68%),
    linear-gradient(135deg, #fbf7ef, #e9e0d1);
  box-shadow: 0 1px 0 rgba(255,255,255,.84) inset, 0 24px 48px -40px rgba(69,51,30,.62);
  backdrop-filter: none;
}
:root[data-theme="light"] .hero::after { opacity: .16; background: repeating-linear-gradient(58deg, rgba(117,76,35,.13) 0 1px, transparent 1px 12px); }
:root[data-theme="light"] .hero__num { background: linear-gradient(172deg, #44382b, #aa5227); -webkit-background-clip: text; background-clip: text; }

:root[data-theme="light"] .forum-btn,
:root[data-theme="light"] .chat-compose__send,
:root[data-theme="light"] .adm-btn--primary {
  color: #fff9ee;
  border-color: #a94722;
  background: linear-gradient(180deg, #c86231, #a94722);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 15px -12px rgba(121,49,22,.7);
}
:root[data-theme="light"] .forum-btn:hover:not(:disabled),
:root[data-theme="light"] .adm-btn--primary:hover {
  color: #fff9ee;
  border-color: #8e381b;
  background: linear-gradient(180deg, #b95428, #8e381b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 18px -12px rgba(121,49,22,.75);
}
:root[data-theme="light"] :where(.forum-field input, .forum-field textarea, .forum-field select, .search input, .adm-field input, .adm-field textarea, .adm-field select) {
  color: var(--text);
  background-color: rgba(255,252,246,.78);
  border-color: rgba(116,96,65,.27);
}
:root[data-theme="light"] :where(.forum-field input, .forum-field textarea, .forum-field select, .search input, .adm-field input, .adm-field textarea, .adm-field select):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192,90,36,.13);
}
:root[data-theme="light"] a { text-decoration-color: rgba(121,80,43,.34); text-underline-offset: .16em; }
:root[data-theme="light"] a:hover { text-decoration-color: currentColor; }

/* Админка использует те же токены: светлый режим — не «другая программа»,
   а спокойный рабочий стол с чёткой иерархией данных. */
:root[data-theme="light"] .adm-top {
  background: rgba(247,244,236,.92);
  border-bottom-color: rgba(116,96,65,.24);
  box-shadow: 0 8px 22px -22px rgba(69,51,30,.54);
  backdrop-filter: blur(18px) saturate(.86);
}
:root[data-theme="light"] .adm-top__brand b {
  color: #fff8ed;
  background: linear-gradient(145deg, #c56430, #913c1e);
  box-shadow: 0 6px 14px -10px rgba(104,43,19,.7);
}
:root[data-theme="light"] .adm-nav__link:hover { background: rgba(114,91,55,.08); }
:root[data-theme="light"] .adm-nav__link.is-active {
  color: #fff9ef;
  background: #40382e;
  border-color: #40382e;
}
:root[data-theme="light"] .adm-btn {
  color: var(--dim);
  background: rgba(255,252,246,.72);
  border-color: rgba(116,96,65,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
}
:root[data-theme="light"] .adm-btn:hover { color: var(--text); border-color: rgba(145,94,52,.48); background: #fffaf1; }
:root[data-theme="light"] .adm-theme-toggle { min-width: 76px; }
:root[data-theme="light"] .adm-modal__box,
:root[data-theme="light"] .adm-publish--top { background: var(--surface); border-color: rgba(116,96,65,.26); }

/* В тёмной панели те же пропорции и состояния без смены её ночного характера. */
.adm-top { box-shadow: 0 10px 30px -26px rgba(0,0,0,.86); }
.adm-nav__link.is-active { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
.adm-btn { min-height: 36px; }
.adm-theme-toggle { min-width: 76px; }

/* Управление игроками: вместо разреженных строк — компактные карточки с
   действиями, которые читаются как состояния, а не как панель приборов. */
.adm-players__toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; }
.adm-player-search { flex:1 1 280px; max-width:460px; margin:0; }
.adm-players__stats { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; color:var(--mute); font-size:11px; }
.adm-players__stats span { padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--text) 3%,transparent); }
.adm-players__stats b { color:var(--text); }
.adm-players { grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:10px; margin-top:14px; }
.adm-player { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"who state" "acts acts"; gap:12px; min-height:138px; padding:15px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--text) 2%,transparent)); box-shadow:0 12px 26px -26px rgba(0,0,0,.9); }
.adm-player:hover { border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); }
.adm-player__who { grid-area:who; align-self:start; }
.adm-player__name { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.adm-player__who b { font-size:16px; line-height:1.2; }
.adm-player__who small { margin-top:7px; font-size:11.5px; }
.adm-player__self { padding:2px 6px; border-radius:999px; color:var(--mute); background:color-mix(in srgb,var(--text) 7%,transparent); font-size:10px; font-weight:700; }
.adm-player__state { grid-area:state; align-self:start; justify-content:flex-end; flex-wrap:wrap; }
.adm-player__acts { grid-area:acts; justify-content:space-between; padding-top:11px; border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent); }
.adm-player__roles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:1; gap:6px; }
.adm-player .adm-pill { min-height:38px; padding:6px 8px; border-radius:10px; font-size:11px; font-weight:700; }
.adm-player .adm-toggle.is-on { color:#7ee6a8; border-color:rgba(71,210,130,.44); background:rgba(48,177,103,.14); }
.adm-player .adm-toggle[data-player-moderator].is-on { color:#ffc06b; border-color:rgba(255,154,51,.48); background:rgba(210,107,23,.15); }
.adm-player .adm-toggle[data-player-blogger].is-on { color:#8fc7ff; border-color:rgba(91,164,246,.48); background:rgba(62,119,215,.15); }
.adm-player .adm-toggle[data-player-leader].is-on { color:#d3a9ff; border-color:rgba(167,104,236,.48); background:rgba(132,70,203,.15); }
.adm-player .adm-menu__btn { width:38px; height:38px; border-radius:10px; }

@media (max-width:700px) {
  .adm-players__toolbar { align-items:stretch; flex-direction:column; }
  .adm-player-search { max-width:none; }
  .adm-players__stats { justify-content:flex-start; }
  .adm-players { grid-template-columns:1fr; }
}
@media (max-width:430px) {
  .adm-player { grid-template-areas:"who" "state" "acts"; grid-template-columns:1fr; min-height:0; }
  .adm-player__state { justify-content:flex-start; }
  .adm-player__roles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .adm-player__acts { align-items:flex-end; }
}

/* Форум: метки, карточки альянсов и подписки на рейтинг. */
.forum-topic-tags { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; padding:0; border:0; }
.forum-topic-tags legend { width:100%; margin-bottom:2px; color:var(--dim); font-size:13px; }
.forum-topic-tags legend small { color:var(--mute); }
.forum-topic-tags label { cursor:pointer; }
.forum-topic-tags input { position:absolute; opacity:0; pointer-events:none; }
.forum-topic-tags span, .forum-tag { display:inline-flex; align-items:center; min-height:27px; padding:3px 9px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--dim); font:600 11px/1.2 Unbounded,sans-serif; cursor:pointer; }
.forum-topic-tags input:checked + span, .forum-tag.is-on { border-color:color-mix(in srgb,var(--accent) 62%,var(--line)); background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--text); }
.forum-tag-filter { display:flex; flex-wrap:wrap; gap:5px; width:100%; margin-top:8px; }
.forum-post__tags { display:flex; flex-wrap:wrap; gap:5px; margin:-2px 0 12px; }
.forum-post__tags .forum-tag { min-height:23px; font-size:10px; }
.forum-alliance-card { display:inline-flex; align-items:center; gap:5px; max-width:190px; margin-left:6px; padding:2px 6px; border:1px solid color-mix(in srgb,var(--ally-color) 45%,var(--line)); border-radius:999px; color:inherit; text-decoration:none; vertical-align:middle; }
.forum-alliance-card i, .forum-alliance-sub i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--ally-color); }
.forum-alliance-card b { color:var(--gold); font:700 10px/1 Unbounded,sans-serif; }
.forum-alliance-card small { overflow:hidden; color:var(--mute); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.forum-alliance-subs header { display:grid; gap:3px; margin-bottom:10px; }
.forum-alliance-subs header small { color:var(--mute); font-size:11px; }
.forum-alliance-subs > div { display:grid; gap:5px; }
.forum-alliance-sub { display:flex; align-items:center; gap:7px; width:100%; min-height:32px; padding:5px 7px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.forum-alliance-sub span { margin-left:auto; color:var(--mute); font-size:10px; }
.forum-alliance-sub.is-on { border-color:color-mix(in srgb,var(--accent) 52%,var(--line)); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.forum-alliance-sub.is-on span { color:var(--accent); }

.about-page { display:grid; gap:16px; max-width:960px; margin:0 auto; }
.about-page .about-panel { margin:0; padding:clamp(16px,3vw,28px); color:var(--text); background:var(--surface); }
.about-panel h1 { margin:12px 0 20px; font-size:clamp(26px,5vw,42px); }
.about-panel h2 { margin:0 0 18px; font-size:clamp(19px,3vw,25px); }
.about-panel h3 { margin:0 0 10px; font-size:17px; }
.about-panel p { margin:12px 0 0; line-height:1.7; overflow-wrap:anywhere; }
.about-panel a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.about-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:var(--r); }
.about-page .about-panel--privacy { border-inline-start:4px solid var(--accent); }
@media (max-width:640px) {
  .about-grid { grid-template-columns:1fr; }
}