/* solacium — основное окно стилей */
/*---------------------------------------------------------------------------*/

/*--- Подключение второго окна стилей ---*/
/* @import url(style_cs.1789310515.css); */

/*--- Иконки (бесплатная замена Font Awesome Pro) ---*/
/* @import обязан идти до любых правил, иначе браузер его отбрасывает */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');

/*--- Шрифты ---*/
/* Файлы загружены на форум, ссылки проставлены — заполнять ничего не нужно.
   Moisette: три начертания из четырнадцати — Regular, Italic и SemiBold.
   Курсив теперь НАСТОЯЩИЙ: раньше было одно начертание, и браузер
   рисовал наклон сам, ломая рисунок букв.
   Остальные веса лежат файлами в архиве — подключаются по тому же образцу.
   Оба шрифта подрезаны до кириллицы и латиницы; в Pragmatica дописаны Ё и ё
   (глифы были, но подшиты по старым кодам cp1251). */
@font-face {
    font-family: "Moisette";
    src: url(https://forumstatic.ru/files/001c/c8/7a/63770.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Moisette";
    src: url(https://forumstatic.ru/files/001c/c8/7a/52212.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Moisette";
    src: url(https://forumstatic.ru/files/001c/c8/7a/66610.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pragmatica";
    src: url(https://forumstatic.ru/files/001c/c8/7a/29719.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/*--- Переменные ---*/
:root {
    --font-base: "Pragmatica", Arial, sans-serif;
    --font-title: "Moisette", Georgia, serif;
    --font-accent: "Moisette", Georgia, serif;   /* акцидентная антиква в мини-профиле */

    --pun-width: 1050px;
    --pun-padding: 30px;     /* боковые поля контента */
    --nav-height: 40px;      /* плашка верхнего меню */
    --header-height: 310px;  /* картинка шапки — её реальная высота */
    --profile-width: 220px;  /* мини-профиль в посте */

    --body-img: url(https://upforme.ru/uploads/001c/c8/7a/2/453021.png);
    --header-img: url(https://forumstatic.ru/files/001c/c8/7a/95177.png);

    /* палитра: тёплый серый, тёмный крем, серо-коричневый (на тон темнее макета) */
    --body-color: #5f5650;          /* подложка: видна, пока грузится фоновое фото */
    --pun-color: #d0c7bc;           /* полотно форума */
    --container-color: #bdb2a6;     /* подложки второго плана: шапка списков, статистика, форма ответа */
    --box-color: #ddd5cb;           /* карточки, самый светлый уровень */
    --nav-color: #bdb2a6;           /* плашка меню */
    --nav-color--text: #3f332e;     /* текст меню и текст в шапке */
    --button-color: #5a4f49;        /* залитые кнопки, подсказки, ползунок */
    --button-color--text: #f7f4f0;
    --text-color: #3b3531;
    --text-color--pale: #4c4440;
    --link-color: #5a463f;
    --hover-color: #3a2c26;
    --accent-color: #8d8076;        /* точки, полоски, галочки */
    --accent-color--text: #141210;  /* текст на акценте */
    --line-color: rgb(59 53 49 / 34%);     /* рамки полей, точки-иконки */
    --line-soft: rgb(59 53 49 / 18%);      /* линии-разделители.
                                              transparent — выключить совсем */
    --shadow: 0 2px 10px rgb(95 82 82 / 7%);
    --pun-gap: 30px;  /* отступ форума от верха и низа окна */
    --radius: 18px;   /* контейнеры */
    --radius-box: 11px;  /* карточки внутри */
}

/*--- Скрыть ненужное ---*/
#pun-title,
#pun-break1,
#pun-break2,
#pun-break3,
#pun-break4,
#pun-main h1,
#pun-navlinks h2,
#pun-ulinks h2,
#pun-status h2,
#pun-stats h2,
.category h2 .catleft,
.category h2 .catright,
.punbb .divider hr,
.punbb p.crumbs strong,
.punbb p.crumbs em,
#pun-index #pun-main thead,
#pun-index #pun-main .tc2,
#pun-index #pun-main .tc3 {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    left: -9999px !important;
    font-size: 0 !important;
    overflow: hidden !important;
}

.punbb .container::after,
.punbb .linksb::after,
.punbb .post-box::after,
.punbb .post-links ul::after {
    content: none !important;
    clear: both !important;
    display: block !important;
    height: 0 !important;
}

/*--- Тело ---*/
/* Межстрочный интервал наследуется, фокус клавиатуры остаётся видимым. */
* { margin: 0; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { line-height: 1.5; }
:focus-visible {
    outline: 2px solid var(--hover-color);
    outline-offset: 3px;
}

body {
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--text-color);
    background-color: var(--body-color);
    background-image: var(--body-img);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#pun {
    width: min(100%, var(--pun-width));
    margin: var(--pun-gap) auto;
    box-sizing: border-box;
    background: var(--pun-color);
    position: relative;
}

/* боковые поля НЕ на .punbb, иначе меню и баннер не растянутся во всю ширину */
.punbb {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

#pun-ulinks,
#pun-status,
#pun-crumbs1,
#pun-crumbs2,
#pun-main,
#pun-stats,
#pun-about,
#html-footer {
    box-sizing: border-box;
    padding-left: var(--pun-padding);
    padding-right: var(--pun-padding);
}

#pun-main { min-height: 300px; }

/* списки интерфейса — без маркеров */
#pun-navlinks ul,
#pun-ulinks ul,
#pun-stats ul,
#pun-about ul,
#MyBookmarks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--link-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, opacity .15s ease-in-out;
}

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

/* рекламные блоки rusff — скрывать нельзя, просто отступы */
#pun-main + .section,
#pun-stats + .section,
.punbb > .section[style] {
    margin: 18px 0;
}

/*--- Меню навигации: плашка во всю ширину ---*/
#pun-navlinks {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

#pun-navlinks .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 28px;
    width: 100%;
    height: var(--nav-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--nav-color);
}

#pun-navlinks li {
    display: inline-flex;
    padding: 0;
}

#pun-navlinks a {
    color: var(--nav-color--text);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

#pun-navlinks a:hover {
    color: var(--nav-color--text);
    opacity: .65;
}

/* счётчик заявок в кастомном пункте меню */
#navSolacium #solReqCnt {
    background: var(--pun-color) !important;
    color: var(--link-color) !important;
}

/*--- Шапка: картинка идёт сразу под плашкой меню ---*/
#pun-navlinks::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-height);
    /* cover, а не «100% auto»: высота блока фиксирована, и когда полотно
       уже 1050px, сжатая по ширине картинка оставляла снизу пустую полосу */
    background: var(--header-img) no-repeat top center / cover;
}

/* текстовый блок шапки (вёрстка в HTML-верх), лежит поверх картинки */
#html-header .head-inner {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: var(--header-height);
    box-sizing: border-box;
    padding: 42px 60px 42px 580px;
    z-index: 2;
    pointer-events: none;   /* чтобы блок не перекрывал ссылки под ним */
}

#html-header .head-inner a,
#html-header .head-inner .head-links {
    pointer-events: auto;
}

#html-header .head-links {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    padding: 10px 0;
    border-top: 1px solid var(--nav-color--text);
    border-bottom: 1px solid var(--nav-color--text);
    font-size: 12px;
    text-transform: lowercase;
}

#html-header .head-links a { color: var(--nav-color--text); }
#html-header .head-links a:hover { opacity: .65; }

#html-header .head-links a + a::before {
    content: "//";
    margin: 0 12px;
    opacity: .5;
}

#html-header .head-title {
    margin: 52px 0 0;
    font-size: 44px;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--nav-color--text);
    line-height: 1;
}

#html-header .head-subtitle {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--nav-color--text);
    opacity: .85;
}

#html-header .head-quote {
    margin: 56px 0 0;
    padding-left: 34px;
    position: relative;
    font-size: 12px;
    font-style: italic;
    line-height: 165%;
    color: var(--nav-color--text);
    max-width: 300px;
}

#html-header .head-quote::before {
    content: "\201C";
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 46px;
    line-height: 1;
    opacity: .75;
}

/*--- Юзер-меню с разделителями // ---*/
#pun-ulinks .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    padding: 18px 0 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 11px;
    text-transform: lowercase;
}

#pun-ulinks li { display: inline-block; padding: 0; }

#pun-ulinks li + li::before {
    content: "//";
    margin: 0 12px;
    color: var(--line-color);
    font-size: 11px;
}

#pun-ulinks a { color: var(--text-color); }
#pun-ulinks a:hover { color: var(--link-color); }

/* бабл уведомлений */
#pun-ulinks .bubble {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 5px;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--accent-color--text);
    font-size: 11px;
    line-height: 1;
}

/*--- Приветствие ---*/
#pun-status {
    width: 100%;
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--text-color);
}

#pun-status .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    box-sizing: border-box;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

#pun-status .item2 { display: none; }   /* последний визит — лишний в макете */
#pun-status a { color: var(--link-color); }
#pun-status strong { font-weight: 500; }

/*--- Хлебные крошки ---*/
#pun-crumbs1,
#pun-crumbs2 {
    width: 100%;
    text-align: center;
    font-size: 12px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

#pun-crumbs1 { margin: 20px 0 24px; }
#pun-crumbs2 { margin: 24px 0 0; }

#pun-crumbs1 .container::before,
#pun-crumbs2 .container::before {
    content: "\00BB\00A0";
    color: var(--accent-color);
}

/*--- Категории оформлены ниже, в блоке «SOLACIUM: ОБНОВЛЁННОЕ ОФОРМЛЕНИЕ» ---*/

/*--- Таблицы: база ---*/
table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
}

td { padding: 0; }

/*--- Таблица на главной ---*/
#pun-index #pun-main .category tbody tr {
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
    box-sizing: border-box;
    padding: 12px;
    position: relative;
    border-bottom: 1px solid var(--line-soft);

    margin: 0 0 8px;
}

#pun-index #pun-main .category tbody tr:first-of-type { padding-top: 12px; }

#pun-index #pun-main .category tbody tr:last-of-type {
    padding-bottom: 12px;
    border-bottom: none;

    margin-bottom: 0;
}

#pun-index #pun-main .tcl .intd {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

/* иконка новых сообщений превращается в вертикальную полоску-акцент */
#pun-index #pun-main .tcl .intd .icon {
    flex-shrink: 0;
    width: 3px;
    height: auto;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
    background: var(--line-color);
    box-shadow: none;
    opacity: .5;
}

#pun-index #pun-main .tcl .intd .icon.inew {
    background: var(--accent-color);
    opacity: 1;
}

#pun-index .tclcon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 145%;
    font-size: 12px;
    flex-grow: 1;
}

#pun-index .tclcon > br { display: none; }

.tclcon h3 {
    margin: 0 0 5px;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.2;
}

.tclcon h3 a { color: var(--text-color); }
.tclcon h3 a:hover { color: var(--link-color); }

/* описание форума: в самом форуме это голый текст.
   Чтобы получить оформление как в макете — оборачивать в описании форума
   в <div class="tclcon-text"> и <div class="tclcon-links"> (см. snippets.html) */
.tclcon-text {
    color: var(--text-color);
    font-size: 10px;
    line-height: 1.3;
}

/* кнопки-ссылки под описанием */
.tclcon-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 7px 0 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 10px;
    text-transform: lowercase;

    letter-spacing: .3px;
}

.tclcon-links a { color: var(--link-color); }
.tclcon-links a:hover { color: var(--hover-color); }

.tclcon-links a + a::before {
    content: "//";
    margin: 0 8px;
    opacity: .6;
}

/*--- Последний пост: разделитель и круглая аватарка ---*/
#pun-index #pun-main .tcr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: flex-end;
    text-align: right;
    gap: 4px 14px;
    padding-left: 26px;
    border-left: 1px solid var(--line-soft);
    min-height: 46px;
}

#pun-index #pun-main .tcr .lastpost-link {
    grid-column: 1;
    grid-row: 1;
    font-size: 12px;
    font-weight: 500;
    line-height: 110%;
}

#pun-index #pun-main .tcr a.lastpost-link { color: var(--text-color); }
#pun-index #pun-main .tcr a.lastpost-link:hover { color: var(--link-color); }

#pun-index #pun-main .tcr .lastpost {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-index #pun-main .tcr .lastpost-link,
#pun-index #pun-main .tcr .lastpost {
    display: block;
    max-width: 240px;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pun-index #pun-main .tcr br { display: none; }

