/* === External imports ===================================================== */
/* Подключаем дополнительные CSS-файлы и иконки.
   Важно: порядок имеет значение — сначала локальные стили модуля, затем шрифты/иконки. */

@import url(style_cs.1765559331.css); /* вспомогательный модуль: кнопки, нав-навигация */
@import url(https://forumstatic.ru/files/001a/28/10/55678.css); /* кастомный шрифт (бланш) */
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');


/* === Local @font-face ===================================================== */
/* Подключаем пользовательский шрифт "Marlino" со всеми форматами для кросс-браузерности.
   font-display: swap — чтобы текст показывался системным шрифтом, пока не загрузится "Marlino". */
@font-face {
  font-family: 'Marlino Regular Personal Use';
  src: url('https://forumstatic.ru/files/001c/43/fc/54674.eot');
  src:
    local('Marlino Regular Personal U'),
    local('MarlinoRegularPersonalUse'),
    url('https://forumstatic.ru/files/001c/43/fc/54674.eot?#iefix') format('embedded-opentype'),
    url('https://forumstatic.ru/files/001c/43/fc/47695.woff2') format('woff2'),
    url('https://forumstatic.ru/files/001c/43/fc/56850.woff') format('woff'),
    url('https://forumstatic.ru/files/001c/43/fc/84814.ttf') format('truetype'),
    url('https://forumstatic.ru/files/001c/43/fc/60952.svg#MarlinoRegularPersonalUse') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   ACCESSIBILITY & UTILITIES
   Блок вспомогательных стилей: доступность, скрытие служебных заголовков,
   утилиты типа "clearfix". Эти вещи не меняют дизайн, но улучшают поведение.
   ========================================================================== */

/* полностью убираем поле "браузера" */
#pun-viewtopic .post-author .pa-ua {
    display: none !important;
}

#pun-viewtopic .post-author .pa-gifts {
    display: none !important;
}

#pun-viewtopic .post-author .flag-i {
    display: none !important;
}




/* скрыть "Быстрый ответ" */
#post-form h2 {
    display: none !important;
}

/* скрыть подсказку под формой */
#post legend span {
    display: none !important;
}

/* скрыть поиск и иконку */
#sTheme,
#isk {
    display: none !important;
}



/* Скрытие несемантических заголовков/служебных штук
   Приём: выносим элемент далеко за пределы экрана, при этом он остаётся в DOM
   (читабелен скринридерами, но не мешает визуально). */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

/* второе меню (admin override) */
.punbb-admin #pun-ulinks {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  text-align: left !important;
  background: none !important;
  color: #0b3d2e !important; /* ← базовый тёмно-зелёный */
}

.punbb-admin #pun-ulinks ul {
  display: block !important;
  gap: 0 !important;
}

.punbb-admin #pun-ulinks li {
  display: inline-block !important;
  margin-right: 8px !important;
}

/* ссылки внутри — зелёные + подсветка при наведении */
.punbb-admin #pun-ulinks a {
  color: #0b3d2e !important; /* тёмно-зелёный */
  text-decoration: none;
  transition: color 0.25s ease;
}

.punbb-admin #pun-ulinks a:hover {
  color: #176d53 !important; /* светлее при наведении */
}


/* clearfix-хелперы
   Когда внутри контейнера используются float/inline-block, этот "хвост" чистит поток,
   чтобы родитель корректно обтекал содержимое. */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   DESIGN TOKENS (CSS Variables)
   - Новые имена = основные. Старые оставлены как алиасы, указывают на новые.
   - Переменные дают единый источник правды для цветов/отступов/типографики.
   ========================================================================== */
:root {
  /* === базовые слои === */
  --color-bg: #0c0f0e;         /* общий фон: почти чёрный, с зелёно-серым подтоном */
  --color-surface: #141817;    /* контейнеры (посты, форма ответа) */
  --color-surface-2: #1a1f1d;  /* вторичные области */

  /* === текст и контраст === */
  --color-text: #e6e9e7;       /* основной текст — холодный белый */
  --color-subtext: #9ca39f;    /* подписи и второстепенные */
  --color-line: rgba(255,255,255,0.08);

  /* === акценты (строго в одной гамме) === */
  --color-brand: #aab9b0;      /* ссылки, акценты в интерфейсе */
  --color-brand-strong: #cfd9d2; /* hover — мягкое свечение, не белое */
  --color-accent: #70847a;     /* редкие элементы (кнопки, рамки) — глухой зелено-серый */
  --color-accent-soft: #5f7269;

  /* === поля форм (читаемость и фокус) === */
  --field-bg: #101412;          /* фон textarea / input */
  --field-text: #e7ece9;        /* основной текст */
  --field-placeholder: #7c8581; /* текст-заглушка */
  --field-border: #2b3230;      /* рамка */
  --focus: #8fa39a;             /* цвет рамки при фокусе */
  --focus-ring: rgba(143,163,154,0.25); /* мягкое свечение */
 --accent-green: rgba(92,132,92,0.4);
  --text-primary: rgba(225,225,225,0.9);
  --text-secondary: rgba(160,180,160,0.5);

  /* Типографика */
  --font-sans: "Space Grotesk", sans-serif; /* был: --font-family — базовый гротеск */
  --font-display: "Marlino Regular Personal Use", sans-serif; /* был: --second-family — акцентные заголовки */
  --font-icon: 'Material Icons Outlined'; /* был: --iconsfont — шрифт-иконки */

  /* Размеры/отступы */
  --layout-sidebar-width: 224px;  /* был: --pwidth — ширина сайдбара автора поста */
  --space-lg: 10px 40px;          /* был: --pad1 — крупные внутренние отступы */
  --space-md: 5px 20px;           /* был: --pad2 — средние отступы */
  --space-sm: 5px 10px;           /* был: --pad3 — малые отступы */

  /* ===== Алиасы (для совместимости с уже существующей вёрсткой): */
  --body-bg: var(--color-accent);
  --pun-bg: var(--color-surface);
  --sec-bg: var(--color-surface-2);
  --link: var(--color-brand);
  --link-hover: var(--color-brand-strong);
  --textcolor: var(--color-text);
  --font-family: var(--font-sans);
  --second-family: var(--font-display);
  --iconsfont: var(--font-icon);
  --pwidth: var(--layout-sidebar-width);
  --pad1: var(--space-lg);
  --pad2: var(--space-md);
  --pad3: var(--space-sm);

--pa-card-width: 170px;
  --pa-card-pad-x: 26px; 
  --pa-card-pad-y: 20px;

  --pa-char-width: 170px;
  --pa-char-size: 170px;
}
/* Темы (rose / blue) — только переопределения палитры.
   Применяются через класс на корневом элементе: <body class="blue"> и т.п. */
.rose {
  --color-accent: #BCBCE2;
  --color-surface: #FFFCF5;
  --color-surface-2: #F9F5EC;
  --color-brand: #89515A;
  --color-brand-strong: #711624;
}

/* ==========================================================================
   GLOBAL RESETS & BASICS
   Базовые сбросы, единый стиль ссылок, выделения, скроллбаров и пр.
   ========================================================================== */

html, body {
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin; /* тонкие полосы прокрутки (Firefox) */
  scrollbar-color: var(--color-brand-strong) var(--color-surface-2); /* цвет ползунка/трека */
}

/* WebKit scrollbars — оформление полос прокрутки в Chrome/Safari/Edge */
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background-color: var(--color-surface-2); }
*::-webkit-scrollbar-thumb { background-color: var(--color-brand); }
*::-webkit-scrollbar-thumb:active { background: var(--color-brand-strong); }

/* Selection — цвета при выделении текста мышью */
::selection { background: var(--color-brand); color: var(--color-surface); }

#pun-index .crumbs.container {
  display: none !important;
}

/* — на случай, если движок не поддерживает :has или :contains — */
#profile td, #profile th, #profile dt, #profile dd, #profile div {
  /* скроет целую строку, если в ней есть это слово */
}

/* === Полное скрытие кнопки реакций (Reaction Picker) === */
button.reaction-picker-button.reaction-chip {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* скрываем кнопку "пожаловаться" под постами */
li.pl-reports {
  display: none !important;
  visibility: hidden !important;
}

/* Делет — декоративный эффект "размытого" зачёркнутого текста */
del {
  opacity: 0.7;
  filter: blur(2px);
  text-decoration: none;
  transition: .3s linear;
}
del:hover { opacity: 1; filter: none; }

/* Горизонтальные линии в посте — пунктиром, чтобы не перетягивали внимание */
.post-content hr { border: 1px dashed var(--color-accent); }

/* Отключаем стандартный outline у фокуса (т.к. дизайн управляет сам) */
:focus { outline: none; }

/* Ссылки: базовый цвет и плавное наведение */
a, .punbb #pun-admain a {
  color: var(--color-brand);
  text-decoration: none;
  transition: .2s linear;
}
a:hover, .punbb #pun-admain a:hover { color: var(--color-brand-strong); }

