/* Lava-Reborn поверх aurora_dark.
   --------------------------------------------------------------
   Слой один, но задач у него две.

   Первая — цвет. Родитель собран на Bootstrap 5, а тот отдаёт палитру
   переменными, поэтому перекрашивать его правило за правилом не нужно:
   достаточно подменить переменные, и цвет разойдётся по компонентам сам.

   Вторая — разметка страниц, перерисованных по макетам (design/): шапка,
   заголовок страницы, список разделов, подвал. Там своя сетка, к
   бутстраповской она отношения не имеет.

   Числа взяты из макетов и совпадают с токенами дизайн-системы сайта
   (design/tokens.css). Литеральные цвета есть только в блоке :root.
   -------------------------------------------------------------- */

:root {
    --lava-bg-void: #0a0908;
    --lava-bg-base: #14110e;
    --lava-bg-panel: #1c1815;
    --lava-bg-raised: #26211c;
    --lava-bg-inset: #0f0d0b;
    --lava-line: #332c25;
    --lava-line-strong: #7d7160;
    --lava-ink: #efe8d9;
    --lava-ink-muted: #b3a894;
    --lava-ink-faint: #8a8071;
    --lava-brand: #d9a441;
    --lava-brand-hover: #e8b75b;
    --lava-on-brand: #14110e;
    --lava-danger: #e2543a;
    --lava-success: #8bb75a;
    --lava-steel: #7fa0b0;
    --lava-focus: #f0c46a;

    /* Один шрифт на весь форум, включая заголовки. Моноширинный — только
       на числах: счётчиках, номерах сообщений, датах. Эти две роли не
       смешиваются (требование из design/README.md). */
    --lava-font: "Onest", system-ui, sans-serif;
    --lava-mono: "JetBrains Mono", ui-monospace, monospace;

    --lava-gutter: 80px;
    --lava-max: 1280px;

    /* --- то же самое в переменных Bootstrap --- */
    --bs-font-sans-serif: var(--lava-font);
    --bs-font-monospace: var(--lava-mono);

    --bs-body-bg: var(--lava-bg-base);
    --bs-body-bg-rgb: 20, 17, 14;
    --bs-body-color: var(--lava-ink);
    --bs-body-color-rgb: 239, 232, 217;

    --bs-emphasis-color: var(--lava-ink);
    --bs-emphasis-color-rgb: 239, 232, 217;
    --bs-heading-color: var(--lava-ink);

    --bs-secondary-color: var(--lava-ink-muted);
    --bs-secondary-color-rgb: 179, 168, 148;
    --bs-secondary-bg: var(--lava-bg-panel);
    --bs-secondary-bg-rgb: 28, 24, 21;
    --bs-tertiary-color: var(--lava-ink-faint);
    --bs-tertiary-color-rgb: 138, 128, 113;
    --bs-tertiary-bg: var(--lava-bg-raised);
    --bs-tertiary-bg-rgb: 38, 33, 28;

    --bs-border-color: var(--lava-line);
    --bs-border-color-translucent: var(--lava-line);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 8px;

    --bs-primary: var(--lava-brand);
    --bs-primary-rgb: 217, 164, 65;
    --bs-secondary: var(--lava-line-strong);
    --bs-secondary-rgb: 125, 113, 96;
    --bs-success: var(--lava-success);
    --bs-success-rgb: 139, 183, 90;
    --bs-danger: var(--lava-danger);
    --bs-danger-rgb: 226, 84, 58;
    --bs-info: var(--lava-steel);
    --bs-info-rgb: 127, 160, 176;
    --bs-warning: var(--lava-brand);
    --bs-warning-rgb: 217, 164, 65;
    --bs-light: var(--lava-bg-raised);
    --bs-light-rgb: 38, 33, 28;
    --bs-dark: var(--lava-ink);
    --bs-dark-rgb: 239, 232, 217;

    --bs-link-color: var(--lava-brand);
    --bs-link-color-rgb: 217, 164, 65;
    --bs-link-hover-color: var(--lava-brand-hover);
    --bs-link-hover-color-rgb: 232, 183, 91;

    --bs-code-color: var(--lava-success);
    --bs-highlight-bg: var(--lava-brand);
    --bs-highlight-color: var(--lava-on-brand);
    --bs-focus-ring-color: rgba(240, 196, 106, 0.35);

    --bs-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --bs-box-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
}

/* Фокус с клавиатуры — сплошное кольцо. Убирать его дизайн-система
   запрещает, поэтому задано один раз и на всё. */
:focus-visible {
    outline: 2px solid var(--lava-focus);
    outline-offset: 2px;
}

body {
    background: var(--lava-bg-base);
    font-family: var(--lava-font);
}

.lava-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Полоса контента: поля страницы 80px, сам контент не шире 1280.
   Родительский .container при этом не мешает — мы его обнуляем ниже. */
.lava-wrap {
    max-width: var(--lava-max);
    margin: 0 auto;
}

/* --- шапка сайта ------------------------------------------------------- */

.lava-head {
    background: var(--lava-bg-panel);
    border-bottom: 1px solid var(--lava-line);
}

.lava-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 72px;
    padding: 0 var(--lava-gutter);
    box-sizing: content-box;
}

/* Марка — картинка целиком, как на сайте. Ширину не задаём: высота в
   разметке, остальное считает сам файл. */
.lava-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.lava-brand img,
.lava-foot__brand img {
    width: auto;
}

.lava-brand:hover,
.lava-foot__brand:hover {
    opacity: 0.85;
}

.lava-sitenav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-right: auto;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.lava-sitenav a {
    color: var(--lava-ink-muted);
    text-decoration: none;
    white-space: nowrap;
}

.lava-sitenav a:hover,
.lava-sitenav a[aria-current="page"] {
    color: var(--lava-brand);
}

.lava-head__side {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Счётчик игроков в сети. Зелёный в системе — это состояние «в сети»,
   кнопкой он не бывает. */
.lava-online {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--lava-line);
    border-radius: 999px;
    background: var(--lava-bg-inset);
    white-space: nowrap;
}

.lava-online[hidden] {
    display: none;
}

.lava-online__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--lava-success);
}