#pun-index .user-avatar {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    float: none;
    position: relative;
}

#pun-index .user-avatar,
#pun-index .user-avatar .avatar-image {
    border-radius: 50%;
}

#pun-index .user-avatar .avatar-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background-position: center;
    background-size: cover;
    float: none;
    filter: none;
}

/* индикатор «в сети» на аватарке */
#pun-index .user-avatar .isonline {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border: 2px solid var(--box-color);
    border-radius: 50%;
    background: var(--accent-color);
}

/*--- Статистика ---*/
#pun-stats .statscon {
    box-sizing: border-box;
    background: transparent;
    padding: 20px 0 0;
    border-top: 1px solid var(--line-soft);
}

#pun-stats .container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 0;
    margin: 0;
    font-size: 11px;
    text-transform: lowercase;
    line-height: 150%;
}

#pun-stats li { padding: 0; }

#pun-stats .onlinelist,
#pun-stats .users_24h {
    width: 100%;
    color: var(--text-color--pale);
}

#pun-stats .onlinelist span,
#pun-stats .users_24h span {
    display: block;
    margin-top: 3px;
}

#pun-stats strong { font-weight: 500; }

/*--- Закладки ---*/
/* Кнопку движок сам ставит фиксированной вкладкой в левый верхний угол окна
   и рисует красной ленточкой. Положение не трогаем — только перекрашиваем:
   собственные стили движка подключаются позже, поэтому !important */
#BookmCntToggle { z-index: 999 !important; }

#BookmCntToggle.default-style {
    background: var(--box-color) !important;
    border-left: none !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgb(60 45 45 / 20%) !important;
    color: var(--accent-color) !important;
}

/* без красной полосы слева ленточку внутри надо сдвинуть на её ширину */
#BookmCntToggle.default-style::before { margin-left: 4px !important; }
#BookmCntToggle.default-style::after { left: 4px !important; }

/* панель закладок выезжает слева — скругляем только правые углы */
#MyBookmarks {
    box-sizing: border-box;
    margin-top: 50px;
    padding: 16px 18px;
    background: var(--box-color) !important;
    border-radius: 0 var(--radius-box) var(--radius-box) 0;
    box-shadow: 0 4px 20px rgb(60 45 45 / 20%) !important;
    font-size: 11px;
}

#MyBookmarks h2 {
    margin: 0 0 10px;
    font-family: var(--font-title);
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--text-color);
}

#MyBookmarks .container { margin-top: 0 !important; }

/*--- Боковые вкладки справа (вёрстка в HTML-низ) ---*/
.side-tabs {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.side-tabs a {
    writing-mode: vertical-rl;
    box-sizing: border-box;
    padding: 14px 7px;
    background: var(--accent-color);
    color: var(--accent-color--text);
    border-radius: 8px 0 0 8px;
    font-size: 11px;
    text-transform: lowercase;
    letter-spacing: .5px;
}

.side-tabs a:hover {
    background: var(--button-color);
    color: var(--accent-color--text);
}

/*--- Подвал ---*/
#pun-about {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 22px;
    text-align: center;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .8px;
    opacity: .7;
}

#pun-about, #pun-about a { color: var(--text-color); }

/*-------------- ТЕМА --------------*/

/*--- Шапка темы, пагинация, ссылки ---*/
#pun-viewtopic #pun-main > h1 { display: none; }

.topic h2 {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--text-color--pale);
    text-align: center;
}

.topic h2 .item1 { display: none; }

.linkst,
.linksb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
    margin: 0 0 16px;
    font-size: 11px;
    text-transform: lowercase;
}

.linksb { margin: 16px 0 0; }

.linkst .postlink,
.linksb .postlink { order: -1; }

.linkst .pagelink,
.linksb .pagelink { color: var(--text-color--pale); }

.linkst .pagelink strong,
.linksb .pagelink strong { font-weight: 500; color: var(--text-color); }

.postlink a,
.subscribelink a {
    display: inline-block;
    padding: 6px 14px;
    box-sizing: border-box;
    background: transparent;
    color: var(--link-color);
    border: 1px solid var(--line-color);
    border-radius: 3px;
}

.postlink a:hover,
.subscribelink a:hover {
    border-color: var(--accent-color);
    color: var(--hover-color);
}

.subscribelink { margin-left: auto; }

#s-block input {
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--line-color);
    border-radius: 3px;
    background: var(--box-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 11px;
}

/* виджет rusff.live — в макете его нет */
#pun-live-rusff { display: none; }

/*-------------- ПОСТ --------------*/

.post {
    margin: 0 0 22px;
}

/* шапка поста: номер и дата */
.post h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

.post h3 > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.post h3 strong {
    order: 2;
    font-weight: 500;
    color: var(--accent-color);
}

.post h3 .permalink {
    order: 1;
    color: var(--text-color--pale);
}

.post h3 .permalink:hover { color: var(--link-color); }

.post h3 .sharelink { display: none; }

/* тело поста: профиль слева, текст справа.
   ВАЖНО: в разметке .container содержит ТРИ блока — .post-author, .post-body и .post-links
   (ссылки лежат рядом с телом поста, а не внутри него), поэтому грид, а не флекс:
   профиль занимает обе строки, тело и ссылки идут в правой колонке друг под другом */
.post .container {
    display: grid;
    grid-template-columns: var(--profile-width) minmax(0, 1fr);
    align-items: start;
    column-gap: 18px;
    row-gap: 0;
}

.post .container > .post-author { grid-column: 1; grid-row: 1; }
.post .container > .post-body { grid-column: 2; grid-row: 1; }

/* ссылки — подвал поста во всю ширину: если растянуть профиль на обе строки,
   его высота раздувает первую строку и ссылки провисают вниз */
.post .container > .post-links { grid-column: 1 / -1; grid-row: 2; }

/*--- Мини-профиль ---*/
.post .post-author {
    width: 100%;
}

.post .post-author ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
    padding: 0 0 18px;
    list-style: none;
    box-sizing: border-box;
    background: var(--box-color);
    border-radius: 10px;
    overflow: hidden;   /* чтобы плашка с именем легла в скругление */
}

.post .post-author li {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* поля старого дизайна и лишнее в макете */
.post-author .pa-fld1,
.post-author .pa-fld2,
.post-author .pa-fld3,
.post-author .pa-fld4,
.post-author .pa-fld5,
.post-author .pa-ip,
.post-author .pa-reg,        /* в ЛС движок добавляет «Зарегистрирован» — в макете его нет */
.post-author .pa-last-visit,
.post-author .pa-author .icons-search,
.post-author .pa-author .acchide {
    display: none;
}

/* имя: тёмная плашка во всю ширину карточки */
.post .post-author .pa-author {
    padding: 10px 12px 8px;
    margin: 0 0 14px;
    background: var(--nav-color);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;

    margin-bottom: 8px;
}

.post-author .pa-author a { color: var(--nav-color--text); }
.post-author .pa-author a:hover { color: var(--accent-color); }

/* строка под именем */
.post .post-author .pa-title {
    padding: 0 16px;
    margin: 0 0 14px;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    color: var(--text-color);

    margin-bottom: 8px;
}

/* аватар */
.post-author .pa-avatar.item2 {
    padding: 0 16px;
    margin: 0 0 8px;
    text-align: center;
    line-height: 0;
}

.post-author .pa-avatar.item2 img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--pun-color);
}

/* сообщений / репутация — две колонки.
   Селектор намеренно длиннее общего «.post .post-author li», иначе width:100% перебивает */
.post .post-author .pa-posts,
.post .post-author .pa-respect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 50%;
    padding: 0 8px;
    box-sizing: border-box;
    font-family: var(--font-accent);
    font-size: 17px;
    font-weight: 600;
    font-style: italic;
    color: var(--text-color);
}

/* подписи: у движка это «Сообщений:» и «Репутация:» — двоеточие гасим */
.post-author .pa-posts .fld-name,
.post-author .pa-respect .fld-name {
    font-size: 0;
    line-height: 1;
}

.post-author .pa-posts .fld-name::before {
    content: "сообщений";
}

.post-author .pa-posts .fld-name::before,
.post-author .pa-respect .fld-name a {
    font-family: var(--font-accent);
    font-size: 15px;
    font-weight: 500;
    font-style: italic;
    text-transform: lowercase;
    color: var(--link-color);
}

.post-author .pa-respect .fld-name a:hover { color: var(--hover-color); }

/* «активен» внизу карточки */
.post .post-author .pa-online {
    margin: 16px 0 0;
    text-align: center;
    text-transform: lowercase;
    font-family: var(--font-accent);
    font-size: 16px;
    font-style: italic;
    color: var(--link-color);
}

.post-author .pa-online strong { font-weight: 500; }

/*--- Тело поста ---*/
.post .post-body {
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0 0 4px;
}

.post .post-box { min-width: 0; }

.post-content {
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
    word-wrap: break-word;
}

.post-content p { margin: 0 0 8px; }
.post-content p:last-child { margin-bottom: 0; }

.post-content img { max-width: 100%; }

.post-content a { text-decoration: none; }
.post-content a:hover { text-decoration: underline; }

/*--- Подпись ---*/
.post-sig {
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line-soft);
    font-size: 11px;
    line-height: 150%;
    color: var(--text-color--pale);
}

/*--- Оценка поста ---*/
.post-rating {
    margin: 12px 0 0;
    font-size: 11px;
    text-align: right;
    color: var(--text-color--pale);
}

.post-rating p { margin: 0; }

/*--- Ссылки под постом ---*/
/* в ряду две смысловые группы подряд: сначала про пользователя (pl-email profile/pm/email),
   затем про сообщение (pl-delete, pl-edit, pl-quote, pl-reports).
   Ловим стык — первый не-pl-email сразу после pl-email — и разводим группы по краям */
.post-links {
    margin: 14px 0 0;
}

.post-links ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 12px 4px 0;
    list-style: none;
    border-top: 1px solid var(--line-soft);
    font-size: 11px;
    text-transform: lowercase;
}

.post-links li { padding: 0; }

.post-links li + li::before {
    content: "//";
    margin: 0 8px;
    color: var(--line-color);
    font-size: 11px;
}

.post-links a { color: var(--text-color--pale); }
.post-links a:hover { color: var(--link-color); }

.post-links .acchide { display: none; }

.post-links li.pl-email + li:not(.pl-email) {
    margin-left: auto;
    padding-left: 16px;
}

.post-links li.pl-email + li:not(.pl-email)::before { content: none; }

/*--- Модерское меню и «тему просматривают» ---*/
#topic-modmenu,
#topic-users-in {
    box-sizing: border-box;
    margin: 0 0 12px;
    font-size: 11px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

#topic-modmenu .container,
#topic-users-in .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    margin: 0;
}

#topic-modmenu select {
    padding: 5px 8px;
    border: 1px solid var(--line-color);
    border-radius: 3px;
    background: var(--box-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 11px;
}

/*--- Форма быстрого ответа ---*/
#post-form {
    box-sizing: border-box;
    margin: 30px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--line-soft);
}

#post-form h2 {
    margin: 0 0 14px;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
}

#post-form fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#post-form legend { display: none; }

#post-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    background: var(--box-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 160%;
    resize: vertical;
}

#post-form textarea:focus { border-color: var(--accent-color); }

#form-buttons table { width: auto; }

#form-buttons td {
    width: 26px;
    height: 26px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s ease-in-out;
}

#form-buttons td:hover { opacity: 1; }

.formsubmit {
    display: flex;
    gap: 10px;
    margin: 14px 0 0;
}

.button {
    padding: 8px 18px;
    box-sizing: border-box;
    border: 1px solid var(--line-color);
    border-radius: 3px;
    background: transparent;
    color: var(--link-color);
    font-family: var(--font-base);
    font-size: 11px;
    text-transform: lowercase;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, opacity .15s ease-in-out;
}

.button:hover {
    border-color: var(--accent-color);
    color: var(--hover-color);
}

/* «Отправить» — единственная заметная кнопка на странице */
.button.submit {
    border-color: var(--button-color);
    background: var(--button-color);
    color: var(--button-color--text);
}

.button.submit:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
    color: var(--button-color--text);
}

/*--- Всплывающие окна репутации и жалобы ---*/
#pun-reputation .inner,
#pun-report .inner {
    box-sizing: border-box;
    background: var(--box-color);
    border-radius: 10px;
    box-shadow: 0 6px 30px rgb(0 0 0 / 25%);
    overflow: hidden;
}