/* Заголовки/блочные — убираем внешние отступы, центруем основные h1/h2 */
h1, h2, h3, h4, h5, h6, p, blockquote, pre { margin: 0; }
h1, h2 { padding: 10px 20px; font-weight: 400; text-align: center; }

/* Табличные/списки — сбрасываем стандартные маркеры */
ul, dl, li, dd, dt { list-style: none; }
address, em { font-style: normal; }

/* Отключения лишнего UI — скрываем малоиспользуемые служебные блоки */
.modlist, .lastedit, .punbb div#pun-live-rusff, .punbb .topic a.sharelink { display: none; }

/* Модальные/всплывающие окна — приводим к единой подложке */
#tags .container,
.post_report,
.post_reputation,
#MyBookmarks,
.inner.popup_graffiti,
.pun-modal .modal-inner,
.punbb-admin #pun-admin-award-form .inner {
  background: var(--color-surface-2);
}

/* ==========================================================================
   FORMS
   Оформление форм, кнопок, инпутов, селектов и служебных полей.
   ========================================================================== */

/* Площадка предпросмотра шрифтов/иконок (кастомный блок) */
#font-area {
  height: 220px;
  width: 680px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  padding: 15px !important;
  max-height: 144px; /* защита от разрастания: включится прокрутка */
  overflow: auto;
}

/* Кнопки форума — единый стиль для разных контекстов */
input.button,
#pun-admain input.button,
#sub4,
input[type="button"],
input[type="submit"] {
  cursor: pointer;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 9px;
  padding: 7px 10px;
  font: 12px var(--font-sans);
  text-transform: lowercase;
  color: var(--color-text);
  transition: .2s linear;
}

/* Селект модерации — маленький, чтобы не ломал шапки таблиц */
select#mod-options {
  font-family: var(--font-sans);
  font-size: 10px;
  background: var(--color-accent);
}

/* === форма ответа === */
textarea, input[type="text"], input[type="password"], select {
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  font: 14px/1.4 var(--font-sans);
  padding: 8px;
}

textarea::placeholder,
input::placeholder {
  color: var(--field-placeholder);
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus-ring);
  outline: none;
}


/* Чекбоксы/радио — выравниваем элементы по вертикали для аккуратности */
.checkfield input[type="checkbox"],
.radiofield input[type="radio"] { margin: 0 3px; }
p.checkfield *, div.checkfield *, fieldset.radiofield * { height: 20px; vertical-align: middle; }

/* Формы (контейнеры) — отступы и кнопки отправки */
.formal .container { padding: var(--space-lg); }
.formsubmit { margin-top: 10px; text-align: center; }
.formsubmit input, .formsubmit a, .formsubmit span {
  margin-right: 6px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 9px;
  padding: 7px 10px;
  font: 12px var(--font-sans);
  text-transform: lowercase;
  color: var(--color-text);
}
fieldset { border: 0; }
fieldset legend { font-weight: 700; margin-bottom: 10px; }
fieldset legend span {
  font-family: var(--font-sans);
  font-style: italic;
  border: 1px solid var(--color-accent);
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--color-accent);
}
fieldset fieldset { margin: 0; padding: 0 0 8px 0; border: 0; }

/* Поле "страницы" (plng) — делает блок визуально отделённым */
#plng {
  border: 1px solid var(--color-accent)!important;
  padding: 5px 5px 5px 8px !important;
  margin: 0 20px 0 5px!important;
  border-radius: 10px;
}

/* Стандартная сетка классов форм от PunBB */
.fs-box { padding: 5px 0; }
.fs-box p, .fs-box fieldset { padding: 0 0 8px 0; }
.inline .inputfield, .inline .selectfield, .inline .passfield { float: left; margin-right: 10px; }
.inline .infofield { clear: both; }
.datafield br { display: none; } /* убираем лишние переносы */
.required label, .datafield span.input { font-size: 10px; }
textarea, .longinput input { width: 64%; margin: 0; }
.hashelp { position: relative; } /* подсказки-иконки могут позиционироваться относительно поля */

/* ==========================================================================
   ADMIN
   Небольшие исправления для административной части (контуры, рамки).
   ========================================================================== */
.punbb-admin .adcontainer, .punbb-admin .adformal { border: 0; }

/* === ADMIN PANEL минимализм ========================== */
html.punbb-admin,
body.punbb-admin {
  background: #f0f2f1 !important;
  color: #111 !important;
  filter: none !important;
}

/* Текст всех элементов */
.punbb-admin *,
.punbb-admin input,
.punbb-admin select,
.punbb-admin textarea,
.punbb-admin option {
  color: #111 !important;
  background-color: #ffffff;
  text-shadow: none !important;
}

/* Блоки, контейнеры, таблицы */
.punbb-admin table,
.punbb-admin .box,
.punbb-admin .main,
.punbb-admin .adcontainer,
.punbb-admin .adformal,
.punbb-admin .container {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  box-shadow: none !important;
}

/* Поля ввода */
.punbb-admin input[type="text"],
.punbb-admin input[type="password"],
.punbb-admin textarea,
.punbb-admin select {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #bbb !important;
  border-radius: 5px !important;
}


/* ==========================================================================
   LAYOUT / BODY
   Фон страницы, общий контейнер форума, базовая типографика.
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    #1a1a1a
    url("https://www.transparenttextures.com/patterns/asfalt-light.png")
    repeat center center;
  background-size: auto;
  opacity: 1;
}

#pun {
  width: 950px;
  margin: 30px auto;
  background: var(--color-surface);
  color: var(--color-text);
}



/* Базовая типографика внутри punbb — старый добрый Arial/Verdana */
.punbb { font: 12px Arial, Verdana, sans-serif; }

/* Общие внутренние отступы для стандартных контейнеров PunBB */
.punbb > div .container { padding: var(--space-lg); }

/* ==========================================================================
   TOP NAV / USER LINKS / STATUS / BREADCRUMBS
   Верхняя навигация форума: меню, пользовательские ссылки, статус, хлебные крошки.
   ========================================================================== */
/* === ВЕРХНЕЕ МЕНЮ (фиксированное, горизонтальное) ===================== */
#pun-navlinks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  z-index: 10000;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;

  /* фон с зерном */
  background:
    rgba(10, 20, 15, 0.92)
url("https://forumstatic.ru/files/001c/93/33/46552.png")
    repeat center center;
  background-size: 250px 250px;

  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px) contrast(110%);
}

/* Сбрасываем стандартные контейнеры, чтобы не ломали флекс */
#pun-navlinks .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Сам список — горизонтальный флекс, без переносов */
#pun-navlinks ul {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 36px; /* расстояние между пунктами */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Элементы списка */
#pun-navlinks li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Ссылки */
#pun-navlinks a {
  color: #d5d9d5;
  text-decoration: none;
  text-shadow: 0 0 3px rgba(220,240,220,0.08);
  transition: color 0.25s ease, text-shadow 0.3s ease, transform 0.2s ease;
  white-space: nowrap; /* чтобы текст не переносился */
}

/* Hover */
#pun-navlinks a:hover {
  color: #9fd3b0;
  text-shadow: 0 0 6px rgba(159,211,176,0.3);
  transform: translateY(-1px);
}

/* Активная ссылка */
#pun-navlinks .is-active a {
  color: #b8e3c2;
  text-shadow: 0 0 6px rgba(184,227,194,0.4);
}

/* Отступ под фиксированным меню */
body { padding-top: 60px; }

/* === ТЕКСТ ШАПКИ: ЖЁСТКАЯ ФИКСАЦИЯ ПО Y ===================== */
.header-title {
  position: absolute;

  left: 50%;                 /* центр по горизонтали */
  top: 340px;                /* ЖЁСТКАЯ высота от верха шапки */
  transform: translateX(-50%);

  font-family: "Space Grotesk", sans-serif;
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #f4f5f4;

  white-space: nowrap;       /* не переносить HIGH на две строки */

  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.25),
    0 0 16px rgba(255, 255, 255, 0.20),
    0 0 28px rgba(255, 255, 255, 0.10);

  z-index: 20;
  pointer-events: none;
}

.header-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #e9f5ed;
  filter: blur(12px);
  opacity: 0.85;
  z-index: -1;
}

/* если хочешь, чтобы на совсем маленьких экранах только размер шрифта
   уменьшался, но позиция не менялась — делаем так: */
@media (max-width: 768px) {
  .header-title {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .header-title {
    font-size: 32px;
  }
}



/* === НАВИГАЦИЯ ПОД ШАПКОЙ ====== */
#pun-ulinks {
  position: absolute;
  top: 400px;                   /* &#8592; регулируй высоту вручную */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  width: 100%; /* вместо 100vw */
  box-sizing: border-box;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.6px;
  color: #e9f5ed;
  text-shadow: 0 0 6px rgba(233,245,237,0.25);
}

/* ключ: именно список должен быть flex */
#pun-ulinks ul {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 20px;                    /* &#8592; увеличивает расстояние между пунктами */
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