.lava-online__value {
    font-family: var(--lava-mono);
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink);
}

.lava-online__label {
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

.lava-online.is-stale .lava-online__dot {
    background: var(--lava-ink-faint);
}

.lava-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 6px;
    border: 1px solid var(--lava-brand);
    border-radius: 4px;
    color: var(--lava-ink);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.lava-me:hover {
    color: var(--lava-ink);
    border-color: var(--lava-brand-hover);
}

.lava-me--guest {
    padding: 0 14px;
}

.lava-me__pic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--lava-bg-inset);
    border-radius: 2px;
}

/* --- полоса форума ------------------------------------------------------ */

/* Пункты берутся родительскими макросами (там права и расширения), а вид
   свой: тёмная полоса 52px, значки в одну линию с подписью, у текущего
   раздела золотое подчёркивание во всю высоту полосы. */
.lava-bar {
    background: var(--lava-bg-inset);
    border-bottom: 1px solid var(--lava-line);
}

.lava-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 52px;
    padding: 0 var(--lava-gutter);
    box-sizing: content-box;
}

.lava-bar__nav {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 52px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-bar__nav .nav-item {
    display: flex;
    align-items: stretch;
}

.lava-bar__nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-bottom: 2px solid transparent;
    color: var(--lava-ink-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.lava-bar__nav .nav-link:hover {
    color: var(--lava-ink);
}

.lava-bar__nav .nav-link.active {
    color: var(--lava-brand);
    border-bottom-color: var(--lava-brand);
}

/* Значки у пунктов от расширений приходят шрифтовые, у наших — свои
   контуры; и те и другие выравниваем одинаково. */
.lava-bar__nav .nav-link svg,
.lava-bar__nav .nav-link i {
    flex: none;
}

.lava-bar__me {
    display: flex;
    align-items: center;
}

.lava-bar__mebtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--lava-line);
    border-radius: 4px;
    color: var(--lava-ink-muted);
    font-family: var(--lava-font);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

.lava-bar__mebtn:hover {
    border-color: var(--lava-line-strong);
    color: var(--lava-ink);
}

/* --- заголовок страницы ------------------------------------------------ */

.lava-pagehead {
    border-bottom: 1px solid var(--lava-line);
}

.lava-pagehead__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 40px var(--lava-gutter) 28px;
    box-sizing: content-box;
}

.lava-pagehead__title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lava-eyebrow {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-brand);
}

.lava-pagehead h1 {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lava-ink);
}

.lava-pagehead__tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lava-input {
    width: 280px;
    max-width: 100%;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line-strong);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    color: var(--lava-ink);
    font-family: var(--lava-font);
    font-size: 15px;
    line-height: 24px;
}

.lava-input::placeholder {
    color: var(--lava-ink-faint);
}

.lava-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--lava-font);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Первичное действие всегда латунное. Красный — только у разрушительного,
   зелёный кнопкой не бывает (design/README.md). */
.lava-btn--primary {
    background: var(--lava-brand);
    border-color: var(--lava-brand);
    color: var(--lava-on-brand);
}

.lava-btn--primary:hover {
    background: var(--lava-brand-hover);
    border-color: var(--lava-brand-hover);
    color: var(--lava-on-brand);
}

.lava-btn--ghost {
    background: transparent;
    border-color: var(--lava-line-strong);
    color: var(--lava-ink);
}

.lava-btn--ghost:hover {
    border-color: var(--lava-brand);
    color: var(--lava-ink);
}

/* --- список разделов --------------------------------------------------- */

.lava-index {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 var(--lava-gutter) 40px;
    box-sizing: content-box;
}

.lava-cat {
    background: var(--lava-bg-panel);
    border: 1px solid var(--lava-line);
    border-radius: 8px;
    overflow: hidden;
}

.lava-cat__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    background: var(--lava-bg-raised);
    border-bottom: 1px solid var(--lava-line);
}

.lava-cat__head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lava-ink);
}

.lava-cat__head h2 a {
    color: inherit;
    text-decoration: none;
}

.lava-cat__count {
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

/* Пять колонок: значок, название, темы, сообщения, последнее сообщение. */
.lava-forums__head,
.lava-forum {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 90px 90px 320px;
    column-gap: 20px;
    align-items: center;
}

.lava-forums__head {
    padding: 12px 24px;
    border-bottom: 1px solid var(--lava-line);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-ink-faint);
}

.lava-forums {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-forum {
    padding: 16px 24px;
    border-bottom: 1px solid var(--lava-line);
}

.lava-forums li:last-child {
    border-bottom: 0;
}

/* Есть новые сообщения — строка приподнята, а значок залит латунью.
   Подложка одна ничего не сказала бы: разницу несёт значок. */
.lava-forum.is-unread {
    background: var(--lava-bg-raised);
}

.lava-forum__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line);
}

.lava-forum.is-unread .lava-forum__icon {
    border-color: var(--lava-brand);
}

.lava-forum__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lava-forum__name > a {
    font-size: 17px;
    line-height: 26px;
    font-weight: 500;
    color: var(--lava-ink);
    text-decoration: none;
}

.lava-forum__name > a:hover {
    color: var(--lava-brand);
}

.lava-forum__desc {
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-forum__desc p {
    margin: 0;
}

.lava-forum__mods {
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink-faint);
}

/* Моноширинный — только на числах. */
.lava-num {
    font-family: var(--lava-mono);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--lava-ink);
    text-align: right;
}

.lava-forums__head .lava-num {
    font-family: var(--lava-font);
}