#pun-reputation h1,
#pun-report h1 {
    margin: 0;
    padding: 12px 16px;
    background: var(--button-color);
    color: var(--button-color--text);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 18px;
    font-weight: 600;
}

#pun-reputation textarea,
#pun-report textarea {
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--line-color);
    border-radius: 6px;
    background: var(--pun-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 12px;
}

/*--- Списки внутри поста ---*/
.post-content ul,
.post-content ol {
    margin: 0 0 12px;
    padding: 0 0 0 18px;
}

.post-content li { margin: 0 0 4px; }

/*--- Цитата, код, скрытый текст, спойлер ---*/
/* разметка движка: .quote-box > cite + blockquote,
   .code-box > .legend + .blockcode,
   .spoiler-box > div (заголовок) + blockquote (раскрывается классом .visible из скрипта) */

.post-content .quote-box,
.post-content .code-box {
    margin: 16px 0;
    box-sizing: border-box;
    background: transparent;
    border-left: 2px solid var(--line-color);
    padding: 4px 0 4px 16px;
}

.post-content .quote-box cite,
.post-content .code-box .legend {
    display: block;
    margin: 0 0 8px;
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    color: var(--link-color);
}

.post-content .quote-box cite a,
.post-content .code-box .legend a { color: var(--link-color); }

.post-content .quote-box blockquote,
.post-content .quote-box .blockquote {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 165%;
}

.post-content .quote-box blockquote p { padding: 0; margin: 0 0 8px; }
.post-content .quote-box blockquote p:last-child { margin-bottom: 0; }

/* вложенная цитата */
.post-content blockquote .quote-box {
    margin: 10px 0 0;
}

/*--- Код ---*/
.post-content .code-box .blockcode,
.post-content .code-box blockcode {
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

.post-content .code-box pre {
    margin: 0;
    font-family: "Courier New", monospace;
    font-size: 12px;
    line-height: 150%;
    white-space: pre;
}

/*--- Скрытый текст ---*/
.post-content .quote-box.hide-box {
    border-left-color: var(--button-color);
}

/*--- Спойлер ---*/
.post-content .spoiler-box {
    margin: 16px 0;
    box-sizing: border-box;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

/* заголовок-кнопка */
.post-content .spoiler-box > div {
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    padding: 9px 14px 9px 30px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    color: var(--link-color);
    background: none;
    transition: color .15s ease-in-out;
}

.post-content .spoiler-box > div:hover { color: var(--hover-color); }

/* треугольник-стрелка, поворачивается при раскрытии */
.post-content .spoiler-box > div::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid var(--accent-color);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease-in-out;
}

.post-content .spoiler-box > div.visible::before {
    transform: rotate(90deg);
}

.post-content .spoiler-box > div.visible {
    border-bottom: 1px solid var(--line-soft);
}

/* содержимое: скрыто, пока скрипт не повесит .visible */
.post-content .spoiler-box > blockquote {
    display: none;
    margin: 0;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 165%;
}

.post-content .spoiler-box > blockquote.visible { display: block; }

/*-------------- РЕДАКТОР --------------*/

/*--- Панель кнопок ---*/
/* движок отдаёт кнопки как <img src="/i/blank.gif"> — прозрачный пиксель.
   Картинку должен рисовать дизайн: пиксель остаётся кликабельным слоем,
   а иконка идёт через ::before иконочным шрифтом */
#form-buttons {
    margin: 0 0 10px;
}

#form-buttons table {
    width: 100%;
    border-spacing: 0;
}

#form-buttons tbody,
#form-buttons tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;   /* раскидываем по всей ширине формы */
    gap: 2px 0;
    width: 100%;
}

#form-buttons td {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-width: 28px;
    height: 28px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-color--pale);
    background-image: none !important;   /* гасим inline-фон у вложений и граффити */
    transition: color .15s ease-in-out, background-color .15s ease-in-out, opacity .15s ease-in-out;
}

#form-buttons td:hover {
    background: transparent;
    color: var(--link-color);
}

/* прозрачный пиксель — слой клика поверх иконки */
#form-buttons td img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

#form-buttons td::before {
    font-family: "Material Symbols Outlined";
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

#form-buttons #button-font::before      { content: "text_fields"; }
#form-buttons #button-size::before      { content: "format_size"; }
#form-buttons #button-bold::before      { content: "format_bold"; }
#form-buttons #button-italic::before    { content: "format_italic"; }
#form-buttons #button-underline::before { content: "format_underlined"; }
#form-buttons #button-strike::before    { content: "format_strikethrough"; }
#form-buttons #button-left::before      { content: "format_align_left"; }
#form-buttons #button-center::before    { content: "format_align_center"; }
#form-buttons #button-right::before     { content: "format_align_right"; }
#form-buttons #button-link::before      { content: "link"; }
#form-buttons #button-spoiler::before   { content: "unfold_more"; }
#form-buttons #button-image::before     { content: "image"; }
#form-buttons #button-video::before     { content: "smart_display"; }
#form-buttons #button-hide::before      { content: "visibility_off"; }
#form-buttons #button-quote::before     { content: "format_quote"; }
#form-buttons #button-code::before      { content: "code"; }
#form-buttons #button-color::before     { content: "palette"; }
#form-buttons #button-table::before     { content: "table"; }
#form-buttons #button-smile::before     { content: "mood"; }
#form-buttons #button-keyboard::before  { content: "keyboard"; }
#form-buttons #button-addition::before  { content: "more_horiz"; }
#form-buttons #button-files_rusff::before    { content: "attach_file"; }
#form-buttons #button-graffiti_rusff::before { content: "draw"; }

/*--- Всплывающие окна редактора ---*/
/* в разметке #tags лежит МЕЖДУ кнопками и полем ввода, поэтому в обычном потоке
   открытое окно расталкивает форму и выглядит «улетевшим наверх».
   Делаем окна абсолютными: #tags остаётся нулевой высоты и служит якорем */
#tags {
    position: relative;
}

#tags > .container {
    position: absolute;
    top: 4px;
    right: 0;
    z-index: 60;
    box-sizing: border-box;
    max-width: 580px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: var(--box-color);
    border: 1px solid var(--line-color);
    border-radius: 8px;
    box-shadow: 0 8px 26px rgb(0 0 0 / 20%);
    font-size: 11px;
    text-align: left;
}

#tags > .container strong {
    display: block;
    margin: 0 0 8px;
    font-weight: 500;
    text-transform: lowercase;
    color: var(--link-color);
}

/* строки-списки: шрифты, размеры, дополнительно */
#font-area > div,
#size-area > div,
#addition-area > div {
    position: relative;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease-in-out;
}

#font-area > div:hover,
#size-area > div:hover,
#addition-area > div:hover {
    background: var(--pun-color);
}

#font-area img,
#size-area img,
#addition-area img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/*--- Цвета ---*/
#color-area { width: auto; }

#color-area table {
    width: auto;
    border-spacing: 4px;
}

#color-area td {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
}

#color-area td img {
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/*--- Таблица ---*/
#table-area table {
    width: auto;
    border-spacing: 2px;
}

#table-area td img {
    display: block;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid var(--line-color);
    background: var(--pun-color);
    cursor: pointer;
}

#table-area td.selected img {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

#table-area label {
    font-size: 11px;
    cursor: pointer;
}

/*--- Смайлики ---*/
#smilies-area img {
    margin: 0 6px 6px 0;
    cursor: pointer;
}

/*--- Клавиатура ---*/
#keyboard-area { width: auto; }

#keyboard-area input {
    margin: 0 2px 3px 0;
    padding: 3px 6px;
    box-sizing: border-box;
    border: 1px solid var(--line-color);
    border-radius: 3px;
    background: var(--pun-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 11px;
    cursor: pointer;
}

#keyboard-area input:hover {
    background: var(--accent-color);
    color: var(--accent-color--text);
}

/*--- Картинка, видео, спойлер ---*/
#image-area textarea,
#video-area textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    background: var(--pun-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 11px;
}

#image-source-list a,
#spoiler-type-list a,
#video-host-list a,
#image-area-actions a,
#video-area-actions a {
    display: inline-block;
    margin: 4px 8px 0 0;
    color: var(--link-color);
    cursor: pointer;
}

#image-source-list a:hover,
#spoiler-type-list a:hover,
#video-host-list a:hover,
#image-area-actions a:hover,
#video-area-actions a:hover {
    color: var(--hover-color);
}

/*--- Скроллбар окон редактора ---*/
#tags > .container::-webkit-scrollbar { width: 6px; }
#tags > .container::-webkit-scrollbar-track { background: transparent; }
#tags > .container::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

/*-------------- ФОРМЫ (поиск, участники, профиль) --------------*/

.formal h2,
.usertable h2 {
    margin: 0 0 14px;
    font-family: var(--font-accent);
    font-size: 20px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
    text-align: left;
}

.formal form.container {
    padding: 0;
    margin: 0 0 30px;
}

.formal fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

.formal legend { display: none; }

/* ряд полей */
.fs-box.inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
}

.formal p.inputfield,
.formal p.selectfield {
    margin: 0;
    padding: 0;
}

.formal label {
    display: inline-block;
    margin: 0 0 5px;
    font-size: 11px;
    text-transform: lowercase;
    letter-spacing: .3px;
    color: var(--text-color--pale);
}

.formal input[type="text"],
.formal input[type="search"],
.formal select {
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--line-color);
    border-radius: 3px;
    background: var(--box-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 12px;
}

.formal input[type="text"]:focus,
.formal select:focus { border-color: var(--accent-color); }

/* подсказка под полями */
.formal p.infofield {
    width: 100%;
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 150%;
    color: var(--text-color--pale);
}

.formal p.formsubmit {
    margin: 16px 0 0;
}

/*-------------- УЧАСТНИКИ --------------*/

#pun-userlist .usertable {
    margin: 0 0 20px;
}

#pun-userlist .usertable h2 {
    font-size: 12px;
    font-family: var(--font-base);
    font-weight: 400;
    color: var(--text-color--pale);
    text-align: right;
    margin: 0 0 10px;
}

#pun-userlist .usertable table {
    width: 100%;
    text-transform: lowercase;
}

/* шапка таблицы */
#pun-userlist .usertable thead th {
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
    color: var(--text-color--pale);
    text-align: center;
}

#pun-userlist .usertable thead th.tcl.username { text-align: left; }
#pun-userlist .usertable thead th.tc3.last_visit { text-align: right; }

#pun-userlist .usertable tbody td {
    padding: 14px 6px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

#pun-userlist .usertable tbody tr:last-of-type td { border-bottom: none; }

/* ширины колонок */
#pun-userlist .usertable .tcl.username { width: 34%; }
#pun-userlist .usertable .tc2 { width: 24%; }
#pun-userlist .usertable .tc3 { width: 10.5%; }

/* имя с аватаркой.
   Без flex на ячейке: он выбивает td из табличной раскладки, и колонка
   перестаёт держать заданную ширину — имена начинают переноситься */
#pun-userlist .usertable .tcl.username {
    text-align: left;
    white-space: nowrap;
}

#pun-userlist .usertable .tcl.username .user-avatar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 34px;
    height: 34px;
    margin: 0 12px 0 0;
    float: none;
    border-radius: 50%;
}

#pun-userlist .usertable .tcl.username .avatar-image {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    filter: none;
}

#pun-userlist .usertable .tcl.username .isonline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 2px solid var(--pun-color);
    border-radius: 50%;
    background: var(--accent-color);
}

#pun-userlist .usertable .usersname {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-accent);
    font-size: 17px;
    line-height: 1.2;
}

#pun-userlist .usertable .usersname a { color: var(--text-color); }
#pun-userlist .usertable .usersname a:hover { color: var(--link-color); }

#pun-userlist .usertable .tc2.user_title { color: var(--text-color--pale); }
#pun-userlist .usertable .tc3.last_visit { text-align: right; }

/* поиск ничего не нашёл: движок отдаёт строку с единственной ячейкой */
#pun-userlist .usertable tbody td:first-of-type:last-of-type {
    display: block;
    width: 100%;
    padding: 24px 0;
    border-bottom: none;
    text-align: center;
    color: var(--text-color--pale);
}

/*-------------- ПРОФИЛЬ --------------*/

/* ВАЖНО: движок в конце страницы выполняет
   if ($('#profilenav').css('float') == 'left') $('#profilenav').hide();
   поэтому float у меню профиля не задаём — иначе скрипт его спрячет.

   Обёртка вокруг меню у движка на разных страницах РАЗНАЯ:
     просмотр            — #viewprofile-next
     редактирование      — form.container
     лицевой счет и т.п. — #profile > .container (внутри бывает вложенный <form>)
   поэтому одна сетка на все три случая */
