/*
  ФОРУМ И БОКОВЫЕ ВКЛАДКИ.

  Отдельный файл, а не дописка в styles-v8.css. Тот перевалил за сотню
  килобайт и собран слоями поверх прошлых версий: правка в нём задевает
  рейтинг, кварт и хронологию разом. У форума задача независимая, и держать
  его отдельно дешевле, чем потом разбирать, что сломалось.

  Токены не переопределяются: цвета, радиусы и шрифты берутся из :root
  в styles-v8.css. Форум обязан выглядеть той же частью сайта, а не
  вставленным куском.
*/

/* ── Боковые вкладки ──────────────────────────────────────────────────────── */

/*
  Ширина панели в переменной: от неё зависит и отступ содержимого, и сдвиг
  при выдвижении. Две несогласованные цифры разъезжаются на первой правке.
*/
:root {
  --side-w: 232px;
}

.side {
  position: fixed;
  z-index: 45;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--bg) 99%, transparent));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Полосу прокрутки в меню видно только при наведении: она тут почти всегда лишняя. */
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; }
.side:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 8%, transparent); }

.brand--side { padding: 4px 8px 0; }

/*
  Вкладки столбиком. Тот же класс .nav, что раньше стоял в шапке: подсветка
  активной вкладки, ссылки и разметка в main.js остались прежними — меняется
  только раскладка.
*/
.side .nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  overflow: visible;
}

.side .nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
}