.lava-forum__last {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lava-forum__when,
.lava-forum__who,
.lava-forum__none {
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

.lava-forum__topic {
    font-size: 14px;
    line-height: 20px;
    color: var(--lava-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lava-forum__topic:hover {
    color: var(--lava-brand);
}

/* --- легенда значков --------------------------------------------------- */

.lava-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    background: var(--lava-bg-panel);
    border: 1px solid var(--lava-line);
    border-radius: 8px;
}

.lava-legend__items {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lava-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-linkbtn {
    padding: 0;
    background: none;
    border: 0;
    color: var(--lava-brand);
    font-family: var(--lava-font);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
}

/* --- статистика -------------------------------------------------------- */

.lava-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding: 16px 24px;
}

.lava-stats__grid p {
    margin: 0;
    padding: 4px 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--lava-ink-muted);
}

/* --- подвал ------------------------------------------------------------ */

/* По макету `lava-reborn-forum/*.html`: марка с подписью на четырёх
   колонках из двенадцати, колонка ссылок на двух, под ними черта и
   строка прав. Тот же подвал у сайта. */
.lava-foot {
    margin-top: auto;
    background: var(--lava-bg-void);
    border-top: 1px solid var(--lava-line);
}

.lava-foot__inner {
    padding: 48px var(--lava-gutter);
    box-sizing: content-box;
}

.lava-foot__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
}

.lava-foot__about {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.lava-foot__brand {
    display: inline-flex;
    align-items: center;
}

.lava-foot__tagline {
    margin: 0;
    max-width: 320px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-faint);
}

.lava-foot__col {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Надзаголовок колонки в подвале приглушённый, а не латунный, как в
   заголовках страниц: в подвале он подпись к списку, а не акцент. */
.lava-foot__col-title {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-ink-faint);
}

.lava-foot__col a {
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
    text-decoration: none;
}

.lava-foot__col a:hover {
    color: var(--lava-brand);
}

.lava-foot__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--lava-line);
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

@media (max-width: 900px) {
    .lava-foot__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }

    .lava-foot__about,
    .lava-foot__col {
        grid-column: auto;
    }
}

/* Родительская обёртка ужимала страницу своей шириной и полями — у нас
   за это отвечает .lava-wrap. Заодно делаем её колонкой во всю высоту
   окна: у FlaskBB подвал прижимается классом `mt-auto`, а прижиматься
   ему не к чему — родитель не флексом, и на короткой странице под
   подвалом оставалась полоса пустоты. */
.flaskbb-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 0;
}

/* Подвал FlaskBB держит старым приёмом: `html` с min-height, сам подвал
   абсолютом у низа, а место под него зарезервировано нижним полем в
   60px у `body`. Прижимаем мы флексом выше, а поле осталось — и под
   подвалом висела полоса пустоты ровно в эти 60px, видная только когда
   домотаешь страницу до конца. */
body {
    margin-bottom: 0;
}

.flaskbb-layout > .container {
    max-width: none;
    padding: 0;
}

/* Страницы, ещё не перерисованные по макетам, лежат в #page-content без
   нашей обёртки, и после обнуления .container упирались в края окна.
   Поля им даёт это правило. */
#page-content {
    max-width: var(--lava-max);
    margin: 0 auto;
    padding: 24px var(--lava-gutter) 40px;
    box-sizing: content-box;
}

/* А перерисованные задают ширину и поля сами — там есть и полосы во всю
   ширину окна, которым любые поля снаружи только мешают. */
#page-content:has(> .lava-wrap),
#page-content:has(> .lava-pagehead) {
    max-width: none;
    padding: 0;
}

/* Кнопка отправки у FlaskBB зелёная (btn-success), а главное действие в
   нашей палитре всегда золотое. Зелёный остаётся состоянию «в сети» и
   сообщениям об удаче. */
.btn-success {
    --bs-btn-bg: var(--lava-brand);
    --bs-btn-border-color: var(--lava-brand);
    --bs-btn-color: var(--lava-on-brand);
    --bs-btn-hover-bg: var(--lava-brand-hover);
    --bs-btn-hover-border-color: var(--lava-brand-hover);
    --bs-btn-hover-color: var(--lava-on-brand);
    --bs-btn-active-bg: var(--lava-brand-hover);
    --bs-btn-active-border-color: var(--lava-brand-hover);
    --bs-btn-active-color: var(--lava-on-brand);
    --bs-btn-disabled-bg: var(--lava-line);
    --bs-btn-disabled-border-color: var(--lava-line);
    --bs-btn-disabled-color: var(--lava-ink-faint);
}

/* --- страницы, ещё не перерисованные по макетам ------------------------ */

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

.category .category-meta,
.forum .forum-meta {
    background-color: var(--lava-bg-raised);
    border-bottom-color: var(--lava-line);
}

.category .category-row:not(:last-child),
.forum .forum-row:not(:last-child),
.post-row:not(:last-child) {
    border-bottom-color: var(--lava-line);
}

.category .category-row.hover:hover,
.forum .forum-row.hover:hover {
    background-color: var(--lava-bg-raised);
}

.post-row {
    background: var(--lava-bg-panel);
}

.post-box {
    background: var(--lava-bg-inset);
    border-left-color: var(--lava-line);
}

.flaskbb-breadcrumb {
    border-color: var(--lava-line);
}

.textcomplete-item:hover,
.textcomplete-item.active,
.sidebar .nav-item > a:hover,
.sidebar .nav-item > a:focus,
.sidebar .nav-item > .active {
    background-color: var(--lava-bg-raised);
    color: var(--lava-ink);
}

.card {
    --bs-card-bg: var(--lava-bg-panel);
    --bs-card-border-color: var(--lava-line);
    --bs-card-cap-bg: var(--lava-bg-raised);
    --bs-card-color: var(--lava-ink);
}

.card-header {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-ink);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--lava-ink);
    --bs-table-border-color: var(--lava-line);
    --bs-table-striped-bg: var(--lava-bg-inset);
    --bs-table-striped-color: var(--lava-ink);
    --bs-table-hover-bg: var(--lava-bg-raised);
    --bs-table-hover-color: var(--lava-ink);
}

.list-group {
    --bs-list-group-bg: var(--lava-bg-panel);
    --bs-list-group-border-color: var(--lava-line);
    --bs-list-group-color: var(--lava-ink);
    --bs-list-group-action-hover-bg: var(--lava-bg-raised);
    --bs-list-group-action-hover-color: var(--lava-ink);
}