#viewprofile-next,
#pun-profile form.container,
#profile > .container {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 34px;
    align-items: start;
    padding: 0;
    margin: 0;
}

#viewprofile-next > *,
#pun-profile form.container > *,
#profile > .container > * { grid-column: 2; }

#viewprofile-next > #profilenav,
#pun-profile form.container > #profilenav,
#profile > .container > #profilenav {
    grid-column: 1;
    /* именно span, а не «1 / -1»: -1 указывает на конец ЯВНОЙ сетки,
       а явных строк здесь нет — диапазон схлопнулся бы в одну строку
       и она растянулась бы под высоту меню */
    grid-row: 1 / span 20;
}

#profilenav {
    width: 150px;
    margin: 0;
}

#profilenav h2 + ul + h2 { margin-top: 20px; }

#profilenav h2 {
    margin: 0 0 12px;
    font-family: var(--font-accent);
    font-size: 18px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
}

#profilenav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#profilenav li { padding: 0; }

#profilenav li a {
    display: block;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

#profilenav li a:hover {
    background: var(--box-color);
    color: var(--link-color);
}

#profilenav li.isactive a {
    background: var(--box-color);
    color: var(--text-color);
}

/*--- Просмотр профиля ---*/
#viewprofile {
    flex: 1;
    min-width: 0;
}

/* разметка движка нестандартная: <ul> оборачивает <table>, а <li> лежат в <td> */
#viewprofile .container,
#viewprofile .container > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#viewprofile table { width: 100%; }

#viewprofile li { padding: 0; }

/* левая колонка */
#viewprofile #profile-left {
    width: 200px;
    padding: 0 26px 0 0;
    text-align: center;
    vertical-align: top;
}

#viewprofile #profile-name {
    font-family: var(--font-accent);
    font-size: 24px;
    line-height: 1.15;
    color: var(--text-color);
    word-break: break-word;
}

#viewprofile #profile-name strong { font-weight: 600; }

#viewprofile #profile-title {
    margin: 4px 0 16px;
    font-size: 11px;
    color: var(--text-color--pale);
}

#viewprofile #profile-title strong { font-weight: 400; }

#viewprofile #pa-avatar img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--box-color);
}

#viewprofile #pa-online {
    margin: 16px 0 0;
    font-family: var(--font-accent);
    font-size: 15px;
    text-transform: lowercase;
    color: var(--link-color);
}

#viewprofile #pa-online strong { font-weight: 500; }

#viewprofile #pa-edit {
    margin: 10px 0 0;
    font-size: 11px;
    text-transform: lowercase;
}

#viewprofile #pa-edit strong { font-weight: 400; }

/* правая колонка: подпись — значение */
#viewprofile #profile-right {
    vertical-align: top;
    padding: 4px 0 0;
}

#viewprofile #profile-right li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
    line-height: 150%;
}

#viewprofile #profile-right li:last-of-type { border-bottom: none; }

#viewprofile #profile-right li > span {
    flex-shrink: 0;
    width: 150px;
    font-size: 11px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

#viewprofile #profile-right li > strong {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    word-break: break-word;
}

/* пустые поля от прошлого дизайна и служебное.
   Селектор длиннее строки «#viewprofile #profile-right li» намеренно:
   у неё два id + тег, и короткое скрытие по двум id ей проигрывает */
#viewprofile #profile-right li#pa-fld3,
#viewprofile #profile-right li#pa-fld4,
#profile-gifts {
    display: none;
}

/*--- Страницы редактирования профиля ---*/
/* заголовки разделов формы: на этих страницах legend осмысленный,
   в отличие от формы ответа и поиска, где он дублирует подсказку */
#pun-profile fieldset {
    margin: 0 0 26px;
    padding: 0;
    border: none;
}

#pun-profile fieldset legend {
    display: block;
    width: 100%;
    padding: 0 0 10px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-accent);
    font-size: 18px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
}

/* на «лицевом счете» второй раздел завёрнут в отдельный <form> */
#profile > .container > form { margin: 0; }

#pun-profile .fs-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#pun-profile .fs-box > p { margin: 0; }

/* обязательные поля */
.formal label em {
    font-style: normal;
    color: var(--accent-color);
}

/* поля только для чтения: пароль, даты, IP */
.formal p.datafield {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
}

.formal p.datafield .label {
    flex-shrink: 0;
    width: 150px;
    font-size: 11px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

.formal p.datafield .input {
    flex: 1;
    min-width: 0;
}

/* строка ввода с довесками — ссылками или вторым списком */
.formal p.inputfield .input,
.formal p.selectfield .input {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 11px;
}

.formal optgroup {
    font-family: var(--font-base);
    font-style: normal;
    color: var(--text-color--pale);
}

/* кнопка отправки с пояснением рядом */
.formal p.formsubmit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--text-color--pale);
}

/*-------------- ЛИЧНЫЕ СООБЩЕНИЯ --------------*/

#pun-messages .fs-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* заголовок «Новое сообщение для …» — осмысленный, показываем */
#pun-messages fieldset {
    margin: 0 0 20px;
    padding: 0;
    border: none;
}

#pun-messages fieldset > legend {
    display: block;
    width: 100%;
    padding: 0 0 10px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-accent);
    font-size: 18px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
}

#pun-messages fieldset > legend strong { font-weight: 600; }

/* форма здесь вложена в fieldset — свои рамку и отступы она не дублирует */
#pun-messages #post-form {
    margin: 0;
    padding: 0;
    border-top: none;
}

#pun-messages .longinput { width: 100%; }

#pun-messages p.inputfield label strong {
    font-weight: 400;
}

/* пустой абзац с одним скрытым полем — движок отдаёт его всегда */
#post-new p.inputfield:has(> .input > input[type="hidden"]:only-child) {
    display: none;
}

/* строка кнопок свёрстана инлайновыми float и padding-bottom:3em —
   флексом floats у детей игнорируются, инлайновый отступ гасим важностью */
#pun-messages #post-form > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 0 !important;
    margin: 16px 0 0;
}

#pun-messages #post-form > p > span { float: none !important; }

.checkfield {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

/*--- Настройка уведомлений ---*/
#notify-settings {
    box-sizing: border-box;
    margin: 0 0 20px !important;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    text-transform: lowercase;
    color: var(--text-color--pale);
}

#notify-settings .inp2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

#notify-settings label {
    margin: 0;
    cursor: pointer;
}

#notify-settings input[type="checkbox"] {
    float: none !important;
    margin: 0;
}

#volume-set {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* у движка своя картинка слайдера, подключённая позже окна стилей —
   без !important кружок уезжал выше дорожки, а дорожка была серой.
   Ширину заливки и положение кружка движок пишет инлайном — их не трогаем */
.vol_slider {
    position: relative !important;
    width: 100px !important;
    height: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    background: var(--line-color) !important;
    overflow: visible !important;
    cursor: pointer;
}

.vol_slider .before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 2px !important;
    background: var(--accent-color) !important;
}

/* кружок центрируется на своей точке: translate не зависит от размеров */
.vol_slider .thumb {
    position: absolute !important;
    top: 50% !important;
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
    border: 2px solid var(--box-color) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 4px rgb(60 45 45 / 25%) !important;
    background: var(--button-color) !important;
    transform: translate(-50%, -50%) !important;
}

/*--- Список писем ---*/
#messages fieldset { margin: 0; }

#messages table { width: 100%; }

#messages thead th {
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--text-color--pale);
    text-align: left;
}

#messages tbody td {
    padding: 12px 6px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
    vertical-align: middle;
}

#messages .tcl.pmtcl1 { width: 55%; }
#messages .tc2.pmtc22 { width: 25%; }
#messages .tc3.pmtc33 { width: 14%; color: var(--text-color--pale); }
#messages .tc2.pmtc24 { width: 6%; text-align: right; }

#messages .tcl .intd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;   /* иначе тема сдвигается правее заголовка «тема» */
}

/* точка непрочитанного.
   Селектор обязательно через .tcl: классы icon/inew движок вешает
   ещё и на сам <tr>, и «#messages .icon» покрасил бы всю строку */
/* у прочитанного письма точки нет вовсе: бледное колечко почти не видно,
   а место занимало — выглядело пустой дыркой перед темой */
#messages .tcl .icon { display: none; }

/* у нового — точка в левом поле строки, текст темы не сдвигает */
#messages .tcl .icon.inew {
    display: block;
    position: absolute;
    left: -10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: none;
    transform: translateY(-50%);
}

/* страховка на случай, если где-то ещё зацепим строку целиком */
tr.icon,
tr.inew,
tr.icon-new {
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
}

#messages .tclcon a { color: var(--text-color); }
#messages .tclcon a:hover { color: var(--link-color); }
#messages .tclcon strong { font-weight: 500; }

#messages .user-avatar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
    float: none;
    border-radius: 50%;
}

#messages .user-avatar .avatar-image {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    filter: none;
}

#messages .user-avatar .isonline {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border: 2px solid var(--pun-color);
    border-radius: 50%;
    background: var(--accent-color);
}

#messages .linksb .clearer { display: none; }

/*--- Режим переписки ---*/
/* когда письмо открыто (или пишется новое), движок кладёт его ПРЯМЫМ
   потомком контейнера — по этому и ловим: список уезжает в левую колонку
   под меню папок, письмо занимает правую. Список при этом остаётся на
   странице, поэтому переход выглядит как смена панели.
   Перезагрузку страницы CSS не убирает — для этого нужен скрипт */
#profile.messages-container > .container:has(> fieldset) {
    grid-template-columns: 250px minmax(0, 1fr);
    /* строки заданы ЯВНО: иначе «1 / -1» у письма схлопнется в одну строку.
       Последняя — 1fr: в неё уходит лишняя высота письма, поэтому меню,
       список и тумблер слева сохраняют свои естественные высоты */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 30px;
}

#profile.messages-container > .container:has(> fieldset) > #profilenav {
    grid-column: 1;
    grid-row: 1;
}

#profile.messages-container > .container:has(> fieldset) > #messages {
    grid-column: 1;
    grid-row: 2;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--line-soft);
}

/* тумблер уведомлений — вниз левой колонки, он тут второстепенный */
#profile.messages-container > .container:has(> fieldset) > #notify-settings {
    grid-column: 1;
    grid-row: 3;
    margin: 22px 0 0 !important;
    padding: 18px 0 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: none;
}

#profile.messages-container > .container:has(> fieldset) > #notify-settings .inp2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

#profile.messages-container > .container:has(> fieldset) > fieldset {
    grid-column: 2;
    grid-row: 1 / -1;
}

/* в узкой колонке таблица разворачивается в ленту писем */
#profile.messages-container > .container:has(> fieldset) > #messages thead { display: none; }

#profile.messages-container > .container:has(> fieldset) > #messages table,
#profile.messages-container > .container:has(> fieldset) > #messages tbody,
#profile.messages-container > .container:has(> fieldset) > #messages tr,
#profile.messages-container > .container:has(> fieldset) > #messages td {
    display: block;
    width: auto;
}

#profile.messages-container > .container:has(> fieldset) > #messages tr {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

#profile.messages-container > .container:has(> fieldset) > #messages td {
    padding: 0;
    border: none;
}

#profile.messages-container > .container:has(> fieldset) > #messages .tcl.pmtcl1 {
    margin: 0 0 5px;
    padding-right: 22px;   /* место под чекбокс */
}

#profile.messages-container > .container:has(> fieldset) > #messages .tc2.pmtc22 {
    font-size: 11px;
    color: var(--text-color--pale);
}

#profile.messages-container > .container:has(> fieldset) > #messages .tc3.pmtc33 {
    margin: 3px 0 0;
    font-size: 11px;
    color: var(--text-color--pale);
}

/* чекбокс удаления — в угол строки */
#profile.messages-container > .container:has(> fieldset) > #messages .tc2.pmtc24 {
    position: absolute;
    top: 10px;
    right: 0;
}

#profile.messages-container > .container:has(> fieldset) > #messages .linksb {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* в режиме переписки колонки таблицы не действуют — гасим их явно,
   иначе проценты от обычной таблицы режут имя отправителя и дату */