#pun-ulinks li {
  display: inline-flex;
  align-items: center;
}

#pun-ulinks a {
  color: #e9f5ed;
  text-decoration: none;
  position: relative;
  transition: all 0.25s ease;
  padding: 2px 0;
}

#pun-ulinks a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(233,245,237,0.8);
}

#pun-ulinks a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(233,245,237,0.7);
  transition: width 0.3s ease;
}

#pun-ulinks a:hover::after {
  width: 100%;
}

/* === ТЭГИ В ШАПКЕ (в линию, с мягкой подсветкой) ==================== */
.head-tags {
  position: absolute;
  bottom: -96px;                 /* &#8593; регулируй — высота от низа шапки */
  transform: translateX(80%); /* &#8592; чем меньше число, тем правее */
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;                    /* расстояние между тэгами */
  z-index: 5;
}

.head-tags a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e9f5ed;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(233,245,237,0.3);
  border-radius: 12px;
  background: rgba(10,20,10,0.55);
  backdrop-filter: blur(3px);
  transition: all 0.25s ease;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.head-tags a:hover {
  color: #fff;
  border-color: rgba(233,245,237,0.8);
  background: rgba(50,80,60,0.7);
  box-shadow:
    0 0 10px rgba(233,245,237,0.2),
    inset 0 0 10px rgba(233,245,237,0.15);
  transform: translateY(-2px);
}



/* Строка статуса (кто вы вошли/время и т.д.) */
#pun-status { font-family: var(--font-sans); text-transform: lowercase; font-size: 10px; }
#pun-status span { white-space: nowrap; margin-right: 5px; }

/* Хлебные крошки — мелкий текст по центру */
.crumbs.container {
  font-family: var(--font-sans);
  font-size: 10px;
  text-align: center;
  text-transform: lowercase;
}


/* === Пагинация: "страница: 1" — слева, в стиле форума ================== */

/* Контейнер пагинации (учтены оба варианта классов) */
#pun-viewtopic .pagelink,
#pun-viewtopic .pagelinks,
.punbb .pagelink,
.punbb .pagelinks {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important; /* &#8592; слева */
  gap: 10px;

  /* позиционирование */
  margin: 8px 0 16px !important;
  padding: 4px 12px 5px;

  /* визуальный стиль под шапку */
  background: rgba(15,20,15,0.45);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 8px rgba(0,0,0,0.25);

  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.4px;
  color: rgba(233,245,237,0.85);
  width: fit-content;
}

/* ссылки-страницы */
#pun-viewtopic .pagelink a,
#pun-viewtopic .pagelinks a,
.punbb .pagelink a,
.punbb .pagelinks a {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(233,245,237,0.85);
  transition: all .2s ease;
}

/* hover */
#pun-viewtopic .pagelink a:hover,
#pun-viewtopic .pagelinks a:hover,
.punbb .pagelink a:hover,
.punbb .pagelinks a:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 5px rgba(255,255,255,0.10);
}

/* текущая страница (обычно это <strong>) */
#pun-viewtopic .pagelink strong,
#pun-viewtopic .pagelinks strong,
.punbb .pagelink strong,
.punbb .pagelinks strong {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

/* аккуратный заголовок "страница:" (если он выводится как отдельный <span>/<em>) */
#pun-viewtopic .pagelink span,
#pun-viewtopic .pagelinks span,
.punbb .pagelink span,
.punbb .pagelinks span {
  opacity: .9;
}

/* если движок центрует через .linksb/.linkst — принудительно слева */
#pun-viewtopic .linkst .pagelink,
#pun-viewtopic .linkst .pagelinks,
#pun-viewtopic .linksb .pagelink,
#pun-viewtopic .linksb .pagelinks {
  margin-left: 0 !important;
  justify-content: flex-start !important;
}


/* === Шапка темы =================================================== */

#pun-viewtopic .topic-header {
  position: relative;
  width: 950px;
  height: 150px;       /* уменьшили */
  margin: 0 auto 6px;  /* уменьшили расстояние до постов */
  padding-top: 0;
  border-radius: 12px;
  overflow: visible;
  background: url(https://forumstatic.ru/files/001c/93/33/33434.jpg)
              center top / 100% auto no-repeat;
}


#pun-viewtopic .topic-header::before {
  content: "";
  position: absolute;
  top: 88px;                      /* как было */
  left: 50%;
  transform: translateX(-50%);

  width: 100%;                    /* полоса от края до края */
  height: 42px;

  border-radius: 0;
  z-index: 3;

  background-image:
    repeating-linear-gradient(
      -45deg,
    rgba(11, 47, 36, 0.95) 0 4px,  
      var(--color-bg)          4px 8px   /* пустота = фон */
    )
}

#pun-viewtopic .topic-header::after {
  content: attr(data-title);
  position: absolute;
  top: 100px;                        /* чуть ниже центра полосы */
  left: 50%;
  transform: translateX(-50%);

  font-family: "Space Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.07em;

  white-space: nowrap;
  color: #f4f5f4;
  z-index: 5;
}



/* хлебные крошки с блюр-подложкой */
#pun-viewtopic .topic-header .crumbs.container {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: lowercase;
  color: rgba(255,255,255,0.9);
  text-align: center;
  margin: 0;
  padding: 4px 14px;

  background: rgba(15, 20, 15, 0.45);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

/* ссылки в крошках */
#pun-viewtopic .topic-header .crumbs.container a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
#pun-viewtopic .topic-header .crumbs.container a:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}

/* скрыть стандартный авто-заголовок темы под баннером */
#pun-viewtopic .main h1 {
  display: none !important;
}

/* выравнивание тела темы */
#pun-viewtopic #pun-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* Копирайт — выравнивание по центру */
#pun-about .container { text-align: center; }

/* ==========================================================================
   MAIN TABLES (INDEX / VIEWFORUM / SEARCHTOPICS)
   Таблицы списков форумов, тем, результатов поиска и т.п.
   ========================================================================== */
/* было: .main table { table-layout: fixed; width: 100%; } */

/* фикс-таблица только там, где она реально нужна */
#pun-index .main table,
#pun-viewforum .main table,
#pun-searchtopics .main table,
#pun-modviewforum .main table {
  table-layout: fixed;
  width: 100%;
}

/* td-паддинг тоже только для таблиц списков */
#pun-index .main td,
#pun-viewforum .main td,
#pun-searchtopics .main td,
#pun-modviewforum .main td {
  padding: 10px;
}

.main th { padding: 5px 10px; }
.tcl { width: 50%; } /* колонка с названием темы/форума */
.tc2, .tc3, .tcmod { text-align: center; width: 10%; } /* счётчики/модерация */

/* На главной скрываем визуально лишние колонки (но сохраняем структуру) */
#pun-index .tc2, #pun-index .tc3, #pun-index .tcmod { visibility: hidden; }
#pun-index td .avatar-image { outline: 2px solid var(--color-accent); }


#pun-searchtopics .tcl, #pun-modviewforum .tcl { width: 40%; }
#pun-searchtopics .tc2 { text-align: left; width: 20%; }
#pun-debug table .tcl { width: 15%; }
#pun-debug .tcr { width: 90%; }

/* Tooltip © Домовой — modernized — всплывающая подсказка */
#tooltip {
  position: absolute;
  z-index: 999;
  max-width: 200px;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--color-brand);
  color: #fff;
  font: 12px var(--font-sans);
  text-align: center;
  text-transform: lowercase;
  display: none;
}

/* Разделители тем/закрепы — разноцветные полосы между блоками */
tr.tr-divider.imp, tr.tr-divider.st {
  height: 20px;
  display: flex; align-items: center; justify-content: center;
}
tr.tr-divider.st { background: var(--color-surface); color: var(--color-brand-strong); }
tr.tr-divider.imp { background: var(--color-brand); color: #fff; border-radius: 9px 9px 0 0; }

/* Таблица тем в разделе — подложка для наглядности строк */
#pun-viewforum table { background: var(--color-surface-2); border-radius: 9px; }
/* FIX: был неверный селектор — текстовая подпись под колонкой ответов */
#pun-viewforum .tc2::before { content: "ответов"; }

/* ==========================================================================
   HEADER (Шапка)
   Графическая шапка страницы: фон, логотип (скрыт), информационные блоки.
   ========================================================================== */
/* === ШАПКА ФОРУМА ==================================================== */
/* === ВНЕШАЯ ШАПКА (СТОИТ В HTML-ВЕРХЕ) ============================= */
.tablica.simple-head {
  position: relative;
  width: 950px;
  height: 339px;                 /* &#8592; фиксированная высота, чтобы не сжималась */
  margin: 0 auto 30px;
  background: url(https://forumstatic.ru/files/001c/93/33/13469.jpg) center top / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

/* вариант для blue-темы */
.blue .tablica.simple-head {
  background: url(https://forumstatic.ru/files/001c/43/fc/98034.png) center top / cover no-repeat;
}

/* затемнение поверх фона */
.tablica.simple-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

/* внутреннее содержимое */
.tablica.simple-head > * {
  position: relative;
  z-index: 1;
}

/*эп*/
/* эпизод */
.bestep {
  font: 13px var(--font-sans);
  text-transform: lowercase;
  letter-spacing: 0.4px;
  margin: 80px 0 0 60px;
}

.bestep a {
  color: #fff;
  font: italic 15px var(--font-sans);
  text-decoration: none;
  position: relative;

  /* создаём волнистое подчёркивание только через фон */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(168,255,158,0.65) 0 2px,
    transparent 2px 4px
  );
background-position: 0 1.05em;  /* почти под текстом */
  background-size: 6px 6px;
  background-repeat: repeat-x;
}

/* при наведении — чуть ярче */
.bestep a:hover {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(168,255,158,0.85) 0 2px,
    transparent 2px 4px
  );
}


/* цитата — позиционируем вручную */
.bestquote {
  position: absolute;
  left: 650px;
  top: -30px;
  width: 270px;
  max-height: 55px;        /* ограничиваем высоту блока */
  overflow-y: auto;        /* вертикальная прокрутка */
  overflow-x: hidden;      /* горизонтальную убираем */
  border-radius: 6px;
  padding: 8px 10px;
  font: 10px/1.5 var(--font-sans);
  color: #e8e8e8;
  scrollbar-width: thin;   /* тонкий скролл для Firefox */
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/* Стилизация полосы прокрутки для Chrome / Edge */
.bestquote::-webkit-scrollbar {
  width: 6px;
}
.bestquote::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.25);
  border-radius: 4px;
}
.bestquote::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.4);
}