.btn-primary {
    --bs-btn-bg: var(--lava-brand);
    --bs-btn-border-color: var(--lava-brand);
    --bs-btn-color: var(--lava-on-brand);
    --bs-btn-hover-bg: var(--lava-brand-hover);
    --bs-btn-hover-border-color: var(--lava-brand-hover);
    --bs-btn-hover-color: var(--lava-on-brand);
    --bs-btn-active-bg: var(--lava-brand-hover);
    --bs-btn-active-border-color: var(--lava-brand-hover);
    --bs-btn-active-color: var(--lava-on-brand);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--lava-line-strong);
    --bs-btn-color: var(--lava-ink);
    --bs-btn-hover-bg: var(--lava-bg-raised);
    --bs-btn-hover-border-color: var(--lava-brand);
    --bs-btn-hover-color: var(--lava-ink);
}

.btn-danger {
    --bs-btn-bg: var(--lava-danger);
    --bs-btn-border-color: var(--lava-danger);
    --bs-btn-color: var(--lava-on-brand);
}

.form-control,
.form-select {
    background-color: var(--lava-bg-inset);
    border-color: var(--lava-line-strong);
    color: var(--lava-ink);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--lava-bg-inset);
    border-color: var(--lava-brand);
    color: var(--lava-ink);
}

.form-control::placeholder {
    color: var(--lava-ink-faint);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--lava-bg-panel);
    --bs-dropdown-border-color: var(--lava-line);
    --bs-dropdown-color: var(--lava-ink);
    --bs-dropdown-link-color: var(--lava-ink);
    --bs-dropdown-link-hover-bg: var(--lava-bg-raised);
    --bs-dropdown-link-hover-color: var(--lava-ink);
    --bs-dropdown-link-active-bg: var(--lava-brand);
    --bs-dropdown-link-active-color: var(--lava-on-brand);
    --bs-dropdown-divider-bg: var(--lava-line);
    --bs-dropdown-header-color: var(--lava-ink-faint);
}

.pagination {
    --bs-pagination-color: var(--lava-ink-muted);
    --bs-pagination-bg: var(--lava-bg-panel);
    --bs-pagination-border-color: var(--lava-line);
    --bs-pagination-hover-color: var(--lava-brand);
    --bs-pagination-hover-bg: var(--lava-bg-raised);
    --bs-pagination-hover-border-color: var(--lava-brand);
    --bs-pagination-focus-bg: var(--lava-bg-raised);
    --bs-pagination-active-bg: var(--lava-brand);
    --bs-pagination-active-border-color: var(--lava-brand);
    --bs-pagination-active-color: var(--lava-on-brand);
    --bs-pagination-disabled-color: var(--lava-ink-faint);
    --bs-pagination-disabled-bg: var(--lava-bg-inset);
    --bs-pagination-disabled-border-color: var(--lava-line);
}

.popover {
    --bs-popover-bg: var(--lava-bg-panel);
    --bs-popover-border-color: var(--lava-line);
    --bs-popover-header-bg: var(--lava-bg-raised);
    --bs-popover-body-color: var(--lava-ink);
}

.form-check-input {
    --bs-form-check-bg: var(--lava-bg-inset);
    border-color: var(--lava-line-strong);
}

.form-check-input:checked {
    background-color: var(--lava-brand);
    border-color: var(--lava-brand);
}

blockquote {
    background: var(--lava-bg-inset);
    border-left: 2px solid var(--lava-line-strong);
    color: var(--lava-ink-muted);
    padding: 12px 16px;
}

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

/* --- узкие экраны ------------------------------------------------------ */

/* Мобильных макетов дизайнер не рисовал и просил сверстать по смыслу:
   счётчики уходят под название раздела, колонка последнего сообщения —
   следом за ними. */
@media (max-width: 1100px) {
    :root {
        --lava-gutter: 24px;
    }

    .lava-forums__head {
        display: none;
    }

    .lava-forum {
        grid-template-columns: 44px minmax(0, 1fr);
        row-gap: 8px;
    }

    .lava-forum .lava-num,
    .lava-forum__last {
        grid-column: 2;
        text-align: left;
    }

    .lava-forum .lava-num::after {
        color: var(--lava-ink-faint);
        font-family: var(--lava-font);
        font-size: 12px;
    }

    .lava-forum .lava-num:nth-of-type(1)::after {
        content: " тем";
    }

    .lava-forum .lava-num:nth-of-type(2)::after {
        content: " сообщений";
    }
}

@media (max-width: 760px) {
    .lava-sitenav,
    .lava-online__label {
        display: none;
    }

    .lava-head__inner,
    .lava-pagehead__inner,
    .lava-foot__inner {
        flex-wrap: wrap;
        height: auto;
        gap: 16px;
    }

    .lava-pagehead h1 {
        font-size: 28px;
        line-height: 32px;
    }

    .lava-stats__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- правки после сверки с макетом ------------------------------------- */

/* Заголовки колонок в макете прижаты влево, в отличие от самих чисел:
   числа — по правому краю, подписи — по левому. */
.lava-forums__head .lava-num {
    text-align: left;
}

/* --- хлебные крошки и полосы действий ---------------------------------- */

/* Нужны не только теме: тот же вид у списка тем, участников и
   отслеживаемого. */

.flaskbb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: 20px;
}

.flaskbb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--lava-ink-faint);
    padding-right: 8px;
}

.flaskbb-breadcrumb .breadcrumb-item.active {
    color: var(--lava-ink-faint);
}

.controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.controls-row .btn {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.controls-row .btn-outline-dark {
    background: transparent;
    border-color: var(--lava-line-strong);
    color: var(--lava-ink);
}

.controls-row .btn-outline-dark:hover {
    background: var(--lava-bg-raised);
    border-color: var(--lava-brand);
    color: var(--lava-ink);
}

.controls-row .pagination {
    margin: 0;
}

/* --- общая страница со списком ----------------------------------------- */

/* Одна и та же рамка у участников, поиска, подписок и темы: поля
   страницы, колонка в 1280 и отступ между блоками. */
.lava-page,
.lava-topic {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px var(--lava-gutter) 40px;
    box-sizing: content-box;
}

.lava-panel__count {
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

.lava-panel__count .lava-num {
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-muted);
}

/* Заголовок колонки. Латунный — значит по нему можно отсортировать. */
.lava-th {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-ink-faint);
    text-decoration: none;
}

.lava-th--sortable {
    color: var(--lava-brand);
}

.lava-th--sortable:hover {
    color: var(--lava-brand-hover);
}