#profile.messages-container > .container:has(> fieldset) > #messages tbody td.tcl,
#profile.messages-container > .container:has(> fieldset) > #messages tbody td.tc2,
#profile.messages-container > .container:has(> fieldset) > #messages tbody td.tc3 {
    width: auto;
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* подгрузка письма скриптом */
#profile.messages-container > .container.pm-loading {
    opacity: .5;
    transition: opacity .15s ease-in-out;
}

/*--- Письмо: компактная шапка вместо карточки профиля ---*/
/* в посте форума мини-профиль уместен, в переписке — нет:
   ради одной строки текста он занимал бы 220px и весь экран по высоте */
#pun-messages .post {
    margin: 0;
}

#pun-messages .post > .container {
    display: block;
}

#pun-messages .post .post-author {
    width: 100%;
    margin: 0 0 14px;
}

#pun-messages .post .post-author ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

#pun-messages .post .post-author li {
    width: auto;
    margin: 0;
    padding: 0;
}

/* аватар — маленький кружок */
#pun-messages .post-author .pa-avatar.item2 {
    margin: 0;
    padding: 0;
    line-height: 0;
}

#pun-messages .post-author .pa-avatar.item2 img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: none;
}

/* имя — строкой, без тёмной плашки */
#pun-messages .post-author .pa-author {
    order: 2;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 17px;
    text-align: left;
}

#pun-messages .post-author .pa-author a { color: var(--text-color); }
#pun-messages .post-author .pa-author a:hover { color: var(--link-color); }

#pun-messages .post-author .pa-title {
    order: 3;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-messages .post-author .pa-title::before {
    content: "// ";
    color: var(--line-color);
}

/* в компактной шапке эти поля лишние */
#pun-messages .post-author .pa-posts,
#pun-messages .post-author .pa-online,
#pun-messages .post-author .pa-respect {
    display: none;
}

/* дата письма — в одну строку с именем, справа */
#pun-messages .post > h3 {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
}

#pun-messages .post .post-body {
    padding: 0;
}

#pun-messages .post .post-content {
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

#pun-messages .post .post-links {
    margin: 18px 0 0;
}

/*--- Лента писем: живее и понятнее ---*/
#profile.messages-container > .container:has(> fieldset) > #messages tr {
    padding: 12px 8px;
    margin: 0 -8px;
    border-radius: 4px;
    transition: background .15s ease-in-out;
}

#profile.messages-container > .container:has(> fieldset) > #messages tr:hover {
    background: var(--box-color);
}


#messages .tcl .tclcon {
    overflow: hidden;
    text-overflow: ellipsis;
}

#messages fieldset > legend {
    font-family: var(--font-accent);
    font-size: 18px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
    display: block;
    width: 100%;
    padding: 0 0 10px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--line-soft);
}

/* строка «удалить» и пагинация под лентой */
#messages .linksb {
    margin: 14px 0 0;
    font-size: 11px;
}

/* отправитель и дата — одной строкой */
#profile.messages-container > .container:has(> fieldset) > #messages tbody td.tc2.pmtc22,
#profile.messages-container > .container:has(> fieldset) > #messages tbody td.tc3.pmtc33 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

#profile.messages-container > .container:has(> fieldset) > #messages tbody td.tc3.pmtc33::before {
    content: "//";
    margin: 0 6px;
    color: var(--line-color);
}

/*-------------- АДМИНКА --------------*/
/* У админки есть СВОЙ скин: движок подключает его в <head> и сам раскладывает
   админ-меню (абсолютным позиционированием). Своя сетка с ним дерётся —
   меню выпадает из потока и уезжает за пределы страницы.
   Поэтому здесь только необходимое, вёрстку отдаём движку.

   NB: блок контента называется .adcontainer — скрывать его нельзя,
   движок проверяет видимость и ругается на блокировщик рекламы. */

/* полотно шире: таблицы настроек в 1050px не помещаются */
#pun:has(> .punbb-admin) {
    width: min(1240px, 96vw);
    /* position: relative нужен обычным страницам для блока в шапке,
       но здесь он становится точкой отсчёта для админ-меню и ломает его */
    position: static;
}

/* баннер шапки не нужен: блока #html-header на этих страницах нет,
   картинка выводилась бы пустой и занимала треть экрана */
.punbb-admin #pun-navlinks::after { display: none; }

/* зато возвращаем логотип и ссылки поддержки, скрытые общим правилом */
.punbb-admin #pun-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    font-size: inherit !important;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 18px var(--pun-padding) 0;
}

.punbb-admin .title-logo {
    font-family: var(--font-accent);
    font-size: 26px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-color);
}

/*--- Оформление админки: только цвет и типографика ---*/
/* Никаких float/position/grid/width — раскладку делает скин движка,
   любое вмешательство выбивает админ-меню из потока.
   !important обязателен: скин админки подключается ПОСЛЕ окна стилей
   и без важности перебивает эти правила. */

#pun-admain .adformal {
    box-sizing: border-box !important;
    background: var(--box-color) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 4px 16px 16px !important;
    margin-bottom: 20px !important;
}

#pun-admain .adcontainer {
    border: none !important;
    background: transparent !important;
}

#pun-admain .adformal h2,
#pun-adnav h2 {
    border: none !important;
    background: transparent !important;
    padding: 12px 0 8px !important;
    text-align: left !important;
}

#pun-admain h1 span,
#pun-admain .adformal h2 span,
#pun-adnav h2 span {
    font-family: var(--font-accent) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
    color: var(--text-color) !important;
}

#pun-admain fieldset {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

#pun-admain legend {
    padding: 0 0 6px !important;
    margin: 0 0 10px !important;
}

#pun-admain legend span {
    padding: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: .3px !important;
    color: var(--link-color) !important;
}

#pun-admain fieldset p {
    border-color: var(--line-color) !important;
    background: transparent !important;
}

#pun-admain label,
#pun-admain .adlabel {
    font-weight: 400 !important;
    text-transform: lowercase !important;
    color: var(--text-color--pale) !important;
}

#pun-admain .adinput em {
    font-style: normal !important;
    font-size: 10px !important;
    color: var(--text-color--pale) !important;
}

#pun-admain .adcontainer th {
    border-color: var(--line-color) !important;
    background: var(--pun-color) !important;
    color: var(--text-color--pale) !important;
}

#pun-admain .adcontainer td {
    border-color: var(--line-color) !important;
}

#pun-admain textarea,
#pun-admain input[type="text"],
#pun-admain select {
    border: 1px solid var(--line-color) !important;
    border-radius: 4px !important;
    background: var(--pun-color) !important;
    color: var(--text-color) !important;
    font-family: var(--font-base) !important;
}

/*--- Админ-меню: оформляем список, раскладку не трогаем ---*/
#pun-adnav ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#pun-adnav li {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#pun-adnav li a {
    display: block !important;
    box-sizing: border-box !important;
    padding: 5px 10px !important;
    border: none !important;
    border-radius: 3px !important;
    background: transparent !important;
    font-size: 11px !important;
    text-transform: lowercase !important;
    color: var(--text-color--pale) !important;
}

#pun-adnav li a:hover {
    background: var(--box-color) !important;
    color: var(--link-color) !important;
}

#pun-adnav li.isactive > a {
    background: var(--box-color) !important;
    color: var(--text-color) !important;
}

#pun-adnav ul.adsubnav {
    margin: 2px 0 6px !important;
    padding: 0 0 0 10px !important;
    border-left: 1px solid var(--line-soft) !important;
}

#pun-adnav ul.adsubnav a {
    padding: 3px 8px !important;
    font-size: 10px !important;
}

/*--- Оформление элементов ---*/
/*--- Главная: форумы карточками ---*/
#pun-index #pun-main .category tbody tr {
    padding: 12px;
    margin: 0 0 8px;
    background: var(--box-color);
    border-radius: var(--radius-box);
    border-bottom: none;
    box-shadow: var(--shadow);
}

#pun-index #pun-main .category tbody tr:first-of-type { padding-top: 12px; }

#pun-index #pun-main .category tbody tr:last-of-type {
    margin-bottom: 0;
    padding-bottom: 12px;
}

/* описание форума — своим блоком внутри карточки */
.tclcon-text {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 9px 13px;
    background: var(--pun-color);
    border-radius: 9px;
    color: var(--text-color);

    font-size: 10px;

    line-height: 1.3;
}

/* ссылки под описанием — пилюлями, разделители им не нужны */
.tclcon-links {
    gap: 6px;
    margin: 7px 0 0;

    font-size: 10px;

    letter-spacing: .3px;
}

.tclcon-links a {
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--pun-color);
    color: var(--link-color);
}

.tclcon-links a:hover {
    background: var(--accent-color);
    color: var(--accent-color--text);
}

.tclcon-links a + a::before { content: none; }

/* разделитель последнего поста больше не нужен — карточки сами разделяют */
#pun-index #pun-main .tcr { border-left: none; }

#pun-index .user-avatar .isonline { border-color: var(--box-color); }

/*--- Статистика ---*/
#pun-stats .statscon {
    background: var(--container-color);
    padding: 18px 22px;
    border-radius: var(--radius);
    border-top: none;
}

/*--- Пост: тело и форма ответа снова карточками ---*/
.post .post-body {
    padding: 18px 22px;
    background: var(--box-color);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow);
}

.post .post-author ul {
    box-shadow: var(--shadow);
    border-radius: var(--radius-box);
}

.post-links ul {
    margin: 10px 0 0;
    padding: 12px 20px;
    background: var(--container-color);
    border-radius: var(--radius-box);
    border-top: none;
}

#post-form {
    margin: 26px 0 0;
    padding: 20px 22px;
    background: var(--container-color);
    border-radius: var(--radius);
    border-top: none;
}

#post-form textarea {
    background: var(--box-color);
    border-color: transparent;
    border-radius: 9px;
}

/*--- Цитаты и спойлеры: блоками, а не линиями ---*/
.post-content .quote-box,
.post-content .code-box {
    padding: 11px 15px;
    background: var(--pun-color);
    border-left: none;
    border-radius: 9px;
}

.post-content .spoiler-box {
    background: var(--pun-color);
    border-radius: 9px;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
}

.post-content .spoiler-box > div.visible {
    border-bottom: 1px solid var(--line-soft);
}

/*--- Списки: строки карточками ---*/
#pun-userlist .usertable .container,
#messages .fs-box > .container {
    background: var(--container-color);
    padding: 10px;
    border-radius: var(--radius);
}

#pun-userlist .usertable tbody tr,
#messages tbody tr {
    background: var(--box-color);
}

#pun-userlist .usertable tbody td,
#messages tbody td {
    border-bottom: none;
    padding: 13px 8px;
}

#pun-userlist .usertable tbody tr td:first-child,
#messages tbody tr td:first-child {
    border-radius: var(--radius-box) 0 0 var(--radius-box);
    padding-left: 16px;
}

#pun-userlist .usertable tbody tr td:last-child,
#messages tbody tr td:last-child {
    border-radius: 0 var(--radius-box) var(--radius-box) 0;
    padding-right: 16px;
}

/* просвет между строками-карточками */
#pun-userlist .usertable table,
#messages table { border-spacing: 0 7px; }

#pun-userlist .usertable thead th,
#messages thead th {
    border-bottom: none;
    padding-left: 16px;
}

#pun-userlist .usertable .tcl.username .isonline,
#messages .user-avatar .isonline { border-color: var(--box-color); }

/*--- Профиль: правая колонка карточкой ---*/
#viewprofile .container {
    background: var(--container-color);
    padding: 18px 22px;
    border-radius: var(--radius);
}

#viewprofile #pa-avatar img { box-shadow: 0 0 0 3px var(--box-color); }

#profilenav li a,
#pun-adnav li a {
    background: var(--container-color) !important;
}

#profilenav li.isactive a,
#pun-adnav li.isactive > a {
    background: var(--accent-color) !important;
    color: var(--accent-color--text) !important;
}

/*-------------- ТИПОГРАФИКА --------------*/

/*--- Название форума в шапке ---*/
#html-header .head-title {
    font-family: var(--font-accent);
    font-size: 52px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: lowercase;
    line-height: 1;
    margin: 46px 0 0;
}

#html-header .head-subtitle {
    margin: 14px 0 0;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .8;
}

#html-header .head-links {
    font-size: 11px;
    letter-spacing: 1px;
}

/*--- Названия форумов: строчными и акцентным цветом ---*/
.tclcon h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0;

    line-height: 1.2;
}

.tclcon h3 a { color: var(--link-color); }
.tclcon h3 a:hover { color: var(--hover-color); }