/* имя автора рядом с цитатой */
.bestauthor {
  position: absolute;
  left: 605px;      /* &#8592; отрегулируй под своё расположение */
  top: -30px;       /* &#8592; выровняй по вертикали с цитатой */
  font: 600 13px/1 var(--font-sans);
  text-transform: lowercase;
  color: #d7d7d7;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.bestauthor:hover {
  color: var(--color-brand); /* тот же акцент, что в меню */
}


/* ============================================================
   КАРТОЧКА АВТОРА — УЖАТАЯ, КОМПАКТНАЯ
   ============================================================ */

#pun-viewtopic .post-author {
  position: relative;
  float: left !important;                   /* классический левый столбец */
  width: var(--pa-card-width) !important;   /* УЖЕ СТАНДАРТНОЙ КОЛОНКИ */
  margin: 0 20px 0 0 !important;

  background: #050808 !important;
  border: 1px solid #141a17 !important;
  border-radius: 22px !important;
  overflow: hidden;                         /* чтобы баннер впился в низ */

  padding: var(--pa-card-pad-y) var(--pa-card-pad-x) 0;
}

/* содержимое по центру */
#pun-viewtopic .post-author > ul {
  text-align: center;
}

/* скрываем лишнее (tuser, подарки и пр.) */
#pun-viewtopic i#tuser,
#pun-viewtopic .icons-search#tuser,
#pun-viewtopic .post-author .pa-ua,
#pun-viewtopic .post-author .pa-gifts {
  display: none !important;
}

/* ============================================================
   НИК И ГРУППА
   ============================================================ */

#pun-viewtopic .post-author .pa-author {
  margin-top: 6px !important;
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

#pun-viewtopic .post-author .pa-author img {
  max-height: 14px;
  border-radius: 2px;
}

#pun-viewtopic .post-author .pa-title {
  padding: 5px 10px 2px;
  margin: 0 0 4px;
  font: 9px/1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  background: #050808;
}

/* ============================================================
   АВАТАР + ОПИСАНИЕ — ОДНА ШИРИНА
   ============================================================ */

/* жёстко выравниваем ширину и центрируем */
#pun-viewtopic .post-author .pa-avatar,
#pun-viewtopic .post-author ul li.pa-fld1 {
  width: var(--pa-char-width) !important;
  max-width: var(--pa-char-width) !important;
  min-width: var(--pa-char-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* аватар — компактный постер */
#pun-viewtopic .post-author .pa-avatar {
  height: var(--pa-char-size);
  margin-top: 12px;

  background: #090d0b;
  border: 2px solid #0f1311;
  border-bottom: none;
  border-radius: 8px 8px 0 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#pun-viewtopic .post-author .pa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* описание — продолжение постера */
#pun-viewtopic .post-author ul li.pa-fld1 {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 10px 12px !important;

  background: #090d0b;
  border: 2px solid #0f1311;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

#pun-viewtopic .post-author .pa-fld1 strong {
  display: none;
}

#pun-viewtopic .post-author .char-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#pun-viewtopic .post-author .char-meta-role {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
}

#pun-viewtopic .post-author .char-meta-name {
  font-size: 13px;
  font-weight: 600;
}

#pun-viewtopic .post-author .char-meta-name span {
  font-size: 10px;
}

#pun-viewtopic .post-author .char-meta-quote {
  font-size: 10px;
  line-height: 1.4;
}

/* ============================================================
   СТАТИСТИКА (сообщения / репутация)
   ============================================================ */

#pun-viewtopic .pa-posts,
#pun-viewtopic .pa-respect {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  gap: 4px;
  margin: 4px 4px 12px;
  padding: 4px 9px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 10.5px;
}

/* сообщения */
#pun-viewtopic .pa-posts::before {
  font-family: "Material Symbols Outlined";
  content: "mail";
  font-size: 15px;
}

#pun-viewtopic .pa-posts .fld-name {
  font-size: 0 !important;
}

/* репутация */
#pun-viewtopic .pa-respect img {
  display: none !important;
}

#pun-viewtopic .pa-respect::before {
  font-family: "Material Symbols Outlined";
  content: "add";
  font-size: 15px;
}

#pun-viewtopic .pa-respect .fld-name a {
  display: none !important;
}

/* ============================================================
   ХВОСТ-БАННЕР (pa-fld2) — 30px, ПРИЛИПАЕТ К НИЗУ
   ============================================================ */

/* убираем подпись поля и <br> */
#pun-viewtopic .post-author .pa-fld2 .fld-name,
#pun-viewtopic .post-author .pa-fld2 br {
  display: none !important;
}

#pun-viewtopic .post-author .pa-fld2 {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* контейнер баннера */
#pun-viewtopic .post-author .pa-fld2 .char-footer-banner {
  position: relative;
  height: 30px;

  /* растягиваем фон баннера на всю ширину карточки */
  margin: 0 calc(-1 * var(--pa-card-pad-x));
  margin-bottom: -1px; /* чтобы не было щели по границе */

  overflow: hidden;
}

/* картинка баннера */
#pun-viewtopic .post-author .pa-fld2 .char-footer-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* текст по центру баннера */
#pun-viewtopic .post-author .pa-fld2 .char-footer-banner span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  text-align: center;

  text-shadow:
    0 1px 2px rgba(0,0,0,0.65),
    0 2px 6px rgba(0,0,0,0.55);

  padding: 0 10px;
  max-width: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

/* === Навигация (спойлер) ============================================== */
.navspoiler {
  width: fit-content;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  padding: 10px 14px;
  font: 11px var(--font-sans);
  color: #ccc;
}
.navsummary {
  cursor: pointer;
  font-weight: 600;
  text-transform: lowercase;
  transition: color 0.3s ease;
}
.navsummary:hover { color: var(--color-brand); }
.navlinks {
  display: none;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-top: 6px;
}
.navlinks.open { display: flex; }
.navlinks a {
  color: #eaeaea;
  font-size: 10px;
  text-decoration: none;
  transition: color 0.3s ease;
}
.navlinks a:hover { color: var(--color-brand); }



/* ==========================================================================
   ANNOUNCEMENT / FOOTER
   Объявления и подвал сайта: баннерная лента, отключение заголовка.
   ========================================================================== */
#pun-announcement h2 { display: none; }

#html-footer .container { padding: 0; }

/* === ПОЛОСА БАННЕРОВ — стеклянная с зацикленным фоном ================== */
.banners {
  position: relative;
  z-index: 100;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  background: rgba(15, 18, 16, 0.35); /* лёгкий дымчатый слой поверх фона */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 0;
  overflow: hidden; /* чтобы фон не вылезал */
}

/* фоновая текстура */
.banners::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://forumstatic.ru/files/001c/93/33/46552.png?v=1")
              repeat-x center top;
  background-size: auto 100%; /* зацикливание по горизонтали */
  opacity: 0.4;               /* прозрачность рисунка */
  pointer-events: none;
  z-index: 0;
}

/* контейнер с баннерами */
.banners .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 18px;
  justify-content: flex-start;
  padding: 8px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 210, 205, 0.25) transparent;
}

/* элементы баннеров */
.banners a {
  flex: 0 0 auto;
  opacity: 0.8;
  transition: opacity 0.25s ease, transform 0.3s ease;
  border-radius: 6px;
}
.banners a:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* webkit-scrollbar */
.banners .container::-webkit-scrollbar {
  height: 6px;
}
.banners .container::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 185, 0.25);
  border-radius: 3px;
}
.banners .container::-webkit-scrollbar-track {
  background: transparent;
}