/*
  Активная вкладка: слева полоса вместо заливки кружком.
  В столбце скруглённая пилюля выглядит вырванной из ряда, а вертикальная
  черта читается как «вы здесь» и не спорит с формой списка.
*/
.side .nav__link.is-active {
  position: relative;
  color: #14100c;
  background: linear-gradient(135deg, #ff9a4a, var(--accent));
  box-shadow: 0 8px 22px -14px var(--accent);
}
.side .nav__link.is-active::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

/*
  Группы меню: «Общение» (форум, чаты) и «Сервер» (таблицы). Форум и чаты —
  главное на сайте, и меню должно говорить это раньше, чем содержимое.
*/
.nav__group {
  display: block;
  margin: 10px 12px 4px;
  color: var(--mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav__group:first-child { margin-top: 0; }
.side .nav__link--primary { font-weight: 600; font-size: 14.5px; }
.nav__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #ff4757;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.side .nav__link.is-active .nav__badge { background: #14100c; color: #fff; }

.side__foot {
  margin-top: auto;
  padding: 12px 12px 0;
  border-top: 1px solid var(--line-soft);
}
.side__note {
  color: var(--mute);
  font-size: 10.5px;
  line-height: 1.45;
}

/*
  Содержимое отступает на ширину панели. Отступ на body, а не на .wrap:
  сдвинуться должны и шапка, и подвал, иначе шапка уедет под меню.
*/
@media (min-width: 1040px) {
  body { padding-left: var(--side-w); }
  /* Кнопка меню на широком экране не нужна: панель и так видна всегда. */
  .burger, .side-veil { display: none !important; }
}

/* ── Узкий экран: панель выдвигается ──────────────────────────────────────── */

@media (max-width: 1039px) {
  .side {
    /*
      Убираем за левый край, а не прячем display: none. Скрытая панель
      появлялась бы рывком, а сдвинутая — выезжает, и человек видит, откуда
      она взялась.

      visibility нужен вдобавок к сдвигу: панель за краем остаётся в потоке
      чтения, и клавиатура с экранным диктором доходили до вкладок, которых
      не видно — человек оказывался в невидимом меню без выхода. Переключается
      скачком, поэтому при открытии панель видна сразу, а при закрытии
      исчезает только после того, как уедет.

      ease-out сглаживает выезд сильнее, чем сайтовая кривая: у кривой сайта
      старт резкий, а панель и без того длинная — движение получается толчком.
    */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .32s var(--ease-out), visibility .32s var(--ease-out);
    box-shadow: 24px 0 60px -30px rgba(0,0,0,.9);
    /*
      Вырез под фронтальную камеру и полоса жестов: без этого верхние вкладки
      уезжают под чёрную скобу, а нижняя прижимается к полосе, из-за чего
      нажатие по ней уводит приложение вместо перехода в раздел.
    */
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .is-side-open .side { transform: translateX(0); visibility: visible; }

  /*
    Прокрутка страницы под открытым меню — верный способ потерять место.
    Класс висит на <html>, потому что overflow на body в iOS не работает.
  */
  .is-side-open, .is-side-open body { overflow: hidden; }

  /*
    Затемнение. Показывается и прячется плавно: резкое появление чёрного
    слоя по щелчку выглядит как рывок, при котором страница «моргает».
    visibility с задержкой оставляет слой на время выезда панели прочь,
    чтобы не открывать сразу всё, что под ней.
  */
  .side-veil {
    position: fixed;
    z-index: 44;
    inset: 0;
    display: block;
    background: rgba(6,7,9,.62);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
  }
  .is-side-open .side-veil {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* Открытое окно: та же беда, что с меню — страница не должна ехать под ним. */
.is-modal-open, .is-modal-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

.burger {
  display: flex;
  align-items: center;
  gap: 9px;
  /*
    44 пиксела — не про красоту. Меньше этого палец промахивается, и человек
    жмёт второй раз, думая, что не нажалось. Это самая частая кнопка на сайте.
  */
  min-height: 44px;
  flex: none;
  padding: 0 13px 0 11px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 12px;
  /*
    ПОЧЕМУ КНОПКА ЗАМЕТНАЯ, А НЕ ДЕЛИКАТНАЯ.

    Сначала это были три полоски на прозрачном фоне — «как принято».
    На тёмной шапке рядом с яркой оранжевой маркой их не видно: глаз уходит
    на марку, а кнопка читается как часть фона. Человек не понимает, где
    остальные разделы, и решает, что их нет.

    Три полоски вообще узнаёт не каждый. Поэтому рядом стоит слово «Меню»:
    оно снимает вопрос целиком и стоит десяти пикселов ширины.
  */
  background: linear-gradient(145deg, rgba(255,154,74,.16), rgba(255,106,43,.1));
  box-shadow: inset 0 0 0 1px rgba(255,106,43,.14), 0 6px 18px -14px var(--accent);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .16s var(--ease);
}

/* Полоски: столбиком внутри своей ячейки, чтобы не спорить с подписью. */
.burger__lines {
  display: grid;
  gap: 4px;
  flex: none;
}
.burger__lines i {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform .22s var(--ease), opacity .18s var(--ease), background .18s var(--ease);
}

.burger:hover {
  border-color: rgba(255,106,43,.5);
  background: linear-gradient(145deg, rgba(255,154,74,.24), rgba(255,106,43,.15));
}
.burger:active { transform: scale(.97); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Открытое меню — крестик: та же кнопка закрывает, и это должно быть видно. */
.is-side-open .burger__lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-side-open .burger__lines i:nth-child(2) { opacity: 0; }
.is-side-open .burger__lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.is-side-open .burger {
  border-color: rgba(255,106,43,.5);
  background: linear-gradient(145deg, rgba(255,154,74,.26), rgba(255,106,43,.17));
}

/*
  Подпись прячем только на самых узких экранах, где каждый пиксел шапки
  на счету, — и то оставляем полоски заметно окрашенными.
*/
@media (max-width: 359px) {
  .burger__label { display: none; }
  .burger { padding: 0 11px; }
}

/*
  Шапка: кнопка, марка, статус президента. Правила из styles-v8.css для
  .site-head__inner переопределяются осознанно — там раскладка была под
  вкладки в строке, которых здесь больше нет.
*/
.site-head__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  /* Вырез камеры и «уши» в ландшафтном положении. */
  padding-top: max(8px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
@media (min-width: 760px) {
  .site-head__inner { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
}
.brand--head { padding: 4px 0; }
/* Марка в шапке дублирует ту, что в панели. На широком экране прячем её. */
@media (min-width: 1040px) {
  .brand--head { display: none; }
}
/* Надпись LIVE // SERVER 33 из styles-v8.css встала бы поверх статуса. */
.site-head__inner::before { display: none; }
#app::before { display: none; }
/*
  Место доски в шапке. Её вид (одна строка вместо блока на 90 пикселов)
  задаётся в mobile.css — там же объяснено, почему.
*/
@media (max-width: 700px) {
  /* На телефоне статус переносится под шапку: в строку он не влезает. */
  .site-head__inner { flex-wrap: wrap; }
  .president-board { flex: 1 0 100%; max-width: none; }
}

/* ── Сводка сервера на форуме ─────────────────────────────────────────────── */

.forum-chron { padding-bottom: 18px; }

.forum-chron__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.forum-chron__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(53,208,127,.28);
  border-radius: 999px;
  color: var(--win);
  font: 800 8.5px/1 Inter, sans-serif;
  letter-spacing: .16em;
}
.forum-chron__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 10px var(--win);
  animation: forum-pulse 2s ease-in-out infinite;
}
@keyframes forum-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.forum-chron__title {
  font-size: clamp(21px, 3.4vw, 33px);
  line-height: 1.1;
}
.forum-chron--loss .forum-chron__title { color: var(--soft-bad); }
.forum-chron--win .forum-chron__title { color: var(--soft-ok); }

.forum-chron__date {
  margin: 8px 0 0;
  color: var(--dim);
  font-size: 13px;
}

.forum-chron__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 16px;
}
.forum-chron__stat {
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.forum-chron__stat b {
  display: block;
  font-family: Unbounded, sans-serif;
  font-size: 21px;
  line-height: 1;
}
.forum-chron__stat span {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  font-size: 10.5px;
  line-height: 1.35;
}

.forum-chron__feed {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.forum-chron__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  font-size: 12px;
}
.forum-chron__item--win { border-color: rgba(53,208,127,.24); }
.forum-chron__item--loss { border-color: rgba(255,71,87,.24); }
.forum-chron__when { color: var(--mute); font-size: 10.5px; }
.forum-chron__item--win .forum-chron__what { color: var(--soft-ok); }
.forum-chron__item--loss .forum-chron__what { color: var(--soft-bad); }

.forum-chron__more {
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.forum-chron__more:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .forum-chron__stats { grid-template-columns: 1fr 1fr; }
  .forum-chron__stat:last-child { grid-column: span 2; }
}

/* ── Правила ──────────────────────────────────────────────────────────────── */

.forum-rules { padding: 0; overflow: hidden; }

.forum-rules__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.forum-rules__summary::-webkit-details-marker { display: none; }
.forum-rules__summary:hover { background: color-mix(in srgb, var(--text) 2%, transparent); }

.forum-rules__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: rgba(255,106,43,.12);
  color: var(--accent);
  font-family: Unbounded, sans-serif;
  font-size: 15px;
}
.forum-rules__label { flex: 1; min-width: 0; }
.forum-rules__label b { display: block; font-size: 14.5px; }
.forum-rules__label small {
  display: block;
  margin-top: 2px;
  color: var(--mute);
  font-size: 11px;
}
.forum-rules__chev { color: var(--mute); transition: transform .2s var(--ease); }
.forum-rules[open] .forum-rules__chev { transform: rotate(180deg); }

.forum-rules__list {
  margin: 0;
  padding: 0 18px 4px 40px;
  counter-reset: rule;
}
.forum-rules__item { margin-bottom: 13px; }
.forum-rules__item b { font-size: 13.5px; }
.forum-rules__item p {
  margin: 3px 0 0;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.forum-rules__sanctions {
  margin: 4px 18px 0;
  padding: 13px 15px;
  border: 1px solid rgba(255,71,87,.18);
  border-radius: 12px;
  background: rgba(255,71,87,.04);
}
.forum-rules__sanctions ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
}
.forum-rules__note { margin: 12px 18px 16px; font-size: 11.5px; line-height: 1.5; }

/* ── Состояние форума и аккаунт ───────────────────────────────────────────── */

.forum-notice__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.forum-notice__tag {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mute);
  font-size: 10.5px;
}
.forum-notice p { margin: 0 0 8px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.forum-notice--off { border-color: rgba(255,201,60,.24); }
.forum-notice--local { border-color: rgba(167,163,194,.2); }
.forum-notice code {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .92em;
}

.forum-me {
  display: flex;
  align-items: center;
  gap: 11px;
}
.forum-me__body { flex: 1; min-width: 0; }
.forum-me__body b { display: block; font-size: 14px; }
.forum-me__body small { color: var(--mute); font-size: 11px; }

.forum-blocked {
  margin: 11px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(255,71,87,.28);
  border-radius: 10px;
  background: rgba(255,71,87,.06);
  color: var(--soft-bad);
  font-size: 12.5px;
}

/*
  Push-настройки форума под учётной строкой. Своя карточка внутри панели:
  выключатели отделены от действий профиля, чтобы «Выйти» не путалось
  с тумблером уведомлений.
*/
.forum-push {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.forum-push__head { display: block; }
.forum-push__head b { display: block; font-size: 12.5px; }
.forum-push__head small { font-size: 10.5px; }
.forum-push__grid {
  display: grid;
  gap: 4px 16px;
  margin-top: 8px;
}
@media (min-width: 560px) {
  .forum-push__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.forum-push__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12.5px;
  -webkit-tap-highlight-color: transparent;
}
.forum-push__row input {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
  flex: none;
  cursor: pointer;
}
.forum-push__hint { margin: 5px 0 0; font-size: 10.5px; line-height: 1.45; }

/*
  Колокольчик уведомлений. Счётчик — маленький кружок на кнопке, как у мессенджера:
  число должно читаться, не отвлекая от остальной строки «профиль · выйти».
*/
.forum-bell { position: relative; }
.forum-bell[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--text) 32%, transparent);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.forum-bell__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #ff4757;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Панель уведомлений: лист под учётной строкой, а не модальное окно. */
.forum-notify { margin-top: 10px; }
.forum-notify__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.forum-notify__empty { margin: 0; }
.forum-notify__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.forum-notify__link {
  display: block;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  color: inherit;
  line-height: 1.45;
}
.forum-notify__link:hover { border-color: color-mix(in srgb, var(--text) 22%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); }
.forum-notify__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13.5px; }
.forum-notify__actor { font-weight: 700; color: var(--link); }
.forum-notify__what { color: var(--text); }
.forum-notify__preview {
  display: block;
  margin-top: 3px;
  color: var(--mute, #9a97ad);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-notify__time {
  display: block;
  margin-top: 4px;
  color: var(--mute, #9a97ad);
  font-size: 11px;
}

/*
  Метка участника вместо аватарки. Хранение картинок — первое, что упирается
  в деньги, поэтому буква в цветном квадрате. Цвет считается из ника
  (см. nickColor), и знакомого человека видно в ленте по цвету.
*/
.forum-ava {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--ava, #7a8494);
  color: #10131a;
  font-family: Unbounded, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.forum-ava--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }

/* ── Поля и кнопки ────────────────────────────────────────────────────────── */

.forum-field { display: block; margin-bottom: 12px; }
.forum-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 600;
}
.forum-field input,
.forum-field select,
.forum-field textarea,
.forum-reply textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
  font-family: inherit;
  /*
    16px не для красоты: Safari на iPhone масштабирует всю страницу при
    фокусе в поле с меньшим шрифтом, и человек оказывается в увеличенной
    вёрстке, из которой сам не выйдет.
  */
  font-size: 16px;
  line-height: 1.5;
}
.forum-field textarea,
.forum-reply textarea { resize: vertical; min-height: 76px; }
.forum-field input:focus,
.forum-field select:focus,
.forum-field textarea:focus,
.forum-reply textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,43,.12);
}

.forum-btn {
  padding: 10px 17px;
  /*
    44 пиксела высоты — минимум, при котором палец попадает уверенно.
    Меньше — человек промахивается, жмёт второй раз и получает второй пост.
  */
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9a4a, var(--accent));
  color: #14100c;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .16s var(--ease), box-shadow .18s var(--ease), opacity .16s var(--ease);
}
.forum-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -12px var(--accent); }
.forum-btn:active:not(:disabled) { transform: none; }
.forum-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/*
  Занятая кнопка: запрос идёт, ответа нет. Без этого состояния человек
  нажимает второй раз и получает две одинаковые записи.
*/
.forum-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.forum-btn--ghost {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-color: var(--line);
  color: var(--text);
}
.forum-btn--ghost:hover { border-color: color-mix(in srgb, var(--text) 22%, transparent); box-shadow: none; }
.forum-btn--danger {
  background: linear-gradient(135deg, #ff6b7a, var(--loss));
  color: #fff;
}
.forum-btn--wide { display: block; width: 100%; margin: 4px 0 18px; }

.forum-error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(255,71,87,.3);
  border-radius: 10px;
  background: rgba(255,71,87,.07);
  color: var(--soft-bad);
  font-size: 12.5px;
}

.forum-auth__head { margin-bottom: 12px; }
.forum-auth__head small { display: block; margin-top: 3px; }
.forum-auth__fields { display: grid; gap: 12px; }
@media (min-width: 620px) {
  .forum-auth__fields { grid-template-columns: 1fr 1fr; }
  .forum-auth__fields .forum-field { margin-bottom: 0; }
}
.forum-auth__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.forum-auth__note { margin: 11px 0 0; font-size: 11.5px; line-height: 1.5; }

/* ── Написать пост ────────────────────────────────────────────────────────── */

.forum-composer { padding: 0; }
.forum-composer__summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
}
.forum-composer__summary::-webkit-details-marker { display: none; }
.forum-composer__plus {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,106,43,.14);
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}
.forum-composer form { padding: 0 18px 18px; }
.forum-composer__rules { margin: 4px 0 14px; font-size: 11.5px; line-height: 1.5; }
.forum-composer__actions { display: flex; gap: 8px; }