/* Стрелка показывает, куда отсортирует нажатие; у текущей колонки —
   куда отсортировано сейчас. */
.lava-th--sortable svg {
    flex: none;
    transition: transform 0.12s;
}

.lava-th--sortable.is-asc svg {
    transform: rotate(180deg);
}

.lava-th--sortable.is-active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lava-input--sm {
    width: 260px;
    height: 32px;
    font-size: 14px;
    line-height: 20px;
}

/* Строка поиска в полосе действий мельче, чем кнопки над темой. */
.lava-controls__search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lava-controls__search .lava-btn {
    height: 32px;
    padding: 0 20px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- формы ------------------------------------------------------------- */

/* Колонка «подпись сверху, поле под ней» — общая для входа, создания
   темы и поиска (макеты `lava-reborn-forum/*.html`). */
.lava-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    padding: 24px;
}

.lava-form--wide {
    max-width: none;
}

.lava-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lava-label {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--lava-ink-faint);
}

.lava-input--block {
    width: 100%;
}

.lava-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    line-height: 20px;
}

.lava-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-check__box {
    width: 16px;
    height: 16px;
    accent-color: var(--lava-brand);
}

.lava-btn--block {
    width: 100%;
}

.lava-form__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--lava-line);
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-errors {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-danger);
}

/* Поле с ошибкой обводим: причина отказа должна быть видна и на поле, а
   не только строчкой под ним. */
.lava-input.is-invalid {
    border-color: var(--lava-danger);
}

/* --- сообщения формы и системы ----------------------------------------- */

/* Полоса сообщений живёт выше содержимого, вне нашей обёртки, и без
   этого правила упиралась бы в края окна. */
#flashed-messages:has(.alert) {
    max-width: var(--lava-max);
    margin: 0 auto;
    padding: 24px var(--lava-gutter) 0;
    box-sizing: content-box;
}

.alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 14px 20px;
    background: var(--lava-bg-panel);
    border: 1px solid var(--lava-steel);
    border-radius: 8px;
    color: var(--lava-ink);
    font-size: 15px;
    line-height: 24px;
}

/* Цвет рамки — это роль сообщения, а не украшение: сталь служебное,
   зелёное «получилось», красное «не получилось», латунь «осторожно». */
.alert-success {
    border-color: var(--lava-success);
}

.alert-danger,
.alert-error {
    border-color: var(--lava-danger);
}

.alert-warning {
    border-color: var(--lava-brand);
}

.alert .btn-close {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--lava-ink-faint);
    opacity: 1;
    filter: none;
}

.alert .btn-close:hover {
    color: var(--lava-ink);
}

/* --- создание темы ----------------------------------------------------- */

.lava-form--roomy {
    gap: 20px;
}

/* Вложения: поле выбора файлов в пунктирной рамке, как в макете. Сам
   ввод остаётся родным — подменять его на кнопку с обработчиком значит
   ломать и перетаскивание, и клавиатуру. */
.lava-drop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    background: var(--lava-bg-inset);
    border: 1px dashed var(--lava-line-strong);
    border-radius: 4px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-faint);
}

.lava-drop > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.lava-drop label {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--lava-ink-faint);
}

.lava-drop input[type="file"] {
    flex-grow: 1;
    color: var(--lava-ink-faint);
    font-family: var(--lava-font);
    font-size: 13px;
}

.lava-drop input[type="file"]::file-selector-button {
    height: 36px;
    margin-right: 12px;
    padding: 0 20px;
    background: transparent;
    border: 1px solid var(--lava-line-strong);
    border-radius: 4px;
    color: var(--lava-ink);
    font-family: var(--lava-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.lava-drop input[type="file"]::file-selector-button:hover {
    border-color: var(--lava-brand);
}

.lava-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--lava-line);
}

.lava-form__buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lava-form__buttons .lava-btn--quiet {
    padding: 0 20px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

/* --- поиск ------------------------------------------------------------- */

.lava-select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line-strong);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    color: var(--lava-ink);
    font-family: var(--lava-font);
    font-size: 15px;
    line-height: 24px;
}

.lava-select.is-invalid {
    border-color: var(--lava-danger);
}

.lava-search__row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.lava-search__query {
    flex-grow: 1;
    min-width: 240px;
}

.lava-search__where {
    width: 220px;
}

.lava-search__row .lava-btn {
    flex: none;
    padding: 0 20px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lava-search__more {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--lava-line);
}

/* Переключатель подробного отбора: не кнопка с рамкой, а строка со
   стрелкой — она открывает то, что под ней, а не совершает действие. */
.lava-disclose {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--lava-brand);
    font-family: var(--lava-font);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
}

.lava-disclose:hover {
    color: var(--lava-brand-hover);
}

.lava-disclose svg {
    transition: transform 0.12s;
}

.lava-disclose svg.is-open {
    transform: rotate(180deg);
}

.lava-search__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 16px;
}

.lava-hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink-faint);
}

@media (max-width: 900px) {
    .lava-search__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lava-search__where {
        width: 100%;
    }
}

/* --- участники --------------------------------------------------------- */

.lava-members__head,
.lava-members__row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 220px 200px 120px;
    column-gap: 20px;
    align-items: center;
    padding: 14px 24px;
}

.lava-members__head {
    padding: 12px 24px;
    border-bottom: 1px solid var(--lava-line);
}

.lava-members {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-members__row + .lava-members__row {
    border-top: 1px solid var(--lava-line);
}

.lava-members__row:hover {
    background: var(--lava-bg-raised);
}

.lava-members__id {
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-faint);
    text-align: left;
}