/* === ТЕКСТ ПОСТА ============================================== */


/* Дата + время + № поста — аккуратная полоса */
#pun-viewtopic .post h3{
  display: flex !important;
  align-items: baseline !important;
  /* дата/время слева, номер справа */
  justify-content: flex-start !important;
  gap: 18px;                 /* воздух между датой и временем (поддержка при span'ах) */
  padding: 0 22px 8px 12px;  /* &#8592; правый паддинг даст отступ от края для номера */
  border-bottom: 1px solid rgba(255,255,255,.05);
  font: 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(230,230,230,.45);
}

#pun-viewtopic .post h3 > span{
  margin-left: 8px;       
  word-spacing: 12px;      
  white-space: nowrap;
}

#pun-viewtopic .post h3 .post-num,
#pun-viewtopic .post h3 strong {
  margin-right: 8px;
}


/* === КНОПКИ ПОД ПОСТОМ ======================================= */
.post-links {
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 10px;
  padding-top: 8px;
  text-align: right;
}

.post-links a {
  font: 11px 'Space Grotesk', sans-serif;
  color: #888b88;
  text-decoration: none;
  text-transform: lowercase;
  margin-left: 10px;
  transition: color 0.3s ease;
}

.post-links a:hover {
  color: #cfd3cf;
}


/* ==========================================================================
   PROFILE / MESSAGES
   Оформление страниц профиля и личных сообщений (грид-раскладка).
   ========================================================================== */


/* ==========================================================================
   USERLIST / INFO PAGES
   Список пользователей и общие служебные страницы (стили форм и таблиц).
   ========================================================================== */
#pun-userlist .formal, #pun-userlist .formal .container { margin-bottom: 0; }
#pun-userlist .tc2 { text-align: left; width: 20%; }
#pun-userlist .tcl { width: 40%; }

.info .container { padding: var(--space-sm); }
.info .container .backlink { padding-top: 8px; }

.info-box { margin: 0 0 10px; }
.info-box * { padding: 0 0 5px; }
.info-box .legend { font-weight: 700; }

.jGrowl-notification .jGrowl-close { position: relative; right: 6px; }

/* === КНОПКИ ПРОКРУТКИ (вверх/вниз) ============================ */
.scroll-buttons {
  position: fixed;
  bottom: 60px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
z-index: 999999 !important;
}

.scroll-btn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(233,245,237,0.3);
  border-radius: 50%;
  background: rgba(10,20,10,0.55);
  backdrop-filter: blur(6px);
  color: #e9f5ed;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

/* Анимация появления при скролле */
.scroll-btn.show {
  opacity: 1;
  pointer-events: auto;
}

/* Hover — мягкое свечение и подскок */
.scroll-btn:hover {
  color: #fff;
  border-color: rgba(233,245,237,0.8);
  background: rgba(50,80,60,0.7);
  box-shadow:
    0 0 10px rgba(233,245,237,0.2),
    inset 0 0 10px rgba(233,245,237,0.15);
  transform: translateY(-3px);
}

/*==========================================================================
   QUICK RATING (БыстроПлюсы)
   Система быстрых лайков/рейтинга постов (внешний вид кнопок и иконок).
   ========================================================================== */
.noNull::before {
  content: "+"; position: absolute; margin-left: -6px; font-size: 9px;
}
div .post-rating p > a {
  position: relative; z-index: 100; display: inline-block; vertical-align: middle;
  width: 38px; height: 38px; line-height: 36px; letter-spacing: 2px; text-align: center;
  font-size: 12px !important; font-weight: 700; color: var(--color-brand);
  background: url(https://forumstatic.ru/files/001b/a6/d4/26514.svg) no-repeat center / 38px auto;
  outline: 1px solid transparent;
}
div.dark-style .post-rating p > a { color: #6BC8AF !important; }

div.post-vote {}
div.post-vote p > a {
  position: absolute; z-index: 200; display: block; cursor: pointer;
  width: 23px; height: 23px; font-size: 0 !important;
  background: url(https://forumstatic.ru/files/0012/d8/04/75043.png?) no-repeat / 100%;
}
.post.dark-style div.post-vote p > a {
  background: url(https://forumstatic.ru/files/0012/d8/04/38128.png?) no-repeat / 100%;
}
.punbb div.post-vote p { padding: var(--space-lg)!important; margin: 0!important; }


/* ==========================================================================
   INDEX: CATEGORIES / STATS
   Заголовки категорий, список форумов, общая статистика в подвале.
   ========================================================================== */

/* === УБИРАЕМ ГЛАВНЫЙ H1 ФОРУМА ==================== */
#pun-index h1,
#pun-viewforum h1 {
  display: none !important;
}

/* Скрыть thead (форум/тем/сообщений) — визуально упрощаем список */
#pun-index thead { display: none; }

/* Скрыть логотип-заголовок в шапке */
#pun-index h1.title-logo,
.tablica.simple-head h1.title-logo,
h1.title-logo {
  display: none !important;
}

/* === Категории: индустриальный горный стиль ===================== */
#pun-index .category h2 {
  margin: 15px 0 !important;
  padding: 0 !important;
  text-align: right;
  position: relative;
  overflow: hidden;
}

/* сам текст */
#pun-index .category h2 span:not(.categoryTool) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1.4px;
  text-transform: uppercase;

  color: #e6e9e7;
  text-shadow:
    0 0 2px rgba(120,130,120,0.3),
    0 0 10px rgba(180,200,180,0.08),
    0 0 30px rgba(180,200,180,0.05);
  position: relative;
}

/* горная линия, привязанная к самому тексту категории */
#pun-index .category h2 span:not(.categoryTool) {
  position: relative;          /* чтобы ::after цеплялся к спану */
  padding-bottom: 6px;         /* немного места под «горы» */
}

#pun-index .category h2 span:not(.categoryTool)::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;                    /* от правого края текста */
  width: 160px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'><path d='M0 16 L20 8 L35 12 L55 4 L75 14 L100 6 L125 12 L160 4' stroke='%23a6b5a2' stroke-width='1.2' fill='none' stroke-linecap='round'/></svg>") 
              no-repeat right bottom / contain;
  opacity: 0.25;
  filter: drop-shadow(0 0 4px rgba(140,170,150,0.4));
  animation: ridgeGlow 4s ease-in-out infinite;
}


/* Мягкое свечение гор */
@keyframes ridgeGlow {
  0%,100% {
    opacity: 0.25;
    filter: drop-shadow(0 0 2px rgba(140,170,150,0.3));
  }
  50% {
    opacity: 0.45;
    filter: drop-shadow(0 0 6px rgba(180,220,190,0.6));
  }
}

/* скрыть описание */
.desktext { display: none !important; }

/* убрать лишние фоновые изображения, если остались */
#pun-index .category h2 span:not(.categoryTool) {
  background: none !important;
}

/* мелкая подпись под категорией */
.categoryTool {
  display: none;
}


/* ========================================================================== */
/* INDEX: карточки форумов                                                    */
/* ========================================================================== */

/* убираем заголовок и шапку таблицы */
#pun-index h1,
#pun-viewforum h1 {
  display: none !important;
}

#pun-index thead {
  display: none;
}

/* таблица без фонов и стандартных паддингов */
#pun-index table {
  background: none !important;
}

#pun-index th,
#pun-index td {
  background: none !important;
  border: none !important;
  padding: 0; /* дальше задаём свои отступы */
}

/* левая колонка */
#pun-index .tcl {
    flex: 1 1 auto;
    margin-right: 40px;
}


/* боковая полоска слева */
#pun-index div.icon {
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  background: #5f7269;
  border-radius: 0;
}

#pun-index tr.inew div.icon {
  background: #5ab87c;
}

/* убираем лишние колонки счётчиков */
#pun-index .tc2,
#pun-index .tc3,
#pun-index .tcmod {
  display: none !important;
}

/* левая колонка (название + описание) */
#pun-index .tcl {
  flex: 1 1 auto;
  text-align: left !important;
}

/* заголовок форума */
#pun-index .tcl h3 a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e6e9e7;
}

/* описание */
#pun-index .forumdesc,
#pun-index .desktext {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 70ch;
  text-align: left !important;
}

/* маленькие капсулы-теги внутри описания */
#pun-index .forumdesc a,
#pun-index .desktext a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e9f5ed;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(233,245,237,0.3);
  border-radius: 12px;
  background: rgba(10,20,10,0.55);
  backdrop-filter: blur(3px);
  transition: all 0.25s ease;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

#pun-index .forumdesc a:hover,
#pun-index .desktext a:hover {
  color: #fff;
  border-color: rgba(233,245,237,0.8);
  background: rgba(50,80,60,0.7);
  box-shadow:
    0 0 10px rgba(233,245,237,0.2),
    inset 0 0 10px rgba(233,245,237,0.15);
  transform: translateY(-2px);
}