/*--- Шапка поста: дата и номер пилюлями ---*/
.post h3 {
    margin: 0 0 10px;
    padding: 0;
    border-bottom: none;
}

.post h3 > span {
    align-items: center;
}

.post h3 .permalink {
    padding: 5px 14px;
    background: var(--container-color);
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: .4px;
    color: var(--text-color--pale);
}

.post h3 .permalink::before {
    content: "\273B";
    margin-right: 7px;
    color: var(--accent-color);
    font-size: 11px;
}

.post h3 .permalink:hover {
    background: var(--accent-color);
    color: var(--accent-color--text);
}

.post h3 strong {
    padding: 5px 13px;
    background: var(--container-color);
    border-radius: 20px;
    font-size: 11px;
    color: var(--text-color--pale);
}

.post h3 strong::before {
    content: "#";
    margin-right: 3px;
    opacity: .6;
}

/*--- Заголовки разделов ---*/
.formal h2,
.usertable h2,
#post-form h2,
#profilenav h2,
#pun-messages fieldset > legend,
#pun-profile fieldset legend {
    letter-spacing: .5px;
}

/*--- Мини-профиль: подписи мельче и с разрядкой ---*/
.post-author .pa-posts .fld-name::before,
.post-author .pa-respect .fld-name a {
    font-size: 13px;
    letter-spacing: .5px;
}

.post .post-author .pa-posts,
.post .post-author .pa-respect {
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
}

.post .post-author .pa-author {
    font-size: 15px;
    letter-spacing: .3px;

    padding: 10px 12px 8px;

    margin-bottom: 8px;

    line-height: 1.2;
}

.post .post-author .pa-title {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .2px;

    margin-bottom: 8px;
}

/*--- Текст поста ---*/
.post-content {
    font-size: 13px;
    line-height: 1.5;
}

/*--- Верхнее меню ---*/
#pun-navlinks a {
    font-size: 11px;
    letter-spacing: .6px;
}

/*--- Оформление элементов ---*/
/* Иерархию держит не цвет коробок, а размер, вес и начертание. */

/*--- Строка форума: одна карточка, внутри только текст ---*/
#pun-index #pun-main .category tbody tr {
    padding: 12px;
    margin: 0 0 8px;
    background: var(--box-color);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow);
}

.tclcon h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    text-transform: lowercase;
    letter-spacing: 0;
}

/* описание — без своей коробки */
.tclcon-text {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-color--pale);
}

/* ссылки форума — мелким капслоком вразрядку, без пилюль */
.tclcon-links {
    gap: 0;
    margin: 7px 0 0;
    font-size: 10px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.tclcon-links a {
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--link-color);
}

.tclcon-links a:hover {
    background: transparent;
    color: var(--hover-color);
}

.tclcon-links a + a::before {
    content: "\2022";
    margin: 0 9px;
    color: var(--line-color);
    letter-spacing: 0;
}

/*--- Последний пост: подпись капслоком, имя крупнее ---*/
#pun-index #pun-main .tcr {
    grid-template-rows: auto auto auto;
    gap: 2px 14px;
}

#pun-index #pun-main .tcr::before {
    content: "последнее";
    grid-column: 1;
    grid-row: 1;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-color--pale);
    opacity: .75;
}

#pun-index #pun-main .tcr .lastpost-link {
    grid-row: 2;
    font-family: var(--font-accent);
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
}

#pun-index #pun-main .tcr .lastpost {
    grid-row: 3;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

#pun-index .user-avatar { grid-row: 1 / 4; }

/*--- Пост: дата и номер без пилюль, набором ---*/
.post h3 .permalink,
.post h3 strong {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post h3 .permalink::before { content: none; }

.post h3 .permalink:hover {
    background: transparent;
    color: var(--link-color);
}

.post h3 strong {
    font-family: var(--font-accent);
    font-size: 20px;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-color);
}

/*--- Мини-профиль: подписи капслоком, числа антиквой ---*/
.post .post-author .pa-author {
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;

    padding: 10px 12px 8px;

    margin-bottom: 8px;

    line-height: 1.2;
}

.post .post-author .pa-title {
    font-size: 9px;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text-color--pale);

    margin-bottom: 8px;
}

.post-author .pa-posts .fld-name::before,
.post-author .pa-respect .fld-name a {
    font-family: var(--font-base);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-color--pale);
}

.post .post-author .pa-posts,
.post .post-author .pa-respect {
    gap: 2px;
    font-family: var(--font-accent);
    font-size: 23px;
    font-style: italic;
    font-weight: 400;
}

.post .post-author .pa-online {
    font-size: 11px;
    font-style: normal;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-family: var(--font-base);
}

/*--- Заголовки разделов крупнее ---*/
.formal h2,
.usertable h2,
#post-form h2,
#profilenav h2 {
    font-size: 23px;
    font-style: italic;
    font-weight: 400;
}

/*--- Служебные подписи по всему форуму ---*/
#pun-ulinks .container,
.linkst, .linksb,
#topic-modmenu, #topic-users-in,
#pun-stats .container {
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

#pun-stats .onlinelist span,
#pun-stats .users_24h span {
    letter-spacing: .4px;
    text-transform: none;
    font-size: 11px;
}

/* подменю остаётся строчным: капслок здесь спорит с верхним меню
   и на узких экранах ломается на две строки */
#pun-ulinks .container {
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: lowercase;
}

/* статистика: капслок вразрядку хорош для коротких меток, но не для
   длинных строк — возвращаем обычный регистр, капсом остаются подписи */
#pun-stats .container {
    font-size: 11px;
    letter-spacing: .2px;
    text-transform: none;
    line-height: 160%;
}

#pun-stats .container > li:not(.onlinelist):not(.users_24h) span {
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-color--pale);
}

#pun-stats .container > li:not(.onlinelist):not(.users_24h) strong {
    font-family: var(--font-accent);
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    margin-left: 2px;
}

#pun-stats .onlinelist > div > a,
#pun-stats .users_24h > div > a {
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* строки форумов внутри категории */
#pun-index #pun-main .category tbody tr {
    padding: 12px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);

    margin: 0 0 8px;
}

.tclcon h3 { font-size: 18px;
    margin: 0 0 5px;

    line-height: 1.2;
}

/*-------------- SOLACIUM: ОБНОВЛЁННОЕ ОФОРМЛЕНИЕ --------------*/
/* Категории: горизонтальный заголовок и один уровень карточек. */
.category {
    display: block;
    position: relative;
    margin-bottom: 20px;
}
.category .container {
    background: transparent;
    padding: 0;
    border-radius: 0;
    min-width: 0;
}
.category h2 {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0 4px;
    background: none;
    border-radius: 0;
    line-height: 1.3;
}
.category h2 span {
    min-width: 0;
    font-family: var(--font-title);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .2px;
    text-transform: lowercase;
    color: var(--text-color);
    overflow-wrap: anywhere;
}
.category h2::before { content: none; }
.category h2::after {
    content: "";
    flex: 1 1 40px;
    min-width: 24px;
    height: 1px;
    background: var(--line-soft);
}
/* Мини-профиль: имя на светлом фоне, отделённое тонкой линией. */
.post .post-author .pa-author {
    padding: 10px 12px 8px;
    margin-bottom: 8px;
    background: transparent;
    border-bottom: 1px solid var(--line-soft);

    font-size: 15px;

    line-height: 1.2;
}
.post .post-author .pa-author a { color: var(--link-color); }
.post .post-author .pa-author a:hover { color: var(--hover-color); }
.post .post-author .pa-title {
    font-size: 9px;
    letter-spacing: .2px;
    text-transform: none;
    line-height: 1.2;

    margin-bottom: 8px;
}
/* Числа и служебные подписи — обычное начертание. */
.post .post-author .pa-posts,
.post .post-author .pa-respect,
.post h3 strong,
#pun-stats .container > li:not(.onlinelist):not(.users_24h) strong {
    font-family: var(--font-base);
    font-style: normal;
    font-weight: 400;
}
.post .post-author .pa-posts,
.post .post-author .pa-respect { font-size: 18px; }
.post h3 strong { font-size: 13px; color: var(--text-color--pale); }
#pun-index #pun-main .tcr .lastpost-link {
    font-family: var(--font-base);
    font-style: normal;
    font-size: 13px;
    line-height: 1.4;
}
#pun-index #pun-main .tcr .lastpost { text-transform: none; letter-spacing: .2px; }
#pun-index #pun-main .tcr::before { opacity: 1; }
.tclcon-text { font-size: 10px; line-height: 1.3; }
/* В личных сообщениях сохраняется компактная строка автора. */
#pun-messages .post .post-author .pa-author {
    padding: 0;
    margin: 0;
    border-bottom: 0;
}

/*--- Компактный масштаб по референсу oddinary ---*/
/* Ширина форума 1050px и профиль 220px уже совпадают с образцом.
   Категории сохраняют горизонтальные названия: в образце текст скрыт.
   Размеры шрифтов сопоставлены по CSS; гарнитуры solacium сохранены. */
:root { --pun-padding: 16px; }
.post .post-author .pa-posts,
.post .post-author .pa-respect { font-size: 11px; gap: 2px; }
.post-author .pa-posts .fld-name::before,
.post-author .pa-respect .fld-name a { font-size: 9px; letter-spacing: .2px; }
.post .post-author .pa-online { font-size: 9px; margin-top: 10px; }
.post .post-author ul { padding-bottom: 12px; }
.post h3 .permalink,
.post h3 strong { font-size: 10px; letter-spacing: .2px; }
#pun-index #pun-main .tcr .lastpost-link { font-size: 12px; line-height: 1.3; }
#pun-index #pun-main .tcr .lastpost,
#pun-index #pun-main .tcr::before { font-size: 10px; letter-spacing: .2px; }
.formal h2,
.usertable h2,
#post-form h2,
#profilenav h2 { font-size: 18px; }
.post .post-body { padding: 12px 14px; }
#post-form { padding: 14px; margin-top: 20px; }
#pun-messages .post .post-author .pa-author { padding: 0; margin: 0; }

/*-------------- КОМПАКТНАЯ ШКАЛА ШРИФТОВ --------------*/
/* Всё уменьшено примерно на ступень: текст 11–12px вместо 12–13,
   заголовки на 15–20% меньше. Соотношения между уровнями сохранены.
   Блок стоит ПЕРЕД медиазапросами, чтобы не перебивать их размеры. */

body { font-size: 11px; }

/*--- Шапка и навигация ---*/
#pun-navlinks a { font-size: 10px; }
#pun-ulinks .container { font-size: 10px; }
#pun-status .container,
#pun-status { font-size: 11px; }
#pun-crumbs1,
#pun-crumbs2 { font-size: 11px; }

#html-header .head-title { font-size: 40px; letter-spacing: 4px; }
#html-header .head-subtitle { font-size: 9px; letter-spacing: 2.5px; }
#html-header .head-quote { font-size: 11px; }
#html-header .head-links { font-size: 10px; }

/*--- Главная ---*/
.category h2 span { font-size: 16px; }
.tclcon h3 { font-size: 15px; }
.tclcon-links { font-size: 9px; }
#pun-index #pun-main .tcr .lastpost-link { font-size: 11px; }
#pun-index #pun-main .tcr .lastpost,
#pun-index #pun-main .tcr::before { font-size: 9px; }

#pun-stats .container { font-size: 10px; }
#pun-stats .container > li:not(.onlinelist):not(.users_24h) span,
#pun-stats .onlinelist > div > a,
#pun-stats .users_24h > div > a { font-size: 9px; }
#pun-stats .container > li:not(.onlinelist):not(.users_24h) strong { font-size: 11px; }
#pun-stats .onlinelist span,
#pun-stats .users_24h span { font-size: 10px; }

/*--- Тема и пост ---*/
.linkst, .linksb,
#topic-modmenu, #topic-users-in { font-size: 10px; }
.topic h2 { font-size: 10px; }
.postlink a,
.subscribelink a,
.button { font-size: 10px; }

.post h3 .permalink,
.post h3 strong { font-size: 9px; }

.post-content { font-size: 12px; }
.post .post-author .pa-author { font-size: 13px; }

.post-links ul,
.post-links li + li::before { font-size: 10px; }

.post-content .quote-box cite,
.post-content .code-box .legend { font-size: 10px; }
.post-content .quote-box blockquote,
.post-content .quote-box .blockquote,
.post-content .code-box pre,
.post-content .spoiler-box > blockquote { font-size: 11px; }
.post-content .spoiler-box > div { font-size: 10px; }