.lava-members__name {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: var(--lava-brand);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.lava-members__name:hover {
    color: var(--lava-brand-hover);
}

.lava-members__when {
    font-size: 14px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-members__posts {
    font-size: 14px;
    line-height: 20px;
    color: var(--lava-ink);
    text-align: right;
}

@media (max-width: 900px) {
    /* Числовые колонки уходят под имя — так велит README макетов. */
    .lava-members__head {
        display: none;
    }

    .lava-members__row {
        grid-template-columns: 40px minmax(0, 1fr);
        row-gap: 4px;
    }

    .lava-members__when,
    .lava-members__posts {
        grid-column: 2;
        text-align: left;
    }
}

/* --- отслеживаемые темы ------------------------------------------------ */

.lava-tracked__head,
.lava-tracked__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 120px 120px 280px;
    column-gap: 20px;
    align-items: center;
    padding: 14px 24px;
}

.lava-tracked__head {
    padding: 12px 24px;
    border-bottom: 1px solid var(--lava-line);
}

.lava-th--right {
    justify-self: end;
}

.lava-tracked__row + .lava-tracked__row {
    border-top: 1px solid var(--lava-line);
}

.lava-tracked__row:hover {
    background: var(--lava-bg-raised);
}

.lava-tracked__topic,
.lava-tracked__last {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lava-tracked__name {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: var(--lava-brand);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.lava-tracked__by {
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink-faint);
}

.lava-tracked__by a {
    color: var(--lava-ink-muted);
    text-decoration: none;
}

.lava-tracked__by a:hover {
    color: var(--lava-brand);
}

.lava-tracked__stat {
    justify-self: end;
    font-size: 14px;
    line-height: 20px;
    color: var(--lava-ink);
}

.lava-tracked__last > a {
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
    text-decoration: none;
}

.lava-tracked__last > a:hover {
    color: var(--lava-brand);
}

/* Полоса действий внизу карточки. */
.lava-panel__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--lava-line);
}

/* Приглушённая кнопка: действие есть, но звать к нему не надо. */
.lava-btn--quiet {
    background: transparent;
    border-color: var(--lava-line);
    color: var(--lava-ink-faint);
}

.lava-btn--quiet:hover {
    border-color: var(--lava-line-strong);
    color: var(--lava-ink);
}

/* --- страница участника ------------------------------------------------ */

.lava-member {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 260px;
    column-gap: 24px;
    padding: 24px;
}

.lava-member__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background: var(--lava-bg-inset);
    border-radius: 8px;
    overflow: hidden;
}

.lava-member__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lava-member__pic--empty {
    border: 1px dashed var(--lava-line-strong);
    font-family: var(--lava-mono);
    font-size: 11px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

.lava-member__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.lava-member__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lava-member__name h1 {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    color: var(--lava-ink);
    overflow-wrap: anywhere;
}

/* Состояние участника — таблетка, как счётчик в шапке. */
.lava-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line);
    border-radius: 999px;
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-muted);
}

.lava-member__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

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

.lava-btn--danger:hover {
    background: var(--lava-danger);
    color: var(--lava-bg-base);
}

/* Характеристики на странице участника крупнее, чем в карточке автора
   под сообщением: здесь это основное содержимое, а не подпись. */
.lava-facts--wide dt,
.lava-facts--wide dd {
    font-size: 13px;
    line-height: 20px;
}

.lava-facts--wide {
    gap: 8px;
}

.lava-facts--wide dd.lava-num {
    font-size: 14px;
    line-height: 20px;
}

/* Вкладки участника. Разметку даёт родительский хук, поэтому цепляемся
   за его классы `nav`/`nav-item`/`nav-link`. */
.lava-tabs {
    padding: 0 24px;
    background: var(--lava-bg-raised);
    border-top: 1px solid var(--lava-line);
    border-bottom: 1px solid var(--lava-line);
}

.lava-tabs__list {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-tabs__list .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 4px;
    border-bottom: 2px solid transparent;
    color: var(--lava-ink-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
}

.lava-tabs__list .nav-link:hover {
    color: var(--lava-ink);
}

.lava-tabs__list .nav-link.active {
    color: var(--lava-brand);
    border-bottom-color: var(--lava-brand);
}

.lava-member__body {
    padding: 8px 0;
}

.lava-prose {
    padding: 24px;
    font-size: 15px;
    line-height: 24px;
    color: var(--lava-ink);
}

.lava-prose > :last-child {
    margin-bottom: 0;
}

.lava-prose--sig {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--lava-line);
    color: var(--lava-ink-muted);
}

@media (max-width: 900px) {
    .lava-member {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }
}

/* --- панель управления ------------------------------------------------- */

.lava-admin {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 24px;
    padding: 24px;
}

.lava-side__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-side .nav-header {
    padding: 0 12px 8px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-ink-faint);
}

/* Значок и подпись идут рядом слева, стрелка прижата к правому краю.
   Разводить их `space-between` нельзя: у пунктов движка есть значок, и
   подпись уезжала от него на середину строки. */
.lava-side .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px;
    border-radius: 4px;
    color: var(--lava-ink-muted);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    overflow: hidden;
}

.lava-side .nav-link > i {
    flex: none;
    width: 16px;
    text-align: center;
}

.lava-side .nav-link::after {
    margin-left: auto;
}

.lava-side .nav-link:hover {
    background: var(--lava-bg-raised);
    color: var(--lava-ink);
}

/* Текущая страница залита латунью — в панели это единственная подсветка.
   У раздела с вложенными страницами заливки нет, только цвет: иначе
   подсвечены разом и раздел, и страница внутри него: движок считает
   активными обоих. */
.lava-side .nav-link.active {
    background: var(--lava-brand);
    color: var(--lava-on-brand);
    font-weight: 600;
}

.lava-side .tree-parent-row .nav-link.active {
    background: transparent;
    color: var(--lava-brand);
}

/* Стрелка вправо у каждого пункта, как в макете: пункт ведёт дальше.
   У пунктов с вложенными разделами стрелка своя, раскрывающая, —
   там нашу убираем, иначе их две подряд. */
.lava-side .tree-parent-row .nav-link::after {
    display: none;
}

.lava-side .nav-link::after {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}

.lava-side .tree-parent-row {
    display: flex;
    align-items: center;
}

.lava-side .tree-parent-row .nav-link {
    flex-grow: 1;
}

.lava-side .tree-toggle {
    padding: 0 8px;
    background: none;
    border: 0;
    color: var(--lava-ink-faint);
    cursor: pointer;
}

.lava-side .tree-children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 2px 12px;
    padding: 0;
    list-style: none;
}

.lava-side .tree-children .nav-link {
    height: 32px;
    font-size: 13px;
}

.lava-admin__content {
    min-width: 0;
}

.lava-admin__stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Полоса состояния. Цвет рамки — это роль: зелёная «всё в порядке»,
   латунная «требует внимания». */