/* ДОП-ФИКС для тегов на главной, чтобы не наезжали друг на друга */
#pun-index .forumdesc a,
#pun-index .desktext a {
    display: inline-block;
    line-height: 1;            /* внутри капсулы — компактная строка */
    margin: 4px 8px 6px 0;     /* сверху/снизу добавили воздуха */
}

/* === INDEX LAYOUT — ЧИСТАЯ ВЕРСИЯ (Вариант А) ========================= */

/* каждая строка форума превращаем в flex-карточку */
#pun-index tbody.hasicon tr {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 30px;
    margin: 0 0 18px;
    background: #141817;
    border: 1px solid #1d2421;
    border-radius: 10px;
    box-sizing: border-box;
}

/* левая колонка (название форума + описание) */
#pun-index .tcl {
    flex: 1 1 auto;
    margin-right: 40px;
}

/* ПРАВАЯ КОЛОНКА: аватар + текст последнего поста */
#pun-index .tcr {
  flex: 0 0 260px;
  max-width: 260px;
  min-width: 260px;

  display: flex;
  flex-direction: row;        /* РЯДОМ: [аватар] [текст] */
  align-items: center;        /* ВЕРТИКАЛЬНО ПО ЦЕНТРУ */
  justify-content: flex-end;  /* прижали всё вправо */
  gap: 14px;

  text-align: right;
}

/* мини-аватарки на главной: кружок + ч/б */
#pun-index .tcr .user-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(170,190,175,0.45);

  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.25s ease;
}

/* при наведении можно вернуть цвет (если хочешь) */
#pun-index .tcr .user-avatar img:hover {
  filter: none;
  -webkit-filter: none;
}

#pun-index .tcr .user-avatar,
#pun-index .tcr .user-avatar img {
  filter: grayscale(100%);
}

/* текстовый блок справа от аватара */
#pun-index .tcr .lastpost-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* название темы */
#pun-index .tcr .lastpost-link {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: #e6e9e7;
}

/* дата + автор */
#pun-index .tcr .lastpost-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #b1b9b4;
}

#pun-index .tcr .lastpost-meta .byuser {
  font-weight: 600;
  color: #d4efe0;
}

/* отключаем лишние колонки */
#pun-index .tc2,
#pun-index .tc3,
#pun-index .tcmod {
    display: none !important;
}

#pun-index .tcr .lastpost-link {
    display: block;
    max-width: 140px;  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* все мини-авы в списке форумов — ч/б */
#pun-index .tcr .user-avatar img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* если хочешь, чтобы при наведении становились цветными */
#pun-index .tcr .user-avatar img:hover {
  filter: none;
  -webkit-filter: none;
}




/* Статистика — компактные "пилюли" с данными + список онлайн */
#pun-stats .container {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  font: 10px var(--font-sans); text-transform: lowercase;
}
.online-list { font: 11px var(--font-sans); }
#pun-stats h2 { display: none; }
#pun-stats li.item1, #pun-stats li.item2,
#pun-stats li.item3, #pun-stats li.item4 {
  background: var(--color-surface-2);
  padding: 5px 25px; border-radius: 23px; clear: both;
}
li#onlinelist { margin-top: 10px; width: 100%; text-align: justify; flex-grow: 1; }

/* =========================================================
   СПИСОК ТЕМ ВО viewforum — МИНИМАЛИСТИЧНЫЙ ВАРИАНТ
   ========================================================= */

/* Обёртка таблицы тем */
#pun-main .forum .container {
  margin: 32px 0 24px;
}

/* Таблица без собственного фона/капсулы */
#pun-main .forum .container > table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  background: transparent;
  border: none;
  box-shadow: none;
}

/* ---------- ШАПКА ТАБЛИЦЫ ---------- */

#pun-main .forum .container thead tr {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#pun-main .forum .container thead th {
  padding: 12px 16px;
  font: 11px "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(205,215,210,0.8);
  text-align: left;
}

/* 1 — тема, 2 — ответов, 3 — просмотров, 4 — последнее сообщение */
#pun-main .forum .container thead th:nth-child(1) { width: 46%; text-align: left;  }
#pun-main .forum .container thead th:nth-child(2) { width: 12%; text-align: center;}
#pun-main .forum .container thead th:nth-child(3) { width: 12%; text-align: center;}
#pun-main .forum .container thead th:nth-child(4) { width: 30%; text-align: right; }

/* ---------- СТРОКИ ТЕМ ---------- */

/* на всякий случай — показываем строки */
#pun-main .forum .container tbody.hasicon tr {
  display: table-row;
}

/* базовый стиль ячеек */
#pun-main .forum .container tbody.hasicon td {
  padding: 14px 16px;
  font: 14px/1.5 "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: rgba(225,230,225,0.9);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* лёгкий hover вместо фона/капсулы */
#pun-main .forum .container tbody.hasicon tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* колонка "Тема" */
#pun-main .forum .container tbody.hasicon td.tc1 a,
#pun-main .forum .container tbody.hasicon td.tcl a {
  color: rgba(235,245,238,0.96);
  text-decoration: none;
}
#pun-main .forum .container tbody.hasicon td.tc1 a:hover,
#pun-main .forum .container tbody.hasicon td.tcl a:hover {
  color: rgba(140,210,140,0.95); /* зелёный акцент */
}

/* "Ответов" и "Просмотров" */
#pun-main .forum .container tbody.hasicon td.tc2,
#pun-main .forum .container tbody.hasicon td.tc3 {
  text-align: center;
  font-size: 13px;
  color: rgba(190,200,195,0.8);
}

/* убираем старое псевдо-слово "ответов" в ячейке */
#pun-main .forum .container tbody.hasicon td.tc2::before {
  content: none !important;
}

/* "Последнее сообщение" */
#pun-main .forum .container tbody.hasicon td.tcr {
  text-align: right;
  font-size: 13px;
  color: rgba(190,200,195,0.85);
}
#pun-main .forum .container tbody.hasicon td.tcr a {
  color: inherit;
  text-decoration: none;
}
#pun-main .forum .container tbody.hasicon td.tcr a:hover {
  color: rgba(230,245,235,1);
}

/* =========================================================
   ВЕРХНИЙ/НИЖНИЙ БАР (НОВАЯ ТЕМА, ПАГИНАЦИЯ)
   ========================================================= */

/* общая линия: сверху — бар, снизу оставляем только пагинацию */
#pun-main .linkst,
#pun-main .linksb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0;
  font-size: 13px;
}

/* только одна кнопка "Новая тема" — "Новый опрос" прячем */
.postlink.long .new-poll {
  display: none !important;
}

/* нижний блок с кнопками прячем, оставляем только верхний */
#pun-main .linksb .postlink.long {
  display: none !important;
}

/* контейнер с кнопкой(ами) */
#pun-main .postlink.long {
  display: flex;
  gap: 10px;
}

/* в верхнем баре прижимаем кнопку к правому краю */
#pun-main .linkst .postlink.long {
  margin-left: auto;
}

/* кнопка "Новая тема" */
#pun-main .postlink.long span.new-topic a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 999px;

  font: 11px "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;

  text-decoration: none;
  border: 1px solid rgba(140,210,140,0.95);
  color: rgba(230,245,235,0.95);
  background: transparent;
}
#pun-main .postlink.long span.new-topic a:hover {
  background: rgba(140,210,140,0.95);
  color: rgba(8,10,9,1);
}

/* пагинация */
#pun-main .pagelink {
  display: flex;
  gap: 6px;
  font-size: 12px;
}

#pun-main .pagelink a,
#pun-main .pagelink strong {
  min-width: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
}

#pun-main .pagelink a {
  text-decoration: none;
  color: rgba(200,210,205,0.85);
  background: rgba(0,0,0,0.35);
}
#pun-main .pagelink a:hover {
  color: rgba(230,245,235,1);
  background: rgba(25,30,27,0.9);
}

/* текущая страница */
#pun-main .pagelink strong {
  color: rgba(8,10,9,1);
  background: rgba(140,210,140,0.95);
}


/* ===== 1. ЧИСТИМ ДУБЛЬ В ШАПКЕ ===== */

/* убираем реальный текст во 2-й и 3-й колонке шапки */
#pun-main .forum .container thead th:nth-child(2),
#pun-main .forum .container thead th:nth-child(3) {
  font-size: 0;
  position: relative;
}

/* рисуем свои подписи поверх */
#pun-main .forum .container thead th:nth-child(2)::after {
  content: "ОТВЕТОВ";
  font-size: 11px;
  letter-spacing: 0.16em;
}

#pun-main .forum .container thead th:nth-child(3)::after {
  content: "ПРОСМОТРОВ";
  font-size: 11px;
  letter-spacing: 0.16em;
}


/* в колонке "Ответов" скрываем псевдо-надпись "ответов" */
#pun-main .forum .container tbody.hasicon td.tc2::before {
  content: none !important;
}

/* а числам возвращаем нормальный размер на всякий случай */
#pun-main .forum .container tbody.hasicon td.tc2 {
  font-size: 13px;
}