#post-form textarea { font-size: 12px; }
#form-buttons td::before { font-size: 15px; }
#tags > .container { font-size: 10px; }

/*--- Заголовки разделов ---*/
.formal h2,
.usertable h2,
#post-form h2,
#profilenav h2 { font-size: 15px; }
#pun-messages fieldset > legend,
#pun-profile fieldset legend,
#messages fieldset > legend { font-size: 15px; }

/*--- Формы ---*/
.formal label,
.formal p.infofield,
.formal p.datafield .label,
.formal p.formsubmit { font-size: 10px; }
.formal input[type="text"],
.formal input[type="search"],
.formal select,
.formal p.datafield { font-size: 11px; }

/*--- Участники ---*/
#pun-userlist .usertable thead th { font-size: 10px; }
#pun-userlist .usertable tbody td { font-size: 11px; }
#pun-userlist .usertable .usersname { font-size: 14px; }

/*--- Профиль ---*/
#profilenav li a { font-size: 10px; }
#viewprofile #profile-name { font-size: 19px; }
#viewprofile #profile-title,
#viewprofile #pa-edit { font-size: 10px; }
#viewprofile #pa-online { font-size: 13px; }
#viewprofile #profile-right li { font-size: 11px; }
#viewprofile #profile-right li > span { font-size: 10px; }

/*--- Личные сообщения ---*/
#messages thead th { font-size: 10px; }
#messages tbody td { font-size: 11px; }
#pun-messages .post .post-content { font-size: 12px; }
#pun-messages .post-author .pa-author { font-size: 14px; }
#notify-settings,
.checkfield { font-size: 10px; }

/*--- Разное ---*/
.side-tabs a { font-size: 10px; }

/*-------------- УСТОЙЧИВОСТЬ И УЗКИЕ ЭКРАНЫ --------------*/
/* Выравниваем крайние карточки: прежние :first/:last перебивали отступы. */
#pun-index #pun-main .category tbody tr:first-of-type { padding-top: 12px; }
#pun-index #pun-main .category tbody tr:last-of-type { padding-bottom: 12px;
    margin-bottom: 0;
}
#pun-index #pun-main .tcl,
#pun-index #pun-main .tcr,
#pun-index .tclcon { min-width: 0; }
#pun-index .tclcon { overflow-wrap: anywhere; }
#pun-index #pun-main .tcr { box-sizing: border-box; }

.post-content img,
.post-sig img { max-width: 100%; height: auto; }
.post-content pre { max-width: 100%; overflow-x: auto; }
.post-content a {
    text-decoration: underline;
    text-underline-offset: .18em;
}
#pun-status .container { flex-wrap: wrap; }
#pun-navlinks .container {
    gap: clamp(10px, 2.5vw, 28px);
    overflow-x: auto;
    justify-content: safe center;
    padding-inline: 12px;
}
#pun-navlinks li { flex-shrink: 0; }
#pun-navlinks a { white-space: nowrap; }

/* ВНИМАНИЕ: медиазапросы ниже срабатывают, только если на странице есть
   <meta name="viewport" content="width=device-width">. Без него телефон
   раскладывает страницу на 980px и условия «до 640» и «до 900» не выполняются */
@media (max-width: 900px) {
    :root { --pun-padding: 14px; }
    #html-header .head-inner { padding: 30px 24px 24px 48%; }
    #html-header .head-title { font-size: 40px; letter-spacing: 3px; }
    #html-header .head-quote { margin-top: 26px; }

    #pun-index #pun-main .category tbody tr {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    #pun-index #pun-main .tcr {
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid var(--line-soft);
    }
}

@media (max-width: 640px) {
    :root { --pun-padding: 12px; --pun-gap: 0px; }
    body { background-attachment: scroll; }
    #html-header .head-inner { padding: 24px; }
    #html-header .head-title { margin-top: 30px; font-size: 38px; }
    #html-header .head-links { max-width: 100%; flex-wrap: wrap; row-gap: 10px; }

    .post > .container { display: flex; flex-direction: column; gap: 18px; }
    .post > .container > .post-author { max-width: 280px; align-self: center; }
    .post > .container > .post-body,
    .post > .container > .post-links { width: 100%; box-sizing: border-box; }
    .post-content { text-align: left; }
    #pun-messages .post > .container > .post-author { max-width: none; }
    #viewprofile-next,
    #pun-profile form.container,
    #profile > .container,
    #profile.messages-container > .container:has(> fieldset) { display: block; }
    #profilenav { width: 100%; margin-bottom: 20px; }
    #profilenav ul { flex-direction: row; flex-wrap: wrap; }
    #profile.messages-container > .container:has(> fieldset) > fieldset { margin-top: 20px; }
    #viewprofile table,
    #viewprofile tbody,
    #viewprofile tr,
    #viewprofile td { display: block; width: 100%; box-sizing: border-box; }
    #topic-modmenu .container,
    #topic-users-in .container { flex-wrap: wrap; }
    #tags > .container { max-width: calc(100vw - 48px); box-sizing: border-box; }
    #post-form textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    a, #form-buttons td { transition: none; }
}

/*-------------- ПОДФОРУМ: СПИСОК ТЕМ --------------*/

/* номер темы перед названием и служебный заголовок «Тем … страница» */
#pun-viewforum .acchide,
#pun-viewforum .forum > h2,
#pun-viewforum .forum thead,
#pun-viewforum .stickytext {
    display: none;
}

/*--- Кнопки «новая тема» и «новый опрос» ---*/
/* кнопки завёрнуты в <noindex>, и флекс-контейнер видит только его.
   display: contents убирает обёртку из раскладки — order снова работает */
#pun-viewforum .linkst noindex,
#pun-viewforum .linksb noindex {
    display: contents;
}

#pun-viewforum .postlink.long {
    order: -1;
    display: flex;
    gap: 8px;
}

/* «новая тема» — главное действие страницы, остальное контуром */
#pun-viewforum .postlink .new-topic a {
    background: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-color--text);
}

#pun-viewforum .postlink .new-topic a:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
    color: var(--button-color--text);
}

/* пагинация прижата вправо и сверху, и снизу */
#pun-viewforum .linkst .pagelink,
#pun-viewforum .linksb .pagelink { margin-left: auto; }

/*--- Список тем: строка — карточка ---*/
#pun-viewforum .forum { margin: 0; }

#pun-viewforum .forum .container { padding: 0; }

#pun-viewforum .forum table { border-spacing: 0; }

#pun-viewforum .forum tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* тема | ответов | просмотров | последнее сообщение */
#pun-viewforum .forum tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 86px 220px;
    align-items: center;
    column-gap: 12px;
    box-sizing: border-box;
    padding: 12px 16px;
    background: var(--box-color);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow);
}

#pun-viewforum .forum tbody td {
    padding: 0;
    border: none;
    min-width: 0;
}

/*--- Название темы ---*/
#pun-viewforum .tcl .intd {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* иконка — та же вертикальная полоска, что на главной */
#pun-viewforum .tcl .intd .icon {
    flex-shrink: 0;
    width: 3px;
    height: auto;
    min-height: 34px;
    margin: 0;
    border-radius: 0;
    background: var(--line-color);
    box-shadow: none;
    opacity: .5;
}

#pun-viewforum .tcl .intd .icon.inew {
    background: var(--accent-color);
    opacity: 1;
}

#pun-viewforum .tcl .intd .icon.isticky,
#pun-viewforum tr.isticky .tcl .intd .icon {
    background: var(--button-color);
    opacity: 1;
}

/* внутри .tclcon голые пробелы и &nbsp; между элементами —
   гасим их нулевым кеглем обёртки, размер задаём детям явно */
#pun-viewforum .tclcon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    font-size: 0;
    line-height: 1.25;
}

#pun-viewforum .tclcon > a {
    font-family: var(--font-title);
    font-size: 17px;
    font-style: italic;
    color: var(--link-color);
    overflow-wrap: anywhere;
}

#pun-viewforum .tclcon > a:hover { color: var(--hover-color); }

/* непрочитанная тема — заметнее */
#pun-viewforum .icon.inew ~ .tclcon > a { color: var(--hover-color); }

/* автор темы под названием */
#pun-viewforum .tclcon > .byuser {
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-viewforum .tclcon > .byuser::before { content: "автор: "; }

#pun-viewforum .byuser-username { font-size: 11px; }

/* страницы темы и переход к новому — если движок их выводит */
#pun-viewforum .tclcon .pagestext,
#pun-viewforum .tclcon .newtext {
    font-size: 10px;
    letter-spacing: .3px;
    color: var(--text-color--pale);
}

#pun-viewforum .tclcon .pagestext a,
#pun-viewforum .tclcon .newtext a { font-size: 10px; }

/*--- Ответов и просмотров ---*/
#pun-viewforum .forum tbody .tc2,
#pun-viewforum .forum tbody .tc3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    color: var(--text-color);
    text-align: center;
}

#pun-viewforum .forum tbody .tc2::before,
#pun-viewforum .forum tbody .tc3::before {
    font-size: 9px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-color--pale);
}

#pun-viewforum .forum tbody .tc2::before { content: "ответов"; }
#pun-viewforum .forum tbody .tc3::before { content: "просмотров"; }

/*--- Последнее сообщение ---*/
#pun-viewforum .forum tbody .tcr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid var(--line-soft);
    font-size: 0;
    text-align: right;
}

#pun-viewforum .forum tbody .tcr > a {
    grid-column: 1;
    grid-row: 1;
    font-size: 11px;
    color: var(--text-color);
}

#pun-viewforum .forum tbody .tcr > a:hover { color: var(--link-color); }

#pun-viewforum .forum tbody .tcr > .byuser {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-viewforum .forum tbody .tcr .user-avatar {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    margin: 0;
    float: none;
    border-radius: 50%;
}

#pun-viewforum .forum tbody .tcr .avatar-image {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    filter: none;
}

#pun-viewforum .forum tbody .tcr .isonline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 2px solid var(--box-color);
    border-radius: 50%;
    background: var(--accent-color);
}

/*--- Модерирование и RSS ---*/
#pun-viewforum .modmenu {
    margin: 14px 0 0;
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-viewforum .modmenu .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#pun-viewforum .modmenu a { color: var(--text-color--pale); }
#pun-viewforum .modmenu a:hover { color: var(--link-color); }

/*--- Подфорум: компактная шкала ---*/
#pun-viewforum .tclcon > a { font-size: 14px; }
#pun-viewforum .tclcon > .byuser,
#pun-viewforum .byuser-username { font-size: 10px; }
#pun-viewforum .forum tbody .tc2,
#pun-viewforum .forum tbody .tc3 { font-size: 12px; }
#pun-viewforum .forum tbody .tcr > a,
#pun-viewforum .forum tbody .tcr > .byuser { font-size: 10px; }
#pun-viewforum .modmenu { font-size: 10px; }

/*-------------- ПОИСК: АКТИВНЫЕ ТЕМЫ, ОТВЕТЫ, ТЕМЫ БЕЗ ОТВЕТОВ --------------*/
/* разметка совпадает со списком тем подфорума, отличаются только колонки:
   тема | форум | ответов | последнее сообщение */

/* номер темы перед названием и служебный заголовок «Тем … страница» */
#pun-searchtopics .acchide,
#pun-searchtopics .forum > h2,
#pun-searchtopics .forum thead,
#pun-searchtopics .stickytext {
    display: none;
}

/*--- Кнопки «новая тема» и «новый опрос» ---*/
/* кнопки завёрнуты в <noindex>, и флекс-контейнер видит только его.
   display: contents убирает обёртку из раскладки — order снова работает */
#pun-searchtopics .linkst noindex,
#pun-searchtopics .linksb noindex {
    display: contents;
}

#pun-searchtopics .postlink.long {
    order: -1;
    display: flex;
    gap: 8px;
}

/* «новая тема» — главное действие страницы, остальное контуром */
#pun-searchtopics .postlink .new-topic a {
    background: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-color--text);
}

#pun-searchtopics .postlink .new-topic a:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
    color: var(--button-color--text);
}

/* пагинация прижата вправо и сверху, и снизу */
#pun-searchtopics .linkst .pagelink,
#pun-searchtopics .linksb .pagelink { margin-left: auto; }

/*--- Список тем: строка — карточка ---*/
#pun-searchtopics .forum { margin: 0; }

#pun-searchtopics .forum .container { padding: 0; }

#pun-searchtopics .forum table { border-spacing: 0; }