.lava-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
    background: var(--lava-bg-panel);
    border: 1px solid var(--lava-line);
    border-radius: 8px;
}

.lava-note svg {
    flex: none;
    margin-top: 3px;
}

.lava-note--ok {
    border-color: var(--lava-success);
    color: var(--lava-success);
}

.lava-note--warn {
    border-color: var(--lava-brand);
    color: var(--lava-brand);
}

.lava-note__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-note__title {
    font-size: 15px;
    line-height: 24px;
    color: var(--lava-ink);
}

.lava-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
}

.lava-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: var(--lava-bg-raised);
    border: 1px solid var(--lava-line);
    border-radius: 8px;
}

.lava-tile__num {
    font-family: var(--lava-mono);
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
    color: var(--lava-brand);
}

.lava-tile__label {
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
}

.lava-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 20px;
}

.lava-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.lava-col h3 {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lava-ink);
}

.lava-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.lava-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lava-line);
}

.lava-rows dt {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--lava-ink-muted);
}

.lava-rows dd {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink);
    text-align: right;
}

@media (max-width: 900px) {
    /* Боковое меню панели сворачивается в список сверху — так велит
       README макетов. */
    .lava-admin {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    .lava-tiles,
    .lava-cols {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }
}

/* --- пустые состояния и ошибки ----------------------------------------- */

/* Пусто — не «данных нет», а объяснение, что здесь появится и как это
   получить (требование README макетов). */
.lava-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
}

.lava-empty__title {
    font-size: 15px;
    line-height: 24px;
    color: var(--lava-ink-muted);
}

.lava-empty__text {
    max-width: 460px;
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-faint);
}

.lava-oops {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 24px;
    text-align: center;
}

.lava-oops__code {
    font-family: var(--lava-mono);
    font-size: 64px;
    line-height: 68px;
    font-weight: 600;
    color: var(--lava-brand);
}

.lava-oops h1 {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    color: var(--lava-ink);
}

.lava-oops p {
    margin: 0;
    max-width: 520px;
    font-size: 15px;
    line-height: 24px;
    color: var(--lava-ink-muted);
}

.lava-oops__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .lava-tracked__head {
        display: none;
    }

    .lava-tracked__row {
        grid-template-columns: 40px minmax(0, 1fr);
        row-gap: 4px;
    }

    .lava-tracked__stat,
    .lava-tracked__last {
        grid-column: 2;
        justify-self: start;
    }
}

/* --- тема и сообщения по макету design/topic.html ---------------------- */

/* Разметка страницы темы у нас своя (themes/.../forum/topic.html): макет
   меняет не оформление, а состав — у автора появились бейдж группы и
   список характеристик, у сообщения своя полоса метаданных, действия
   ушли вправо и стали подписями. Здесь только вид. */

/* Хлебные крошки. */
.lava-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
}

.lava-crumbs a {
    color: var(--lava-brand);
    text-decoration: none;
}

.lava-crumbs a:hover {
    color: var(--lava-brand-hover);
}

.lava-crumbs > span {
    color: var(--lava-ink-faint);
}

/* Полосы действий над темой и под ней. */
.lava-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
}

.lava-controls__pages,
.lava-controls__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lava-uplink {
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
    text-decoration: none;
}

.lava-uplink:hover {
    color: var(--lava-brand);
}

/* Страницы: подпись и кнопки-номера, без рамки вокруг всего блока. */
.lava-controls .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-controls .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--lava-line);
    border-radius: 4px;
    color: var(--lava-ink-muted);
    font-family: var(--lava-mono);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
}

.lava-controls .page-link:hover {
    border-color: var(--lava-line-strong);
    color: var(--lava-ink);
}

.lava-controls .page-item.active .page-link {
    background: var(--lava-brand);
    border-color: var(--lava-brand);
    color: var(--lava-on-brand);
    font-weight: 600;
}

/* Первым пунктом идёт не номер, а подпись «Страницы» — она не кнопка. */
.lava-controls .page-item .page-link:has(.pages-label) {
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--lava-ink-faint);
    font-family: var(--lava-font);
    font-size: 13px;
    line-height: 20px;
}

.pages-label {
    color: var(--lava-ink-faint);
}

/* Размеры кнопок из макета темы: в полосе действий 36px, у отправки
   ответа 48px. Базовый .lava-btn (40px) остаётся для главной. */
.lava-btn--sm {
    height: 36px;
    gap: 8px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 18px;
}

.lava-btn--primary.lava-btn--sm {
    padding: 0 18px;
    font-weight: 600;
}

.lava-btn--big {
    height: 48px;
    padding: 0 32px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    box-shadow: var(--bs-box-shadow-sm);
}

/* Закрытая тема: кнопки нет, есть надпись. Выглядеть нажимаемой она не
   должна. */
.lava-btn--locked {
    border-color: var(--lava-line);
    color: var(--lava-ink-faint);
    cursor: default;
}

/* Карточка: тема и форма ответа собраны одинаково. */
.lava-panel {
    background: var(--lava-bg-panel);
    border: 1px solid var(--lava-line);
    border-radius: 8px;
    box-shadow: var(--bs-box-shadow);
    overflow: hidden;
}

.lava-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    background: var(--lava-bg-raised);
    border-bottom: 1px solid var(--lava-line);
}

.lava-panel__head h1 {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    color: var(--lava-ink);
}

.lava-panel__head--plain {
    padding: 14px 24px;
}

.lava-panel__head--plain h2 {
    margin: 0;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lava-ink);
}

.lava-topic__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-faint);
    white-space: nowrap;
}

.lava-topic__meta .lava-num {
    font-size: 12px;
    line-height: 16px;
    color: var(--lava-ink-muted);
}

/* Сообщение: карточка автора слева, тело справа. */
.lava-post {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: stretch;
    border-bottom: 1px solid var(--lava-line);
}

.lava-post:last-child {
    border-bottom: 0;
}

.lava-post__author {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-right: 1px solid var(--lava-line);
}

.lava-post__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 72px;
    height: 72px;
    background: var(--lava-bg-inset);
    border-radius: 4px;
    overflow: hidden;
}