/*
  Форма правки живёт ВНУТРИ карточки поста: карточка не уезжает и человек
  видит, что именно правит. Заголовок и текст поста на время правки заменяются
  формой, кнопки действий в подвале остаются на месте.
*/
.forum-edit { padding: 2px 0 6px; }
.forum-edit__actions { display: flex; gap: 8px; margin-top: 4px; }

/*
  Панель форматирования под полем текста. Кнопки маленькие и не спорят
  с полем: цель — обернуть выделенное, а не привлечь к себе внимание.
  Подпись-подсказка напоминает синтаксис, чтобы кнопки не казались
  «красивости ради».
*/
.forum-md {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}
.forum-md__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.forum-md__row--palette { gap: 5px; }
.forum-md__btn {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  font: 600 13px/1 Inter, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.forum-md__btn:hover {
  border-color: var(--accent);
  background: rgba(255,106,43,.08);
}
.forum-md__btn[aria-pressed='true'] {
  border-color: var(--accent);
  background: rgba(255,106,43,.18);
  color: var(--accent);
}
.forum-md__btn:active { transform: scale(.95); }
.forum-md__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.forum-md__mark { font-size: 9px; vertical-align: sub; }
.forum-md__capt {
  color: var(--mute);
  font-size: 11px;
  margin-right: 2px;
}
.forum-md__color {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: var(--swatch, #fff);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.forum-md__color--none {
  background: conic-gradient(color-mix(in srgb, var(--text) 10%, transparent) 0 25%, transparent 0 50%,
    color-mix(in srgb, var(--text) 10%, transparent) 0 75%, transparent 0 100%);
  position: relative;
}
.forum-md__color--none::after {
  content: '';
  position: absolute;
  inset: 50% 3px auto;
  height: 1.5px;
  background: var(--loss);
  transform: rotate(-45deg);
}
.forum-md__color:hover { transform: scale(1.12); }

/* ── Редактор текста ───────────────────────────────────────────────────────── */

.forum-editor {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
  font-family: inherit;
  /*
    16px не для красоты: Safari на iPhone масштабирует всю страницу при
    фокусе в поле с меньшим шрифтом. Редактор — тоже поле, и правило держит
    тот же порог.
  */
  font-size: 16px;
  line-height: 1.6;
  word-break: break-word;
  caret-color: var(--accent);
}
.forum-reply .forum-editor { min-height: 72px; }
.forum-editor:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,43,.12);
}
.forum-editor:empty::before,
.forum-editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--mute);
  pointer-events: none;
}