#pun-searchtopics .forum tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* тема | ответов | просмотров | последнее сообщение */
#pun-searchtopics .forum tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 86px 220px;
    align-items: center;
    column-gap: 12px;
    box-sizing: border-box;
    padding: 12px 16px;
    background: var(--box-color);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow);
}

#pun-searchtopics .forum tbody td {
    padding: 0;
    border: none;
    min-width: 0;
}

/*--- Название темы ---*/
#pun-searchtopics .tcl .intd {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* иконка — та же вертикальная полоска, что на главной */
#pun-searchtopics .tcl .intd .icon {
    flex-shrink: 0;
    width: 3px;
    height: auto;
    min-height: 34px;
    margin: 0;
    border-radius: 0;
    background: var(--line-color);
    box-shadow: none;
    opacity: .5;
}

#pun-searchtopics .tcl .intd .icon.inew {
    background: var(--accent-color);
    opacity: 1;
}

#pun-searchtopics .tcl .intd .icon.isticky,
#pun-searchtopics tr.isticky .tcl .intd .icon {
    background: var(--button-color);
    opacity: 1;
}

/* внутри .tclcon голые пробелы и &nbsp; между элементами —
   гасим их нулевым кеглем обёртки, размер задаём детям явно */
#pun-searchtopics .tclcon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    font-size: 0;
    line-height: 1.25;
}

#pun-searchtopics .tclcon > a {
    font-family: var(--font-title);
    font-size: 17px;
    font-style: italic;
    color: var(--link-color);
    overflow-wrap: anywhere;
}

#pun-searchtopics .tclcon > a:hover { color: var(--hover-color); }

/* непрочитанная тема — заметнее */
#pun-searchtopics .icon.inew ~ .tclcon > a { color: var(--hover-color); }

/* автор темы под названием */
#pun-searchtopics .tclcon > .byuser {
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-searchtopics .tclcon > .byuser::before { content: "автор: "; }

#pun-searchtopics .byuser-username { font-size: 11px; }

/* страницы темы и переход к новому — если движок их выводит */
#pun-searchtopics .tclcon .pagestext,
#pun-searchtopics .tclcon .newtext {
    font-size: 10px;
    letter-spacing: .3px;
    color: var(--text-color--pale);
}

#pun-searchtopics .tclcon .pagestext a,
#pun-searchtopics .tclcon .newtext a { font-size: 10px; }

/*--- Ответов и просмотров ---*/
#pun-searchtopics .forum tbody .tc2,
#pun-searchtopics .forum tbody .tc3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    color: var(--text-color);
    text-align: center;
}

#pun-searchtopics .forum tbody .tc2::before,
#pun-searchtopics .forum tbody .tc3::before {
    font-size: 9px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-color--pale);
}

#pun-searchtopics .forum tbody .tc2::before { content: "ответов"; }
#pun-searchtopics .forum tbody .tc3::before { content: "просмотров"; }

/*--- Последнее сообщение ---*/
#pun-searchtopics .forum tbody .tcr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid var(--line-soft);
    font-size: 0;
    text-align: right;
}

#pun-searchtopics .forum tbody .tcr > a {
    grid-column: 1;
    grid-row: 1;
    font-size: 11px;
    color: var(--text-color);
}

#pun-searchtopics .forum tbody .tcr > a:hover { color: var(--link-color); }

#pun-searchtopics .forum tbody .tcr > .byuser {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-searchtopics .forum tbody .tcr .user-avatar {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    margin: 0;
    float: none;
    border-radius: 50%;
}

#pun-searchtopics .forum tbody .tcr .avatar-image {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    filter: none;
}

#pun-searchtopics .forum tbody .tcr .isonline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 2px solid var(--box-color);
    border-radius: 50%;
    background: var(--accent-color);
}

/*--- Модерирование и RSS ---*/
#pun-searchtopics .modmenu {
    margin: 14px 0 0;
    font-size: 11px;
    color: var(--text-color--pale);
}

#pun-searchtopics .modmenu .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#pun-searchtopics .modmenu a { color: var(--text-color--pale); }
#pun-searchtopics .modmenu a:hover { color: var(--link-color); }

/*--- Поиск: компактная шкала ---*/
#pun-searchtopics .tclcon > a { font-size: 14px; }
#pun-searchtopics .tclcon > .byuser,
#pun-searchtopics .byuser-username { font-size: 10px; }
#pun-searchtopics .forum tbody .tc2,
#pun-searchtopics .forum tbody .tc3 { font-size: 12px; }
#pun-searchtopics .forum tbody .tcr > a,
#pun-searchtopics .forum tbody .tcr > .byuser { font-size: 10px; }
#pun-searchtopics .modmenu { font-size: 10px; }

/* вторая колонка здесь не число, а название форума */
#pun-searchtopics .forum tbody tr {
    grid-template-columns: minmax(0, 1fr) 150px 70px 220px;
}

#pun-searchtopics .forum tbody .tc2 {
    align-items: flex-start;
    text-align: left;
    font-size: 11px;
}

#pun-searchtopics .forum tbody .tc2::before { content: "форум"; }
#pun-searchtopics .forum tbody .tc3::before { content: "ответов"; }

#pun-searchtopics .forum tbody .tc2 a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-color--pale);
}

#pun-searchtopics .forum tbody .tc2 a:hover { color: var(--link-color); }


/*-------------- ПОИСК ПО СООБЩЕНИЯМ («мои сообщения») --------------*/
/* в шапке поста цепочка «форум » тема » дата»; ссылки под постом здесь лишние */
#pun-searchposts .post-links,
#pun-searchposts .pa-replies { display: none; }

#pun-searchposts .post h3 > span {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}

#pun-searchposts .post h3 a {
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#pun-searchposts .post h3 em {
    font-style: normal;
    color: var(--line-color);
}

#pun-searchposts .post h3 strong { margin-left: auto; }

/*-------------- СЧЁТЧИКИ В МЕНЮ --------------*/
/* число новых ЛС у пункта «Сообщения». Движок рисует облачко с хвостиком
   через ::before/::after и позиционирует его абсолютно — всё гасим важностью */
#navpm .unreads,
#pun-navlinks span.num_msg {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 0 5px !important;
    padding: 2px 6px !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    background: var(--accent-color) !important;
    color: var(--accent-color--text) !important;
    font-family: var(--font-base) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    vertical-align: middle !important;
}

#navpm .unreads::before,
#navpm .unreads::after,
#pun-navlinks span.num_msg::before,
#pun-ulinks .bubble::before,
#pun-ulinks .bubble::after {
    content: none !important;
}

/*-------------- УВЕДОМЛЕНИЯ И ПОДСКАЗКИ --------------*/
/* jGrowl — всплывающие сообщения движка («Перевод выполнен» и т.п.).
   У них свои стили, подключённые после окна, поэтому !important обязателен */
.jGrowl-notification,
.jGrowl-closer {
    border: none !important;
    border-radius: var(--radius-box) !important;
    box-shadow: 0 6px 24px rgb(60 45 45 / 22%) !important;
    background: var(--box-color) !important;
    color: var(--text-color) !important;
    font-family: var(--font-base) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.jGrowl-notification {
    padding: 12px 34px 12px 14px !important;
    border-left: 3px solid var(--accent-color) !important;
}

.jGrowl-notification .jGrowl-header {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-family: var(--font-title) !important;
    font-size: 14px !important;
    font-style: italic !important;
    color: var(--text-color) !important;
}

.jGrowl-message {
    line-height: 1.5 !important;
}

.jGrowl-message strong { font-weight: 600 !important; }

.jGrowl-notification a { color: var(--link-color) !important; }

.jGrowl-notification .jGrowl-close {
    margin: 0 !important;
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    /* не Pragmatica: в её старой версии «&#215;» нарисован как «Ч» (хвост cp1251) */
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-color--pale) !important;
    cursor: pointer !important;
}

.jGrowl-notification .jGrowl-close:hover { color: var(--link-color) !important; }

.jGrowl-closer {
    padding: 6px 12px !important;
    text-align: center !important;
    font-size: 10px !important;
    text-transform: lowercase !important;
    cursor: pointer !important;
}

/* всплывающие подсказки при наведении */
#tooltip,
.tipsy-inner {
    border-radius: 6px !important;
    padding: 5px 8px !important;
    background: var(--button-color) !important;
    color: var(--button-color--text) !important;
    font-family: var(--font-base) !important;
    font-size: 10px !important;
    letter-spacing: .3px !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgb(60 45 45 / 20%) !important;
}

#tooltip a,
.tipsy-inner a { color: var(--button-color--text) !important; }

.tipsy-arrow { display: none !important; }

/*-------------- ГАЛОЧКИ И ПЕРЕКЛЮЧАТЕЛИ --------------*/
/* accent-color перекрашивает системные галочки и радиокнопки,
   не ломая их поведение и доступность с клавиатуры */
#pun input[type="checkbox"],
#pun input[type="radio"] {
    accent-color: var(--accent-color);
    width: 13px;
    height: 13px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* чекбоксы удаления писем — по центру строки */
#messages .tc2.pmtc24 { vertical-align: middle; }

/*-------------- ЛС: СПИСОК ПИСЕМ ОДНОЙ КАРТОЧКОЙ --------------*/
/* Галочка — первой колонкой. В разметке она последняя, а ячейки таблицы
   не переставить, поэтому строки превращаем в сетку и раскладываем явно:
   [галочка] [тема] [отправитель] [дата] */

#messages .fs-box > .container {
    padding: 0;
    background: var(--box-color);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow);
    overflow: hidden;   /* скругление режет полосу шапки и последнюю строку */
}

#messages table,
#messages thead,
#messages tbody {
    display: block;
    width: 100%;
    border-spacing: 0;
}

#messages thead tr,
#messages tbody tr {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 220px 130px;
    align-items: center;
}

/* ширины от табличной вёрстки (55% / 25% / 14% / 6%) в сетке считались бы
   от своей колонки, а не от таблицы — ник отправителя сжимался до 55px */
#messages .tcl.pmtcl1,
#messages .tc2.pmtc22,
#messages .tc3.pmtc33,
#messages .tc2.pmtc24 { width: auto; }

#messages .tc2.pmtc24 { grid-column: 1; grid-row: 1; text-align: center; }
#messages .tcl.pmtcl1 { grid-column: 2; grid-row: 1; }
#messages .tc2.pmtc22 { grid-column: 3; grid-row: 1; }
#messages .tc3.pmtc33 { grid-column: 4; grid-row: 1; }

#messages thead th,
#messages tbody td {
    width: auto;
    min-width: 0;
    padding: 14px 12px;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
}

/* полоса заголовков */
#messages thead tr { background: var(--container-color); }

#messages thead th {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-color--pale);
    text-align: left;
}

/* строки */
#messages tbody tr {
    background: var(--box-color);
    border-top: 1px solid var(--line-soft);
}

#messages tbody tr:first-child { border-top: none; }

#messages tbody td {
    font-size: 12px;
    color: var(--text-color);
}

/* тема: точка непрочитанного, затем текст.
   У прочитанных место под точку остаётся пустым — темы идут ровным столбиком */
#messages .tcl .intd {
    display: flex;
    align-items: center;
    gap: 12px;
}

#messages .tcl .icon,
#messages .tcl .icon.inew {
    display: block;
    position: static;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    box-shadow: none;
    background: transparent;
    transform: none;
}

#messages .tcl .icon.inew { background: var(--link-color); }

#messages .tclcon {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#messages .tclcon a { color: var(--text-color); font-weight: 400; }

/* непрочитанное письмо — тема жирная */
#messages .icon.inew ~ .tclcon a,
#messages .tclcon strong,
#messages .tclcon strong a { font-weight: 600; }

/* отправитель: аватар крупнее, ник цветом ссылок */
#messages .tc2.pmtc22 {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

#messages .tc2.pmtc22 .user-avatar,
#messages .tc2.pmtc22 .user-avatar .avatar-image {
    width: 32px;
    height: 32px;
    margin: 0;
}

#messages .tc2.pmtc22 > a {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--link-color);
}

#messages .tc2.pmtc22 > a:hover { color: var(--hover-color); }

#messages .tc3.pmtc33 { color: var(--text-color--pale); }

/* в режиме переписки (открыто письмо) список живёт в узкой колонке
   своими правилами — там сетка не нужна */
#profile.messages-container > .container:has(> fieldset) > #messages tbody tr {
    display: block;
    border-top: none;
}