.lava-post__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Аватара может не быть. В макете на его месте подписанная рамка: так
   колонка не прыгает по высоте от сообщения к сообщению. */
.lava-post__pic--empty {
    border: 1px dashed var(--lava-line-strong);
    font-family: var(--lava-mono);
    font-size: 11px;
    line-height: 16px;
    color: var(--lava-ink-faint);
}

.lava-post__ident {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lava-post__who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--lava-ink);
    overflow-wrap: anywhere;
}

.lava-post__who a {
    color: var(--lava-brand);
    text-decoration: none;
}

.lava-post__who a:hover {
    color: var(--lava-brand-hover);
}

.lava-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--lava-ink-faint);
}

.lava-dot--on {
    background: var(--lava-success);
}

.lava-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 1px 6px;
    border: 1px solid var(--lava-brand);
    border-radius: 2px;
    color: var(--lava-brand);
    font-size: 12px;
    line-height: 16px;
}

.lava-badge--muted {
    border-color: var(--lava-line-strong);
    color: var(--lava-ink-faint);
}

.lava-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.lava-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.lava-facts dt {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--lava-ink-faint);
}

.lava-facts dd {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink-muted);
}

.lava-facts dd.lava-num {
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink);
}

.lava-post__adminactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lava-post__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lava-post__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--lava-line);
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-faint);
}

.lava-post__meta a,
.lava-post__meta small {
    color: var(--lava-ink-faint);
    text-decoration: none;
}

.lava-post__meta a:hover {
    color: var(--lava-brand);
}

.lava-post__number {
    margin-left: auto;
    font-family: var(--lava-mono);
    font-size: 13px;
    line-height: 20px;
}

/* Сплошной текст читается длинными абзацами, поэтому здесь свой кегль. */
.lava-post__text {
    flex-grow: 1;
    padding: 24px;
    font-size: 17px;
    line-height: 28px;
    color: var(--lava-ink);
}

.lava-post__text > :last-child {
    margin-bottom: 0;
}

.post-attachments-heading {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-ink-faint);
}

.post-signature {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--lava-line);
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-faint);
}

/* Действия под сообщением — подписи, а не кнопки. */
.lava-post__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 24px;
    background: var(--lava-bg-raised);
    border-top: 1px solid var(--lava-line);
}

.lava-post__actions .post-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lava-post__actions form {
    display: inline-flex;
}

.lava-post__actions a,
.lava-linkbtn {
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--lava-font);
    font-size: 13px;
    line-height: 20px;
    color: var(--lava-ink-muted);
    text-decoration: none;
    cursor: pointer;
}

.lava-post__actions a:hover,
.lava-linkbtn:hover {
    color: var(--lava-brand);
}

/* Красный только у разрушительного действия — так велит дизайн-система. */
.lava-linkbtn--danger,
.lava-linkbtn--danger:hover {
    color: var(--lava-danger);
}

/* У гостя под сообщением нет ни одного действия, и полоса осталась бы
   пустой лентой. */
.lava-post__actions:not(:has(a)):not(:has(button)) {
    display: none;
}

/* Форма ответа. Поведение панели разметки — от FlaskBB (за имена
   элементов и data-атрибуты цепляется его app.js), здесь только вид:
   три группы кнопок в рамках, предпросмотр и справка отдельно, поле под
   ними. */
.lava-reply__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 24px;
}

.lava-tools,
.lava-tools markdown-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.lava-tools__group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line);
    border-radius: 4px;
}

.lava-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 2px;
    color: var(--lava-ink-muted);
    font-family: var(--lava-font);
    font-size: 14px;
    cursor: pointer;
}

.lava-tool:hover {
    background: var(--lava-bg-raised);
    color: var(--lava-ink);
}

/* Буквенные кнопки показывают начертание собой же. */
.lava-tool--text {
    color: var(--lava-ink);
    font-weight: 600;
}

.lava-tool--i {
    font-weight: 400;
    font-style: italic;
}

.lava-tool--s {
    font-weight: 400;
    text-decoration: line-through;
}

/* Справка — с такой же рамкой, как предпросмотр рядом, но без подписи. */
.lava-tool--help {
    width: 40px;
    height: 40px;
    border: 1px solid var(--lava-line);
    border-radius: 4px;
}

.preview-btn {
    padding: 0 16px;
    font-size: 13px;
    line-height: 18px;
}

/* Подпись поля стоит вплотную к нему, а не на общем отступе колонки. */
.lava-reply__label {
    margin-bottom: -10px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--lava-ink-faint);
}

.flaskbb-editor {
    padding: 12px;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line-strong);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    color: var(--lava-ink);
    font-family: var(--lava-font);
    font-size: 15px;
    line-height: 24px;
    resize: vertical;
}

.flaskbb-editor::placeholder {
    color: var(--lava-ink-faint);
}

.invalid-feedback {
    color: var(--lava-danger);
}

.preview {
    padding: 12px;
    background: var(--lava-bg-inset);
    border: 1px solid var(--lava-line);
    border-radius: 4px;
}

.lava-reply__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.lava-reply__hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--lava-ink-faint);
}

/* Кнопки администратора в карточке автора: в макете их нет вовсе, и
   заметнее самого сообщения они быть не должны. */
.lava-post__adminactions .btn {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
}

.lava-post__adminactions .btn-primary {
    background: transparent;
    border-color: var(--lava-line-strong);
    color: var(--lava-ink-muted);
}

.lava-post__adminactions .btn-primary:hover {
    background: transparent;
    border-color: var(--lava-brand);
    color: var(--lava-ink);
}

@media (max-width: 900px) {
    /* Макетов для узких экранов нет; по смыслу карточка автора встаёт
       над сообщением — так в design/README.md и предложено. */
    .lava-post {
        grid-template-columns: minmax(0, 1fr);
    }

    .lava-post__author {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 24px;
        border-right: 0;
        border-bottom: 1px solid var(--lava-line);
    }

    .lava-post__pic {
        width: 48px;
        height: 48px;
    }

    .lava-facts {
        flex-direction: row;
        gap: 16px;
    }

    .lava-facts > div {
        gap: 6px;
    }

    .lava-controls {
        flex-wrap: wrap;
    }
}