/* Типографика внутри редактора и готовых записей: одна на всех. */
.forum-editor p,
.forum-editor blockquote,
.forum-editor pre,
.forum-editor ul,
.forum-editor ol,
.forum-editor h3,
.forum-post__body p,
.forum-post__body blockquote,
.forum-post__body pre,
.forum-post__body ul,
.forum-post__body ol,
.forum-post__body h3,
.forum-comment__body blockquote,
.forum-comment__body pre,
.forum-comment__body ul,
.forum-comment__body ol,
.forum-comment__body h3 { margin: 0 0 9px; }
.forum-editor p:last-child,
.forum-editor blockquote:last-child,
.forum-editor pre:last-child,
.forum-editor ul:last-child,
.forum-editor ol:last-child,
.forum-editor h3:last-child,
.forum-post__body :last-child,
.forum-comment__body :last-child { margin-bottom: 0; }

.forum-editor blockquote,
.forum-post__body blockquote,
.forum-comment__body blockquote {
  margin: 0 0 9px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: rgba(255,106,43,.06);
  color: var(--dim);
}
.forum-editor blockquote p,
.forum-post__body blockquote p,
.forum-comment__body blockquote p { margin: 0; }

.forum-editor pre,
.forum-post__body pre,
.forum-comment__body pre {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,.32);
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}
.forum-editor code,
.forum-post__body code,
.forum-comment__body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  font-size: .9em;
}
.forum-editor pre code,
.forum-post__body pre code,
.forum-comment__body pre code { padding: 0; background: none; font-size: 1em; }