/* ===== ВЕРХНЯЯ ПАНЕЛЬ: только "НОВАЯ ТЕМА" справа ===== */

/* показываем детей .linkst заново */
#pun-main .linkst > * {
  display: inline-block !important;
}

/* убираем "страница 1" сверху */
#pun-main .linkst .pagelink {
  display: none !important;
}

/* сама панель: одна строка, контент прижат вправо */
#pun-main .linkst {
  display: block !important;
  width: 100% !important;
  text-align: right;          /* всё содержимое вправо */
  margin: 12px 0 6px !important;
  padding: 0 !important;
}

/* блок с кнопкой "Новая тема" */
#pun-main .linkst .postlink.long {
  display: inline-block !important;
  margin: 0 !important;
}

/* сама кнопка — как была раньше */
#pun-main .postlink.long span.new-topic a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 999px;

  font: 11px "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;

  text-decoration: none;
  border: 1px solid rgba(140,210,140,0.95);
  color: rgba(230,245,235,0.95);
  background: transparent;
}
#pun-main .postlink.long span.new-topic a:hover {
  background: rgba(140,210,140,0.95);
  color: rgba(8,10,9,1);
}



/* сам список тем чуть ближе к бару */
#pun-main .forum .container {
  margin-top: 8px;             /* было 32px в верхнем варианте */
}

#pun-main .linkst .pagelink {
  display: none !important;
}


/* =========================================================
   QUOTE / SPOILER / HIDE / CODE — ЕДИНЫЙ СТИЛЬ HIGH
   ========================================================= */

/* ---------- ЦИТАТЫ -------------------------------------- */

.punbb .post-content blockquote {
  margin: 18px 0;
  padding: 14px 22px 14px 26px;

  background: rgba(10,12,11,0.92);
  border-left: 3px solid var(--accent-green);
  border-radius: 0;
  box-shadow: none;

  font: 13px/1.65 var(--font-sans);
  color: var(--text-primary);
}

/* вложенные цитаты — чуть темнее, но без каши */
.punbb .post-content blockquote blockquote {
  background: #101412;
  border-left-color: rgba(92,132,92,0.7);
}

/* автор цитаты: <cite> или .quote-author */
.punbb .post-content blockquote cite,
.punbb .post-content blockquote .quote-author {
  display: block;
  margin-bottom: 6px;

  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--text-secondary);
}

/* абзацы внутри цитаты без красной строки */
.punbb .post-content blockquote p {
  text-indent: 0;
  margin: 0 0 .7em;
}
.punbb .post-content blockquote p:last-child {
  margin-bottom: 0;
}

.punbb .q-header {
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: .8;
}

.punbb .q-header a {
  color: inherit;
  text-decoration: none;
}

.punbb .q-header a:hover {
  text-decoration: underline;
}


/* Тонкая зелёная полоска слева */
.post-content .q-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: rgba(140, 210, 140, 0.45);
}

/* Ссылка-якорь на оригинал поста */
.post-content .q-header a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(215, 225, 220, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.post-content .q-header a:hover {
  color: rgba(230, 245, 235, 0.95);
  border-color: rgba(230, 245, 235, 0.8);
}


/* ---------- СПОЙЛЕР / СКРЫТЫЙ ТЕКСТ ---------------------- */

.punbb .post-content .spoiler-box,
.punbb .post-content .hide-box {
  margin: 18px 0;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,12,11,0.92);
  box-shadow: none;
}

/* заголовок спойлера (первая внутренняя div) */
.punbb .post-content .spoiler-box > div:first-child,
.punbb .post-content .hide-box > div:first-child {
  position: relative;
  padding: 8px 14px 8px 32px;

  cursor: pointer;

  font: 11px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);

  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.punbb .post-content .spoiler-box > div:first-child::before,
.punbb .post-content .hide-box > div:first-child::before {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  font-size: 20px;
  line-height: 1;

  text-transform: none;              /* &#8592; чтобы НЕ превращать в EXPAND_MORE */
  font-variant-ligatures: normal;    /* на всякий случай */
  font-feature-settings: "liga";     /* включаем лигатуры */

  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s ease, color 0.25s ease;
  color: rgba(190,200,195,0.9);
}

/* убить старый плюсик в шапке спойлера */
.punbb .post-content .spoiler-box > div:first-child img,
.punbb .post-content .hide-box   > div:first-child img {
  display: none !important;
}

.punbb .post-content .spoiler-box > div:first-child,
.punbb .post-content .hide-box   > div:first-child {
  background-image: none !important;
}



/* при раскрытии (скрипт обычно вешает класс .visible) — поворот стрелки */
.punbb .post-content .spoiler-box > div.visible::before,
.punbb .post-content .hide-box > div.visible::before {
  transform: translateY(-50%) rotate(180deg);
  color: var(--color-brand-strong);
}

/* содержание спойлера / hide — второй див */
.punbb .post-content .spoiler-box > div + div,
.punbb .post-content .hide-box > div + div {
  padding: 12px 18px 14px;
  font: 13px/1.65 var(--font-sans);
  color: var(--text-primary);
  background: transparent;
}

/* абзацы внутри — без красной строки */
.punbb .post-content .spoiler-box > div + div p,
.punbb .post-content .hide-box > div + div p {
  text-indent: 0;
}

/* ---------- КОД ------------------------------------------ */

.punbb .code-box {
  margin: 20px 0 !important;
}

/* шапка "выделить код" */
.punbb .code-box .legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin-bottom: 6px;
  padding: 0 2px 0 0;

  font: 10px "Space Grotesk", sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.12em;

  color: var(--accent-green);
  background: none !important;
  border: 0 !important;
}

.punbb .code-box .legend::before {
  content: "";
  margin-right: auto;
  display: block;
  width: 28px;
  height: 2px;
  background: rgba(110,185,110,0.85);
}

/* ссылка "выделить код..." */
.punbb .code-box .legend a {
  color: inherit !important;
  text-decoration: none;
  cursor: pointer;
}
.punbb .code-box .legend a:hover {
  color: rgba(230,245,235,1);
}

/* сам блок кода */
.punbb .code-box .blockcode {
  position: relative;
  margin: 0;
  padding: 0;

  background: rgba(10,12,11,0.95);
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}

/* зелёная полоса слева */
.punbb .code-box .blockcode::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(110,185,110,0.95);
}

/* область прокрутки */
.punbb .code-box .scrollbox {
  position: relative;
  padding: 14px 20px 12px;

  height: auto !important;
  max-height: none !important;
  overflow-x: auto;
  overflow-y: hidden;

  background: none !important;
  border: 0 !important;
}

/* текст кода */
.punbb .code-box .scrollbox pre {
  margin: 0 !important;
  padding: 0 !important;

  white-space: pre;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.25px;

  color: rgba(225,225,225,0.97);
  background: none !important;
  border: 0 !important;
}

/* аккуратный скролл только снизу */
.punbb .code-box .scrollbox::-webkit-scrollbar {
  height: 6px;
}
.punbb .code-box .scrollbox::-webkit-scrollbar-thumb {
  background: rgba(130,150,130,0.36);
  border-radius: 3px;
}
.punbb .code-box .scrollbox::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.35);
}

/* внешнюю оболочку от плагина делаем прозрачной */
.punbb .post-content .quote-box,
.punbb .post-content .quote-box-main {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* ==========================================================
   БАЗОВЫЙ ЛЕЙАУТ ПОСТА
   ========================================================== */

/* сам пост */
#pun-viewtopic .post {
  border: 0 !important;
  margin: 0 0 32px;                /* расстояние между постами */
  padding: 0;
}

#pun-viewtopic .post h3 {
  border: 0 !important;
  margin: 0 16px 6px;              /* чуть меньше, чем было 24px */
  padding: 6px 0;
}

/* контейнер: автор + тело поста */
#pun-viewtopic .post .container {
  display: block !important;       
  padding: 0 16px;                 /* уменьшил отступ слева/справа */
  box-sizing: border-box;
}

/* колонка автора слева */
#pun-viewtopic .post-author {
  float: left !important;
  margin: 0 20px 0 0 !important;   /* чуть меньше отступ до текста */
}

/* правая часть (текст + сердце + кнопки) */
#pun-viewtopic .post-body {
  overflow: hidden;                /* обтекаем float и тянем высоту */
  margin: 0;
  padding: 0;

  /* ВАЖНО:
     чтобы сердечко и кнопки визуально были не выше низа карточки автора,
     задаём минимальную высоту правой колонки.
     Подгони число под свою карточку (430–480px). */
  min-height: 460px;
}

/* коробка содержимого одного поста:
   одна линия снизу и немного воздуха */
#pun-viewtopic .post-box {
  margin: 0;
  padding: 0 0 22px;
  border: 0;
}

/* ==========================================================
   ТЕКСТ
   ========================================================== */

#pun-viewtopic .post .post-content {
  margin: 0 0 12px;
  padding: 0;
  color: #cfd1cf;
  text-align: justify;              /* ровный край и слева, и справа */
}