.forum-editor ul,
.forum-post__body ul,
.forum-comment__body ul { padding-left: 20px; list-style: disc; }
.forum-editor ol,
.forum-post__body ol,
.forum-comment__body ol { padding-left: 20px; list-style: decimal; }
.forum-editor li,
.forum-post__body li,
.forum-comment__body li { margin-bottom: 3px; }

.forum-editor h3,
.forum-post__body h3,
.forum-comment__body h3 {
  font-size: 15px;
  font-weight: 700;
}

/* ── Управление лентой ────────────────────────────────────────────────────── */

.ctl--forum {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
}
.ctl--forum .seg { flex-wrap: wrap; }
.seg--sort { margin-left: auto; }
@media (max-width: 620px) {
  .seg--sort { margin-left: 0; }
}

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

.forum-feed { display: grid; gap: 14px; }

.forum-post { margin-bottom: 0; }
.forum-post--pinned { border-color: rgba(255,201,60,.28); }
.forum-post--trail {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 34%);
}

.forum-post__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.forum-post__by { flex: 1; min-width: 0; }
.forum-post__by b { display: block; font-size: 13.5px; }
.forum-post__by time { color: var(--mute); font-size: 11px; }
.forum-post__cat {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font-size: 10.5px;
  white-space: nowrap;
}
.forum-post__pin { font-size: 13px; }
.forum-post__trail {
  flex: none;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.forum-post__title { margin: 0 0 9px; font-size: clamp(16px, 2.1vw, 20px); }
.forum-post__title a { color: inherit; text-decoration: none; }
.forum-post__title a:hover { color: var(--accent); }

.forum-post__body { color: var(--dim); font-size: 13.5px; line-height: 1.62; }
.forum-post__body p { margin: 0 0 9px; }
.forum-post__body p:last-child { margin-bottom: 0; }
.forum-post__body a { color: var(--accent); }

.forum-post__expand {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.forum-post__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.forum-post__comments {
  color: var(--dim);
  font-size: 12.5px;
  text-decoration: none;
}
.forum-post__comments:hover { color: var(--text); }
.forum-post__views {
  color: var(--dim);
  font-size: 12.5px;
}
.forum-post__acts { display: flex; gap: 4px; margin-left: auto; }

.forum-act {
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--mute);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.forum-act:hover { border-color: var(--line); color: var(--text); }

/* Удалённая запись остаётся на месте: см. рассуждение в forum/contract.js. */
.forum-post--deleted { border-style: dashed; opacity: .78; }
.forum-post__gone { display: flex; align-items: flex-start; gap: 11px; }
.forum-post__gone-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: rgba(255,71,87,.12);
  color: var(--loss);
  font-size: 13px;
}
.forum-post__gone b { font-size: 13.5px; }
.forum-post__gone p { margin: 2px 0 0; font-size: 12px; }

.forum-empty, .forum-feed__error { text-align: center; }
.forum-empty h2 { margin: 6px 0 8px; }
.forum-feed__error .forum-btn { margin-top: 12px; }

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

.forum-react { display: flex; align-items: center; gap: 5px; }

.forum-react__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  color: var(--dim);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .14s var(--ease);
}
.forum-react__btn:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--text) 20%, transparent); }
.forum-react__btn:disabled { cursor: not-allowed; opacity: .55; }
.forum-react__btn b { font-size: 12px; }

/* Своя реакция подсвечена: иначе непонятно, поставил ты её или нет. */
.forum-react__btn.is-on {
  border-color: rgba(53,208,127,.42);
  background: rgba(53,208,127,.1);
  color: var(--soft-ok);
}
.forum-react__btn--down.is-on {
  border-color: rgba(255,71,87,.42);
  background: rgba(255,71,87,.1);
  color: var(--soft-bad);
}
.forum-react__btn--more.is-on {
  border-color: rgba(255,201,60,.42);
  background: rgba(255,201,60,.1);
  color: var(--soft-warn);
}
.forum-react__plus { color: var(--mute); font-size: 13px; }

/*
  Смайлики за одной кнопкой: их семь, и в строку на телефоне они заняли бы
  экран целиком. Список открывается поверх, не раздвигая карточку.
*/
.forum-emoji { position: relative; }
.forum-emoji__pop {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 7px);
  left: 0;
  display: flex;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised-2);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.95);
}
.forum-emoji__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
.forum-emoji__item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.forum-emoji__item.is-on { border-color: rgba(255,201,60,.4); background: rgba(255,201,60,.1); }
.forum-emoji__item b { font-size: 11px; }

/* У правого края списка не хватает места — открываем влево. */
@media (max-width: 520px) {
  .forum-emoji__pop { left: auto; right: 0; }
}

/* ── Обсуждение ───────────────────────────────────────────────────────────── */

.forum-thread {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.forum-thread__title { margin: 0 0 12px; font-size: 14px; }

.forum-thread__list { margin: 0 0 14px; padding: 0; list-style: none; }

.forum-comment {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.forum-comment:last-child { border-bottom: none; }
.forum-comment--none, .forum-comment--deleted {
  display: block;
  padding: 10px 0;
  font-size: 12.5px;
}
.forum-comment--deleted p { margin: 0; }

.forum-comment__body { flex: 1; min-width: 0; }
.forum-comment__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.forum-comment__head b { font-size: 13px; }
.forum-comment__head time { color: var(--mute); font-size: 10.5px; }
.forum-comment__body p {
  margin: 0 0 6px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.6;
}
.forum-comment__body a { color: var(--accent); }
.forum-comment__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.forum-comment__foot .forum-react__btn { padding: 4px 8px; font-size: 12px; }

.forum-reply__actions { margin-top: 9px; }
.forum-reply__locked { margin: 0; font-size: 12.5px; }

/* ── Окна ─────────────────────────────────────────────────────────────────── */

.forum-modal {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6,7,9,.72);
  backdrop-filter: blur(3px);
}
.forum-modal[hidden] { display: none; }

.forum-modal__box {
  width: 100%;
  max-width: 520px;
  /*
    Ограничение по высоте и прокрутка внутри: восемь пунктов правил на экране
    телефона не помещаются, а окно, из которого не видно кнопку, — тупик.
  */
  max-height: min(88vh, 720px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--raised-2), var(--surface));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.95);
}
.forum-modal__box h3 { margin: 0 0 14px; font-size: 17px; }

.forum-modal__rules { display: grid; gap: 6px; margin-bottom: 14px; }
.forum-modal__rule {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.forum-modal__rule:hover { border-color: color-mix(in srgb, var(--text) 20%, transparent); }
.forum-modal__rule input { margin-top: 3px; accent-color: var(--accent); }
.forum-modal__rule b { display: block; font-size: 13px; }
.forum-modal__rule small {
  display: block;
  margin-top: 3px;
  color: var(--mute);
  font-size: 11.5px;
  line-height: 1.45;
}
.forum-modal__rule:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255,106,43,.06);
}
.forum-modal__actions { display: flex; gap: 8px; margin-top: 4px; }

/*
  Короткое сообщение об успехе. Не alert: тот останавливает страницу
  и на телефоне выглядит как ошибка сайта.
*/
.forum-toast {
  position: fixed;
  z-index: 70;
  /* Над полосой жестов, иначе сообщение наполовину под ней. */
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  padding: 11px 17px;
  border: 1px solid rgba(53,208,127,.3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--win) 16%, var(--surface));
  color: var(--soft-ok);
  font-size: 13px;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.9);
  animation: forum-toast-in .26s var(--ease) both;
}
@keyframes forum-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .forum-toast { animation: none; }
}

/* ── Удобство ввода и попадания пальцем ───────────────────────────────────── */

/*
  Всё, по чему нажимают, обязано быть не меньше 44 пикселов. Ниже — те места,
  где кнопки мелкие по виду: реакции, действия под постом, вкладки.
  Размер добирается невидимой областью вокруг, чтобы вид не поехал.
*/
@media (hover: none) and (pointer: coarse) {
  .forum-react__btn { min-height: 40px; padding: 8px 12px; }
  .forum-act { min-height: 40px; padding: 8px 11px; }
  .forum-emoji__item { min-width: 44px; min-height: 44px; justify-content: center; }
  .seg__btn { min-height: 40px; }
  .side .nav__link { min-height: 46px; }
  .forum-post__title a { display: inline-block; padding: 2px 0; }

  /* Наведения на телефоне не бывает — движение при нажатии только мешает. */
  .forum-btn:hover, .forum-react__btn:hover { transform: none; }
}