#pun-viewtopic .post .post-content p {
  margin: 0 0 1em;
  text-indent: 2em;
  line-height: 1.7;
  font-size: 16px;
}

#pun-viewtopic .post .post-content img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   СЕРДЕЧКО И КНОПКИ
   ========================================================== */

/* сердечко всегда ниже текста, но выше кнопок */
#pun-viewtopic .post-rating,
#pun-viewtopic .reactions-root {
  float: none !important;
  margin: 0 0 8px;
  text-align: right;
}

/* блок ссылок под постом */
#pun-viewtopic .post-links {
  margin: 4px 0 0;
  padding: 0;
  border: 0 !important;
}

/* все кнопки в одну строку справа */
#pun-viewtopic .post-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

#pun-viewtopic .post-links li {
  display: inline-block;
  margin-left: 12px;
  float: none !important;
}

#pun-viewtopic .post-links a {
  font: 11px 'Space Grotesk', sans-serif;
  color: #9a9e9a;
  text-decoration: none;
  text-transform: lowercase;
}

#pun-viewtopic .post-links a:hover {
  color: #e0e3df;
}

/* глушим возможные псевдо-линии */
#pun-viewtopic .post-box:after,
#pun-viewtopic .post-links:after {
  content: none !important;
}

/* блок "ссылки внизу темы" — чуть ближе к постам */
#pun-viewtopic .linksb {
  margin: 18px 0 32px !important;  /* было сильно больше, подгони числа под вкус */
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

/* контейнер кнопки — прижимается вправо */
#pun-viewtopic .subscribelink {
  margin-left: auto;
}

/* кнопка — тёмная, спокойная, нейтральная */
#pun-viewtopic .subscribelink a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 20px;
  border-radius: 999px;

  background: #111514;
  border: 1px solid rgba(255, 255, 255, 0.08);

  font: 11px 'Space Grotesk', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfc3bf;
  text-decoration: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

/* hover — темнее, чуть выразительнее, но без яркости */
#pun-viewtopic .subscribelink a:hover {
  background: #1a1f1d;
  border-color: rgba(255, 255, 255, 0.15);
  color: #d5d8d4;
  transform: translateY(-1px);
}

/* active — почти без эффекта */
#pun-viewtopic .subscribelink a:active {
  transform: none;
  opacity: 0.9;
}


/* ============================================================
   PROFILE PAGE — FULL REWRITE (desktop-only, own+ чужой работает)
   ============================================================ */

:root{
  --pf-bg: rgba(10,12,12,.66);
  --pf-bg2: rgba(8,10,10,.52);
  --pf-br: rgba(255,255,255,.08);
  --pf-br2: rgba(255,255,255,.12);

  --pf-t: rgba(235,235,235,.92);
  --pf-t2: rgba(235,235,235,.58);

  --pf-ac: rgba(120,190,150,.70);
  --pf-ac2: rgba(120,190,150,.18);

  --pf-r: 24px;
  --pf-r2: 18px;

  --pf-pad: 22px;
  --pf-gap: 18px;

  --pf-nav-w: 300px;
  --pf-left-w: 420px; /* ширина карточки слева */
}

/* 0) Жёстко “развязываем” профиль от глобальных table-layout/обрезок */
#pun-profile .main table,
#pun-profile .main tbody,
#pun-profile .main tr,
#pun-profile .main td{
  table-layout: auto !important;
}
#viewprofile-next table,
#viewprofile-next tbody,
#viewprofile-next tr,
#viewprofile-next td{
  table-layout: auto !important;
}

#pun-profile #pun-main,
#viewprofile-next{
  overflow: visible !important;
}

/* 1) Воздух страницы + заголовок */
#pun-profile #pun-main{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 22px 34px;
}

#pun-profile #pun-main > h1,
#pun-main > h1{
  padding: 0 !important;
  margin: 8px 0 18px !important;
  font-family: var(--font-sans);
  font-size: 28px;
  letter-spacing: .02em;
  color: var(--pf-t);
}

/* 2) Общая сетка: меню слева + контент справа */
#viewprofile-next{
  display: grid !important;
  grid-template-columns: var(--pf-nav-w) minmax(0, 1fr) !important;
  gap: var(--pf-gap) !important;
  align-items: start !important;
}

/* 3) Левое меню (красивее + удобнее) */
#profilenav{
  position: sticky;
  top: 78px; /* под твою фикс-шапку */
  background: var(--pf-bg);
  border: 1px solid var(--pf-br);
  border-radius: var(--pf-r);
  padding: 18px 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

#profilenav > h2{
  margin: 4px 10px 14px;
  padding: 0 !important;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pf-t2);
}

#profilenav ul{
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}

#profilenav a{
  display: flex;
  align-items: center;
  min-height: 44px;

  padding: 12px 14px;
  border-radius: 18px;

  font-family: var(--font-sans);
  color: rgba(235,235,235,.64);

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  transition: .18s ease;
}

#profilenav a:hover{
  color: var(--pf-t);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

#profilenav .isactive a{
  color: var(--pf-t);
  background: rgba(120,190,150,.10);
  border-color: rgba(120,190,150,.32);
  box-shadow: inset 0 0 0 1px rgba(120,190,150,.10);
}

/* 4) Правая область профиля (общая карточка) */
#viewprofile{
  background: var(--pf-bg);
  border: 1px solid var(--pf-br);
  border-radius: var(--pf-r);
  padding: var(--pf-pad);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

/* 5) Нормализуем внутренности (RusFF часто суёт table внутри ul) */
#viewprofile .container{ padding: 0 !important; }
#viewprofile .container > ul{
  margin: 0 !important;
  padding: 0 !important;
}

/* 6) Главная раскладка профиля: левый блок + правый блок — надёжно */
#viewprofile table{ width: 100% !important; border-collapse: collapse !important; }
#viewprofile tr{
  display: flex !important;
  gap: var(--pf-gap) !important;
  align-items: flex-start !important;
}

#profile-left{
  flex: 0 0 var(--pf-left-w);
  background: var(--pf-bg2);
  border: 1px solid var(--pf-br);
  border-radius: var(--pf-r2);
  padding: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

#profile-right{
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr; /* одна колонка карточек */
  gap: 12px;
}

/* 7) Левая карточка: имя/роль/аватар/статус/действия */
#profile-left li{ margin: 0 !important; padding: 0 !important; }

#profile-name{
  margin: 0 0 4px !important;
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pf-t);
}

#profile-title{
  margin: 0 0 14px !important;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pf-t2);
}

#pa-avatar{ margin: 0 0 14px !important; }
#pa-avatar > div{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
}
#pa-avatar img{
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Статус “активен” */
#pa-online strong{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(120,190,150,.10);
  border: 1px solid rgba(120,190,150,.22);
  color: var(--pf-t);
}
#pa-online strong::before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(120,190,150,.95);
  box-shadow: 0 0 0 5px rgba(120,190,150,.18);
}

/* Кнопка “Редактировать” — только если она есть (у владельца) */
#pa-edit strong a{
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--pf-t);
  font-family: var(--font-sans);
  transition: .18s ease;
}
#pa-edit strong a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* UA — аккуратно (если показывается) */
#pa-ua .user-agent{
  display: inline-flex;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}

/* 8) Правые поля: “карточки” с лейблом сверху (НЕ режется никогда) */
#profile-right > li{
  margin: 0 !important;
  padding: 14px 16px !important;

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);

  overflow: visible !important;
  min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

#profile-right > li > span{
  display: block;
  margin: 0 0 10px;

  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pf-t2);

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#profile-right > li > strong{
  display: block;
  color: var(--pf-t);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;

  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 9) Твои условия: скрыть приглашения и pl */
#pa-invites,
#pa-fld2{
  display: none !important;
}

/* 10) У fon скрыть надпись-лейбл */
#pa-fld1 > span{
  display: none !important;
}

/* 11) Блок “ИМЯ / описание” (char-meta) — чуть аккуратнее */
#pa-fld1 .char-meta{
  display: grid;
  gap: 8px;
}
#pa-fld1 .char-meta-name{
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#pa-fld1 .char-meta-role{
  font-size: 12px;
  line-height: 1.35;
  color: var(--pf-t2);
  text-align: center;
}
#pa-fld1 .char-meta-role center{ display: contents; }

/* 12) Email/ЛС — в виде действий */
#pa-email strong{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#pa-email .sendemail,
#pa-email .sendpm{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--pf-t);
  text-decoration: none;
}
#pa-email .sendpm{
  border-color: rgba(120,190,150,.25);
  background: rgba(120,190,150,.10);
}

/* 13) Сообщения — чтобы не ломало строку и было читабельно */
#pa-posts strong{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 14) На всякий: если движок даёт правую колонку не td#profile-right, а dl —
       не скрываем её, даём нормальные отступы */
#viewprofile dl{
  margin: 0 !important;
}
#viewprofile dt, #viewprofile dd{
  white-space: normal !important;
  overflow-wrap: anywhere;
}