/*
  Подсветка при нажатии вместо наведения: на телефоне это единственный способ
  показать, что нажатие принято.
*/
.forum-react__btn:active:not(:disabled),
.forum-act:active,
.forum-emoji__item:active { background: color-mix(in srgb, var(--text) 9%, transparent); }

/*
  Обводка фокуса для тех, кто ходит по сайту с клавиатуры. Только :focus-visible:
  обычный :focus подсветил бы всё и при нажатии мышью.
*/
.nav__link:focus-visible,
.seg__btn:focus-visible,
.forum-react__btn:focus-visible,
.forum-act:focus-visible,
.forum-emoji__item:focus-visible,
.forum-rules__summary:focus-visible,
.forum-composer__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/*
  Длинные ники и ссылки без пробелов растягивали карточку по ширине,
  и вся страница начинала ездить в сторону. Ломаем в любом месте.
*/
.forum-post__title,
.forum-post__body,
.forum-comment__body,
.forum-me__body b,
.forum-post__by b { overflow-wrap: anywhere; }

/*
  Прокрутка внутри окна не должна утягивать за собой страницу — иначе
  на телефоне окно уезжает, стоит доскроллить список правил до конца.
*/
.forum-modal__box { overscroll-behavior: contain; }

/* Подвал и содержимое над полосой жестов. */
@media (max-width: 1039px) {
  .site-foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ── Приветственный баннер ────────────────────────────────────────────────── */
.forum-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
  padding: 14px 16px;
}
.forum-welcome__mark { font-size: 22px; line-height: 1; flex: none; }
.forum-welcome__body { min-width: 0; }
.forum-welcome__body b { display: block; font-size: 15px; }
.forum-welcome__body p { margin: 3px 0 0; font-size: 13px; }
.forum-welcome .forum-btn { flex: none; margin-left: auto; white-space: nowrap; }

/* ── Тема недели ──────────────────────────────────────────────────────────── */
.forum-theme {
  position: relative;
  margin: 14px 0 0;
  padding: 16px 18px;
  overflow: hidden;
}
.forum-theme::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}
.forum-theme__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.forum-theme__mark { font-size: 15px; line-height: 1; }
.forum-theme__title {
  position: relative;
  margin: 0;
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.3;
}
.forum-theme__body {
  position: relative;
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--dim);
}

/* ── Горячие темы: «Самое обсуждаемое» ────────────────────────────────────── */
.forum-hot {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.forum-hot__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: .02em;
}
.forum-hot__fire { font-size: 15px; line-height: 1; }
.forum-hot__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.forum-hot__item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
}
.forum-hot__item a:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.forum-hot__title { font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.forum-hot__meta { font-size: 11.5px; flex: none; }

/* ── Уровень и достижения на странице участника ───────────────────────────── */
.forum-rank { margin-top: 14px; }
.forum-rank__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.forum-rank__level { font-size: 12.5px; color: var(--dim); }
.forum-rank__level b { color: var(--accent); font-weight: 800; letter-spacing: .02em; }
.forum-rank__bar {
  position: relative;
  height: 8px;
  margin: 12px 0 0;
  background: var(--raised);
  border-radius: 999px;
  overflow: hidden;
}
.forum-rank__fill {
  position: absolute;
  inset: 0 auto 0 0;
  max-width: 100%;
  background: linear-gradient(90deg, var(--accent), #ffa04a);
  border-radius: 999px;
}
.forum-rank__label { display: block; margin: 7px 0 0; font-size: 12px; color: var(--mute); }
.forum-rank__label--top { margin-top: 12px; }
.forum-rank__achs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
}
.forum-rank__ach {
  padding: 5px 10px 6px;
  background: var(--raised);
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  cursor: default;
}
.forum-rank__ach--done {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  border-style: solid;
  color: var(--text);
}
.forum-rank__sum { margin: 10px 0 0; font-size: 12px; }

/* ── Личная статистика: GitHub-график ───────────────────────────────────── */

.forum-ghlog { margin-top: 14px; }
.forum-ghlog .panel__head { align-items: baseline; }
.forum-ghlog__chats { margin-left: auto; font-size: 12px; color: var(--dim); }
.forum-ghlog__wrap {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.forum-ghlog__labels {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  font-size: 9px;
  color: var(--dim);
  text-align: right;
  line-height: 12px;
}
.forum-ghlog__grid {
  display: flex;
  gap: 3px;
}
.forum-ghlog__column {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
}
.gh-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.gh-cell--0 { opacity: .55; }
.gh-cell--1 { background: color-mix(in srgb, var(--accent) 30%, var(--raised)); border-color: transparent; }
.gh-cell--2 { background: color-mix(in srgb, var(--accent) 55%, var(--raised)); border-color: transparent; }
.gh-cell--3 { background: color-mix(in srgb, var(--accent) 78%, var(--raised)); border-color: transparent; }
.gh-cell--4 { background: var(--accent); border-color: transparent; }

/* ── Опросы ─────────────────────────────────────────────────────────────── */

.forum-poll {
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.forum-poll__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.forum-poll__question {
  font-weight: 700;
  font-size: 14px;
}
.forum-poll__total {
  font-size: 12px;
  color: var(--mute);
}
.forum-poll__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.forum-poll__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.forum-poll__opt:hover { border-color: var(--accent); }
.forum-poll__opt.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.forum-poll__mark {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.forum-poll__mark input {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.forum-poll__check {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dim);
  border-radius: 4px;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.forum-poll__mark input:checked + .forum-poll__check {
  border-color: var(--accent);
  background: var(--accent);
}
.forum-poll__mark input[type="radio"] + .forum-poll__check { border-radius: 50%; }
.forum-poll__mark input[type="radio"]:checked + .forum-poll__check::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(-50%, -50%);
}
.forum-poll__mark input[type="checkbox"]:checked + .forum-poll__check::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  transform: translate(-50%, -50%);
}
.forum-poll__text {
  flex: 1;
  font-size: 14px;
}
.forum-poll__bar {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  width: var(--pct);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.forum-poll__opt.is-on .forum-poll__bar,
.forum-poll__opt:hover .forum-poll__bar { opacity: 1; }
.forum-poll__num {
  font-size: 12px;
  color: var(--mute);
  white-space: nowrap;
}
.forum-poll__hint {
  margin: 8px 0 0;
  font-size: 12px;
}

.forum-poll-creator {
  margin: 10px 0;
}
.forum-poll-form {
  margin-top: 8px;
  padding: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.forum-poll-options .forum-field { margin-bottom: 6px; }
.forum-field--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.forum-field--inline input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* ── Лидерборд ────────────────────────────────────────────────────────────── */

.forum-lead {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 58%);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.forum-lead__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: .02em;
}
.forum-lead__icon { font-size: 15px; line-height: 1; }
.forum-lead .seg--lead { margin-left: auto; }
@media (max-width: 620px) {
  .forum-lead__head { flex-wrap: wrap; }
  .forum-lead .seg--lead { margin-left: 0; }
}
.forum-lead__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.forum-lead__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
}
.forum-lead__row:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.forum-lead__rank {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mute);
  background: var(--raised);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.forum-lead__rank--top {
  color: #14100c;
  background: var(--accent);
  border-color: transparent;
}
.forum-lead__who {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.forum-lead__who b { font-size: 13.5px; overflow-wrap: anywhere; }
.forum-lead__who .forum-nick { color: var(--text); }
.forum-lead__who small { font-size: 11.5px; color: var(--mute); }
.forum-lead__score {
  flex: none;
  font-size: 12px;
  color: var(--dim);
}
.forum-lead__score .num { font-size: 13px; color: var(--text); }
.forum-lead__empty { margin: 10px 0 2px; font-size: 13px; }


/* -- ����� (wiki) ----------------------------------------------------------- */

.guides-page .panel__head { margin-bottom: 12px; }
.guides-page .panel__head h1 { font-size: clamp(20px, 3vw, 26px); margin: 4px 0 0; }

.guide-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.guide-chip {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
  background: var(--raised);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.guide-chip:hover { color: var(--text); border-color: var(--accent); }
.guide-chip.is-on {
  color: #14100c;
  background: var(--accent);
  border-color: transparent;
}

.guide-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  transition: border-color .15s;
}
.guide-search:focus-within { border-color: var(--accent); }
.guide-search svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--mute);
  stroke-width: 2;
  stroke-linecap: round;
}
.guide-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
.guide-search input::placeholder { color: var(--mute); }
.guide-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Кварт в боковой колонке форума ───────────────────────────────────────── */
.quart-next { display: grid; gap: 8px; }
.quart-next .quart-timer { justify-content: space-between; margin-top: 0; }
.quart-next__more {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.quart-next__more b { font-size: 13px; }
.quart-next__more:hover { text-decoration: underline; }

.quart-banner {
  display: grid;
  gap: 7px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--raised);
}
.quart-banner__title { font-size: 15px; line-height: 1.3; }
.quart-banner p { margin: 0; font-size: 12px; line-height: 1.5; }
.quart-banner__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide-card a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.guide-card a:hover { border-color: var(--accent); transform: translateY(-1px); }
.guide-card__cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-card__title { font-size: 15px; line-height: 1.35; }
.guide-card__by { font-size: 11.5px; }
.guide-list-wrap { margin-top: 14px; }

.guide-composer {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin: 12px 0;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.guide-composer .forum-composer__actions { display: flex; gap: 8px; }
.guide-composer textarea { min-height: 180px; resize: vertical; }
.guide-composer .forum-error { display: block; }

.guide-detail .back { display: inline-block; margin-bottom: 10px; }
.guide-detail h1 { font-size: clamp(20px, 3vw, 27px); margin: 6px 0 2px; }
.guide-detail .guide-card__cat { display: inline-block; margin-top: 10px; }
.guide-content { margin-top: 16px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.guide-content p { margin: 0 0 10px; }
.guide-content blockquote {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--raised);
  border-radius: 6px;
  font-size: 14px;
}
.guide-content pre {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--raised);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}
.guide-content code { font-family: var(--mono, monospace); font-size: 13px; }
.guide-detail__acts { margin-top: 20px; }