/* =============================================================
 A Will Eternal — PunBB / MyBB Red & Purple Theme (refactored)
 Точные селекторы под структуру rol2you.mybb.ru
 Вставляется в: Админ &#8594; Стили &#8594; HTML верх (внутри <style>)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Изменения относительно оригинала:
 • Убраны нерабочие директивы @tailwind (нужен PostCSS-сборщик).
 • Введены :root-переменные для быстрой перекраски темы.
 • Исправлен селектор заголовка "Форум" (перекрывал логотип).
 • Правки под реальную разметку: ul.container БЕЗ вложенного ul.
 • Убраны двойные отступы <a>+<span> в навигации.
 • Скрыты служебные <h2> секций (a11y-safe).
 • Спрятаны пустые .catleft/.catright в заголовке категории.
 • #pun-stats: #onlinelist на всю ширину; li — flex-grid.
 • Крошки: заменён мёртвый .section.crumbs на реальный .crumbs.
 • Ограничен `* { font-family }` — иконочные шрифты не ломаются.
 • Добавлен fallback скроллбара для Firefox.
 ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* &#9472;&#9472; 1. Design tokens &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
:root {
 --bg: #07030c;
 --panel: #11071c;
 --panel-2: #12081d;
 --panel-3: #0f061a;
 --border: #281236;
 --border-soft: #1e0c2e;
 --border-hard: #331548;

 --text: #eeddf8;
 --text-strong: #e9d5ff;
 --muted: #7c3aed;
 --muted-2: #6d28d9;

 --link: #c084fc;
 --link-visited: #a855f7;
 --link-hover: #f472b6;

 --accent-red: #dc2626;
 --accent-red-2: #e11d48;
 --accent-purple: #9333ea;
 --accent-purple-2:#a855f7;

 --grad-accent: linear-gradient(135deg, var(--accent-red-2) 0%, var(--accent-purple) 100%);
 --grad-bar: linear-gradient(180deg, var(--accent-red-2), var(--accent-purple));
 --grad-title: linear-gradient(135deg, #f87171 0%, #c084fc 50%, #818cf8 100%);

 --radius-lg: 20px;
 --radius-md: 14px;
 --radius-sm: 12px;
 --radius-pill: 9999px;

 --shadow-panel: 0 0 40px rgba(168, 85, 247, 0.15),
 0 0 80px rgba(239, 68, 68, 0.08);
 --shadow-icon: 0 2px 8px rgba(0, 0, 0, 0.35);

 --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 --col-lastpost: 200px;
 /* Кириллица работает как есть; для non-BMP/CJK-символов используем CSS-escape,
 чтобы не сломались при cp1251-сохранении CSS через админку.
 &#19968;&#24565;&#27704;&#24658; = \4E00\5FF5\6C38\6052 (U+4E00, U+5FF5, U+6C38, U+6052)
 · = \00B7 */
 --title-tagline: 'Ролевой форум \00B7 \4E00\5FF5\6C38\6052';

 --forum-width: 1200px;

 /* &#9472;&#9472; Место под шапку (баннер над логотипом).
 Пока пусто — просто резервируется вертикальный слот.
 Чтобы добавить картинку: --header-image: url('https://…/banner.jpg') */
 --header-height: 560px;
 --header-image: url('https://forumstatic.ru/files/001c/c1/84/50944.png');
 --header-radius: 18px;

 --post-author-col: 200px;
 --avatar-size: 120px;

 --sidebar-width: 300px;
 --sidebar-gap: 24px;
}

/* &#9472;&#9472; Светлая тема (переключается через <html class="theme-light"> или JS) &#9472;&#9472; */
.theme-light,
:root.theme-light {
 --bg: #eef1f7;
 --panel: #ffffff;
 --panel-2: #f7f4fb;
 --panel-3: #ece7f5;
 --border: #d9d4e6;
 --border-soft: #e2ddef;
 --border-hard: #c5bfd8;

 --text: #1f1533;
 --text-strong: #100522;
 --muted: #7c3aed;
 --muted-2: #6d28d9;

 --link: #7c3aed;
 --link-visited: #6d28d9;
 --link-hover: #db2777;

 --shadow-panel: 0 10px 30px rgba(147, 51, 234, 0.10),
 0 4px 12px rgba(0, 0, 0, 0.05);
}
.theme-light body::before,
:root.theme-light body::before {
 background: radial-gradient(circle, rgba(147, 51, 234, 0.10) 0%, transparent 70%);
}
.theme-light body::after,
:root.theme-light body::after {
 background: radial-gradient(circle, rgba(220, 38, 38, 0.06) 0%, transparent 70%);
}

/* &#9472;&#9472; 2. Base / reset &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
html {
 box-sizing: border-box;
 scrollbar-color: var(--accent-purple) var(--bg);
 scrollbar-width: thin;
}
*, *::before, *::after { box-sizing: inherit; }

body, input, select, textarea, button,
.punbb, .punbb h1, .punbb h2, .punbb h3, .punbb h4,
.punbb p, .punbb span, .punbb li, .punbb td, .punbb th, .punbb a {
 font-family: var(--font-ui);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
 background: var(--grad-bar);
 border-radius: 6px;
}

/* &#9472;&#9472; 3. Body / ambient glow &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
body {
 background-color: var(--bg) !important;
 color: var(--text) !important;
 min-height: 100vh;
}

body::before,
body::after {
 content: '';
 position: fixed;
 border-radius: 50%;
 filter: blur(100px);
 pointer-events: none;
 z-index: 0;
}
body::before {
 width: 550px; height: 550px;
 background: radial-gradient(circle, rgba(147, 51, 234, 0.13) 0%, transparent 70%);
 top: -150px; left: -150px;
}
body::after {
 width: 450px; height: 450px;
 background: radial-gradient(circle, rgba(220, 38, 38, 0.10) 0%, transparent 70%);
 bottom: -100px; right: -100px;
}

/* &#9472;&#9472; 4. Layout wrapper &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
#pun_wrap { position: relative; z-index: 1; }

#pun {
 max-width: var(--forum-width);
 margin: 28px auto !important;
 padding: 0 20px 20px !important; /* убран верхний padding — баннер прижат к верху карточки */
 background-color: var(--panel) !important;
 border-radius: var(--radius-lg) !important;
 border: 1px solid rgba(168, 85, 247, 0.25) !important;
 box-shadow: var(--shadow-panel) !important;
 overflow: hidden; /* обрезать по border-radius карточки */
}

/* &#9472;&#9472; 5. Service <h2> в секциях — скрыть визуально, оставить в DOM
 (a11y-safe: доступно скринридерам). &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .hidden,
h2.hidden,
#pun-navlinks > h2,
#pun-ulinks > h2,
#pun-status > h2 {
 position: absolute !important;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

.punbb .category h2 .catleft,
.punbb .category h2 .catright,
#pun-stats h2 .catleft,
#pun-stats h2 .catright {
 display: none !important;
}

/* &#9472;&#9472; 6. #pun-title (логотип + место под шапку) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

#pun-title {
 position: relative;
 text-align: center;
 padding: 0 0 20px; /* убран боковой padding — баннер на всю ширину контейнера */
 background: transparent !important;
 border: none !important;
}
#pun-title::before {
 content: '';
 display: block;
 width: calc(100% + 40px); /* компенсируем боковой padding #pun (20px + 20px) */
 height: var(--header-height);
 margin: 0 -20px -110px; /* растяжка по бокам + вылет вверх до самого края карточки */
 border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* скругление ТОЛЬКО сверху — под верхние углы карточки */
 background-color: #150826;
 background-image:
 var(--header-image),
 radial-gradient(ellipse at 30% 40%, rgba(147, 51, 234, 0.18) 0%, transparent 60%),
 radial-gradient(ellipse at 70% 60%, rgba(220, 38, 38, 0.15) 0%, transparent 60%);
 background-size: contain, auto, auto; /* contain — баннер помещается полностью без обрезки */
 background-position: center, center, center;
 background-repeat: no-repeat;
 border: none; /* убрана рамка — баннер сам себе край карточки */
 box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
}

#pun-title.no-header::before,
.no-header #pun-title::before { display: none; }
#pun-title table,
#title-logo-table {
 width: 100%;
 border: none !important;
 background: transparent !important;
 position: relative;
 z-index: 2;
}
#title-logo-tdl,
#title-logo-tdr {
 background: transparent !important;
 border: none !important;
 vertical-align: middle;
 text-align: center !important; /* ключевой фикс — <td> по умолчанию left */
}
/* Если баннер большой — прячем правую пустую ячейку, чтобы логотип
 занимал всю ширину и центрировался ровно посередине контейнера */
#title-logo-tdr:empty { display: none !important; }

/* Заголовок «A Will Eternal» — pill-плашка с полупрозрачным фоном,
 чтобы читался поверх картинки баннера */
#pun-title h1,
#title-logo-tdl h1,
#pun-title h1.title-logo {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 font-size: 32px !important;
 font-weight: 800 !important;
 letter-spacing: 0.02em;
 background: rgba(17, 7, 28, 0.55) !important;
 backdrop-filter: blur(12px) saturate(180%);
 -webkit-backdrop-filter: blur(12px) saturate(180%);
 border: 1px solid rgba(244, 114, 182, 0.25);
 padding: 12px 32px !important;
 margin: 0 auto !important;
 border-radius: 9999px;
 box-shadow:
 0 8px 24px rgba(0, 0, 0, 0.5),
 0 0 40px rgba(147, 51, 234, 0.20),
 inset 0 1px 0 rgba(244, 114, 182, 0.15);
}
#pun-title h1 span,
#pun-title h1.title-logo span {
 background: var(--grad-title);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 padding: 0 !important;
}

#pun-title::after {
 content: var(--title-tagline);
 display: inline-block;
 margin-top: 10px;
 padding: 4px 14px;
 font-size: 11px;
 color: var(--muted);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 background: rgba(17, 7, 28, 0.5);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: 1px solid rgba(147, 51, 234, 0.15);
 border-radius: 9999px;
 position: relative;
 z-index: 2;
}

/* &#9472;&#9472; 7. Nav (#pun-navlinks) + user-links (#pun-ulinks) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

#pun-navlinks,
#pun-ulinks {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
}
#pun-navlinks { margin-bottom: 6px !important; }
#pun-ulinks { margin-bottom: 14px !important; padding: 4px 0 !important; }

#pun-navlinks ul.container,
#pun-ulinks ul.container {
 display: flex !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
 gap: 8px !important;
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
}
#pun-ulinks ul.container { gap: 6px !important; }

#pun-navlinks ul.container > li,
#pun-ulinks ul.container > li {
 margin: 0 !important;
 padding: 0 !important;
}

#pun-navlinks .container a {
 display: inline-flex !important;
 align-items: center !important;
 padding: 7px 18px !important;
 border-radius: var(--radius-pill) !important;
 font-size: 13px !important;
 font-weight: 600 !important;
 color: #e2d1f0 !important;
 background: #170a24 !important;
 border: 1px solid #2a1238 !important;
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
 white-space: nowrap !important;
}

#pun-navlinks .container a span,
#pun-ulinks .container a span {
 display: inline;
 padding: 0 !important;
 background: transparent;
 color: inherit;
}

#pun-navlinks .container a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 16px rgba(225, 29, 72, 0.4) !important;
}

#pun-navlinks li.isactive > a,
#pun-navlinks #navindex > a {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 16px rgba(225, 29, 72, 0.35) !important;
}

#pun-ulinks .container a {
 display: inline-flex !important;
 align-items: center !important;
 padding: 5px 14px !important;
 border-radius: var(--radius-pill) !important;
 font-size: 12px !important;
 font-weight: 500 !important;
 color: #d946ef !important;
 background: rgba(217, 70, 239, 0.08) !important;
 border: 1px solid rgba(217, 70, 239, 0.2) !important;
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease !important;
}
#pun-ulinks .container a:hover {
 background: rgba(217, 70, 239, 0.18) !important;
 color: #f0abfc !important;
}

/* &#9472;&#9472; 8. #pun-status &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
#pun-status {
 background: var(--panel-3) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-sm) !important;
 margin-bottom: 10px !important;
}
#pun-status .container {
 background: transparent !important;
 border: none !important;
 padding: 12px 20px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: flex-start !important;
 flex-wrap: wrap !important;
 gap: 10px !important;
 font-size: 13px !important;
 color: #a78bfa !important;
}
#pun-status .item1 { color: var(--text-strong) !important; font-weight: 600; }
#pun-status .item2 { color: #a78bfa !important; }
#pun-status strong { color: var(--text-strong) !important; }
#pun-status em { color: var(--link-hover) !important; font-style: italic !important; }
#pun-status .go-right { margin-left: auto !important; }

#pun-status a {
 color: var(--link) !important;
 text-decoration: none !important;
 font-weight: 600 !important;
 padding: 5px 14px !important;
 border-radius: var(--radius-pill) !important;
 border: 1px solid var(--border-hard) !important;
 background: #170a24 !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
#pun-status a:hover {
 background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-purple) 100%) !important;
 color: #fff !important;
 border-color: rgba(248, 113, 113, 0.4) !important;
 box-shadow: 0 0 14px rgba(220, 38, 38, 0.3) !important;
}

/* &#9472;&#9472; 9. Крошки (#pun-crumbs1/2) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
#pun-crumbs1,
#pun-crumbs2 {
 background: transparent !important;
 border: none !important;
 margin: 6px 0 !important;
}
.crumbs,
p.container.crumbs {
 background: transparent !important;
 border: none !important;
 padding: 4px 2px !important;
 font-size: 12px !important;
 color: var(--muted-2) !important;
 margin: 0;
}
.crumbs {
 display: flex !important;
 flex-wrap: wrap !important;
 align-items: center !important;
 gap: 6px !important;
}
.crumbs strong {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: #a78bfa !important;
 font-weight: 600 !important;
}
.crumbs strong::before {
 content: '';
 width: 14px; height: 14px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z'/></svg>") center/contain no-repeat;
 opacity: .9;
}
.crumbs em { color: #4c1d95 !important; font-style: normal !important; opacity: .8; }
.crumbs span { color: var(--text-strong) !important; font-weight: 600 !important; }
.crumbs a { color: var(--link) !important; text-decoration: none !important; }
.crumbs a:hover { color: var(--link-hover) !important; }

/* &#9472;&#9472; 10. #pun-main / #pun-index — общий контейнер и h1 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
#pun-main,
#pun-index {
 background: transparent !important;
 border: none !important;
}

#pun-main > h1 {
 font-size: 17px !important;
 font-weight: 700 !important;
 color: var(--text-strong) !important;
 padding: 0 0 14px 4px !important;
 margin: 4px 0 !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
}
#pun-main > h1::before {
 content: '';
 display: inline-block;
 width: 3px; height: 18px;
 border-radius: 2px;
 background: var(--grad-bar);
}
#pun-main > h1 span { color: inherit; }

/* &#9472;&#9472; 11. .category — карточка + таблица &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .category {

 background-color: var(--panel-2) !important;
 background-image:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.10) 0%,
 rgba(147, 51, 234, 0.04) 40%,
 rgba(220, 38, 38, 0.06) 100%) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 margin-bottom: 16px !important;
 overflow: hidden !important;
 box-shadow:
 inset 0 1px 0 rgba(244, 114, 182, 0.08),
 0 4px 20px rgba(0, 0, 0, 0.25);
}

.punbb .category > h2 {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: #fff !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 padding: 13px 18px !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 letter-spacing: 0.03em !important;
}
.punbb .category > h2::before {
 content: '';
 display: inline-block;
 width: 4px; height: 16px;
 border-radius: 2px;
 flex-shrink: 0;
 background: var(--grad-bar);
}
.punbb .category > h2 > span {
 background: transparent !important;
 -webkit-text-fill-color: currentColor !important;
 color: #fff !important;
 padding: 0 !important;
}

.punbb .category > .container {
 background: transparent !important;
 border: none !important;
 padding: 8px !important;
}

.punbb .category table {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
}

.punbb .category thead th {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid #230d30 !important;
 padding: 6px 10px !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.07em !important;
}
.punbb .category thead th.tcl { text-align: left !important; padding-left: 14px !important; }
.punbb .category thead th.tc2,
.punbb .category thead th.tc3 { text-align: center !important; width: 60px !important; }
.punbb .category thead th.tcr { text-align: left !important; width: var(--col-lastpost) !important; }

.punbb .category tbody tr {
 background: transparent !important;
 transition: background .2s ease !important;
}
.punbb .category tbody tr:hover {
 background: rgba(168, 85, 247, 0.07) !important;
}
.punbb .category tbody tr td {
 border: none !important;
 border-bottom: 1px solid rgba(40, 18, 54, 0.6) !important;
 background: transparent !important;
 padding: 12px 10px !important;
 vertical-align: middle !important;
 color: var(--text) !important;
}
.punbb .category tbody tr:last-child td { border-bottom: none !important; }

.punbb td.tcl { padding: 10px 8px !important; }

.punbb .hasicon .intd {
 display: flex !important;
 align-items: center !important;
 gap: 14px !important;
}

.punbb .hasicon .icon {
 width: 44px !important;
 height: 44px !important;
 min-width: 44px !important;
 border-radius: 12px !important;
 background: linear-gradient(135deg, #1d0c2e, #2a1045) !important;
 border: 1px solid var(--border-hard) !important;
 box-shadow: var(--shadow-icon) !important;
 position: relative !important;
 overflow: hidden !important;
}
.punbb .hasicon .icon::after {
 content: '';
 position: absolute;
 inset: 0;
 background:
 radial-gradient(circle at 50% 40%, rgba(192, 132, 252, 0.35) 0%, transparent 60%),
 radial-gradient(circle at 30% 70%, rgba(225, 29, 72, 0.20) 0%, transparent 50%);
}

.punbb .hasicon .icon.inew::after {
 background:
 radial-gradient(circle at 50% 40%, rgba(244, 114, 182, 0.55) 0%, transparent 60%),
 radial-gradient(circle at 30% 70%, rgba(225, 29, 72, 0.35) 0%, transparent 55%);
}
.punbb .hasicon .icon.iredirect::after {
 background:
 radial-gradient(circle at 50% 40%, rgba(129, 140, 248, 0.35) 0%, transparent 60%);
}
.punbb .hasicon .nosize { display: none !important; }

.punbb .hasicon .tclcon { flex: 1 !important; min-width: 0 !important; }

.punbb .category .tclcon h3 {
 margin: 0 0 3px !important;
 padding: 0 !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 line-height: 1.3 !important;
}
.punbb .category .tclcon h3 a {
 color: #fff !important;
 text-decoration: none !important;
 transition: color .2s ease !important;
}
.punbb .category .tclcon h3 a:hover { color: var(--link-hover) !important; }

.punbb .category .tclcon .foruminfo,
.punbb .category .tclcon p {
 margin: 0 !important;
 font-size: 12px !important;
 color: var(--muted) !important;
 line-height: 1.4 !important;
}

.punbb td.tc2,
.punbb td.tc3 {
 text-align: center !important;
 font-size: 15px !important;
 font-weight: 700 !important;
 color: var(--text-strong) !important;
 width: 60px !important;
}

.punbb td.tcr {
 width: var(--col-lastpost) !important;
 font-size: 12px !important;
 color: var(--accent-purple-2) !important;
 vertical-align: middle !important;
}
.punbb td.tcr a { color: var(--link) !important; text-decoration: none !important; font-weight: 600 !important; }
.punbb td.tcr a:hover { color: var(--link-hover) !important; }
.punbb td.tcr .nopost,
.punbb td.tcr > span {
 color: var(--muted-2) !important;
 font-style: italic !important;
 font-size: 12px !important;
}

/* &#9472;&#9472; 12. #pun-stats &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
#pun-stats {
 background: var(--panel-3) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-sm) !important;
 margin-top: 6px !important;
 overflow: hidden !important;
}
#pun-stats > h2 {
 background: transparent !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: #fff !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 padding: 11px 18px !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 letter-spacing: 0.03em !important;
}
#pun-stats > h2::before {
 content: '';
 display: inline-block;
 width: 4px; height: 14px;
 border-radius: 2px;
 flex-shrink: 0;
 background: var(--grad-bar);
}
#pun-stats > h2 > span {
 background: transparent !important;
 -webkit-text-fill-color: currentColor !important;
 color: #fff !important;
 padding: 0 !important;
}

#pun-stats .statscon {
 background: transparent !important;
 border: none !important;
 padding: 14px 20px !important;
}
#pun-stats ul.container {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 8px 20px !important;
 background: transparent !important;
 border: none !important;
}
#pun-stats ul.container > li {
 flex: 1 1 220px;
 min-width: 200px;
 margin: 0 !important;
 padding: 10px 12px !important;
 font-size: 12.5px !important;
 color: var(--muted) !important;
 display: flex;
 align-items: center;
 gap: 10px;
 background: rgba(147, 51, 234, 0.05);
 border: 1px solid var(--border-soft);
 border-radius: 10px;
}

#pun-stats ul.container > li::before {
 content: '';
 flex-shrink: 0;
 width: 26px; height: 26px;
 border-radius: 8px;
 background: var(--grad-accent);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 14px 14px;
 mask-size: 14px 14px;
}
#pun-stats ul.container > li.item1::before {
 background: linear-gradient(135deg, #22d3ee, #6366f1);
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v3H3zM3 10h18v3H3zM3 15h12v3H3z' fill='white'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v3H3zM3 10h18v3H3zM3 15h12v3H3z' fill='white'/></svg>");
}
#pun-stats ul.container > li.item2::before {
 background: linear-gradient(135deg, #c084fc, #9333ea);
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v12H6l-2 4z' fill='white'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v12H6l-2 4z' fill='white'/></svg>");
}
#pun-stats ul.container > li.item3::before {
 background: linear-gradient(135deg, #f472b6, #db2777);
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4' fill='white'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6z' fill='white'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4' fill='white'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6z' fill='white'/></svg>");
}
#pun-stats ul.container > li.item4::before {
 background: linear-gradient(135deg, #fbbf24, #f59e0b);
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.4 6.3L21 9l-5 4.6L17.5 21 12 17.5 6.5 21 8 13.6 3 9l6.6-.7z' fill='white'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.4 6.3L21 9l-5 4.6L17.5 21 12 17.5 6.5 21 8 13.6 3 9l6.6-.7z' fill='white'/></svg>");
}

#pun-stats ul.container > li#onlinelist,
#pun-stats ul.container > li.onlinelist {
 flex-basis: 100%;
 margin-top: 6px !important;
 padding-top: 8px !important;
 border-top: 1px dashed var(--border-soft);
 color: #a78bfa !important;
}

#pun-stats p { margin: 3px 0 !important; font-size: 12.5px !important; color: var(--muted) !important; }
#pun-stats strong { color: var(--text-strong) !important; font-weight: 700 !important; }
#pun-stats a { color: var(--link) !important; text-decoration: none !important; font-weight: 600 !important; }
#pun-stats a:hover { color: var(--link-hover) !important; }

/* &#9472;&#9472; 13. #pun-about — подвал &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
#pun-about {
 background: transparent !important;
 border: none !important;
 margin-top: 16px !important;
 text-align: center !important;
}
#pun-about .container {
 background: transparent !important;
 border: none !important;
 padding: 8px !important;
}
#pun-about a {
 color: #4c1d95 !important;
 font-size: 11px !important;
 text-decoration: none !important;
 transition: color .2s ease !important;
}
#pun-about a:hover { color: var(--muted) !important; }

/* &#9472;&#9472; 14. Глобальные ссылки (низкая специфичность — дефолт) &#9472;&#9472; */
.punbb a:link { color: var(--link) !important; }
.punbb a:visited { color: var(--link-visited) !important; }
.punbb a:hover { color: var(--link-hover) !important; }

/* &#9472;&#9472; 15. Общие секции / разделители &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .section,
.punbb .section .container {
 background: transparent !important;
 border: none !important;
}
.punbb .divider,
.punbb .divider hr {
 border-color: #230d30 !important;
 background: transparent !important;
 color: transparent !important;
 height: 1px;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 17. VIEWTOPIC (#pun-viewtopic) — карточка темы / сообщения
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-viewtopic .topic > h2,
.punbb .topic > h2 {
 position: absolute !important;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

/* &#9472;&#9472; 17.1 Пагинация (сверху / снизу темы) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .linkst,
.punbb .linksb {
 background: transparent !important;
 border: none !important;
 padding: 8px 2px !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;
 gap: 8px !important;
}
.punbb .linksb { margin-top: 6px !important; }

.punbb .pagelink {
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
 font-size: 12px !important;
 color: var(--muted-2) !important;
 margin: 0 !important;
 padding: 0 !important;
}
.punbb .pagelink strong,
.punbb .pagelink a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 26px;
 height: 26px;
 padding: 0 9px;
 border-radius: var(--radius-pill);
 font-size: 12px !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 border: 1px solid #2a1238;
 background: #170a24;
 color: var(--link) !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.punbb .pagelink strong {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}
.punbb .pagelink a:hover {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}
.punbb .pagelink .prev,
.punbb .pagelink .next { min-width: auto; padding: 0 12px; }

.punbb .linksb .postlink {
 margin-left: auto !important;
 font-size: 13px !important;
}
.punbb .linksb .postlink a {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 18px;
 border-radius: var(--radius-pill);
 font-weight: 700;
 color: #fff !important;
 background: var(--grad-accent);
 border: 1px solid rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 14px rgba(225, 29, 72, 0.35);
 text-decoration: none !important;
 transition: transform .15s ease, box-shadow .2s ease;
}
.punbb .linksb .postlink a:hover {
 transform: translateY(-1px);
 box-shadow: 0 0 22px rgba(225, 29, 72, 0.55);
 color: #fff !important;
}

/* &#9472;&#9472; 17.2 Карточка поста .post &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .topic { background: transparent !important; border: none !important; }

.punbb .post {
 background: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 margin-bottom: 32px !important;
 /* НЕ используем overflow: hidden — иначе кнопки в .post-author срезаются.
    Вместо этого скругляем дочерние элементы отдельно. */
 color: var(--text) !important;
 scroll-margin-top: 20px;
 isolation: isolate; /* box-shadow дочерних не выходит за рамку */
}
/* Последний пост в теме — без нижнего отступа (уже есть пагинация) */
.punbb .topic > .post:last-child { margin-bottom: 12px !important; }

/* Скругление шапки h3 сверху под радиус поста */
.punbb .post > h3 {
 border-top-left-radius: var(--radius-md);
 border-top-right-radius: var(--radius-md);
}
/* Скругление низа поста — на самих колонках, чтобы кнопки не срезались */
.punbb .post > .container {
 border-bottom-left-radius: var(--radius-md);
 border-bottom-right-radius: var(--radius-md);
}
.punbb .post > .container > .post-author {
 border-bottom-left-radius: var(--radius-md);
}
.punbb .post > .container > .post-body {
 border-bottom-right-radius: var(--radius-md);
}

.punbb .post.topic-starter {
 border-color: rgba(244, 114, 182, 0.35) !important;
 box-shadow:
 0 0 0 1px rgba(244, 114, 182, 0.08) inset,
 0 0 30px rgba(225, 29, 72, 0.10);
}

/* &#9472;&#9472; Легенда групп: цветовая маркировка карточек и профилей.
 PunBB не всегда ставит .group<N> на .post — если поставит, подсветится.
 Через кастомный HTML (админ может добавить) — легко расширить. */
.punbb .post[class*="group-1"],
.punbb .post.group1,
#pun-profile #viewprofile-next.group1 {
 border-color: rgba(248, 113, 113, 0.45) !important;
 box-shadow: 0 0 22px rgba(220, 38, 38, 0.15);
}
.punbb .post.group2,
#pun-profile #viewprofile-next.group2 {
 border-color: rgba(148, 163, 184, 0.35) !important;
}
.punbb .post.group3,
#pun-profile #viewprofile-next.group3 {
 border-color: rgba(196, 181, 253, 0.35) !important;
}
.punbb .post.group4,
#pun-profile #viewprofile-next.group4 {
 border-color: rgba(134, 239, 172, 0.45) !important;
 box-shadow: 0 0 22px rgba(34, 197, 94, 0.12);
}
.punbb .post.group5,
#pun-profile #viewprofile-next.group5 {
 border-color: rgba(253, 224, 71, 0.45) !important;
 box-shadow: 0 0 22px rgba(234, 179, 8, 0.12);
}

own, .g-owner {
 color: #ff7a7a !important;
 font-weight: 700 !important;
 text-shadow: 0 0 12px rgba(255, 0, 0, 0.45);
}
mdr, .g-mod {
 color: #86efac !important;
 font-weight: 700 !important;
 text-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}
vip, .g-vip {
 color: #fde047 !important;
 font-weight: 700 !important;
 text-shadow: 0 0 10px rgba(234, 179, 8, 0.45);
}
usr, .g-user {
 color: var(--text) !important;
}

.punbb .post > h3 {
 margin: 0 !important;
 padding: 10px 16px !important;
 background: linear-gradient(180deg, rgba(168, 85, 247, 0.06), transparent) !important;
 border-bottom: 1px solid var(--border-soft) !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 color: var(--muted) !important;
}
.punbb .post > h3 > span {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 flex-wrap: wrap !important;
}
.punbb .post > h3 strong {
 order: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px; height: 22px;
 padding: 0 7px;
 border-radius: var(--radius-pill);
 font-size: 11px;
 font-weight: 700;
 color: #fff;
 background: var(--grad-accent);
}
.punbb .post > h3 .permalink {
 order: 2;
 color: var(--text-strong) !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 margin-right: auto;
}
.punbb .post > h3 .permalink:hover { color: var(--link-hover) !important; }

.punbb .post > h3 .translatelink,
.punbb .post > h3 .sharelink {
 order: 3;
 display: inline-flex;
 align-items: center;
 padding: 4px 10px;
 font-size: 11px;
 font-weight: 600;
 color: var(--link) !important;
 background: #170a24;
 border: 1px solid #2a1238;
 border-radius: var(--radius-pill);
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.punbb .post > h3 .translatelink:hover,
.punbb .post > h3 .sharelink:hover {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
}

/* &#9472;&#9472; 17.3 Контейнер: 2 колонки (профиль + тело) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post > .container {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 display: grid !important;
 grid-template-columns: var(--post-author-col) 1fr !important;
 gap: 0 !important;
 align-items: stretch !important;
}

/* &#9472;&#9472; 17.4 Левая колонка: автор (шире и читаемее) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post-author {
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.10) 0%,
 rgba(220, 38, 38, 0.05) 100%),
 var(--panel-3) !important;
 border-right: 1px solid var(--border-soft) !important;
 padding: 18px 14px 24px !important; /* больший нижний паддинг — action-кнопки не жмутся к краю */
 color: var(--text) !important;
 min-width: 0;
 text-align: center;
}
/* Если пост короткий, тело должно растянуться до высоты автора, а не наоборот */
.punbb .post > .container { min-height: 100%; }
.punbb .post-body { min-height: 100%; }
.punbb .post-author ul {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 font-size: 12px;
 line-height: 1.4;
 color: #a78bfa;
}
.punbb .post-author li {
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
 max-width: 100%;
}
.punbb .post-author .acchide {
 position: absolute; width: 1px; height: 1px;
 padding: 0; margin: -1px; overflow: hidden;
 clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.punbb .post-author .fld-name {
 color: var(--muted-2) !important;
 font-weight: 500;
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 margin-right: 3px;
}

.punbb .post-author .pa-avatar {
 margin: 0 auto 4px !important;
 width: var(--avatar-size);
 height: var(--avatar-size);
}
.punbb .post-author .pa-avatar img {
 display: block;
 width: var(--avatar-size);
 height: var(--avatar-size);
 object-fit: cover;
 border-radius: 10px;
 border: 1px solid var(--border-hard);
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.punbb .post-author .pa-author {
 font-size: 16px !important;
 font-weight: 800 !important;
 line-height: 1.2 !important;
 margin-top: 4px !important;
 margin-bottom: 0 !important;
 color: #fff !important;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 word-break: break-word;
}
.punbb .post-author .pa-author a {
 color: #fff !important;
 text-decoration: none !important;
 background: linear-gradient(135deg, #f87171 0%, #c084fc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.punbb .post-author .pa-author a:hover { filter: brightness(1.15); }

.punbb .post-author .pa-title {
 display: inline-flex !important;
 align-self: center !important;
 padding: 3px 12px !important;
 margin: 4px 0 6px !important;
 font-size: 10.5px !important;
 font-weight: 700 !important;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: #fff !important;
 background: var(--grad-accent) !important;
 border-radius: var(--radius-pill);
 line-height: 1.4 !important;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.punbb .post-author .pa-reg,
.punbb .post-author .pa-invites,
.punbb .post-author .pa-posts,
.punbb .post-author .pa-respect,
.punbb .post-author .pa-positive,
.punbb .post-author .pa-time-visit,
.punbb .post-author .pa-gender,
.punbb .post-author .pa-age,
.punbb .post-author .pa-from,
.punbb .post-author .pa-ip,
.punbb .post-author [class^="pa-fld"] {
 display: flex !important;
 flex-direction: column !important;
 align-items: stretch !important;
 gap: 3px !important;
 width: 100% !important;
 padding: 6px 10px !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 line-height: 1.35 !important;
 color: #ffffff !important;
 background: rgba(147, 51, 234, 0.08) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 8px !important;
 text-align: center;

 overflow: hidden;
}
.punbb .post-author .pa-reg .fld-name,
.punbb .post-author .pa-invites .fld-name,
.punbb .post-author .pa-posts .fld-name,
.punbb .post-author .pa-respect .fld-name,
.punbb .post-author .pa-positive .fld-name,
.punbb .post-author .pa-time-visit .fld-name,
.punbb .post-author [class^="pa-fld"] .fld-name {
 display: block !important;
 order: -1;
 font-size: 9.5px !important;
 font-weight: 700 !important;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: var(--muted-2) !important;
 margin: 0 !important;

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.punbb .post-author .pa-reg,
.punbb .post-author .pa-invites,
.punbb .post-author .pa-posts,
.punbb .post-author .pa-respect,
.punbb .post-author .pa-positive,
.punbb .post-author .pa-ip,
.punbb .post-author .pa-gender,
.punbb .post-author .pa-age,
.punbb .post-author [class^="pa-fld"] {
 white-space: nowrap;
 text-overflow: ellipsis;
}

.punbb .post-author .pa-time-visit {
 white-space: normal !important;
 overflow: visible !important;
}
.punbb .post-author .pa-time-visit br { display: none; }

.punbb .post-author .pa-online {
 margin-top: 4px !important;
}
.punbb .post-author .pa-online strong {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 2px 8px;
 font-size: 10px !important;
 font-weight: 700 !important;
 color: #86efac !important;
 background: rgba(34, 197, 94, 0.10);
 border: 1px solid rgba(34, 197, 94, 0.35);
 border-radius: var(--radius-pill);
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
.punbb .post-author .pa-online strong::before {
 content: '';
 width: 6px; height: 6px;
 border-radius: 50%;
 background: #22c55e;
 box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
 flex-shrink: 0;
}

/* &#9472;&#9472; 17.4.1 Action-кнопки под автором (pa-profile / pa-pm /
 pa-email / pa-quote / pa-edit / pa-delete / pa-reports /
 pa-website / pa-icq / pa-mod …)

 Внутри <a>текст<span> Сообщение №N</span></a> (или <a>Профиль<span> Ник</span></a>)
 лежит служебный хвост для скринридеров. Он визуально «выпадает»
 из кнопки и портит вид — прячем ЖЁСТКО display:none.

 Селекторы перечислены явно и покрывают ОБА возможных места:
 • .post-author .pa-* / .pl-* — если MyBB положил кнопки в левую колонку
 • .post-links li.pl-* — стандартное место MyBB
 • .postbit_buttons a — второе стандартное имя контейнера
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post-author .pa-profile > a > span, .punbb .post-author .pa-profile > a > small,
.punbb .post-author .pa-pm > a > span, .punbb .post-author .pa-pm > a > small,
.punbb .post-author .pa-email > a > span, .punbb .post-author .pa-email > a > small,
.punbb .post-author .pa-website > a > span, .punbb .post-author .pa-website > a > small,
.punbb .post-author .pa-icq > a > span, .punbb .post-author .pa-icq > a > small,
.punbb .post-author .pa-quote > a > span, .punbb .post-author .pa-quote > a > small,
.punbb .post-author .pa-edit > a > span, .punbb .post-author .pa-edit > a > small,
.punbb .post-author .pa-delete > a > span, .punbb .post-author .pa-delete > a > small,
.punbb .post-author .pa-reports > a > span, .punbb .post-author .pa-reports > a > small,
.punbb .post-author .pa-mod > a > span, .punbb .post-author .pa-mod > a > small,
.punbb .post-author .pa-warn > a > span, .punbb .post-author .pa-warn > a > small,
.punbb .post-author .pl-profile > a > span, .punbb .post-author .pl-profile > a > small,
.punbb .post-author .pl-pm > a > span, .punbb .post-author .pl-pm > a > small,
.punbb .post-author .pl-email > a > span, .punbb .post-author .pl-email > a > small,
.punbb .post-author .pl-website > a > span, .punbb .post-author .pl-website > a > small,
.punbb .post-author .pl-icq > a > span, .punbb .post-author .pl-icq > a > small,
.punbb .post-author .pl-quote > a > span, .punbb .post-author .pl-quote > a > small,
.punbb .post-author .pl-edit > a > span, .punbb .post-author .pl-edit > a > small,
.punbb .post-author .pl-delete > a > span, .punbb .post-author .pl-delete > a > small,
.punbb .post-author .pl-reports > a > span, .punbb .post-author .pl-reports > a > small,
.punbb .post-author .pl-mod > a > span, .punbb .post-author .pl-mod > a > small,
.punbb .post-author .pl-warn > a > span, .punbb .post-author .pl-warn > a > small,
.punbb .post-links li a > span,
.punbb .post-links li a > small,
.punbb .postbit_buttons a > span,
.punbb .postbit_buttons a > small {
 display: none !important;
}

.punbb .post-author .pa-profile,
.punbb .post-author .pa-pm,
.punbb .post-author .pa-email,
.punbb .post-author .pa-website,
.punbb .post-author .pa-icq,
.punbb .post-author .pa-quote,
.punbb .post-author .pa-edit,
.punbb .post-author .pa-delete,
.punbb .post-author .pa-reports,
.punbb .post-author .pa-mod,
.punbb .post-author .pa-warn,
.punbb .post-author .pl-profile,
.punbb .post-author .pl-pm,
.punbb .post-author .pl-email,
.punbb .post-author .pl-website,
.punbb .post-author .pl-icq,
.punbb .post-author .pl-quote,
.punbb .post-author .pl-edit,
.punbb .post-author .pl-delete,
.punbb .post-author .pl-reports,
.punbb .post-author .pl-mod,
.punbb .post-author .pl-warn {
 width: 100%;
 max-width: 100%;
}
.punbb .post-author .pa-profile > a,
.punbb .post-author .pa-pm > a,
.punbb .post-author .pa-email > a,
.punbb .post-author .pa-website > a,
.punbb .post-author .pa-icq > a,
.punbb .post-author .pa-quote > a,
.punbb .post-author .pa-edit > a,
.punbb .post-author .pa-delete > a,
.punbb .post-author .pa-reports > a,
.punbb .post-author .pa-mod > a,
.punbb .post-author .pa-warn > a,
.punbb .post-author .pl-profile > a,
.punbb .post-author .pl-pm > a,
.punbb .post-author .pl-email > a,
.punbb .post-author .pl-website > a,
.punbb .post-author .pl-icq > a,
.punbb .post-author .pl-quote > a,
.punbb .post-author .pl-edit > a,
.punbb .post-author .pl-delete > a,
.punbb .post-author .pl-reports > a,
.punbb .post-author .pl-mod > a,
.punbb .post-author .pl-warn > a {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 100%;
 padding: 4px 10px !important;
 font-size: 10.5px !important;
 font-weight: 600 !important;
 line-height: 1.3 !important;
 color: var(--link) !important;
 background: #170a24 !important;
 border: 1px solid #2a1238 !important;
 border-radius: var(--radius-pill) !important;
 text-decoration: none !important;
 white-space: nowrap;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.punbb .post-author .pa-profile > a:hover,
.punbb .post-author .pa-pm > a:hover,
.punbb .post-author .pa-email > a:hover,
.punbb .post-author .pa-website > a:hover,
.punbb .post-author .pa-icq > a:hover,
.punbb .post-author .pa-edit > a:hover,
.punbb .post-author .pa-delete > a:hover,
.punbb .post-author .pa-reports > a:hover,
.punbb .post-author .pa-mod > a:hover,
.punbb .post-author .pa-warn > a:hover,
.punbb .post-author .pl-profile > a:hover,
.punbb .post-author .pl-pm > a:hover,
.punbb .post-author .pl-email > a:hover,
.punbb .post-author .pl-website > a:hover,
.punbb .post-author .pl-icq > a:hover,
.punbb .post-author .pl-edit > a:hover,
.punbb .post-author .pl-delete > a:hover,
.punbb .post-author .pl-reports > a:hover,
.punbb .post-author .pl-mod > a:hover,
.punbb .post-author .pl-warn > a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35) !important;
}

.punbb .post-author .pa-quote > a,
.punbb .post-author .pl-quote > a {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.3) !important;
}
.punbb .post-author .pa-quote > a:hover,
.punbb .post-author .pl-quote > a:hover {
 box-shadow: 0 0 18px rgba(225, 29, 72, 0.55) !important;
}

.punbb .post.online .post-author .pa-online strong,
.punbb .post-author.online .pa-online strong {
 color: #86efac !important;
}

.punbb .post-author a {
 color: var(--link) !important;
 text-decoration: none !important;
}
.punbb .post-author a:hover { color: var(--link-hover) !important; }

/* &#9472;&#9472; 17.5 Правая колонка: тело поста &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post-body {
 padding: 16px 20px !important;
 min-width: 0;
 color: var(--text) !important;
}
.punbb .post-box { min-width: 0; }

.punbb .post-content {
 font-size: 14px;
 line-height: 1.65;
 color: var(--text);
 word-wrap: break-word;
 overflow-wrap: anywhere;
}
.punbb .post-content p { margin: 0 0 10px !important; }
.punbb .post-content p:last-child { margin-bottom: 0 !important; }
.punbb .post-content h1,
.punbb .post-content h2,
.punbb .post-content h3,
.punbb .post-content h4 {
 color: #fff;
 margin: 18px 0 8px;
 line-height: 1.25;
}
.punbb .post-content h1 { font-size: 22px; }
.punbb .post-content h2 { font-size: 19px; }
.punbb .post-content h3 { font-size: 16px; }
.punbb .post-content ul,
.punbb .post-content ol { margin: 8px 0 12px 22px; padding: 0; }
.punbb .post-content li { margin: 4px 0; }

.punbb .post-content img,
.punbb .post-content .postimg,
.punbb .post-content .postimg img {
 max-width: 100%;
 height: auto;
 border-radius: 10px;
}
.punbb .post-content a { color: var(--link) !important; }
.punbb .post-content a:hover { color: var(--link-hover) !important; }

.punbb .post-content .quote-box,
.punbb .post-content blockquote {
 margin: 12px 0 !important;
 padding: 12px 14px !important;
 background: rgba(147, 51, 234, 0.08) !important;
 border: 1px solid var(--border) !important;
 border-left: 3px solid var(--accent-purple-2) !important;
 border-radius: 10px !important;
 color: #e2d1f0 !important;
 font-style: normal !important;
}
.punbb .post-content .quote-box cite {
 display: block;
 font-size: 12px;
 font-weight: 600;
 color: var(--link) !important;
 margin-bottom: 6px;
 font-style: normal;
}

.punbb .post-content .code-box {
 margin: 12px 0 !important;
 background: #06020a !important;
 border: 1px solid var(--border-hard) !important;
 border-radius: 10px !important;
 overflow: hidden;
}
.punbb .post-content .code-box strong.legend,
.punbb .post-content .code-box .legend {
 display: block;
 padding: 6px 12px;
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted-2) !important;
 background: rgba(147, 51, 234, 0.08);
 border-bottom: 1px solid var(--border-soft);
}
.punbb .post-content .code-box .scrollbox,
.punbb .post-content pre,
.punbb .post-content code {
 font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace !important;
 font-size: 12.5px !important;
 color: #f0abfc !important;
 background: transparent !important;
}
.punbb .post-content .code-box .scrollbox {
 padding: 12px 14px;
 overflow: auto;
 max-height: 420px;
}
.punbb .post-content :not(pre) > code {
 padding: 1px 6px;
 background: rgba(147, 51, 234, 0.12) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 6px;
}

.punbb .post-content .spoiler-box,
.punbb .post-content .hide-box {
 margin: 12px 0 !important;
 padding: 12px 14px !important;
 background: rgba(76, 29, 149, 0.15) !important;
 border: 1px dashed var(--border-hard) !important;
 border-radius: 10px !important;
 color: var(--text) !important;
}
.punbb .post-content .spoiler-box > strong,
.punbb .post-content .hide-box > strong {
 display: block;
 margin-bottom: 6px;
 color: var(--link-hover) !important;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.punbb .post-content .table-box table,
.punbb .post-content table {
 width: 100%;
 border-collapse: collapse;
 margin: 12px 0;
 font-size: 13px;
}
.punbb .post-content th,
.punbb .post-content td {
 padding: 8px 10px;
 border: 1px solid var(--border);
 text-align: left;
 color: var(--text);
}
.punbb .post-content th {
 background: rgba(147, 51, 234, 0.10);
 color: #fff;
 font-weight: 700;
}

/* &#9472;&#9472; 17.6 Подпись — .post-sig &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post-sig {
 margin-top: 16px !important;
 padding-top: 12px !important;
 border-top: 1px dashed var(--border-hard) !important;
 color: var(--muted) !important;
 font-size: 12.5px !important;
 line-height: 1.55 !important;
}
.punbb .post-sig dl { margin: 0; padding: 0; }
.punbb .post-sig dt {
 display: block;
 margin-bottom: 4px;
 font-size: 10.5px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted-2);
}
.punbb .post-sig dt span { color: inherit; }
.punbb .post-sig dd { margin: 0; }
.punbb .post-sig a { color: var(--link) !important; }
.punbb .post-sig a:hover { color: var(--link-hover) !important; }

/* &#9472;&#9472; 17.7 Оценка — .post-rating &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post-rating {
 margin-top: 14px !important;
}
.punbb .post-rating p.container {
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
}
.punbb .post-rating a {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 12px;
 border-radius: var(--radius-pill);
 font-size: 12px;
 font-weight: 700;
 color: #fff !important;
 background: rgba(147, 51, 234, 0.15) !important;
 border: 1px solid var(--border-hard);
 text-decoration: none !important;
 cursor: default;
}
.punbb .post-rating a::before {
 content: '\2605';
 color: var(--link-hover);
}

/* &#9472;&#9472; 17.8 Панель действий — .post-links &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.punbb .post-links {
 margin-top: 14px !important;
 padding-top: 12px !important;
 border-top: 1px solid var(--border-soft) !important;
}
.punbb .post-links ul {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
}
.punbb .post-links li {
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
}
.punbb .post-links li a {
 display: inline-flex;
 align-items: center;
 padding: 5px 12px;
 font-size: 12px;
 font-weight: 600;
 color: var(--link) !important;
 background: #170a24;
 border: 1px solid #2a1238;
 border-radius: var(--radius-pill);
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.punbb .post-links li a:hover {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}

.punbb .post-links li.pl-quote a,
.punbb .post-links li.pl-post a,
.punbb .post-links li.pl-reply a {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.30);
}

.punbb .clearer { clear: both; }

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 18. VIEWPROFILE (#pun-profile / #viewprofile-next)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Особенности разметки: <ul> содержит <table>, <li> — внутри <td>.
 Разметка невалидная, но браузер парсит; работаем через #id-селекторы.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-profile #viewprofile-next,
#pun-profile #viewprofile {
 background: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 margin: 0 0 16px !important;
 padding: 0 !important;
 overflow: hidden !important;
}
#pun-profile #viewprofile { border: none !important; margin: 0 !important; background: transparent !important; }

#pun-profile #viewprofile-next.group1 {
 border-color: rgba(244, 114, 182, 0.35) !important;
 box-shadow: 0 0 30px rgba(225, 29, 72, 0.08);
}

#pun-profile #viewprofile > .container {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
}

#pun-profile #viewprofile ul {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: block !important;
}
#pun-profile #viewprofile li {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
}

#pun-profile #viewprofile table {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
 margin: 0 !important;
}
#pun-profile #viewprofile td {
 border: none !important;
 background: transparent !important;
 vertical-align: top !important;
 padding: 0 !important;
}

#pun-profile #viewprofile-next::before {
 content: '';
 display: block;
 height: 90px;
 background:
 radial-gradient(circle at 30% 40%, rgba(147, 51, 234, 0.35) 0%, transparent 55%),
 radial-gradient(circle at 75% 60%, rgba(220, 38, 38, 0.30) 0%, transparent 55%),
 linear-gradient(135deg, #1d0c2e 0%, #2a1045 100%);
 border-bottom: 1px solid var(--border-soft);
}

/* &#9472;&#9472; Левая колонка (id, аватар, ник, титул) &#9472;&#9472;
 Раскладку меняем на flex+order: аватар (наплывом на hero-полосу) — первым,
 потом имя, титул, онлайн. */
#pun-profile #profile-left {
 width: 240px !important;
 padding: 0 20px 22px !important;
 background: var(--panel-3) !important;
 border-right: 1px solid var(--border-soft) !important;
 text-align: center;
 position: relative;
 display: flex !important;
 flex-direction: column;
 align-items: center;
}
#pun-profile #profile-left > li { width: 100%; }
#pun-profile #profile-left > li#pa-avatar { order: 1; margin-top: -60px !important; position: relative; z-index: 2; }
#pun-profile #profile-left > li#profile-name { order: 2; }
#pun-profile #profile-left > li#profile-title{ order: 3; }
#pun-profile #profile-left > li#pa-online { order: 4; }

#pun-profile #pa-avatar img,
#pun-profile #viewprofile-next.no-avatar #pa-avatar strong {
 box-shadow:
 0 0 0 4px var(--panel-3),
 0 8px 24px rgba(147, 51, 234, 0.35),
 0 0 40px rgba(225, 29, 72, 0.25) !important;
}
#pun-profile #profile-left > li {
 display: block !important;
 margin-bottom: 10px !important;
}
#pun-profile #profile-left > li:last-child { margin-bottom: 0 !important; }

#pun-profile #pa-avatar {
 order: -1;
}
#pun-profile #pa-avatar img {
 display: block;
 width: 100%;
 max-width: 180px;
 height: auto;
 margin: 0 auto;
 border-radius: 14px;
 border: 1px solid var(--border-hard);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

#pun-profile.no-avatar #pa-avatar strong,
#pun-profile #viewprofile-next.no-avatar #pa-avatar strong {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 180px; height: 180px;
 margin: 0 auto;
 border-radius: 14px;
 border: 1px dashed var(--border-hard);
 background:
 radial-gradient(circle at 50% 40%, rgba(192, 132, 252, 0.20) 0%, transparent 60%),
 linear-gradient(135deg, #1d0c2e, #2a1045);
 color: var(--muted-2) !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

#pun-profile #profile-name {
 margin-top: 4px !important;
}
#pun-profile #profile-name strong {
 display: block;
 font-size: 22px !important;
 font-weight: 800 !important;
 line-height: 1.1 !important;
 background: linear-gradient(135deg, #f87171 0%, #c084fc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: 0.01em;
}

#pun-profile #profile-title strong {
 display: inline-block;
 padding: 4px 12px;
 font-size: 11px !important;
 font-weight: 700 !important;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: #fff !important;
 background: var(--grad-accent);
 border-radius: var(--radius-pill);
}

#pun-profile #pa-online strong {
 display: inline-flex !important;
 align-items: center;
 gap: 6px;
 font-size: 12px !important;
 font-weight: 600 !important;
 color: #86efac !important;
}
#pun-profile #pa-online strong::before {
 content: '';
 width: 8px; height: 8px;
 border-radius: 50%;
 background: #22c55e;
 box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

/* &#9472;&#9472; Правая колонка (статистика/поля) &#9472;&#9472; */
#pun-profile #profile-right {
 padding: 22px 24px !important;
}
#pun-profile #profile-right > li {
 display: flex !important;
 flex-wrap: wrap !important;
 align-items: baseline !important;
 gap: 8px !important;
 padding: 10px 0 !important;
 border-bottom: 1px dashed var(--border-soft);
 font-size: 13px !important;
 line-height: 1.4 !important;
}
#pun-profile #profile-right > li:last-child { border-bottom: none; }

#pun-profile #profile-right > li > span {
 flex: 0 0 auto;
 font-size: 11px !important;
 font-weight: 600 !important;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted-2) !important;
 min-width: 180px;
}
#pun-profile #profile-right > li > span a {
 color: inherit !important;
 text-decoration: none !important;
 border-bottom: 1px dotted var(--muted-2);
}
#pun-profile #profile-right > li > span a:hover {
 color: var(--link-hover) !important;
 border-bottom-color: var(--link-hover);
}
#pun-profile #profile-right > li > strong {
 flex: 1 1 200px;
 font-size: 13px !important;
 font-weight: 700 !important;
 color: #fff !important;
}

#pun-profile #profile-right #pa-posts strong {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
}
#pun-profile #profile-right #pa-posts strong a,
#pun-profile #profile-right a#user-posts,
#pun-profile #profile-right a#user-topics {
 display: inline-flex;
 align-items: center;
 padding: 4px 12px;
 font-size: 11px !important;
 font-weight: 600 !important;
 color: var(--link) !important;
 background: #170a24;
 border: 1px solid #2a1238;
 border-radius: var(--radius-pill);
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#pun-profile #profile-right #pa-posts strong a:hover,
#pun-profile #profile-right a#user-posts:hover,
#pun-profile #profile-right a#user-topics:hover {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}

#pun-profile #profile-right #pa-posts strong { color: transparent; }
#pun-profile #profile-right #pa-posts strong > a { color: var(--link) !important; }
#pun-profile #profile-right #pa-posts strong > a:hover { color: #fff !important; }

#pun-profile #profile-right #pa-posts { align-items: center; }

/* &#9472;&#9472; #profilenav (для авторизованных) — меню разделов &#9472;&#9472; */
#pun-profile #profilenav {
 margin-bottom: 14px !important;
 background: var(--panel-3) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-md) !important;
 padding: 10px !important;
}
#pun-profile #profilenav ul {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
}
#pun-profile #profilenav li { margin: 0 !important; padding: 0 !important; }
#pun-profile #profilenav a {
 display: inline-flex;
 align-items: center;
 padding: 6px 14px;
 font-size: 12px !important;
 font-weight: 600 !important;
 color: var(--link) !important;
 background: #170a24;
 border: 1px solid #2a1238;
 border-radius: var(--radius-pill);
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#pun-profile #profilenav a:hover,
#pun-profile #profilenav li.isactive a,
#pun-profile #profilenav li.active a {
 background: var(--grad-accent);
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35);
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 19. FORMS (.formal / .inform / fieldset / inputs / buttons)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Применяется в profile-редакторе, login/register, поиске, поле
 быстрого ответа, форме создания темы и т.д.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .formal {
 background: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 padding: 4px !important;
 margin-bottom: 16px !important;
 color: var(--text) !important;
}

.punbb .formal form,
.punbb .formsubmit,
.punbb .inform {
 background: transparent !important;
 border: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

.punbb .formal fieldset {
 background: transparent !important;
 border: none !important;
 border-top: 1px solid var(--border-soft) !important;
 margin: 0 !important;
 padding: 14px 18px !important;
}
.punbb .formal .inform:first-child fieldset,
.punbb .formal fieldset:first-of-type { border-top: none !important; }

.punbb .formal legend {
 display: block !important;
 float: none !important;
 width: 100% !important;
 padding: 0 0 10px !important;
 margin: 0 !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 color: #fff !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.punbb .formal legend span {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #fff !important;
}
.punbb .formal legend span::before {
 content: '';
 display: inline-block;
 width: 3px; height: 14px;
 border-radius: 2px;
 background: var(--grad-bar);
}

.punbb .infldset {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
}
.punbb .infldset p {
 margin: 8px 0 !important;
 font-size: 12px !important;
 color: var(--muted) !important;
 line-height: 1.5;
}

.punbb .formal label {
 display: block !important;
 margin: 6px 0 !important;
 font-size: 13px !important;
 color: var(--text) !important;
}
.punbb .formal label strong,
.punbb .formal label b {
 display: block;
 margin-bottom: 4px;
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted-2);
}

.punbb input[type="text"],
.punbb input[type="password"],
.punbb input[type="email"],
.punbb input[type="url"],
.punbb input[type="number"],
.punbb input[type="search"],
.punbb input[type="tel"],
.punbb textarea,
.punbb select {
 display: inline-block;
 max-width: 100%;
 padding: 8px 12px !important;
 font: inherit !important;
 font-size: 13px !important;
 color: var(--text) !important;
 background: #0a0413 !important;
 border: 1px solid var(--border) !important;
 border-radius: 10px !important;
 outline: none !important;
 transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.punbb textarea { min-height: 120px; line-height: 1.5; resize: vertical; }

.punbb input[type="text"]:focus,
.punbb input[type="password"]:focus,
.punbb input[type="email"]:focus,
.punbb input[type="url"]:focus,
.punbb input[type="number"]:focus,
.punbb input[type="search"]:focus,
.punbb input[type="tel"]:focus,
.punbb textarea:focus,
.punbb select:focus {
 border-color: var(--accent-purple-2) !important;
 box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
}

.punbb input[type="checkbox"],
.punbb input[type="radio"] {
 accent-color: var(--accent-purple-2);
 margin-right: 6px;
 vertical-align: middle;
}

.punbb input[type="submit"],
.punbb input[type="button"],
.punbb input[type="reset"],
.punbb button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 9px 22px !important;
 font: inherit !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 color: #fff !important;
 background: var(--grad-accent) !important;
 border: 1px solid rgba(244, 114, 182, 0.5) !important;
 border-radius: var(--radius-pill) !important;
 cursor: pointer !important;
 text-decoration: none !important;
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.25);
 transition: transform .15s ease, box-shadow .2s ease;
}
.punbb input[type="submit"]:hover,
.punbb input[type="button"]:hover,
.punbb button:hover {
 transform: translateY(-1px);
 box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
}
.punbb input[type="reset"] {
 background: #170a24 !important;
 color: var(--link) !important;
 border-color: var(--border-hard) !important;
 box-shadow: none;
}

.punbb .formsubmit,
.punbb p.submitend,
.punbb .submitend {
 padding: 14px 18px !important;
 border-top: 1px solid var(--border-soft) !important;
 display: flex !important;
 gap: 10px !important;
 flex-wrap: wrap;
 align-items: center;
}

.punbb .info,
.punbb #posterror,
.punbb .error,
.punbb .warn {
 padding: 12px 16px !important;
 margin-bottom: 12px !important;
 border-radius: 10px !important;
 font-size: 13px !important;
 background: rgba(220, 38, 38, 0.08) !important;
 border: 1px solid rgba(220, 38, 38, 0.35) !important;
 color: #fca5a5 !important;
}
.punbb .info { background: rgba(147, 51, 234, 0.08) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 20. SEARCH FORM (#pun-search) и .info / .warn / .error блоки
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка поиска:
 #pun-search > #pun-main > .formal > form#punbbsearch.container
 > fieldset > legend > span
 + .fs-box.inline
 > p.inputfield > label + <br> + span.input > input
 > p.selectfield > label + <br> + span.input > select
 > p.infofield (подсказка курсивом)
 > p.formsubmit > input[type=submit]

 Также покрывает страницу #pun-message (info-блок «Нет прав…»).
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .fs-box {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
}
.punbb .fs-box.inline {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 12px 18px !important;
 align-items: flex-start !important;
}

.punbb .inputfield,
.punbb .selectfield,
.punbb .passfield,
.punbb .infofield,
.punbb .datafield,
.punbb .checkfield,
.punbb .radiofield {
 flex: 1 1 260px;
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
}

.punbb .infofield {
 flex-basis: 100% !important;
 order: 99;
 padding: 10px 12px !important;
 font-size: 12px !important;
 color: var(--muted) !important;
 background: rgba(147, 51, 234, 0.05) !important;
 border: 1px dashed var(--border-soft) !important;
 border-radius: 10px !important;
 line-height: 1.5;
}

.punbb .inputfield > label,
.punbb .selectfield > label,
.punbb .passfield > label,
.punbb .datafield > label,
.punbb .checkfield > label,
.punbb .radiofield > label {
 display: inline-block !important;
 margin-bottom: 6px !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.punbb .inputfield > br,
.punbb .selectfield > br,
.punbb .passfield > br,
.punbb .datafield > br { display: none; }

.punbb .inputfield > .input,
.punbb .selectfield > .input,
.punbb .passfield > .input,
.punbb .datafield > .input {
 display: block !important;
 width: 100%;
}
.punbb .inputfield > .input > input,
.punbb .passfield > .input > input,
.punbb .datafield > .input > input,
.punbb .selectfield > .input > select {
 width: 100% !important;
 max-width: 100% !important;
}

.punbb select optgroup {
 background: #0a0413;
 color: var(--muted-2);
 font-weight: 700;
 font-style: normal;
 padding: 4px 0;
}
.punbb select option {
 background: #0a0413;
 color: var(--text);
 padding: 4px 8px;
}

.punbb input::placeholder,
.punbb textarea::placeholder {
 color: rgba(168, 139, 250, 0.55);
}

.punbb p.formsubmit,
.punbb .formsubmit {
 margin: 0 !important;
 padding: 14px 18px !important;
 border-top: 1px solid var(--border-soft) !important;
 display: flex !important;
 gap: 10px !important;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-end;
 background: rgba(147, 51, 234, 0.04);
}

#pun-message .info,
.punbb .info {
 background: linear-gradient(180deg,
 rgba(147, 51, 234, 0.10) 0%,
 rgba(147, 51, 234, 0.04) 100%) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 padding: 0 !important;
 margin: 12px 0 !important;
 overflow: hidden;
 color: var(--text) !important;
}
#pun-message .info .container,
.punbb .info .container {
 background: transparent !important;
 border: none !important;
 padding: 18px 22px !important;
 font-size: 14px !important;
 color: var(--text) !important;
 display: flex;
 align-items: center;
 gap: 12px;
}
#pun-message .info .container::before,
.punbb .info .container::before {
 content: '';
 flex-shrink: 0;
 width: 22px; height: 22px;
 border-radius: 50%;
 background: var(--grad-accent);
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>") center/16px no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>") center/16px no-repeat;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 21. VIEWFORUM (#pun-viewforum) — список тем внутри форума,
21. VIEWFORUM (#pun-search) — список тем внутри форума,
21. VIEWFORUM (#pun-searchtopics) — список тем внутри форума,
21. VIEWFORUM (#pun-searchposts) — список тем внутри форума
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Реальная разметка PunBB:
 #pun-viewforum > #pun-main,
 #pun-search > #pun-main,
 #pun-searchtopics > #pun-main,
 #pun-searchposts > #pun-main
 &#9500;&#9472; .linkst > .pagelink + .postlink (Новая тема / Новый опрос)
 &#9500;&#9472; .topic-list ИЛИ .category (в зависимости от версии MyBB.ru)
 &#9474; &#9500;&#9472; <h2><span>Тем N страница M из K</span></h2>
 &#9474; &#9492;&#9472; <div class="container">
 &#9474; <table>
 &#9474; <thead><tr><th.tcl><th.tc2><th.tc3><th.tcr></tr></thead>
 &#9474; <tbody class="hasicon">
 &#9474; <tr id="thread_N" class="[isticky|iclosed|iredirect|inew]">
 &#9474; <td.tcl> .intd > .icon + .tclcon > h3 > a
 &#9474; + <span class="byuser">By … в …</span>
 &#9474; <td.tc2>N ответов
 &#9474; <td.tc3>N просмотров
 &#9474; <td.tcr>дата + автор + аватар
 &#9474; </tr>
 &#9474; </tbody>
 &#9474; </table>
 &#9474; </div>
 &#9500;&#9472; .modmenu (Удалить, Перенести, Открыть или Закрыть темы, RSS)
 &#9492;&#9472; .linksb > .pagelink + .postlink

 ВАЖНО: h2 внутри .topic-list ВИДИМЫЙ (в отличие от .topic > h2 на viewtopic).
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-viewforum .linkst,
#pun-search .linkst,
#pun-searchtopics .linkst,
#pun-searchposts .linkst,
#pun-viewforum .linksb,
#pun-search .linksb,
#pun-searchtopics .linksb,
#pun-searchposts .linksb {
 display: flex !important;
 align-items: center !important;
 justify-content: flex-start !important;
 gap: 10px !important;
 flex-wrap: wrap !important;
 padding: 10px 0 !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
}
#pun-viewforum .linksb,
#pun-search .linksb,
#pun-searchtopics .linksb,
#pun-searchposts .linksb { justify-content: space-between !important; }

/* Кнопки "Новая тема" / "Новый опрос".
 ВАЖНО: .postlink может быть тремя вариантами:
 A) <a class="postlink">Новая тема</a> — сам линк
 B) <div class="postlink"><a>Новая тема</a><a>Опрос</a> — контейнер с ссылками
 C) <div class="postlink"><input type="submit"></div> — контейнер с кнопкой-input
 Поэтому: .postlink-контейнер БЕЗ фона (просто flex), pill-стиль на детях. */

#pun-viewforum .linkst .postlink,
#pun-search .linkst .postlink,
#pun-searchtopics .linkst .postlink,
#pun-searchposts .linkst .postlink,
#pun-viewforum .linksb .postlink,
#pun-search .linksb .postlink,
#pun-searchtopics .linksb .postlink,
#pun-searchposts .linksb .postlink {
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 0 !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
 border-radius: 0 !important;
 box-shadow: none !important;
}

#pun-viewforum .linkst a.postlink,
#pun-search .linkst a.postlink,
#pun-searchtopics .linkst a.postlink,
#pun-searchposts .linkst a.postlink,
#pun-viewforum .linksb a.postlink,
#pun-search .linksb a.postlink,
#pun-searchtopics .linksb a.postlink,
#pun-searchposts .linksb a.postlink,

#pun-viewforum .linkst .postlink > a,
#pun-search .linkst .postlink > a,
#pun-searchtopics .linkst .postlink > a,
#pun-searchposts .linkst .postlink > a,
#pun-viewforum .linksb .postlink > a,
#pun-search .linksb .postlink > a,
#pun-searchtopics .linksb .postlink > a,
#pun-searchposts .linksb .postlink > a {
 display: inline-flex !important;
 align-items: center !important;
 padding: 9px 22px !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 color: #fff !important;
 background: var(--grad-accent) !important;
 border: 1px solid rgba(244, 114, 182, 0.5) !important;
 border-radius: var(--radius-pill) !important;
 box-shadow: 0 0 14px rgba(225, 29, 72, 0.35) !important;
 text-decoration: none !important;
 margin: 0 !important;
 transition: transform .15s ease, box-shadow .2s ease !important;
}
#pun-viewforum .linkst a.postlink:hover,
#pun-search .linkst a.postlink:hover,
#pun-searchtopics .linkst a.postlink:hover,
#pun-searchposts .linkst a.postlink:hover,
#pun-viewforum .linksb a.postlink:hover,
#pun-search .linksb a.postlink:hover,
#pun-searchtopics .linksb a.postlink:hover,
#pun-searchposts .linksb a.postlink:hover,
#pun-viewforum .linkst .postlink > a:hover,
#pun-search .linkst .postlink > a:hover,
#pun-searchtopics .linkst .postlink > a:hover,
#pun-searchposts .linkst .postlink > a:hover,
#pun-viewforum .linksb .postlink > a:hover,
#pun-search .linksb .postlink > a:hover,
#pun-searchtopics .linksb .postlink > a:hover,
#pun-searchposts .linksb .postlink > a:hover {
 box-shadow: 0 0 22px rgba(225, 29, 72, 0.55) !important;
 transform: translateY(-1px);
 color: #fff !important;
}

/* &#9472;&#9472; ГЛАВНОЕ: список тем — карточка на всю ширину &#9472;&#9472; */

#pun-viewforum .topic-list,
#pun-search .topic-list,
#pun-searchtopics .topic-list,
#pun-searchposts .topic-list,
#pun-viewforum #pun-main > .category,
#pun-search #pun-main > .category,
#pun-searchtopics #pun-main > .category,
#pun-searchposts #pun-main > .category,
#pun-viewforum #pun-main > div:has(> table),
#pun-search #pun-main > div:has(> table),
#pun-searchtopics #pun-main > div:has(> table),
#pun-searchposts #pun-main > div:has(> table),
#pun-viewforum #pun-main > .main-content,
#pun-search #pun-main > .main-content,
#pun-searchtopics #pun-main > .main-content,
#pun-searchposts #pun-main > .main-content {
 display: block !important;
 width: 100% !important;
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.10) 0%,
 rgba(147, 51, 234, 0.04) 40%,
 rgba(220, 38, 38, 0.06) 100%) !important;
 background-color: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 overflow: hidden !important;
 margin: 12px 0 !important;
 padding: 0 !important;
 box-shadow:
 inset 0 1px 0 rgba(244, 114, 182, 0.08),
 0 4px 20px rgba(0, 0, 0, 0.25);
}

#pun-viewforum .topic-list > h2,
#pun-search .topic-list > h2,
#pun-searchtopics .topic-list > h2,
#pun-searchposts .topic-list > h2,
#pun-viewforum #pun-main .topic-list > h2,
#pun-search #pun-main .topic-list > h2,
#pun-searchtopics #pun-main .topic-list > h2,
#pun-searchposts #pun-main .topic-list > h2,
#pun-viewforum #pun-main > div > h2,
#pun-search #pun-main > div > h2,
#pun-searchtopics #pun-main > div > h2,
#pun-searchposts #pun-main > div > h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
 padding: 13px 18px !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: #fff !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 letter-spacing: 0.03em !important;
 text-transform: none !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
}
#pun-viewforum .topic-list > h2::before,
#pun-search .topic-list > h2::before,
#pun-searchtopics .topic-list > h2::before,
#pun-searchposts .topic-list > h2::before,
#pun-viewforum #pun-main > div > h2::before,
#pun-search #pun-main > div > h2::before,
#pun-searchtopics #pun-main > div > h2::before,
#pun-searchposts #pun-main > div > h2::before {
 content: '';
 display: inline-block;
 width: 4px; height: 16px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}
#pun-viewforum .topic-list > h2 > span,
#pun-search .topic-list > h2 > span,
#pun-searchtopics .topic-list > h2 > span,
#pun-searchposts .topic-list > h2 > span,
#pun-viewforum #pun-main > div > h2 > span,
#pun-search #pun-main > div > h2 > span,
#pun-searchtopics #pun-main > div > h2 > span,
#pun-searchposts #pun-main > div > h2 > span {
 color: #fff !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}

#pun-viewforum .topic-list > .container,
#pun-search .topic-list > .container,
#pun-searchtopics .topic-list > .container,
#pun-searchposts .topic-list > .container,
#pun-viewforum #pun-main .main-content > .container,
#pun-search #pun-main .main-content > .container,
#pun-searchtopics #pun-main .main-content > .container,
#pun-searchposts #pun-main .main-content > .container,
#pun-viewforum #pun-main > .category > .container,
#pun-search #pun-main > .category > .container,
#pun-searchtopics #pun-main > .category > .container,
#pun-searchposts #pun-main > .category > .container,
#pun-viewforum #pun-main > div > .container,
#pun-search #pun-main > div > .container,
#pun-searchtopics #pun-main > div > .container,
#pun-searchposts #pun-main > div > .container {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 width: 100% !important;
 display: block !important;
}

#pun-viewforum .topic-list > .container,
#pun-search .topic-list > .container,
#pun-searchtopics .topic-list > .container,
#pun-searchposts .topic-list > .container,
#pun-viewforum #pun-main > div > .container,
#pun-search #pun-main > div > .container,
#pun-searchtopics #pun-main > div > .container,
#pun-searchposts #pun-main > div > .container {
 background: transparent !important;
 border: none !important;
 padding: 8px !important;
 width: 100% !important;
 display: block !important;
}

#pun-viewforum table,
#pun-search table,
#pun-searchtopics table,
#pun-searchposts table {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
 table-layout: auto !important;
}
#pun-viewforum thead tr,
#pun-search thead tr,
#pun-searchtopics thead tr,
#pun-searchposts thead tr {
 background: transparent !important;
}
#pun-viewforum thead th,
#pun-search thead th,
#pun-searchtopics thead th,
#pun-searchposts thead th {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid #230d30 !important;
 padding: 6px 10px !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.07em !important;
 text-align: left !important;
}
#pun-viewforum thead th.tcl,
#pun-search thead th.tcl,
#pun-searchtopics thead th.tcl,
#pun-searchposts thead th.tcl { padding-left: 14px !important; }
#pun-viewforum thead th.tc2,
#pun-search thead th.tc2,
#pun-searchtopics thead th.tc2,
#pun-searchposts thead th.tc2,
#pun-viewforum thead th.tc3,
#pun-search thead th.tc3,
#pun-searchtopics thead th.tc3,
#pun-searchposts thead th.tc3 {
 text-align: center !important;
 width: 90px !important;
}
#pun-viewforum thead th.tcr,
#pun-search thead th.tcr,
#pun-searchtopics thead th.tcr,
#pun-searchposts thead th.tcr {
 text-align: left !important;
 width: 200px !important;
}
#pun-viewforum tbody tr,
#pun-search tbody tr,
#pun-searchtopics tbody tr,
#pun-searchposts tbody tr {
 background: transparent !important;
 transition: background .2s ease !important;
}
#pun-viewforum tbody tr:hover,
#pun-search tbody tr:hover,
#pun-searchtopics tbody tr:hover,
#pun-searchposts tbody tr:hover {
 background: rgba(168, 85, 247, 0.07) !important;
}
#pun-viewforum tbody tr td,
#pun-search tbody tr td,
#pun-searchtopics tbody tr td,
#pun-searchposts tbody tr td {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid rgba(40, 18, 54, 0.6) !important;
 padding: 12px 10px !important;
 vertical-align: middle !important;
 color: var(--text) !important;
}
#pun-viewforum tbody tr:last-child td,
#pun-search tbody tr:last-child td,
#pun-searchtopics tbody tr:last-child td,
#pun-searchposts tbody tr:last-child td { border-bottom: none !important; }

#pun-viewforum td.tcl,
#pun-search td.tcl,
#pun-searchtopics td.tcl,
#pun-searchposts td.tcl { padding: 10px 8px !important; }

#pun-viewforum td.tc2,
#pun-search td.tc2,
#pun-searchtopics td.tc2,
#pun-searchposts td.tc2,
#pun-viewforum td.tc3,
#pun-search td.tc3,
#pun-searchtopics td.tc3,
#pun-searchposts td.tc3 {
 text-align: center !important;
 font-size: 15px !important;
 font-weight: 700 !important;
 color: var(--text-strong) !important;
 width: 90px !important;
}

#pun-viewforum td.tcr,
#pun-search td.tcr,
#pun-searchtopics td.tcr,
#pun-searchposts td.tcr {
 width: 200px !important;
 font-size: 12px !important;
 color: var(--muted) !important;
 vertical-align: middle !important;
}
#pun-viewforum td.tcr a,
#pun-search td.tcr a,
#pun-searchtopics td.tcr a,
#pun-searchposts td.tcr a {
 color: var(--link) !important;
 text-decoration: none !important;
 font-weight: 600 !important;
}
#pun-viewforum td.tcr a:hover,
#pun-search td.tcr a:hover,
#pun-searchtopics td.tcr a:hover,
#pun-searchposts td.tcr a:hover { color: var(--link-hover) !important; }
#pun-viewforum td.tcr .nopost,
#pun-search td.tcr .nopost,
#pun-searchtopics td.tcr .nopost,
#pun-searchposts td.tcr .nopost,
#pun-viewforum td.tcr > span,
#pun-search td.tcr > span,
#pun-searchtopics td.tcr > span,
#pun-searchposts td.tcr > span {
 color: var(--muted-2) !important;
 font-style: italic !important;
 font-size: 12px !important;
}

#pun-viewforum td.tcr img,
#pun-search td.tcr img,
#pun-searchtopics td.tcr img,
#pun-searchposts td.tcr img {
 width: 36px !important;
 height: 36px !important;
 object-fit: cover !important;
 border-radius: 8px !important;
 border: 1px solid var(--border-hard) !important;
 vertical-align: middle;
 margin-right: 8px;
 float: left;
}

#pun-viewforum .hasicon .intd,
#pun-search .hasicon .intd,
#pun-searchtopics .hasicon .intd,
#pun-searchposts .hasicon .intd,
#pun-viewforum td.tcl .intd,
#pun-search td.tcl .intd,
#pun-searchtopics td.tcl .intd,
#pun-searchposts td.tcl .intd {
 display: flex !important;
 align-items: center !important;
 gap: 14px !important;
}
#pun-viewforum .hasicon .icon,
#pun-search .hasicon .icon,
#pun-searchtopics .hasicon .icon,
#pun-searchposts .hasicon .icon,
#pun-viewforum td.tcl .icon,
#pun-search td.tcl .icon,
#pun-searchtopics td.tcl .icon,
#pun-searchposts td.tcl .icon {
 width: 44px !important;
 height: 44px !important;
 min-width: 44px !important;
 border-radius: 12px !important;
 background: linear-gradient(135deg, #1d0c2e, #2a1045) !important;
 border: 1px solid var(--border-hard) !important;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
 position: relative !important;
 overflow: hidden !important;
}
#pun-viewforum .hasicon .tclcon,
#pun-search .hasicon .tclcon,
#pun-searchtopics .hasicon .tclcon,
#pun-searchposts .hasicon .tclcon,
#pun-viewforum td.tcl .tclcon,
#pun-search td.tcl .tclcon,
#pun-searchtopics td.tcl .tclcon,
#pun-searchposts td.tcl .tclcon {
 flex: 1 !important;
 min-width: 0 !important;
}

#pun-viewforum .tclcon h3,
#pun-search .tclcon h3,
#pun-searchtopics .tclcon h3,
#pun-searchposts .tclcon h3,
#pun-viewforum td.tcl h3,
#pun-search td.tcl h3,
#pun-searchtopics td.tcl h3,
#pun-searchposts td.tcl h3 {
 margin: 0 0 3px !important;
 padding: 0 !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 line-height: 1.3 !important;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 6px;
}
#pun-viewforum .tclcon h3 a,
#pun-search .tclcon h3 a,
#pun-searchtopics .tclcon h3 a,
#pun-searchposts .tclcon h3 a,
#pun-viewforum td.tcl h3 a,
#pun-search td.tcl h3 a,
#pun-searchtopics td.tcl h3 a,
#pun-searchposts td.tcl h3 a {
 color: #fff !important;
 text-decoration: none !important;
 transition: color .2s;
}
#pun-viewforum .tclcon h3 a:hover,
#pun-search .tclcon h3 a:hover,
#pun-searchtopics .tclcon h3 a:hover,
#pun-searchposts .tclcon h3 a:hover,
#pun-viewforum td.tcl h3 a:hover,
#pun-search td.tcl h3 a:hover,
#pun-searchtopics td.tcl h3 a:hover,
#pun-searchposts td.tcl h3 a:hover { color: var(--link-hover) !important; }

#pun-viewforum .tclcon .byuser,
#pun-search .tclcon .byuser,
#pun-searchtopics .tclcon .byuser,
#pun-searchposts .tclcon .byuser,
#pun-viewforum .tclcon .item2,
#pun-search .tclcon .item2,
#pun-searchtopics .tclcon .item2,
#pun-searchposts .tclcon .item2,
#pun-viewforum .tclcon p,
#pun-search .tclcon p,
#pun-searchtopics .tclcon p,
#pun-searchposts .tclcon p,
#pun-viewforum td.tcl .byuser,
#pun-search td.tcl .byuser,
#pun-searchtopics td.tcl .byuser,
#pun-searchposts td.tcl .byuser,
#pun-viewforum td.tcl .item2,
#pun-search td.tcl .item2,
#pun-searchtopics td.tcl .item2,
#pun-searchposts td.tcl .item2,
#pun-viewforum td.tcl p,
#pun-search td.tcl p,
#pun-searchtopics td.tcl p,
#pun-searchposts td.tcl p {
 margin: 0 !important;
 font-size: 12px !important;
 color: var(--muted) !important;
 line-height: 1.4;
}
#pun-viewforum .tclcon a,
#pun-search .tclcon a,
#pun-searchtopics .tclcon a,
#pun-searchposts .tclcon a { color: var(--link) !important; }
#pun-viewforum .tclcon a:hover,
#pun-search .tclcon a:hover,
#pun-searchtopics .tclcon a:hover,
#pun-searchposts .tclcon a:hover { color: var(--link-hover) !important; }

#pun-viewforum .modmenu,
#pun-search .modmenu,
#pun-searchtopics .modmenu,
#pun-searchposts .modmenu {
 background: transparent !important;
 border: none !important;
 padding: 10px 4px !important;
 margin: 6px 0 !important;
 font-size: 12px !important;
 color: var(--muted-2) !important;
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;
 gap: 8px !important;
}
#pun-viewforum .modmenu a,
#pun-search .modmenu a,
#pun-searchtopics .modmenu a,
#pun-searchposts .modmenu a {
 color: var(--link) !important;
 text-decoration: none !important;
 padding: 4px 10px !important;
 border-radius: var(--radius-pill) !important;
 border: 1px solid var(--border-soft) !important;
 background: rgba(147, 51, 234, 0.06) !important;
 font-weight: 600 !important;
 font-size: 11.5px !important;
 transition: background .2s, color .2s, border-color .2s !important;
}
#pun-viewforum .modmenu a:hover,
#pun-search .modmenu a:hover,
#pun-searchtopics .modmenu a:hover,
#pun-searchposts .modmenu a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
}

.punbb tr.isticky td.tcl h3::before,
#pun-viewforum tr.isticky td.tcl h3::before,
#pun-search tr.isticky td.tcl h3::before,
#pun-searchtopics tr.isticky td.tcl h3::before,
#pun-searchposts tr.isticky td.tcl h3::before {
 content: '\1F4CC';
 font-size: 11px;
 padding: 2px 8px;
 border-radius: var(--radius-pill);
 background: linear-gradient(135deg, #fbbf24, #f59e0b);
 color: #1a0800;
 font-weight: 700;
}
.punbb tr.iclosed td.tcl h3::before,
#pun-viewforum tr.iclosed td.tcl h3::before,
#pun-search tr.iclosed td.tcl h3::before,
#pun-searchtopics tr.iclosed td.tcl h3::before,
#pun-searchposts tr.iclosed td.tcl h3::before {
 content: '\1F512';
 font-size: 10px;
 padding: 2px 10px;
 border-radius: var(--radius-pill);
 background: rgba(148, 163, 184, 0.15);
 color: #cbd5e1;
 border: 1px solid rgba(148, 163, 184, 0.3);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-weight: 700;
}
.punbb tr.iredirect td.tcl h3::before,
#pun-viewforum tr.iredirect td.tcl h3::before,
#pun-search tr.iredirect td.tcl h3::before,
#pun-searchtopics tr.iredirect td.tcl h3::before,
#pun-searchposts tr.iredirect td.tcl h3::before {
 content: '\2197';
 font-size: 14px;
 padding: 2px 10px;
 border-radius: var(--radius-pill);
 background: linear-gradient(135deg, #22d3ee, #6366f1);
 color: #fff;
 font-weight: 700;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 22. USERLIST (#pun-userlist) — сетка карточек участников
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка PunBB:
 #pun-userlist > .main-content > table > tbody
 tbody.hasicon > tr > td.tcl (аватар+ник) / td.tc2 (титул) /
 td.tc3 (сообщений) / td.tcr (регистрация)
 Стандартная таблица — делаем сеткой через CSS Grid на tbody.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-userlist #pun-main .main-content {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
}

#pun-userlist thead {
 position: absolute !important;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
}

#pun-userlist table {
 display: block !important;
 width: 100% !important;
 border: none !important;
 background: transparent !important;
}
#pun-userlist tbody {
 display: grid !important;
 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
 gap: 14px !important;
 padding: 0 !important;
}
#pun-userlist tbody tr {
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 text-align: center !important;
 padding: 18px 14px !important;
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.10) 0%,
 rgba(220, 38, 38, 0.05) 100%),
 var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
#pun-userlist tbody tr:hover {
 transform: translateY(-2px);
 border-color: rgba(244, 114, 182, 0.35) !important;
 box-shadow: 0 8px 24px rgba(147, 51, 234, 0.20);
}
#pun-userlist tbody tr td {
 display: block !important;
 width: 100% !important;
 padding: 4px 0 !important;
 border: none !important;
 background: transparent !important;
 text-align: center !important;
 vertical-align: middle !important;
 color: var(--text) !important;
}

#pun-userlist td.tcl img,
#pun-userlist td.tcl .avatarep_img {
 width: 90px !important;
 height: 90px !important;
 object-fit: cover !important;
 border-radius: 14px !important;
 border: 1px solid var(--border-hard) !important;
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
 margin: 0 auto 10px;
 display: block;
}
#pun-userlist td.tcl a {
 display: block;
 font-size: 15px !important;
 font-weight: 800 !important;
 color: #fff !important;
 text-decoration: none !important;
 background: linear-gradient(135deg, #f87171 0%, #c084fc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-top: 6px;
}
#pun-userlist td.tc2 {
 font-size: 11px !important;
 color: var(--muted-2) !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-weight: 700 !important;
}
#pun-userlist td.tc3 {
 display: inline-flex !important;
 align-items: center !important;
 gap: 4px;
 padding: 3px 12px !important;
 margin: 6px auto !important;
 width: auto !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: #fff !important;
 background: rgba(147, 51, 234, 0.15);
 border: 1px solid var(--border-hard);
 border-radius: var(--radius-pill);
}
#pun-userlist td.tcr {
 font-size: 11px !important;
 color: var(--muted) !important;
 margin-top: 4px;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 23. FORUM ICONS — read / new / redirect / closed
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 PunBB добавляет модификаторы:
 .icon.inew — есть новые сообщения
 .icon.iredirect — форум-ссылка
 .icon.iclosed — закрытый форум/тема
 .icon.isticky — закреплено (у тем)
 Заменяем «плоский glow» на понятные SVG-иконки в градиент-квадрате.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .hasicon .icon::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 1;
 background: currentColor;
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 22px 22px;
 mask-size: 22px 22px;
 color: rgba(192, 132, 252, 0.55);
}

.punbb .hasicon .icon::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/></svg>");
}

.punbb .hasicon .icon.inew,
.punbb .hasicon tr.inew .icon,
.punbb tr.inew .icon {
 background: linear-gradient(135deg, #dc2626, #9333ea) !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 14px rgba(225, 29, 72, 0.4) !important;
}
.punbb .hasicon .icon.inew::before,
.punbb tr.inew .icon::before {
 color: #fff;
}

.punbb .hasicon .icon.iredirect::before,
.punbb tr.iredirect .icon::before {
 color: rgba(129, 140, 248, 0.85);
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M5 12h11l-4-4 1.5-1.5L20 13l-6.5 6.5L12 18l4-4H5z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M5 12h11l-4-4 1.5-1.5L20 13l-6.5 6.5L12 18l4-4H5z'/></svg>");
}

.punbb .hasicon .icon.iclosed::before,
.punbb tr.iclosed .icon::before {
 color: rgba(203, 213, 225, 0.7);
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5m0 2a3 3 0 0 1 3 3v3H9V7a3 3 0 0 1 3-3'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5m0 2a3 3 0 0 1 3 3v3H9V7a3 3 0 0 1 3-3'/></svg>");
}

.punbb tr.isticky .icon::before {
 color: #fbbf24;
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M16 3l5 5-3 1v6l3 3H4l3-3V9L4 8z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M16 3l5 5-3 1v6l3 3H4l3-3V9L4 8z'/></svg>");
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 24. STICKY NAV — прилипающее меню при скролле
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-navlinks {
 position: sticky !important;
 top: 0 !important;
 z-index: 20 !important;
 padding: 8px 12px !important;
 backdrop-filter: saturate(180%) blur(14px);
 -webkit-backdrop-filter: saturate(180%) blur(14px);
 background: rgba(17, 7, 28, 0.72) !important;
 border-radius: var(--radius-md) !important;
 border: 1px solid rgba(168, 85, 247, 0.15) !important;
 transition: box-shadow .2s ease, background .2s ease;
}

@supports (animation-timeline: view()) {
 #pun-navlinks {
 animation: nav-shadow linear both;
 animation-timeline: scroll(root);
 animation-range: 0 100px;
 }
 @keyframes nav-shadow {
 to { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); }
 }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 25. TO-TOP BUTTON (кнопка «наверх», без JS)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Активация: вставить в админке в HTML-низ:
 <a href="#pun_wrap" class="to-top" aria-label="Наверх">&#8593;</a>
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.to-top {
 position: fixed;
 right: 24px;
 bottom: 24px;
 z-index: 30;
 width: 46px;
 height: 46px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: var(--grad-accent);
 color: #fff !important;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none !important;
 border: 1px solid rgba(244, 114, 182, 0.5);
 box-shadow: 0 6px 20px rgba(225, 29, 72, 0.4);
 transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
 opacity: 0.85;
}
.to-top:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 30px rgba(225, 29, 72, 0.6);
 opacity: 1;
 color: #fff !important;
}
.to-top::before {
 content: '';
 width: 16px; height: 16px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 4l8 8h-5v8h-6v-8H4z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 4l8 8h-5v8h-6v-8H4z'/></svg>") center/contain no-repeat;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 26. MINI SEARCH в шапке (опциональный HTML для админа)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Активация: вставить в админке в HTML-верх (например, в #pun-status):
 <form class="mini-search" action="/search.php" method="get">
 <input name="keywords" placeholder="Поиск на форуме…">
 <button aria-label="Найти">&#128270;</button>
 </form>
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.mini-search {
 display: inline-flex;
 align-items: center;
 background: #170a24;
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 padding: 3px 4px 3px 14px;
 gap: 6px;
 transition: border-color .2s ease, box-shadow .2s ease;
}
.mini-search:focus-within {
 border-color: var(--accent-purple-2);
 box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.mini-search input[type="text"],
.mini-search input:not([type]) {
 background: transparent !important;
 border: none !important;
 outline: none !important;
 color: var(--text) !important;
 font-size: 13px !important;
 padding: 6px 0 !important;
 min-width: 200px;
 box-shadow: none !important;
}
.mini-search button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 30px; height: 30px;
 padding: 0 !important;
 border-radius: 50% !important;
 background: var(--grad-accent) !important;
 color: #fff !important;
 border: none !important;
 cursor: pointer;
 font-size: 13px;
 box-shadow: none !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 27. BBCODE SPOILER — <details><summary>
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Работает как для нативного <details>, так и для .spoiler-box
 (MyBB.ru <hide>/[spoiler]).
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-content details {
 margin: 12px 0;
 background: rgba(76, 29, 149, 0.12);
 border: 1px solid var(--border);
 border-radius: 10px;
 overflow: hidden;
}
.punbb .post-content details > summary {
 cursor: pointer;
 list-style: none;
 padding: 10px 14px;
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--link-hover);
 background: rgba(147, 51, 234, 0.15);
 border-bottom: 1px solid transparent;
 transition: background .2s ease, border-color .2s ease;
 user-select: none;
}
.punbb .post-content details > summary::-webkit-details-marker { display: none; }
.punbb .post-content details > summary::before {
 content: '';
 width: 12px; height: 12px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5l8 7-8 7z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5l8 7-8 7z'/></svg>") center/contain no-repeat;
 transition: transform .2s ease;
}
.punbb .post-content details[open] > summary {
 border-bottom-color: var(--border-soft);
 background: rgba(147, 51, 234, 0.22);
}
.punbb .post-content details[open] > summary::before { transform: rotate(90deg); }
.punbb .post-content details > *:not(summary) {
 padding: 12px 14px;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 28. FOCUS-VISIBLE — a11y для клавиатурной навигации
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

*:focus { outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
 outline: 2px solid var(--link-hover) !important;
 outline-offset: 2px;
 border-radius: 4px;
}

#pun-navlinks a:focus-visible,
#pun-ulinks a:focus-visible,
.punbb .pagelink a:focus-visible,
.punbb .post-links li a:focus-visible,
.to-top:focus-visible {
 outline-offset: 3px;
 border-radius: var(--radius-pill) !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 29. PREFERS-REDUCED-MOTION — уважение к системным настройкам
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
 body::before,
 body::after { display: none !important; }
 #pun { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25) !important; }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 30. PRINT STYLESHEET — чистая печать темы
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

@media print {
 body {
 background: #fff !important;
 color: #000 !important;
 }
 body::before, body::after { display: none !important; }
 #pun {
 max-width: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
 background: #fff !important;
 box-shadow: none !important;
 border: none !important;
 border-radius: 0 !important;
 }
 #pun-title::before,
 #pun-navlinks,
 #pun-ulinks,
 #pun-status,
 #pun-about,
 .divider,
 .post-links,
 .postbit_buttons,
 .linkst, .linksb,
 .to-top,
 .mini-search,
 #pun-crumbs2,
 [class*="yandex_rtb"],
 script { display: none !important; }
 .punbb .post,
 .punbb .category {
 background: #fff !important;
 color: #000 !important;
 box-shadow: none !important;
 border: 1px solid #ccc !important;
 page-break-inside: avoid;
 }
 .punbb .post-content { color: #000 !important; }
 .punbb .post-author {
 background: #f5f5f5 !important;
 color: #333 !important;
 border-right: 1px solid #ddd !important;
 }
 a { color: #000 !important; text-decoration: underline !important; }
 a[href]::after {
 content: ' (' attr(href) ')';
 font-size: 10px;
 color: #666;
 }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 31. MESSAGES (#pun-messages) — Личные сообщения / Входящие
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка PunBB (авторизованный):
 #pun-messages > #pun-main > #profile.formal.messages-container
 > .container
 &#9500;&#9472; #profilenav
 &#9474; &#9500;&#9472; <h2>Папки</h2>
 &#9474; &#9474; <ul><li.item1.isactive>Входящие</li>
 &#9474; &#9474; <li.item2>Отправленные</li></ul>
 &#9474; &#9500;&#9472; <h2>Действия</h2>
 &#9474; &#9474; <ul><li.item1>Новое сообщение</li>
 &#9474; &#9474; <li.item2>Статус сообщений</li>
 &#9474; &#9474; <li.item3>Всё прочитано</li>
 &#9474; &#9474; <li.item4>Очистить папку</li></ul>
 &#9492;&#9472; <form id="messages">
 > fieldset > legend + .fs-box > .container > table
 > .linksb > .pagelink + .postlink[input.button="Удалить"]

 NB: id страницы для авторизованного — множественное число (#pun-messages),
 для гостя — единственное (#pun-message, уже покрыт секцией 20).
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-messages #profile.messages-container {
 padding: 0 !important;
}
#pun-messages #profile.messages-container > .container {
 background: transparent !important;
 border: none !important;
 padding: 14px !important;
 display: grid !important;
 grid-template-columns: 240px 1fr !important;
 gap: 16px !important;
 align-items: start !important;
}

/* &#9472;&#9472; Сайдбар #profilenav &#9472;&#9472; */
#pun-messages #profilenav {
 background: linear-gradient(180deg,
 rgba(147, 51, 234, 0.08) 0%,
 rgba(220, 38, 38, 0.04) 100%) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-md) !important;
 padding: 14px !important;
 margin: 0 !important;
}

#pun-messages #profilenav h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 padding: 8px 4px !important;
 margin: 4px 0 6px !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
 border: 0 !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.08em !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 background: transparent !important;
}
#pun-messages #profilenav h2 > span {
 color: inherit !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
#pun-messages #profilenav h2::before {
 content: '';
 display: inline-block;
 width: 3px; height: 14px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}

#pun-messages #profilenav h2:first-of-type { margin-top: 0 !important; }
#pun-messages #profilenav h2 + ul + h2 {
 margin-top: 14px !important;
 padding-top: 14px !important;
 border-top: 1px dashed var(--border-soft) !important;
}

#pun-messages #profilenav ul {
 list-style: none !important;
 margin: 0 0 4px !important;
 padding: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 4px !important;
}
#pun-messages #profilenav li {
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
}
#pun-messages #profilenav li a {
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 8px 12px !important;
 border-radius: 10px !important;
 font-size: 12.5px !important;
 font-weight: 600 !important;
 color: var(--link) !important;
 background: transparent !important;
 border: 1px solid transparent !important;
 text-decoration: none !important;
 transition: background .2s ease, color .2s ease, border-color .2s ease !important;
 white-space: normal !important;
 line-height: 1.35;
}
#pun-messages #profilenav li a:hover {
 background: rgba(147, 51, 234, 0.12) !important;
 border-color: var(--border-hard) !important;
 color: #fff !important;
}

#pun-messages #profilenav li.isactive a,
#pun-messages #profilenav li.active a {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35) !important;
}

#pun-messages #profilenav li a::before {
 content: '';
 width: 14px; height: 14px;
 background: currentColor;
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 14px 14px;
 mask-size: 14px 14px;
 flex-shrink: 0;
 opacity: .9;
}

#pun-messages #profilenav h2:first-of-type + ul li.item1 a::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 4h16v10h-5l-3 3-3-3H4z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 4h16v10h-5l-3 3-3-3H4z'/></svg>");
}
#pun-messages #profilenav h2:first-of-type + ul li.item2 a::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M2 21l21-9L2 3v7l15 2-15 2z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M2 21l21-9L2 3v7l15 2-15 2z'/></svg>");
}

#pun-messages #profilenav h2 + ul + h2 + ul li.item1 a::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/></svg>");
}
#pun-messages #profilenav h2 + ul + h2 + ul li.item2 a::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 5h16v3H4zm0 5h16v3H4zm0 5h10v3H4z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 5h16v3H4zm0 5h16v3H4zm0 5h10v3H4z'/></svg>");
}
#pun-messages #profilenav h2 + ul + h2 + ul li.item3 a::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.6L4 14l5 5 11-11-1.4-1.4z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.6L4 14l5 5 11-11-1.4-1.4z'/></svg>");
}
#pun-messages #profilenav h2 + ul + h2 + ul li.item4 a::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 7h12v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm3-4h6l1 2h4v2H4V5h4z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 7h12v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm3-4h6l1 2h4v2H4V5h4z'/></svg>");
}

#pun-messages #profilenav h2 + ul + h2 + ul li.item4 a {
 color: #fca5a5 !important;
}
#pun-messages #profilenav h2 + ul + h2 + ul li.item4 a:hover {
 background: linear-gradient(135deg, #dc2626, #9333ea) !important;
 color: #fff !important;
 border-color: rgba(248, 113, 113, 0.5) !important;
}

/* &#9472;&#9472; Правая колонка: форма с таблицей сообщений &#9472;&#9472; */
#pun-messages form#messages {
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 min-width: 0;
}
#pun-messages form#messages fieldset {
 padding: 0 !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.06) 0%,
 rgba(147, 51, 234, 0.02) 100%),
 var(--panel-2) !important;
 overflow: hidden;
}
#pun-messages form#messages legend {
 display: block !important;
 float: none !important;
 width: 100% !important;
 padding: 12px 18px !important;
 margin: 0 !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 color: #fff !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
 border-bottom: 1px solid var(--border-soft) !important;
 background: transparent !important;
}
#pun-messages form#messages legend > span {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #fff !important;
}
#pun-messages form#messages legend > span::before {
 content: '';
 display: inline-block;
 width: 3px; height: 14px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}
#pun-messages form#messages .fs-box,
#pun-messages form#messages .fs-box > .container {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
 display: block !important;
}

/* &#9472;&#9472; Таблица сообщений &#9472;&#9472; */
#pun-messages form#messages table {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
 color: var(--text) !important;
}
#pun-messages form#messages thead th {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 padding: 10px 14px !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
 text-align: left !important;
}
#pun-messages form#messages thead th.tc2,
#pun-messages form#messages thead th.tc3 { text-align: left !important; }
#pun-messages form#messages thead th input[type="checkbox"] {
 margin: 0 auto !important;
 display: block;
}

#pun-messages form#messages tbody tr {
 transition: background .2s ease !important;
}
#pun-messages form#messages tbody tr:hover {
 background: rgba(168, 85, 247, 0.08) !important;
}
#pun-messages form#messages tbody tr td {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid rgba(40, 18, 54, 0.6) !important;
 padding: 12px 14px !important;
 vertical-align: middle !important;
 color: var(--text) !important;
 font-size: 13px !important;
}
#pun-messages form#messages tbody tr:last-child td { border-bottom: none !important; }

#pun-messages form#messages tbody td.tcl a {
 color: #fff !important;
 font-weight: 700 !important;
 text-decoration: none !important;
}
#pun-messages form#messages tbody td.tcl a:hover { color: var(--link-hover) !important; }

#pun-messages form#messages tbody td.tc2 a {
 color: var(--link) !important;
 font-weight: 600 !important;
}
#pun-messages form#messages tbody td.tc2 a:hover { color: var(--link-hover) !important; }

#pun-messages form#messages tbody td.tc3 {
 color: var(--muted) !important;
 font-size: 12px !important;
 white-space: nowrap !important;
}

#pun-messages form#messages tbody td.tc2.pmtc24,
#pun-messages form#messages thead th.tc2.pmtc24 {
 text-align: center !important;
 padding: 8px !important;
 width: 40px !important;
}
#pun-messages form#messages input[type="checkbox"] {
 width: 18px;
 height: 18px;
 cursor: pointer;
 accent-color: var(--accent-purple-2);
 vertical-align: middle;
}

#pun-messages form#messages tbody tr td[colspan] {
 padding: 40px 20px !important;
 text-align: center !important;
 color: var(--muted-2) !important;
 font-size: 14px !important;
 font-weight: 600 !important;
}
#pun-messages form#messages tbody tr td[colspan]::before {
 content: '';
 display: block;
 width: 48px;
 height: 48px;
 margin: 0 auto 12px;
 border-radius: 50%;
 background: rgba(147, 51, 234, 0.15);
 border: 1px dashed var(--border-hard);
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
}

/* &#9472;&#9472; Панель под таблицей (.linksb): пагинация + кнопка «Удалить» &#9472;&#9472; */
#pun-messages form#messages .linksb {
 background: rgba(0, 0, 0, 0.15) !important;
 border-top: 1px solid var(--border-soft) !important;
 padding: 12px 16px !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 flex-wrap: wrap !important;
 gap: 10px !important;
}
#pun-messages form#messages .linksb .pagelink {
 padding: 0 !important;
}
#pun-messages form#messages .linksb .postlink {
 margin: 0 !important;
}

#pun-messages form#messages .linksb input[type="submit"],
#pun-messages form#messages .linksb .postlink input.button {
 padding: 8px 22px !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 color: #fff !important;
 background: linear-gradient(135deg, #dc2626 0%, #db2777 100%) !important;
 border: 1px solid rgba(248, 113, 113, 0.55) !important;
 border-radius: var(--radius-pill) !important;
 cursor: pointer !important;
 box-shadow: 0 0 12px rgba(220, 38, 38, 0.30) !important;
 transition: transform .15s ease, box-shadow .2s ease !important;
}
#pun-messages form#messages .linksb input[type="submit"]:hover {
 transform: translateY(-1px);
 box-shadow: 0 0 20px rgba(220, 38, 38, 0.55) !important;
}
#pun-messages form#messages .linksb .clearer { display: none; }

/* &#9472;&#9472; Responsive: на узких экранах — стек &#9472;&#9472; */

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 32. EDITOR (BBCode редактор / тулбар)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка PunBB / MyBB.ru:
 #post > .postform > form > fieldset > textarea
 Плюс BBCode-плагины добавляют:
 .editor / #editor
 .editor_control_bar / .editor-toolbar
 .editor button / .editor input[type=button]
 .smilies-panel
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .postform {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
}

.punbb .editor,
.punbb #editor,
.punbb .editor-wrap {
 background: var(--panel-3) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-md) !important;
 overflow: hidden;
 margin: 8px 0 !important;
}

.punbb .editor_control_bar,
.punbb .editor-toolbar,
.punbb .toolbar {
 display: flex !important;
 flex-wrap: wrap !important;
 align-items: center !important;
 gap: 4px !important;
 padding: 8px 10px !important;
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.12) 0%,
 rgba(147, 51, 234, 0.04) 100%) !important;
 border-bottom: 1px solid var(--border-soft) !important;
}

.punbb .editor_control_bar button,
.punbb .editor_control_bar input[type="button"],
.punbb .editor-toolbar button,
.punbb .toolbar button,
.punbb .toolbar a,
.punbb .toolbar input[type="button"] {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-width: 30px !important;
 height: 30px !important;
 padding: 0 8px !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 color: var(--link) !important;
 background: #170a24 !important;
 border: 1px solid var(--border-hard) !important;
 border-radius: 6px !important;
 cursor: pointer !important;
 transition: background .15s, color .15s, border-color .15s !important;
 box-shadow: none !important;
}
.punbb .editor_control_bar button:hover,
.punbb .toolbar button:hover,
.punbb .toolbar a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
}

.punbb .editor_control_bar .separator,
.punbb .toolbar .separator {
 display: inline-block;
 width: 1px;
 height: 20px;
 background: var(--border-hard);
 margin: 0 4px;
}

.punbb .smilies,
.punbb #smilies_all,
.punbb .smilies-panel {
 padding: 10px !important;
 background: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: 10px !important;
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 4px !important;
}
.punbb .smilies img,
.punbb .smilies-panel img {
 cursor: pointer;
 padding: 4px;
 border-radius: 6px;
 transition: background .15s, transform .15s;
}
.punbb .smilies img:hover,
.punbb .smilies-panel img:hover {
 background: rgba(168, 85, 247, 0.15);
 transform: scale(1.15);
}

.punbb .editor > textarea,
.punbb #editor textarea,
.punbb .editor-wrap textarea {
 border: none !important;
 border-radius: 0 !important;
 background: transparent !important;
 min-height: 200px !important;
 padding: 14px 16px !important;
 font-size: 14px !important;
 line-height: 1.6 !important;
 color: var(--text) !important;
 outline: none !important;
 box-shadow: none !important;
 width: 100% !important;
 resize: vertical !important;
}
.punbb .editor > textarea:focus,
.punbb #editor textarea:focus {
 background: rgba(147, 51, 234, 0.04) !important;
 box-shadow: none !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 33. PAGINATION (расширенная — многостраничная)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Дополняем секцию 17.1: добавляем поддержку:
 .pgtxt (многоточие «сжатия»)
 .pgprev/.pgnext (стрелки)
 .pgtotal (всего страниц)
 form.pagemenu (перейти на N)
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .pagelink .pgtxt,
.punbb .pagelink span:not(:has(> a)) {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 26px;
 height: 26px;
 padding: 0 8px;
 color: var(--muted-2) !important;
 font-size: 12px;
 font-weight: 700;
 opacity: 0.6;
}

.punbb .pagelink a.pgprev,
.punbb .pagelink a.pgnext,
.punbb .pagelink .prev,
.punbb .pagelink .next {
 min-width: auto !important;
 padding: 0 14px !important;
 font-weight: 700 !important;
}
.punbb .pagelink a.pgprev::before,
.punbb .pagelink .prev::before {
 content: '';
 width: 10px; height: 10px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M15 6l-6 6 6 6 1.5-1.5L12 12l4.5-4.5z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M15 6l-6 6 6 6 1.5-1.5L12 12l4.5-4.5z'/></svg>") center/contain no-repeat;
 margin-right: 4px;
}
.punbb .pagelink a.pgnext::after,
.punbb .pagelink .next::after {
 content: '';
 width: 10px; height: 10px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 6l6 6-6 6-1.5-1.5L12 12 7.5 7.5z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 6l6 6-6 6-1.5-1.5L12 12 7.5 7.5z'/></svg>") center/contain no-repeat;
 margin-left: 4px;
}

.punbb form.pagemenu,
.punbb .pagelink form {
 display: inline-flex !important;
 align-items: center !important;
 gap: 4px !important;
 margin-left: 8px !important;
}
.punbb form.pagemenu input[type="text"],
.punbb form.pagemenu input[type="number"],
.punbb .pagelink form input[type="text"] {
 width: 44px !important;
 height: 26px !important;
 padding: 0 6px !important;
 font-size: 12px !important;
 border-radius: 6px !important;
 text-align: center;
}
.punbb form.pagemenu input[type="submit"],
.punbb .pagelink form input[type="submit"] {
 height: 26px !important;
 padding: 0 10px !important;
 font-size: 11px !important;
 border-radius: 6px !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 34. TOOLTIPS ([title]) — CSS-only красивый тултип
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Работает для любых <a title="…">, <span title="…">.
 Использует нативный atribut title, но подменяет визуал.
 NB: браузер всё равно покажет свой тултип через 1-2 сек — это ok,
 наш появляется мгновенно и в тон темы.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb a[title]:not([title=""]):hover::after,
.punbb .to-top[aria-label]:hover::after {
 content: attr(title);
 position: absolute;
 z-index: 100;
 bottom: calc(100% + 6px);
 left: 50%;
 transform: translateX(-50%);
 padding: 5px 10px;
 font-size: 11px;
 font-weight: 600;
 color: #fff;
 background: #0a0413;
 border: 1px solid var(--border-hard);
 border-radius: 6px;
 white-space: nowrap;
 pointer-events: none;
 opacity: 0;
 animation: tt-in .15s ease-out .3s forwards;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 max-width: 260px;
 overflow: hidden;
 text-overflow: ellipsis;
}
.punbb .to-top[aria-label]:hover::after { content: attr(aria-label); }
.punbb a[title]:not([title=""]) {
 position: relative;
}
@keyframes tt-in {
 from { opacity: 0; transform: translateX(-50%) translateY(4px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 35. INLINE MODERATION — модераторский чекбокс + панель
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Появляется у модеров/админов в списках тем и внутри тем.
 Селекторы PunBB/MyBB.ru:
 .modmenu, #inline_mod_bar, .postform.inline
 input[name="multi_delete[]"] / input.modcheck / .tclcon input[type=checkbox]
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb td.tcmod,
.punbb th.tcmod,
.punbb td.tc4,
.punbb th.tc4 {
 width: 36px !important;
 text-align: center !important;
 padding: 8px !important;
}
.punbb td.tcmod input[type="checkbox"],
.punbb th.tcmod input[type="checkbox"],
.punbb .tclcon input[type="checkbox"] {
 width: 16px;
 height: 16px;
 accent-color: var(--accent-purple-2);
 cursor: pointer;
 vertical-align: middle;
}

#inline_mod_bar,
.punbb .postform.inline,
.punbb .inline-mod-bar {
 position: sticky !important;
 bottom: 12px;
 z-index: 15;
 margin: 12px 0 !important;
 padding: 12px 16px !important;
 background: linear-gradient(135deg,
 rgba(17, 7, 28, 0.95),
 rgba(29, 12, 46, 0.95)) !important;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid rgba(244, 114, 182, 0.3) !important;
 border-radius: var(--radius-md) !important;
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
 display: flex !important;
 gap: 8px !important;
 align-items: center !important;
 flex-wrap: wrap !important;
}
#inline_mod_bar strong,
.punbb .inline-mod-bar strong {
 color: var(--link-hover) !important;
 font-size: 12px !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-right: 8px;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 36. FORM VALIDATION (error / warn / valid)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 PunBB добавляет классы .error / .warn / .valid на невалидные поля.
 Плюс :invalid — нативная HTML5 валидация.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb input.error,
.punbb textarea.error,
.punbb select.error,
.punbb input:user-invalid,
.punbb textarea:user-invalid {
 border-color: #ef4444 !important;
 background: rgba(239, 68, 68, 0.08) !important;
 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.punbb input.warn,
.punbb textarea.warn,
.punbb select.warn {
 border-color: #fbbf24 !important;
 background: rgba(251, 191, 36, 0.05) !important;
 box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15) !important;
}
.punbb input.valid,
.punbb textarea.valid,
.punbb select.valid,
.punbb input:user-valid,
.punbb textarea:user-valid {
 border-color: #22c55e !important;
 background: rgba(34, 197, 94, 0.05) !important;
}

.punbb label.error,
.punbb .error-message,
.punbb .field-error {
 display: block;
 margin-top: 4px !important;
 padding: 4px 10px !important;
 font-size: 11px !important;
 color: #fca5a5 !important;
 background: rgba(239, 68, 68, 0.08) !important;
 border-left: 3px solid #ef4444;
 border-radius: 4px;
 font-weight: 600;
}

.punbb .formal label.required::after,
.punbb .required > label::after {
 content: ' *';
 color: #ef4444;
 font-weight: 700;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 37. CAPTCHA (вопрос-ответ / картинка)
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .captcha,
.punbb #captcha,
.punbb .captchabox {
 background:
 linear-gradient(135deg,
 rgba(147, 51, 234, 0.08),
 rgba(220, 38, 38, 0.05)) !important;
 border: 1px solid var(--border) !important;
 border-radius: 10px !important;
 padding: 12px 16px !important;
 margin: 10px 0 !important;
}
.punbb .captcha img,
.punbb #captcha_img,
.punbb .captcha-image {
 display: block;
 margin: 8px 0;
 border-radius: 8px;
 border: 1px solid var(--border-hard);
 max-width: 100%;
}
.punbb .captcha label,
.punbb .captchabox label {
 font-size: 12px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.punbb .captcha input[type="text"] {
 max-width: 200px !important;
 text-align: center !important;
 letter-spacing: 0.2em !important;
 font-weight: 700 !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 38. TYPOGRAPHY: <hr>, декоративный разделитель
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-content .quote-box,
.punbb .post-content blockquote {
 position: relative;
 padding-left: 40px !important;
}
.punbb .post-content .quote-box::before,
.punbb .post-content blockquote::before {
 content: '';
 position: absolute;
 top: 10px;
 left: 12px;
 width: 20px; height: 20px;
 background: var(--accent-purple-2);
 opacity: 0.4;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/></svg>") center/contain no-repeat;
}

.punbb .category .tclcon h3 {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
 text-overflow: ellipsis;
 max-height: 2.6em;
}
.punbb .category .tclcon .foruminfo,
.punbb .category .tclcon p {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 39. SCROLL-DRIVEN ANIMATIONS (view timeline)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Fade-in + slide-up для карточек при въезде в viewport.
 Graceful degradation: без поддержки — просто сразу видны.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

@supports (animation-timeline: view()) {
 @media (prefers-reduced-motion: no-preference) {
 .punbb .category,
 .punbb .post,
 #pun-userlist tbody tr,
 #pun-viewforum tbody tr {
 animation: card-in linear both;
 animation-timeline: view();
 animation-range: entry 0% cover 30%;
 }
 @keyframes card-in {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 40. USERLIST enhancements
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-userlist tbody {
 content-visibility: auto;
 contain-intrinsic-size: auto 200px;
}

@supports (initial-value: from) {
 @starting-style {
 #pun-userlist tbody tr {
 opacity: 0;
 transform: scale(0.95);
 }
 }
 #pun-userlist tbody tr {
 transition: opacity .3s ease, transform .3s ease;
 }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 41. LOGIN / REGISTER (hero-layout)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 #pun-login, #pun-register — центрированные формы,
 опционально — двухколоночный hero с промо-текстом.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-login #pun-main,
#pun-register #pun-main {
 max-width: 720px;
 margin: 20px auto !important;
}
#pun-login #pun-main > h1,
#pun-register #pun-main > h1 {
 font-size: 24px !important;
 text-align: center !important;
 justify-content: center !important;
 margin-bottom: 20px !important;
}
#pun-login #pun-main > h1::before,
#pun-register #pun-main > h1::before {
 display: none;
}

#pun-login .formal,
#pun-register .formal {
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.10),
 rgba(220, 38, 38, 0.05)),
 var(--panel-2) !important;
 border: 1px solid rgba(244, 114, 182, 0.25) !important;
 box-shadow:
 0 0 0 1px rgba(244, 114, 182, 0.05) inset,
 0 20px 60px rgba(147, 51, 234, 0.15),
 0 0 40px rgba(225, 29, 72, 0.10);
}

#pun-login .formsubmit input[type="submit"],
#pun-register .formsubmit input[type="submit"] {
 width: 100%;
 padding: 14px 30px !important;
 font-size: 15px !important;
 letter-spacing: 0.05em;
}
#pun-login .formsubmit,
#pun-register .formsubmit {
 justify-content: center !important;
 background: transparent !important;
}

#pun-login .formal ~ p,
#pun-register .formal ~ p,
#pun-login .formal .formsubmit + p {
 text-align: center !important;
 margin-top: 14px !important;
 font-size: 13px !important;
 color: var(--muted) !important;
}
#pun-login .formal ~ p a,
#pun-register .formal ~ p a {
 color: var(--link) !important;
 font-weight: 600 !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 42. AUTO DARK/LIGHT (prefers-color-scheme)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Если пользователь не выбрал явно тему (нет .theme-*),
 уважаем системную настройку.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

@media (prefers-color-scheme: light) {
 :root:not(.theme-dark):not(.theme-light) {
 --bg: #eef1f7;
 --panel: #ffffff;
 --panel-2: #f7f4fb;
 --panel-3: #ece7f5;
 --border: #d9d4e6;
 --border-soft: #e2ddef;
 --border-hard: #c5bfd8;

 --text: #1f1533;
 --text-strong: #100522;
 --muted: #7c3aed;
 --muted-2: #6d28d9;

 --link: #7c3aed;
 --link-visited: #6d28d9;
 --link-hover: #db2777;

 --shadow-panel: 0 10px 30px rgba(147, 51, 234, 0.10),
 0 4px 12px rgba(0, 0, 0, 0.05);
 }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 43. UNREAD PMS BADGE — красный бейдж на "Сообщения"
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-navlinks #navpm a,
#pun-navlinks li[id*="navpm"] a {
 position: relative;
}

#pun-navlinks #navpm em.pmnew,
#pun-navlinks .pmnew {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 margin-left: 6px;
 font-size: 10px;
 font-weight: 800;
 font-style: normal !important;
 color: #fff !important;
 background: linear-gradient(135deg, #ef4444, #db2777);
 border-radius: 9999px;
 box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
 animation: pm-pulse 2s ease-in-out infinite;
}
@keyframes pm-pulse {
 0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
 50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.9); }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 44. IMAGE SKELETON — плейсхолдер пока грузится картинка
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-content img,
.punbb .pa-avatar img,
#pun-userlist td.tcl img {
 background:
 linear-gradient(90deg,
 rgba(147, 51, 234, 0.08) 0%,
 rgba(147, 51, 234, 0.15) 50%,
 rgba(147, 51, 234, 0.08) 100%);
 background-size: 200% 100%;
 animation: skeleton-shine 1.5s ease-in-out infinite;
}
.punbb img[src] {
 animation: none;
 background: transparent;
}
@keyframes skeleton-shine {
 0% { background-position: 100% 0; }
 100% { background-position: -100% 0; }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 45. NESTED BLOCKQUOTES — вложенные цитаты разными оттенками
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-content .quote-box .quote-box,
.punbb .post-content blockquote blockquote {
 background: rgba(220, 38, 38, 0.08) !important;
 border-left-color: var(--accent-red-2) !important;
}
.punbb .post-content .quote-box .quote-box .quote-box,
.punbb .post-content blockquote blockquote blockquote {
 background: rgba(129, 140, 248, 0.08) !important;
 border-left-color: #818cf8 !important;
}
.punbb .post-content .quote-box .quote-box .quote-box .quote-box,
.punbb .post-content blockquote blockquote blockquote blockquote {
 background: rgba(34, 197, 94, 0.06) !important;
 border-left-color: #22c55e !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 46. ADMIN PANEL (#pun-admin_index.punbb-admin)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка PunBB Admin:
 #pun-admin_index.punbb.punbb-admin
 > #pun-admain.adminmain
 &#9500;&#9472; <h1>Администрирование</h1>
 &#9500;&#9472; #pun-adnav (сайдбар)
 &#9474; &#9500;&#9472; <h2>Админ-меню</h2>
 &#9474; &#9492;&#9472; .adcontainer
 &#9474; &#9492;&#9472; #adnav-standard
 &#9474; &#9492;&#9472; <ul>
 &#9474; <li.item1.isactive><a>Начало</a></li>
 &#9474; <li.item6><a>Настройки</a>
 &#9474; <ul.adsubnav><li><a href="#o-*">...</a></li></ul>
 &#9474; </li>
 &#9474; <li.item-forms><a>Формы</a><sup.new>новое</sup></li>
 &#9474; ...
 &#9492;&#9472; #pun-admain1.adformal (контент)
 &#9500;&#9472; <h2>Информация</h2>
 &#9492;&#9472; .adcontainer
 &#9500;&#9472; <fieldset>
 &#9474; &#9500;&#9472; <legend><span>Добро пожаловать</span></legend>
 &#9474; &#9492;&#9472; .adfs-box
 &#9474; &#9500;&#9472; <p class="adinfofield">...</p>
 &#9474; &#9492;&#9472; <ul><li>...</li></ul>
 &#9492;&#9472; <fieldset>...</fieldset>

 На admin_*.php страницах правая часть меняется (формы настроек, списки,
 таблицы) — покрываем общими стилями через .adformal + .adfs-box.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

/* Обёртка админ-страниц — двухколоночный грид: сайдбар слева, контент справа.
 Применяется ко ВСЕМ admin_*.php страницам (не только index), поэтому целимся
 в .punbb-admin > #pun-admain (общий класс на всех admin-страницах). */
.punbb-admin #pun-admain,
#pun-admin_index #pun-admain {
 display: grid !important;
 grid-template-columns: 260px 1fr !important;
 grid-template-rows: auto 1fr !important;
 gap: 14px !important;
 align-items: start !important;
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
}

.punbb-admin #pun-admain > h1,
#pun-admin_index #pun-admain > h1 {
 grid-column: 1 / -1 !important;
 font-size: 20px !important;
 font-weight: 800 !important;
 color: var(--text-strong) !important;
 padding: 4px 4px 14px !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
}
.punbb-admin #pun-admain > h1::before, #pun-admin_index #pun-admain > h1::before {
 content: '';
 display: inline-block;
 width: 4px; height: 22px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}
.punbb-admin #pun-admain > h1 > span, #pun-admin_index #pun-admain > h1 > span {
 background: linear-gradient(135deg, #f87171 0%, #c084fc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 color: transparent;
 padding: 0 !important;
}

/* &#9472;&#9472; Сайдбар #pun-adnav &#9472;&#9472; */
.punbb-admin #pun-adnav {
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.08) 0%,
 rgba(220, 38, 38, 0.04) 100%) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-md) !important;
 padding: 10px !important;
 margin: 0 !important;
 position: sticky;
 top: 60px;
 max-height: calc(100vh - 80px);
 overflow-y: auto;
 scrollbar-width: thin;
}

.punbb-admin #pun-adnav > h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
 padding: 4px 6px 8px !important;
 margin: 0 0 6px !important;
 border: 0 !important;
 border-bottom: 1px dashed var(--border-soft) !important;
 background: transparent !important;
 font-size: 10.5px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.08em !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
}
.punbb-admin #pun-adnav > h2 > span {
 color: inherit !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
.punbb-admin #pun-adnav > h2::before {
 content: '';
 display: inline-block;
 width: 3px; height: 12px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}

.punbb-admin #pun-adnav .adcontainer,
.punbb-admin #pun-adnav #adnav-standard {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
}

.punbb-admin #pun-adnav ul,
.punbb-admin #pun-adnav ul ul,
.punbb-admin #pun-adnav ul.adsubnav {
 list-style: none !important;
 list-style-type: none !important;
 list-style-image: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 1px !important;
}
.punbb-admin #pun-adnav ul li,
.punbb-admin #pun-adnav ul li li,
.punbb-admin #pun-adnav ul.adsubnav li {
 list-style: none !important;
 list-style-type: none !important;
 list-style-image: none !important;
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
 position: relative;
 display: block !important;
}

.punbb-admin #pun-adnav ul li::marker,
.punbb-admin #pun-adnav ul li::before {
 content: none !important;
 display: none !important;
}

.punbb-admin #pun-adnav ul li > a {
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 6px 10px !important;
 border-radius: 7px !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 color: var(--link) !important;
 background: transparent !important;
 border: 1px solid transparent !important;
 text-decoration: none !important;
 transition: background .15s, color .15s, border-color .15s !important;
 line-height: 1.3 !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.punbb-admin #pun-adnav ul li > a:hover {
 background: rgba(147, 51, 234, 0.14) !important;
 border-color: transparent !important;
 color: #fff !important;
}

.punbb-admin #pun-adnav ul li.isactive > a {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.4) !important;
 box-shadow: 0 0 10px rgba(225, 29, 72, 0.30) !important;
}

.punbb-admin #pun-adnav ul li > a > sup.new,
.punbb-admin #pun-adnav ul li sup.new {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 position: static !important;
 margin-left: auto !important;
 padding: 1px 6px !important;
 font-size: 8.5px !important;
 font-weight: 800 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em;
 color: #fff !important;
 background: linear-gradient(135deg, #ef4444, #db2777) !important;
 border-radius: 9999px !important;
 line-height: 1.4 !important;
 box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
 animation: adm-new-pulse 2s ease-in-out infinite;
 vertical-align: baseline !important;
}

.punbb-admin #pun-adnav ul li > a + sup.new {
 position: absolute !important;
 top: 3px;
 right: 6px;
 margin: 0 !important;
}
@keyframes adm-new-pulse {
 0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
 50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.85); }
}

.punbb-admin #pun-adnav ul.adsubnav {
 margin: 2px 0 4px 10px !important;
 padding: 2px 0 2px 8px !important;
 border-left: 1px dashed var(--border-hard) !important;
}
.punbb-admin #pun-adnav ul.adsubnav li > a {
 padding: 3px 8px !important;
 font-size: 11px !important;
 font-weight: 500 !important;
 color: var(--muted) !important;
 border-radius: 5px !important;
 line-height: 1.25 !important;
}
.punbb-admin #pun-adnav ul.adsubnav li > a::before {
 content: '';
 width: 5px; height: 1px;
 background: var(--border-hard);
 flex-shrink: 0;
 display: block !important;
 margin-right: 2px;
}
.punbb-admin #pun-adnav ul.adsubnav li > a:hover {
 color: var(--link-hover) !important;
 background: rgba(147, 51, 234, 0.08) !important;
 border-color: transparent !important;
}
.punbb-admin #pun-adnav ul.adsubnav li > a:hover::before {
 background: var(--link-hover);
 width: 8px;
}

/* &#9472;&#9472; Правая колонка #pun-admain1.adformal &#9472;&#9472; */
#pun-admin_index #pun-admain1,
.punbb-admin .adformal {
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.06) 0%,
 rgba(147, 51, 234, 0.02) 100%),
 var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 padding: 0 !important;
 margin: 0 !important;
 overflow: hidden;
 min-width: 0;
}

.punbb-admin .adformal > h2,
#pun-admin_index #pun-admain1 > h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
 padding: 14px 20px !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: #fff !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 letter-spacing: 0.05em !important;
 text-transform: uppercase !important;
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
}
.punbb-admin .adformal > h2 > span,
#pun-admin_index #pun-admain1 > h2 > span {
 color: #fff !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
.punbb-admin .adformal > h2::before,
#pun-admin_index #pun-admain1 > h2::before {
 content: '';
 display: inline-block;
 width: 3px; height: 14px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}

.punbb-admin .adformal > .adcontainer,
#pun-admin_index #pun-admain1 > .adcontainer {
 background: transparent !important;
 border: none !important;
 padding: 16px 20px !important;
 margin: 0 !important;
}

.punbb-admin .adformal fieldset,
#pun-admin_index fieldset {
 background: transparent !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 10px !important;
 padding: 0 !important;
 margin: 0 0 14px !important;
}
.punbb-admin .adformal fieldset:last-child { margin-bottom: 0 !important; }

.punbb-admin .adformal fieldset > legend,
#pun-admin_index fieldset > legend {
 display: block !important;
 float: none !important;
 width: 100% !important;
 padding: 10px 14px !important;
 margin: 0 !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 color: #fff !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
 border-bottom: 1px solid var(--border-soft) !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border-radius: 10px 10px 0 0 !important;
}
.punbb-admin .adformal fieldset > legend > span,
#pun-admin_index fieldset > legend > span {
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 color: #fff !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
.punbb-admin .adformal fieldset > legend > span::before,
#pun-admin_index fieldset > legend > span::before {
 content: '';
 display: inline-block;
 width: 3px; height: 12px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}

.punbb-admin .adfs-box,
#pun-admin_index .adfs-box {
 padding: 14px 16px !important;
 background: transparent !important;
 border: none !important;
 margin: 0 !important;
}
.punbb-admin .adfs-box > p:first-child { margin-top: 0 !important; }
.punbb-admin .adfs-box > p:last-child { margin-bottom: 0 !important; }

.punbb-admin .adinfofield,
#pun-admin_index .adinfofield {
 padding: 10px 12px !important;
 margin: 0 0 12px !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border: 1px dashed var(--border-soft) !important;
 border-radius: 8px !important;
 font-size: 12.5px !important;
 color: var(--muted) !important;
 line-height: 1.55 !important;
}

.punbb-admin .adfs-box ul {
 list-style: none !important;
 margin: 6px 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 6px !important;
}
.punbb-admin .adfs-box ul li {
 position: relative;
 padding: 6px 10px 6px 26px !important;
 margin: 0 !important;
 font-size: 13px !important;
 color: var(--text) !important;
 line-height: 1.5 !important;
 background: rgba(147, 51, 234, 0.04);
 border: 1px solid var(--border-soft);
 border-radius: 6px;
}
.punbb-admin .adfs-box > ul > li::before,
.punbb-admin .adfs-box ul:not(.adsubnav) li::before {
 content: '';
 position: absolute;
 left: 10px;
 top: 50%;
 transform: translateY(-50%);
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--grad-accent);
 box-shadow: 0 0 6px rgba(225, 29, 72, 0.4);
}
.punbb-admin .adfs-box ul li strong {
 color: #fff !important;
 font-weight: 700 !important;
}

.punbb-admin .adfs-box .infldset {
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
}
.punbb-admin .adfs-box label {
 display: block !important;
 margin: 8px 0 !important;
 font-size: 13px !important;
 color: var(--text) !important;
}
.punbb-admin .adfs-box label strong {
 display: block;
 margin-bottom: 4px;
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted-2);
}

.punbb-admin .formsubmit,
.punbb-admin .adfs-box + .formsubmit,
#pun-admin_index .formsubmit {
 padding: 14px 20px !important;
 border-top: 1px solid var(--border-soft) !important;
 background: rgba(0, 0, 0, 0.15) !important;
 display: flex !important;
 gap: 10px !important;
 flex-wrap: wrap !important;
 justify-content: flex-end;
 border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.punbb-admin .adfs-box table {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
 margin: 8px 0 !important;
}
.punbb-admin .adfs-box thead th {
 background: rgba(147, 51, 234, 0.10) !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 padding: 10px 12px !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.05em !important;
 text-align: left !important;
}
.punbb-admin .adfs-box tbody tr:hover {
 background: rgba(168, 85, 247, 0.06) !important;
}
.punbb-admin .adfs-box tbody td {
 padding: 10px 12px !important;
 border: none !important;
 border-bottom: 1px solid rgba(40, 18, 54, 0.5) !important;
 color: var(--text) !important;
 font-size: 13px !important;
}

/* &#9472;&#9472; Responsive для админки &#9472;&#9472; */

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 47. ADMIN FORMS (admin_categories / admin_forums / admin_users /
 admin_fields / admin_options / admin_permissions и т.п.)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Дополняем секцию 46: покрываем формовые страницы админки.

 Разметка (общая для admin_*.php):
 #pun-admain1.adformal, #pun-admain2.adformal, #pun-admain-new.adformal
 > <h2>Заголовок раздела</h2>
 > <form id="X" class="adcontainer" method="post"> // &#8592; .adcontainer теперь на форме
 &#9474; > <fieldset>
 &#9474; > <legend><span>...</span></legend>
 &#9474; > <div class="adfs-box[.sortable]">
 &#9474; > <p class="adsubmitfield">
 &#9474; <label class="adlabel" for="X">Метка</label><br>
 &#9474; <span class="adinput">
 &#9474; <input type="text"> [/select/radio/checkbox]
 &#9474; <br>
 &#9474; <em>Подсказка курсивом</em>
 &#9474; </span><br>
 &#9474; <span class="adsubmit"><input type="submit" class="button" value="Добавить"></span>
 &#9474; </p>
 &#9474; </div>
 &#9474; </fieldset>
 &#9474; </form>
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

/* Все секции adformal (было только #pun-admain1).
 ВНИМАНИЕ: селектор [id^="pun-admain"] матчит и сам #pun-admain (главный
 грид-контейнер), и дочерние карточки #pun-admain1/2/-new/etc.
 Исключаем #pun-admain явно, иначе весь layout ломается. */
#pun-admin_categories #pun-admain1,
#pun-admin_categories #pun-admain2,
#pun-admin_forums #pun-admain1,
#pun-admin_forums #pun-admain2,
#pun-admin_users #pun-admain1,
#pun-admin_users #pun-admain2,
#pun-admin_users #pun-admain-new,
#pun-admin_fields #pun-admain1,
#pun-admin_fields #pun-admain2,
#pun-admin_groups #pun-admain1,
#pun-admin_groups #pun-admain2,
#pun-admin_permissions #pun-admain1,
#pun-admin_options #pun-admain1,
#pun-admin_bans #pun-admain1,
#pun-admin_ranks #pun-admain1,
#pun-admin_censoring #pun-admain1,
.punbb-admin [id^="pun-admain"]:not(#pun-admain) {
 grid-column: 2 !important;
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.06) 0%,
 rgba(147, 51, 234, 0.02) 100%),
 var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 padding: 0 !important;
 margin: 0 0 14px !important;
 overflow: hidden;
 min-width: 0;
}

.punbb-admin #pun-admain > [id^="pun-admain"]:not(#pun-admain):first-of-type { margin-top: 0 !important; }

.punbb-admin [id^="pun-admain"]:not(#pun-admain).adformal > h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
 padding: 14px 20px !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: #fff !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 letter-spacing: 0.05em !important;
 text-transform: uppercase !important;
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
}
.punbb-admin [id^="pun-admain"]:not(#pun-admain).adformal > h2 > span {
 color: #fff !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
.punbb-admin [id^="pun-admain"]:not(#pun-admain).adformal > h2::before {
 content: '';
 display: inline-block;
 width: 3px; height: 14px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}

.punbb-admin form.adcontainer,
.punbb-admin [id^="pun-admain"]:not(#pun-admain) > .adcontainer,
.punbb-admin [id^="pun-admain"]:not(#pun-admain) > form.adcontainer {
 background: transparent !important;
 border: none !important;
 padding: 16px 20px !important;
 margin: 0 !important;
 display: block !important;
}

/* &#9472;&#9472; Параграф-поле p.adsubmitfield &#9472;&#9472; */
.punbb-admin p.adsubmitfield,
.punbb-admin .adfs-box > p {
 margin: 0 0 14px !important;
 padding: 12px 14px !important;
 background: rgba(147, 51, 234, 0.04);
 border: 1px solid var(--border-soft);
 border-radius: 10px;
 display: block;
}
.punbb-admin p.adsubmitfield:last-child,
.punbb-admin .adfs-box > p:last-child { margin-bottom: 0 !important; }

.punbb-admin label.adlabel,
.punbb-admin .adlabel {
 display: inline-block !important;
 margin-bottom: 6px !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
}

.punbb-admin .adlabel label {
 color: inherit !important;
 font-size: inherit !important;
 font-weight: inherit !important;
 text-transform: inherit !important;
 letter-spacing: inherit !important;
 display: inline !important;
 margin: 0 !important;
}

.punbb-admin .adlabel a {
 color: var(--link) !important;
 font-weight: 700 !important;
 text-decoration: none !important;
 text-transform: none;
 letter-spacing: 0;
 font-size: 12px;
 padding: 2px 8px;
 border-radius: 6px;
 background: rgba(147, 51, 234, 0.10);
 border: 1px solid var(--border-soft);
 transition: background .15s, color .15s;
 margin-right: 4px;
}
.punbb-admin .adlabel a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5);
}

.punbb-admin span.adinput,
.punbb-admin .adinput {
 display: block !important;
 margin-top: 4px !important;
 color: var(--text) !important;
}
.punbb-admin .adinput > label {
 display: inline !important;
 margin: 0 4px !important;
 color: var(--muted) !important;
 font-size: 12px !important;
 font-weight: 600 !important;
}

.punbb-admin .adinput em,
.punbb-admin .adinput > em {
 display: block;
 margin-top: 6px !important;
 padding: 6px 10px !important;
 font-size: 11.5px !important;
 font-style: normal !important;
 color: var(--muted) !important;
 background: rgba(147, 51, 234, 0.05) !important;
 border-left: 3px solid var(--border-hard) !important;
 border-radius: 0 6px 6px 0 !important;
 line-height: 1.5;
}
.punbb-admin .adinput em a {
 color: var(--link) !important;
 font-weight: 600 !important;
}

.punbb-admin span.adsubmit,
.punbb-admin .adsubmit {
 display: inline-block !important;
 margin-top: 10px !important;
}

/* &#9472;&#9472; Sortable-списки (категории / форумы / поля профиля) &#9472;&#9472; */
.punbb-admin .adfs-box.sortable,
.punbb-admin .sortable {
 padding: 6px !important;
 background: transparent !important;
}
.punbb-admin .sortable > p,
.punbb-admin fieldset .sortable > p {
 display: flex !important;
 align-items: center !important;
 gap: 12px !important;
 padding: 10px 14px !important;
 margin: 6px 0 !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 8px !important;
 cursor: move !important;
 transition: background .15s, border-color .15s, transform .1s !important;
 position: relative;
}
.punbb-admin .sortable > p::before {
 content: '';
 display: inline-block;
 width: 12px; height: 20px;
 flex-shrink: 0;
 background: currentColor;
 color: var(--muted-2);
 opacity: .4;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><circle cx='4' cy='4' r='1.5' fill='white'/><circle cx='8' cy='4' r='1.5' fill='white'/><circle cx='4' cy='10' r='1.5' fill='white'/><circle cx='8' cy='10' r='1.5' fill='white'/><circle cx='4' cy='16' r='1.5' fill='white'/><circle cx='8' cy='16' r='1.5' fill='white'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><circle cx='4' cy='4' r='1.5' fill='white'/><circle cx='8' cy='4' r='1.5' fill='white'/><circle cx='4' cy='10' r='1.5' fill='white'/><circle cx='8' cy='10' r='1.5' fill='white'/><circle cx='4' cy='16' r='1.5' fill='white'/><circle cx='8' cy='16' r='1.5' fill='white'/></svg>") center/contain no-repeat;
}
.punbb-admin .sortable > p:hover {
 background: rgba(168, 85, 247, 0.10) !important;
 border-color: var(--border-hard) !important;
}
.punbb-admin .sortable > p:hover::before {
 opacity: 1;
 color: var(--link-hover);
}

.punbb-admin .sortable > p.sortable-dragging,
.punbb-admin .sortable > p.ui-sortable-helper {
 background: rgba(168, 85, 247, 0.20) !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 transform: scale(1.02);
}
.punbb-admin .sortable > p.sortable-placeholder,
.punbb-admin .sortable > p.ui-sortable-placeholder {
 background: rgba(147, 51, 234, 0.08) !important;
 border: 2px dashed var(--border-hard) !important;
 opacity: 0.5;
}

.punbb-admin .sortable > p > .adlabel {
 margin: 0 !important;
 flex-shrink: 0;
 min-width: 100px;
}
.punbb-admin .sortable > p > .adinput {
 flex: 1 1 auto !important;
 min-width: 0;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 flex-wrap: wrap !important;
}
.punbb-admin .sortable > p > .adinput > input[type="text"] {
 min-width: 120px;
 flex: 0 0 auto;
}
.punbb-admin .sortable > p > .adinput > input[name*="position"],
.punbb-admin .sortable > p > .adinput > input[name*="order"] {
 width: 60px !important;
 text-align: center !important;
}
.punbb-admin .sortable > p > .adinput > strong {
 color: #fff !important;
 font-weight: 700 !important;
}
.punbb-admin .sortable > p > .adinput > select {
 min-width: 100px;
}
.punbb-admin .sortable > p > .adinput > label {
 color: var(--muted) !important;
 font-size: 11px !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* &#9472;&#9472; Radio/checkbox группы в админ-формах (inline рядом с label) &#9472;&#9472; */
.punbb-admin .adinput input[type="radio"],
.punbb-admin .adinput input[type="checkbox"] {
 accent-color: var(--accent-purple-2);
 vertical-align: middle;
 margin-right: 4px;
}
.punbb-admin .adinput input[type="radio"] + label,
.punbb-admin .adinput input[type="checkbox"] + label {
 display: inline-block !important;
 margin-right: 14px !important;
 color: var(--text) !important;
 font-size: 12.5px !important;
 cursor: pointer;
 text-transform: none;
 font-weight: 500;
}

/* &#9472;&#9472; Ссылки-кнопки внутри форм (например «Категория - Позиция» &#8594; Редактировать / Удалить) &#9472;&#9472; */
.punbb-admin fieldset legend a {
 color: var(--link) !important;
 font-weight: 700 !important;
 text-decoration: none !important;
}
.punbb-admin fieldset legend a:hover { color: var(--link-hover) !important; }

.punbb-admin fieldset:not(:has(> legend)) > .adfs-box:first-child {
 border-radius: 10px !important;
}

.punbb-admin .sortable p[style*="draggable.png"],
.punbb-admin .sortable p[style*="#eee"] {
 background-image: none !important;
}

#pun-admain1 .sortable p,
#pun-admain2 .sortable p,
#pun-admain2 fieldset .handle {
 background-image: none !important;
 background-color: transparent !important;
 border-left: none !important;
}

/* &#9472;&#9472; #pun-admain2 fieldset .handle (форумы: сам форум-строка draggable) &#9472;&#9472; */
.punbb-admin fieldset .handle {
 display: flex !important;
 align-items: center !important;
 gap: 12px !important;
 padding: 10px 14px !important;
 margin: 6px 0 !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 8px !important;
 cursor: move !important;
}
.punbb-admin fieldset .subforums {
 margin-left: 30px !important;
 padding: 6px 0 !important;
}

.punbb-admin select {
 min-width: 140px;
 padding: 7px 10px !important;
}

.punbb-admin form.adcontainer .adfs-box + p.adsubmitfield,
.punbb-admin form.adcontainer > .adsubmit {
 padding: 12px 14px !important;
 background: rgba(0, 0, 0, 0.15) !important;
 border-radius: 0 0 10px 10px !important;
}

.punbb-admin fieldset > legend > span:only-child {
 color: #fff !important;
}

/* &#9472;&#9472; Responsive для админ-форм &#9472;&#9472; */

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 48. ADMIN FORMS extras (admin_ranks / admin_options / admin_permissions /
 admin_groups / admin_forms / admin_censoring)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Расширения к секции 47 под элементы, которых там не было:
 p.adsubmitfield.hasheading — параграф с "заголовком" сверху
 span.adinput.astable — 2 поля рядом (label+input | label+input)
 input.button.new — акцентная зелёная кнопка "Добавить"
 .adfs-box .adinput textarea — большие textarea (правила, HTML-верх/низ)
 radio + label группы внутри .adinput
 #html-test — скрытый блок тестовых HTML верх/низ
 .adfs-box.words — список цензурных слов
 fieldset id — якорные fieldset'ы (o-*, p-*, f-*)
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb-admin fieldset[id]:target {
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow:
 0 0 0 1px rgba(244, 114, 182, 0.15) inset,
 0 0 24px rgba(225, 29, 72, 0.12);
 animation: adm-target-flash 1.2s ease-out;
 scroll-margin-top: 20px;
}
@keyframes adm-target-flash {
 0% { background: rgba(244, 114, 182, 0.10); }
 100% { background: transparent; }
}

/* &#9472;&#9472; p.adsubmitfield.hasheading — первая строка (span.adlabel) как "плашка-заголовок" &#9472;&#9472; */
.punbb-admin p.adsubmitfield.hasheading {
 padding: 0 !important;
 overflow: hidden;
}
.punbb-admin p.adsubmitfield.hasheading > .adlabel:first-child {
 display: block !important;
 padding: 8px 14px !important;
 margin: 0 0 8px !important;
 background: rgba(147, 51, 234, 0.12) !important;
 border-bottom: 1px solid var(--border-soft) !important;
 border-radius: 10px 10px 0 0 !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 color: #fff !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
}
.punbb-admin p.adsubmitfield.hasheading > .adlabel:first-child > label {
 color: inherit !important;
 font-size: inherit !important;
 font-weight: inherit !important;
 text-transform: inherit !important;
 letter-spacing: inherit !important;
 margin: 0 !important;
}
.punbb-admin p.adsubmitfield.hasheading > .adinput,
.punbb-admin p.adsubmitfield.hasheading > .adsubmit {
 padding: 0 14px !important;
}
.punbb-admin p.adsubmitfield.hasheading > .adsubmit {
 padding-bottom: 12px !important;
}

/* &#9472;&#9472; span.adinput.astable — 2 поля рядом (Ранги: Название + Мин.сообщ.) &#9472;&#9472; */
.punbb-admin .adinput.astable {
 display: flex !important;
 flex-wrap: wrap !important;
 align-items: center !important;
 gap: 8px 16px !important;
 margin-top: 4px !important;
}
.punbb-admin .adinput.astable > label {
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 margin: 0 !important;
 padding: 0 !important;
 color: var(--muted) !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 text-transform: none;
 letter-spacing: 0;
}
.punbb-admin .adinput.astable > label > input[type="text"],
.punbb-admin .adinput.astable > label > input[type="number"] {
 min-width: 100px;
}

.punbb-admin .acchide {
 position: absolute !important;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

/* &#9472;&#9472; input.button.new — акцентная зелёная кнопка «Новое / Добавить» &#9472;&#9472; */
.punbb-admin input.button.new,
.punbb-admin input[type="submit"].new,
.punbb-admin button.new {
 background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
 border-color: rgba(134, 239, 172, 0.5) !important;
 box-shadow: 0 0 12px rgba(34, 197, 94, 0.35) !important;
}
.punbb-admin input.button.new:hover,
.punbb-admin input[type="submit"].new:hover {
 box-shadow: 0 0 22px rgba(34, 197, 94, 0.55) !important;
}

/* &#9472;&#9472; Radio-группа внутри .adinput (Да/Нет, HTTPS/Redirect/HTTP) &#9472;&#9472; */
.punbb-admin .adinput > input[type="radio"],
.punbb-admin .adinput > input[type="checkbox"] {
 accent-color: var(--accent-purple-2);
 vertical-align: middle;
 margin: 0 4px 0 0 !important;
 cursor: pointer;
}
.punbb-admin .adinput > input[type="radio"] + label,
.punbb-admin .adinput > input[type="checkbox"] + label {
 display: inline-block !important;
 margin: 0 16px 0 0 !important;
 padding: 4px 10px !important;
 color: var(--text) !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 cursor: pointer;
 text-transform: none;
 border-radius: 6px;
 background: rgba(147, 51, 234, 0.06);
 border: 1px solid var(--border-soft);
 transition: background .15s, border-color .15s;
}
.punbb-admin .adinput > input[type="radio"]:checked + label,
.punbb-admin .adinput > input[type="checkbox"]:checked + label {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
}
.punbb-admin .adinput > input[type="radio"] + label:hover,
.punbb-admin .adinput > input[type="checkbox"] + label:hover {
 border-color: var(--border-hard) !important;
 color: #fff !important;
}

/* &#9472;&#9472; Textarea в админ-формах (правила, HTML верх/низ, приветствие) &#9472;&#9472; */
.punbb-admin .adinput textarea,
.punbb-admin .adfs-box textarea {
 width: 100% !important;
 min-height: 120px !important;
 max-width: 100% !important;
 padding: 12px !important;
 font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace !important;
 font-size: 12.5px !important;
 line-height: 1.55 !important;
 background: #0a0413 !important;
 color: var(--text) !important;
 border: 1px solid var(--border) !important;
 border-radius: 8px !important;
 resize: vertical !important;
}
.punbb-admin .adinput textarea:focus,
.punbb-admin .adfs-box textarea:focus {
 border-color: var(--accent-purple-2) !important;
 box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18) !important;
}

.punbb-admin .adinput textarea[rows="10"],
.punbb-admin .adinput textarea[name*="html_"],
.punbb-admin .adinput textarea[name*="_message"] {
 min-height: 220px !important;
}

/* &#9472;&#9472; #html-test — скрываемый блок тестового HTML &#9472;&#9472; */
.punbb-admin #html-test {
 margin-top: 10px !important;
 padding: 10px 12px !important;
 background: rgba(251, 191, 36, 0.06) !important;
 border: 1px dashed rgba(251, 191, 36, 0.35) !important;
 border-radius: 8px !important;
}
.punbb-admin #html-test::before {
 content: 'ТЕСТОВЫЕ HTML ВЕРХ/НИЗ';
 display: block;
 margin-bottom: 6px;
 padding: 3px 8px;
 width: max-content;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.08em;
 color: #fbbf24;
 background: rgba(251, 191, 36, 0.12);
 border: 1px solid rgba(251, 191, 36, 0.3);
 border-radius: 4px;
}

/* &#9472;&#9472; .adfs-box.words — список цензурных слов (compact table-like) &#9472;&#9472; */
.punbb-admin .adfs-box.words {
 padding: 8px !important;
}
.punbb-admin .adfs-box.words > p {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 padding: 8px 10px !important;
 margin: 4px 0 !important;
 background: rgba(147, 51, 234, 0.04) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 6px !important;
}
.punbb-admin .adfs-box.words > p .adinput {
 flex: 1 1 auto !important;
 display: flex !important;
 gap: 8px !important;
 flex-wrap: wrap;
 margin: 0 !important;
}
.punbb-admin .adfs-box.words > p .adsubmit {
 margin: 0 !important;
 flex-shrink: 0;
}
.punbb-admin .adfs-box.words > p .adsubmit input[type="submit"] {
 padding: 5px 12px !important;
 font-size: 11px !important;
}

/* &#9472;&#9472; Настройки: поля цвета/select со списком стилей &#9472;&#9472; */
.punbb-admin .adinput select[name*="style"],
.punbb-admin .adinput select[name*="theme"] {
 min-width: 200px;
}

.punbb-admin .adinput em a {
 color: var(--link) !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 border-bottom: 1px dashed var(--link);
}
.punbb-admin .adinput em a:hover {
 color: var(--link-hover) !important;
 border-bottom-color: var(--link-hover);
}

/* &#9472;&#9472; admin_groups: список групп «Редактировать - Посмотреть» + название группы &#9472;&#9472; */
#pun-admin_groups .adfs-box > p {
 display: flex !important;
 align-items: center !important;
 gap: 14px !important;
 padding: 10px 14px !important;
 margin: 6px 0 !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 8px !important;
}
#pun-admin_groups .adfs-box > p > .adlabel {
 margin: 0 !important;
 flex-shrink: 0;
 order: 2;
 margin-left: auto !important;
}
#pun-admin_groups .adfs-box > p > .adinput {
 margin: 0 !important;
 flex: 1 1 auto !important;
 order: 1;
 color: #fff !important;
 font-weight: 700 !important;
 font-size: 14px !important;
}

/* &#9472;&#9472; admin_permissions — компактный вид "переключалок" по секциям &#9472;&#9472; */
#pun-admin_permissions .adfs-box > p,
#pun-admin_options .adfs-box > p,
#pun-admin_forms .adfs-box > p,
#pun-admin_censoring .adfs-box > p {
 padding: 12px 14px !important;
}

/* &#9472;&#9472; Ranks: строка ранга (Название + Мин.сообщ. + Обновить/Удалить) &#9472;&#9472; */
#pun-admin_ranks .adfs-box > p {
 display: flex !important;
 flex-wrap: wrap !important;
 align-items: center !important;
 gap: 12px !important;
}
#pun-admin_ranks .adfs-box > p .adinput.astable {
 flex: 1 1 auto !important;
}
#pun-admin_ranks .adfs-box > p .adsubmit {
 margin: 0 !important;
 flex-shrink: 0;
}
#pun-admin_ranks .adfs-box > p .adsubmit input[type="submit"] {
 padding: 6px 14px !important;
 font-size: 12px !important;
}

#pun-admin_ranks .adfs-box > p .adsubmit input[name^="remove"] {
 background: linear-gradient(135deg, #dc2626, #db2777) !important;
 border-color: rgba(248, 113, 113, 0.5) !important;
 box-shadow: 0 0 12px rgba(220, 38, 38, 0.30) !important;
}

.punbb-admin input::placeholder,
.punbb-admin textarea::placeholder {
 color: rgba(168, 139, 250, 0.45);
 font-style: italic;
}

/* Мобильно &#9472;&#9472; */

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 49. ATTACHMENTS (прикреплённые файлы в постах)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка MyBB.ru:
 .post-content .postattach — обёртка
 .post-content .attach-image — картинка-миниатюра
 .post-content .attach-file — файл (не картинка)
 .post-content .attach a — ссылка на файл
 [class*="attach-icon-"] — по типу файла (при наличии плагина)
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-content .postattach,
.punbb .post-content .attach,
.punbb .post-content .attachment,
.punbb .post-content ul.attach-list {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 8px !important;
 margin: 12px 0 !important;
 padding: 10px !important;
 background: rgba(147, 51, 234, 0.05) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 10px !important;
 list-style: none !important;
}

.punbb .post-content .postattach::before,
.punbb .post-content .attachment::before {
 content: 'Вложения';
 flex-basis: 100%;
 order: -1;
 font-size: 10.5px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted-2);
 padding-bottom: 4px;
 border-bottom: 1px dashed var(--border-soft);
 margin-bottom: 4px;
}

.punbb .post-content .postattach a,
.punbb .post-content .attach a,
.punbb .post-content .attachment li,
.punbb .post-content ul.attach-list li {
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 6px 12px 6px 8px !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 color: var(--link) !important;
 background: #170a24 !important;
 border: 1px solid var(--border-hard) !important;
 border-radius: 8px !important;
 text-decoration: none !important;
 transition: background .15s, color .15s, border-color .15s;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 list-style: none !important;
 margin: 0 !important;
}
.punbb .post-content .postattach a:hover,
.punbb .post-content .attach a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
}

.punbb .post-content .postattach a::before,
.punbb .post-content .attach a::before,
.punbb .post-content .attachment li::before {
 content: '';
 width: 20px; height: 20px;
 flex-shrink: 0;
 background: currentColor;
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 16px 16px;
 mask-size: 16px 16px;
 background-color: currentColor;
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m7 1v6h6z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m7 1v6h6z'/></svg>");
 opacity: 0.8;
}

.punbb .post-content a[href$=".jpg" i]::before,
.punbb .post-content a[href$=".jpeg" i]::before,
.punbb .post-content a[href$=".png" i]::before,
.punbb .post-content a[href$=".gif" i]::before,
.punbb .post-content a[href$=".webp" i]::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 4h16v16H4zm2 2v10l4-4 3 3 3-3 4 4V6zm3 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M4 4h16v16H4zm2 2v10l4-4 3 3 3-3 4 4V6zm3 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/></svg>");
}
.punbb .post-content a[href$=".pdf" i]::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m1 12v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m1 12v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z'/></svg>");
}
.punbb .post-content a[href$=".zip" i]::before,
.punbb .post-content a[href$=".rar" i]::before,
.punbb .post-content a[href$=".7z" i]::before {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h4v2H8v2h2v2H8v2h2v2H8v2h2v2H6zm6 0h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6h8V2m0 2v2h2V4zm2 4v2h2V8z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h4v2H8v2h2v2H8v2h2v2H8v2h2v2H6zm6 0h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6h8V2m0 2v2h2V4zm2 4v2h2V8z'/></svg>");
}

.punbb .post-content .postimg,
.punbb .post-content img.postimg {
 max-width: 100%;
 height: auto;
 border-radius: 10px;
 border: 1px solid var(--border-soft);
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
 margin: 6px 0;
 cursor: zoom-in;
}

.punbb .post-content .attach .filesize,
.punbb .post-content .postattach .filesize {
 font-size: 10.5px !important;
 font-weight: 500 !important;
 color: var(--muted-2) !important;
 margin-left: 2px;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 50. VIEW PM (просмотр личного сообщения)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 #pun-messages > .post (одиночный пост в контейнере ЛС)
 Раскладка та же, что viewtopic .post, но с action-кнопками
 «Ответить», «Переслать», «Удалить».
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-messages .post,
#pun-messages [id^="p"].post {
 background: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 margin: 12px 0 !important;
 overflow: hidden;
}

#pun-messages .linkst,
#pun-messages .linksb {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 10px !important;
 padding: 10px 0 !important;
 margin: 0 !important;
 flex-wrap: wrap !important;
 background: transparent !important;
 border: none !important;
}

#pun-messages .post > h3 {
 padding: 12px 18px !important;
 background:
 linear-gradient(180deg,
 rgba(147, 51, 234, 0.10),
 rgba(147, 51, 234, 0.04)) !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: var(--text) !important;
 font-size: 13px !important;
 font-weight: 600 !important;
}
#pun-messages .post > h3 strong {
 color: #fff !important;
 font-weight: 800 !important;
}

#pun-messages .post-links {
 padding: 12px 16px !important;
 border-top: 1px solid var(--border-soft) !important;
 background: rgba(0, 0, 0, 0.15) !important;
}
#pun-messages .post-links ul {
 display: flex !important;
 gap: 8px !important;
 flex-wrap: wrap !important;
 list-style: none;
 padding: 0;
 margin: 0;
}
#pun-messages .post-links li.pl-reply a,
#pun-messages .post-links li.pl-forward a {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35) !important;
}
#pun-messages .post-links li.pl-delete a {
 background: linear-gradient(135deg, #dc2626, #db2777) !important;
 color: #fff !important;
 border-color: rgba(248, 113, 113, 0.5) !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 51. MOD CP (панель модератора #pun-modcp)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Разметка похожа на #pun-messages: сайдбар + правая колонка.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

#pun-modcp #pun-main {
 display: grid !important;
 grid-template-columns: 240px 1fr !important;
 gap: 16px !important;
 align-items: start !important;
}
#pun-modcp #pun-main > h1 { grid-column: 1 / -1 !important; }

#pun-modcp #profilenav,
#pun-modcp .modmenu {
 background: linear-gradient(180deg,
 rgba(147, 51, 234, 0.08),
 rgba(220, 38, 38, 0.04)) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-md) !important;
 padding: 14px !important;
}
#pun-modcp #profilenav h2,
#pun-modcp .modmenu h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 padding: 4px 6px 8px !important;
 margin: 0 0 6px !important;
 font-size: 10.5px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.08em !important;
 border-bottom: 1px dashed var(--border-soft) !important;
 background: transparent !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
}
#pun-modcp #profilenav h2::before,
#pun-modcp .modmenu h2::before {
 content: '';
 width: 3px; height: 12px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}

#pun-modcp .moderator-actions,
#pun-modcp .mod-actions,
#pun-modcp #inline_mod_bar {
 display: flex !important;
 gap: 8px !important;
 flex-wrap: wrap !important;
 padding: 12px !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 10px !important;
 margin: 10px 0 !important;
}

#pun-modcp .reports-list li,
#pun-modcp #reports .report {
 padding: 12px 14px !important;
 margin: 8px 0 !important;
 background: rgba(239, 68, 68, 0.05) !important;
 border: 1px solid rgba(239, 68, 68, 0.2) !important;
 border-left: 4px solid #ef4444 !important;
 border-radius: 8px !important;
 list-style: none;
}
#pun-modcp .reports-list li strong,
#pun-modcp #reports .report .reporter {
 color: #fca5a5 !important;
 font-weight: 700;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 52. ROLEPLAY FEATURES (специально для A Will Eternal)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Оформление кастомных полей профиля персонажа (.pa-fld1..5),
 разделителей сцен, IC/OOC-тегов.
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-author .pa-fld1,
.punbb .post-author .pa-fld2,
.punbb .post-author .pa-fld3,
.punbb .post-author .pa-fld4,
.punbb .post-author .pa-fld5 {
 position: relative;
 padding-left: 26px !important;
}
.punbb .post-author .pa-fld1::after,
.punbb .post-author .pa-fld2::after,
.punbb .post-author .pa-fld3::after,
.punbb .post-author .pa-fld4::after,
.punbb .post-author .pa-fld5::after {
 content: '';
 position: absolute;
 left: 8px;
 top: 8px;
 width: 12px; height: 12px;
 background: var(--grad-accent);
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 12px 12px;
 mask-size: 12px 12px;
 opacity: 0.9;
}

.punbb .post-author .pa-fld1::after {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6z'/></svg>");
}

.punbb .post-author .pa-fld2::after {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2 14 10l8 2-8 2-2 8-2-8-8-2 8-2z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2 14 10l8 2-8 2-2 8-2-8-8-2 8-2z'/></svg>");
}

.punbb .post-author .pa-fld3::after {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/></svg>");
}

.punbb .post-author .pa-fld4::after {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 4a3 3 0 110 6 3 3 0 010-6'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 4a3 3 0 110 6 3 3 0 010-6'/></svg>");
}

.punbb .post-author .pa-fld5::after {
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h4l10 10-4 4L6 6zM4 18l3-3 3 3-3 3z'/></svg>");
 mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h4l10 10-4 4L6 6zM4 18l3-3 3 3-3 3z'/></svg>");
}

.punbb .post-content hr {
 position: relative;
 border: none;
 height: 22px;
 margin: 22px 0;
 background: none;
}
.punbb .post-content hr::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg,
 transparent,
 rgba(244, 114, 182, 0.4) 20%,
 rgba(244, 114, 182, 0.4) 80%,
 transparent);
}
.punbb .post-content hr::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 22px; height: 22px;
 transform: translate(-50%, -50%);
 background: var(--panel-2);
 border: 1px solid rgba(244, 114, 182, 0.4);
 border-radius: 50%;
 background-image:
 radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.35) 0%, transparent 60%);
 box-shadow: 0 0 12px rgba(244, 114, 182, 0.25);
}

.punbb .post-content ic,
.punbb .post-content [data-tag="ic"],
.punbb .post-content .ic-tag {
 display: block;
 padding: 8px 12px;
 margin: 10px 0;
 background: rgba(147, 51, 234, 0.08);
 border-left: 3px solid var(--accent-purple-2);
 border-radius: 0 8px 8px 0;
 font-style: italic;
 color: var(--text);
}
.punbb .post-content ooc,
.punbb .post-content [data-tag="ooc"],
.punbb .post-content .ooc-tag {
 display: block;
 padding: 6px 12px;
 margin: 10px 0;
 background: rgba(148, 163, 184, 0.08);
 border-left: 3px solid #94a3b8;
 border-radius: 0 8px 8px 0;
 color: var(--muted);
 font-size: 12.5px;
 font-style: italic;
}
.punbb .post-content ooc::before,
.punbb .post-content .ooc-tag::before {
 content: 'OOC: ';
 font-weight: 700;
 color: #cbd5e1;
 font-style: normal;
 text-transform: uppercase;
 font-size: 10.5px;
 letter-spacing: 0.06em;
}

.punbb .post-content dialog[open],
.punbb .post-content .dialog {
 display: block;
 padding: 10px 14px;
 margin: 8px 0;
 background: linear-gradient(90deg,
 rgba(244, 114, 182, 0.10),
 transparent 90%);
 border-left: 3px solid var(--link-hover);
 border-radius: 0 8px 8px 0;
 color: var(--text-strong);
 font-family: Georgia, 'Times New Roman', serif;
 font-size: 15px;
 font-style: italic;
 position: static;
 border-top: none;
 border-right: none;
 border-bottom: none;
 max-width: none;
 max-height: none;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 53. MENTIONS (@ник) и хэштеги
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post-content .mention,
.punbb .post-content a.mention,
.punbb .post-content span.mention {
 display: inline-flex;
 align-items: center;
 padding: 1px 8px;
 border-radius: 9999px;
 font-size: 0.9em;
 font-weight: 600;
 color: #fff !important;
 background: var(--grad-accent);
 text-decoration: none !important;
 white-space: nowrap;
 transition: filter .15s;
}
.punbb .post-content .mention:hover { filter: brightness(1.15); }
.punbb .post-content .mention::before {
 content: '@';
 margin-right: 1px;
 opacity: 0.8;
 font-weight: 400;
}

.punbb .post-content .mention[data-has-at]::before { content: none; }

.punbb .post-content .hashtag,
.punbb .post-content a.hashtag {
 color: var(--link-hover) !important;
 font-weight: 600;
 text-decoration: none !important;
 padding: 0 2px;
 border-bottom: 1px dashed var(--link-hover);
}
.punbb .post-content .hashtag:hover {
 color: #fff !important;
 border-bottom-style: solid;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 54. TOAST NOTIFICATIONS (jGrowl)
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.jGrowl {
 z-index: 9999 !important;
}
.jGrowl-notification,
.ui-jgrowl .jGrowl-notification {
 min-width: 260px !important;
 max-width: 380px !important;
 padding: 12px 16px !important;
 margin: 8px !important;
 background:
 linear-gradient(135deg,
 rgba(17, 7, 28, 0.95),
 rgba(29, 12, 46, 0.95)) !important;
 border: 1px solid rgba(244, 114, 182, 0.35) !important;
 border-radius: var(--radius-md) !important;
 color: var(--text) !important;
 font-size: 13px !important;
 font-family: var(--font-ui) !important;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
 0 0 20px rgba(147, 51, 234, 0.15) !important;
 opacity: 0.98 !important;
}
.jGrowl-notification .jGrowl-header {
 font-size: 12px !important;
 font-weight: 700 !important;
 color: var(--link-hover) !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: 4px;
}
.jGrowl-notification .jGrowl-close {
 color: var(--muted-2) !important;
 cursor: pointer;
 font-weight: 700;
}
.jGrowl-notification .jGrowl-close:hover { color: var(--link-hover) !important; }

.jGrowl-notification.jgrowl_success,
.jGrowl .jGrowl-notification.jgrowl_success {
 background:
 linear-gradient(135deg,
 rgba(22, 74, 47, 0.95),
 rgba(29, 12, 46, 0.95)) !important;
 border-color: rgba(134, 239, 172, 0.5) !important;
 color: #86efac !important;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
 0 0 20px rgba(34, 197, 94, 0.20) !important;
}

.jGrowl-notification.jgrowl_error,
.jGrowl .jGrowl-notification.jgrowl_error {
 background:
 linear-gradient(135deg,
 rgba(76, 22, 22, 0.95),
 rgba(29, 12, 46, 0.95)) !important;
 border-color: rgba(252, 165, 165, 0.5) !important;
 color: #fca5a5 !important;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
 0 0 20px rgba(239, 68, 68, 0.20) !important;
}

.jGrowl-notification.jgrowl_process,
.jGrowl .jGrowl-notification.jgrowl_process {
 background:
 linear-gradient(135deg,
 rgba(74, 60, 15, 0.95),
 rgba(29, 12, 46, 0.95)) !important;
 border-color: rgba(253, 224, 71, 0.5) !important;
 color: #fde047 !important;
}
.jGrowl-closer {
 background: rgba(0, 0, 0, 0.7) !important;
 color: var(--link) !important;
 border: 1px solid var(--border-hard) !important;
 border-radius: 8px !important;
 padding: 8px !important;
 font-size: 12px !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 55. ERROR PAGES (403 / 404 / Maintenance)
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .error-page,
.punbb #error-message,
.punbb .status-error,
body.error #pun-main {
 min-height: 400px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 40px 20px;
}
.punbb .error-page::before,
.punbb #error-message::before {
 content: attr(data-code, '404');
 display: block;
 font-size: 120px;
 font-weight: 900;
 line-height: 1;
 background: linear-gradient(135deg, #f87171 0%, #c084fc 50%, #818cf8 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 20px;
 letter-spacing: -0.05em;
}
.punbb .error-page h1,
.punbb #error-message h1 {
 font-size: 28px !important;
 color: #fff !important;
 margin: 0 0 12px !important;
}
.punbb .error-page p,
.punbb #error-message p {
 color: var(--muted) !important;
 font-size: 15px;
 max-width: 500px;
 margin: 0 auto 24px;
}

.punbb .info + .info { display: none; }

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
 56. SKIP-TO-CONTENT (a11y)
 &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
 Активация: добавить в HTML-верх через админку:
 <a href="#pun-main" class="skip-link">Перейти к содержимому</a>
 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.skip-link {
 position: absolute;
 left: -9999px;
 top: 0;
 z-index: 10000;
 padding: 10px 20px;
 background: var(--grad-accent);
 color: #fff !important;
 font-weight: 700;
 text-decoration: none !important;
 border-radius: 0 0 10px 0;
 box-shadow: 0 4px 20px rgba(225, 29, 72, 0.4);
}
.skip-link:focus,
.skip-link:focus-visible {
 left: 0;
 outline: 3px solid var(--link-hover);
 outline-offset: 2px;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   57. AWE EDITOR — Discord-inspired live editor
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Работает в паре с discord-editor.js:
   1) Оборачивает <textarea> в .awe-editor > .awe-editor-content
      (contenteditable) — пишешь BBCode, сразу видишь форматирование
   2) Плавающий toolbar .awe-editor-toolbar появляется при выделении
   3) Emoji picker .awe-editor-emoji-picker открывается по кнопке
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

/* &#9472;&#9472; Обёртка редактора &#9472;&#9472; */
.awe-editor {
 position: relative;
 background: var(--panel-3);
 border: 1px solid var(--border-soft);
 border-radius: var(--radius-md);
 overflow: hidden;
 margin: 8px 0;
 transition: border-color .15s, box-shadow .15s;
}
.awe-editor:focus-within {
 border-color: var(--accent-purple-2);
 box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* &#9472;&#9472; Contenteditable-поле ввода &#9472;&#9472; */
.awe-editor-content {
 min-height: 160px;
 max-height: 500px;
 overflow-y: auto;
 padding: 14px 16px;
 font-family: var(--font-ui);
 font-size: 14px;
 line-height: 1.65;
 color: var(--text);
 outline: none;
 caret-color: var(--link-hover);
 word-wrap: break-word;
 overflow-wrap: anywhere;
}
.awe-editor-content:empty::before {
 content: attr(data-placeholder);
 color: var(--muted-2);
 opacity: 0.6;
 pointer-events: none;
}

/* Форматирование внутри редактора (inline WYSIWYG) */
.awe-editor-content b,
.awe-editor-content strong { color: #fff; font-weight: 800; }
.awe-editor-content i,
.awe-editor-content em { font-style: italic; }
.awe-editor-content u { text-decoration: underline; text-decoration-color: var(--link-hover); }
.awe-editor-content s,
.awe-editor-content del { text-decoration: line-through; opacity: 0.7; }
.awe-editor-content a {
 color: var(--link);
 text-decoration: none;
 border-bottom: 1px dashed var(--link);
}
.awe-editor-content a:hover {
 color: var(--link-hover);
 border-bottom-color: var(--link-hover);
}
.awe-editor-content blockquote {
 margin: 8px 0;
 padding: 8px 12px;
 background: rgba(147, 51, 234, 0.08);
 border-left: 3px solid var(--accent-purple-2);
 border-radius: 0 8px 8px 0;
 color: #e2d1f0;
}
.awe-editor-content blockquote cite {
 display: block;
 font-size: 12px;
 font-weight: 600;
 font-style: normal;
 color: var(--link);
 margin-bottom: 4px;
}
.awe-editor-content pre {
 margin: 8px 0;
 padding: 10px 12px;
 background: #06020a;
 border: 1px solid var(--border-hard);
 border-radius: 8px;
 font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
 font-size: 12.5px;
 color: #f0abfc;
 overflow-x: auto;
 white-space: pre-wrap;
}
.awe-editor-content img {
 max-width: 100%;
 height: auto;
 border-radius: 8px;
 margin: 4px 0;
}

/* Кастомный скроллбар для editor content */
.awe-editor-content::-webkit-scrollbar { width: 6px; }
.awe-editor-content::-webkit-scrollbar-thumb {
 background: var(--border-hard);
 border-radius: 3px;
}
.awe-editor-content::-webkit-scrollbar-thumb:hover {
 background: var(--accent-purple-2);
}

/* &#9472;&#9472; Плавающий toolbar (появляется над выделением) &#9472;&#9472; */
.awe-editor-toolbar {
 position: absolute;
 z-index: 100;
 display: none;
 align-items: center;
 gap: 2px;
 padding: 4px;
 background: linear-gradient(135deg,
   rgba(17, 7, 28, 0.97),
   rgba(29, 12, 46, 0.97));
 border: 1px solid rgba(244, 114, 182, 0.35);
 border-radius: 10px;
 box-shadow:
   0 10px 30px rgba(0, 0, 0, 0.5),
   0 0 20px rgba(147, 51, 234, 0.20);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 opacity: 0;
 transform: translateY(4px);
 transition: opacity .15s, transform .15s;
}
.awe-editor-toolbar.is-visible {
 display: inline-flex;
 opacity: 1;
 transform: translateY(0);
}
.awe-editor-toolbar button {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-width: 30px !important;
 height: 30px !important;
 padding: 0 8px !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 color: var(--text) !important;
 background: transparent !important;
 border: 1px solid transparent !important;
 border-radius: 6px !important;
 cursor: pointer !important;
 box-shadow: none !important;
 transition: background .15s, color .15s, border-color .15s !important;
}
.awe-editor-toolbar button:hover {
 background: rgba(147, 51, 234, 0.20) !important;
 color: #fff !important;
 transform: none !important;
}
.awe-editor-toolbar button[data-cmd="bold"]   { font-weight: 900 !important; }
.awe-editor-toolbar button[data-cmd="italic"] { font-style: italic; font-family: Georgia, serif; }
.awe-editor-toolbar button[data-cmd="underline"] { text-decoration: underline; }
.awe-editor-toolbar button[data-cmd="strike"] { text-decoration: line-through; }
.awe-editor-toolbar button[data-cmd="color"] {
 background: var(--grad-title) !important;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 color: transparent !important;
}
.awe-editor-toolbar-sep {
 display: inline-block;
 width: 1px;
 height: 20px;
 background: var(--border-hard);
 margin: 0 2px;
}

/* Стрелка-указатель под toolbar */
.awe-editor-toolbar::after {
 content: '';
 position: absolute;
 bottom: -6px;
 left: 50%;
 transform: translateX(-50%) rotate(45deg);
 width: 10px; height: 10px;
 background: linear-gradient(135deg,
   rgba(17, 7, 28, 0.97),
   rgba(29, 12, 46, 0.97));
 border-right: 1px solid rgba(244, 114, 182, 0.35);
 border-bottom: 1px solid rgba(244, 114, 182, 0.35);
}

/* &#9472;&#9472; Emoji picker &#9472;&#9472; */
.awe-editor-emoji-picker {
 position: absolute;
 z-index: 101;
 display: none;
 max-width: 340px;
 max-height: 260px;
 overflow-y: auto;
 padding: 8px;
 background: linear-gradient(135deg,
   rgba(17, 7, 28, 0.97),
   rgba(29, 12, 46, 0.97));
 border: 1px solid rgba(244, 114, 182, 0.35);
 border-radius: 12px;
 box-shadow:
   0 10px 30px rgba(0, 0, 0, 0.5),
   0 0 20px rgba(147, 51, 234, 0.20);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 grid-template-columns: repeat(8, 1fr);
 gap: 2px;
}
.awe-editor-emoji-picker.is-visible {
 display: grid;
}
.awe-editor-emoji-picker button {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 32px !important;
 height: 32px !important;
 padding: 0 !important;
 font-size: 20px !important;
 background: transparent !important;
 border: 1px solid transparent !important;
 border-radius: 6px !important;
 cursor: pointer !important;
 box-shadow: none !important;
 transition: background .15s, transform .1s !important;
}
.awe-editor-emoji-picker button:hover {
 background: rgba(147, 51, 234, 0.20) !important;
 transform: scale(1.2) !important;
}
.awe-editor-emoji-picker::-webkit-scrollbar { width: 6px; }
.awe-editor-emoji-picker::-webkit-scrollbar-thumb {
 background: var(--border-hard);
 border-radius: 3px;
}

/* Скрытая textarea — не занимает места */
.awe-editor > textarea {
 display: none !important;
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   58. SEARCH RESULTS (.forum) + PROFILE UPLOADS
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Дополнительно к секции 21: результаты поиска в PunBB
   заворачиваются НЕ в .topic-list, а в .forum:
     #pun-searchtopics/searchposts/search > #pun-main
       > .linkst
       > .forum   &#8592; НОВАЯ обёртка
           > <h2><span.item1>заголовок</span> <span.item2>кол-во</span></h2>
           > .container
               > table (thead + tbody.hasicon > tr[.altstyle])
       > .modmenu (для tbody-tools)
       > .linksb

   В .tcr — аватар через <em class="user-avatar">
     > .avatar-image (background-image)
     > .isonline (индикатор онлайн)
     > .byuser > .byuser-username

   Плюс страница profile.php?section=uploads:
     #pun-profile > #profile.formal > .container
       > #profilenav (боковое меню разделов профиля)
       > <fieldset> (описание)
       > .select-file (кнопка загрузки)
       > .adfs-box > table#filetable.adcontainer
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

/* &#9472;&#9472; Обёртка результатов поиска &#9472;&#9472; */
#pun-searchtopics .forum,
#pun-searchposts .forum,
#pun-search .forum,
.punbb #pun-main > .forum {
 display: block !important;
 width: 100% !important;
 background:
   linear-gradient(180deg,
     rgba(147, 51, 234, 0.10) 0%,
     rgba(147, 51, 234, 0.04) 40%,
     rgba(220, 38, 38, 0.06) 100%) !important;
 background-color: var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 overflow: hidden !important;
 margin: 12px 0 !important;
 padding: 0 !important;
 box-shadow:
   inset 0 1px 0 rgba(244, 114, 182, 0.08),
   0 4px 20px rgba(0, 0, 0, 0.25);
}

/* h2 шапка "Темы, соответствующие критериям поиска  1 страница 1 из 1" */
.punbb #pun-main > .forum > h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
 padding: 13px 18px !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 color: #fff !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 letter-spacing: 0.03em !important;
 text-transform: none !important;
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 flex-wrap: wrap;
}
.punbb #pun-main > .forum > h2::before {
 content: '';
 display: inline-block;
 width: 4px; height: 16px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}
.punbb #pun-main > .forum > h2 .item1 {
 color: #fff !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
 font-weight: 700 !important;
}
.punbb #pun-main > .forum > h2 .item2 {
 margin-left: auto !important;
 padding: 3px 10px !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 color: var(--muted-2) !important;
 background: rgba(147, 51, 234, 0.10) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 9999px !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* Container внутри .forum */
.punbb #pun-main > .forum > .container {
 background: transparent !important;
 border: none !important;
 padding: 8px !important;
 width: 100% !important;
 display: block !important;
}

/* Таблица результатов — стилизуется теми же правилами, что и viewforum table.
 * У нас уже есть #pun-search... table (продублировано в секции 21),
 * но нужно ещё покрыть общий случай через .forum table. */
.punbb #pun-main > .forum table {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
 table-layout: auto !important;
}
.punbb #pun-main > .forum thead th {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid #230d30 !important;
 padding: 6px 10px !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.07em !important;
 text-align: left !important;
}
.punbb #pun-main > .forum thead th.tcl { padding-left: 14px !important; }
.punbb #pun-main > .forum thead th.tc2,
.punbb #pun-main > .forum thead th.tc3 {
 text-align: center !important;
 width: 100px !important;
}
.punbb #pun-main > .forum thead th.tcr {
 text-align: left !important;
 width: 220px !important;
}
.punbb #pun-main > .forum tbody tr {
 background: transparent !important;
 transition: background .2s ease !important;
}
.punbb #pun-main > .forum tbody tr:hover,
.punbb #pun-main > .forum tbody tr.altstyle:hover {
 background: rgba(168, 85, 247, 0.07) !important;
}
.punbb #pun-main > .forum tbody tr td {
 background: transparent !important;
 border: none !important;
 border-bottom: 1px solid rgba(40, 18, 54, 0.6) !important;
 padding: 12px 10px !important;
 vertical-align: middle !important;
 color: var(--text) !important;
}
.punbb #pun-main > .forum tbody tr:last-child td { border-bottom: none !important; }

.punbb #pun-main > .forum td.tcl { padding: 10px 8px !important; }
.punbb #pun-main > .forum td.tc2,
.punbb #pun-main > .forum td.tc3 {
 text-align: center !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 color: var(--text-strong) !important;
 width: 100px !important;
}
.punbb #pun-main > .forum td.tc2 a,
.punbb #pun-main > .forum td.tc3 a {
 color: var(--link) !important;
 font-weight: 600 !important;
 text-decoration: none !important;
}
.punbb #pun-main > .forum td.tcr {
 width: 220px !important;
 font-size: 12px !important;
 color: var(--muted) !important;
 vertical-align: middle !important;
}
.punbb #pun-main > .forum td.tcr a {
 color: var(--link) !important;
 text-decoration: none !important;
 font-weight: 600 !important;
}
.punbb #pun-main > .forum td.tcr a:hover { color: var(--link-hover) !important; }

/* Иконка темы в результатах поиска — как у viewforum */
.punbb #pun-main > .forum .hasicon .intd {
 display: flex !important;
 align-items: center !important;
 gap: 14px !important;
}
.punbb #pun-main > .forum .hasicon .icon,
.punbb #pun-main > .forum .intd .icon {
 width: 44px !important;
 height: 44px !important;
 min-width: 44px !important;
 border-radius: 12px !important;
 background: linear-gradient(135deg, #1d0c2e, #2a1045) !important;
 border: 1px solid var(--border-hard) !important;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
 position: relative !important;
 overflow: hidden !important;
}
.punbb #pun-main > .forum .tclcon {
 flex: 1 !important;
 min-width: 0 !important;
 font-size: 14px !important;
 line-height: 1.4 !important;
}
.punbb #pun-main > .forum .tclcon > a {
 color: #fff !important;
 font-weight: 700 !important;
 text-decoration: none !important;
}
.punbb #pun-main > .forum .tclcon > a:hover { color: var(--link-hover) !important; }
/* .acchide — visually-hidden номер темы */
.punbb #pun-main > .forum .acchide {
 position: absolute !important;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}
/* .byuser + .byuser-username — автор темы */
.punbb #pun-main > .forum .byuser {
 display: inline-block;
 margin-left: 8px !important;
 font-size: 11.5px !important;
 color: var(--muted) !important;
 font-weight: 500 !important;
}
.punbb #pun-main > .forum .byuser-username {
 color: var(--link) !important;
 font-weight: 600 !important;
}

/* Аватар в .tcr через <em class="user-avatar"> */
.punbb #pun-main > .forum .user-avatar,
.punbb .user-avatar {
 display: inline-block !important;
 vertical-align: middle !important;
 position: relative;
 width: 32px;
 height: 32px;
 margin-right: 8px;
 font-style: normal !important;
}
.punbb #pun-main > .forum .user-avatar a,
.punbb .user-avatar a {
 display: block;
 width: 100%;
 height: 100%;
 border-bottom: none !important;
}
.punbb #pun-main > .forum .avatar-image,
.punbb .avatar-image {
 display: block;
 width: 32px; height: 32px;
 border-radius: 8px;
 border: 1px solid var(--border-hard);
 background-size: cover !important;
 background-position: center !important;
 background-repeat: no-repeat !important;
}
/* Индикатор онлайна поверх аватара */
.punbb .isonline {
 position: absolute;
 bottom: -2px; right: -2px;
 width: 10px; height: 10px;
 background: #22c55e;
 border: 2px solid var(--panel-2);
 border-radius: 50%;
 box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

/* .modmenu — RSS / Atom / другие ссылки под таблицей */
.punbb #pun-main > .modmenu {
 background: transparent !important;
 border: none !important;
 padding: 10px 4px !important;
 margin: 6px 0 !important;
 font-size: 12px !important;
 color: var(--muted-2) !important;
}
.punbb #pun-main > .modmenu .container {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;
 gap: 8px !important;
}
.punbb #pun-main > .modmenu a {
 color: var(--link) !important;
 text-decoration: none !important;
 padding: 4px 10px !important;
 border-radius: 9999px !important;
 border: 1px solid var(--border-soft) !important;
 background: rgba(147, 51, 234, 0.06) !important;
 font-weight: 600 !important;
 font-size: 11.5px !important;
 transition: background .2s, color .2s, border-color .2s !important;
}
.punbb #pun-main > .modmenu a:hover {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
}

/* &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   PROFILE UPLOADS — profile.php?section=uploads
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

/* Обёртка страницы профиля с формой (не viewprofile).
   #pun-profile > #profile.formal > .container содержит #profilenav + fieldset + таблицу. */
#pun-profile #profile.formal {
 background: linear-gradient(180deg,
   rgba(147, 51, 234, 0.06),
   rgba(147, 51, 234, 0.02)),
   var(--panel-2) !important;
 border: 1px solid var(--border) !important;
 border-radius: var(--radius-md) !important;
 padding: 0 !important;
 margin: 12px 0 !important;
 overflow: hidden;
}
#pun-profile #profile.formal > .container,
#pun-profile #profile10.container,
#pun-profile [id^="profile"].container {
 background: transparent !important;
 border: none !important;
 padding: 16px !important;
 display: grid !important;
 grid-template-columns: 220px 1fr !important;
 gap: 16px !important;
 align-items: start !important;
}

/* Сайдбар #profilenav — те же стили что для #pun-messages */
#pun-profile #profilenav {
 background: linear-gradient(180deg,
   rgba(147, 51, 234, 0.08),
   rgba(220, 38, 38, 0.04)) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: var(--radius-md) !important;
 padding: 14px !important;
 margin: 0 !important;
}
#pun-profile #profilenav h2 {
 position: static !important;
 width: auto !important; height: auto !important;
 overflow: visible !important;
 clip: auto !important;
 padding: 4px 6px 8px !important;
 margin: 0 0 6px !important;
 font-size: 10.5px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.08em !important;
 border-bottom: 1px dashed var(--border-soft) !important;
 background: transparent !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
}
#pun-profile #profilenav h2::before {
 content: '';
 width: 3px; height: 12px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}
#pun-profile #profilenav h2 > span {
 color: inherit !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
#pun-profile #profilenav ul {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 2px !important;
}
#pun-profile #profilenav li {
 margin: 0 !important;
 padding: 0 !important;
 list-style: none !important;
 background: transparent !important;
}
#pun-profile #profilenav li a {
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 7px 12px !important;
 border-radius: 8px !important;
 font-size: 12.5px !important;
 font-weight: 600 !important;
 color: var(--link) !important;
 background: transparent !important;
 border: 1px solid transparent !important;
 text-decoration: none !important;
 transition: background .15s, color .15s, border-color .15s !important;
 line-height: 1.3;
}
#pun-profile #profilenav li a:hover {
 background: rgba(147, 51, 234, 0.14) !important;
 color: #fff !important;
}
#pun-profile #profilenav li.isactive a,
#pun-profile #profilenav li.view a {
 background: var(--grad-accent) !important;
 color: #fff !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
 box-shadow: 0 0 12px rgba(225, 29, 72, 0.35) !important;
}

/* Правая часть — fieldset + .select-file + .adfs-box */
#pun-profile #profile.formal fieldset {
 background: transparent !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 10px !important;
 padding: 0 !important;
 margin: 0 0 14px !important;
}
#pun-profile #profile.formal fieldset > legend {
 display: block !important;
 float: none !important;
 width: 100% !important;
 padding: 10px 14px !important;
 margin: 0 !important;
 font-size: 12px !important;
 font-weight: 700 !important;
 color: #fff !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
 border-bottom: 1px solid var(--border-soft) !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border-radius: 10px 10px 0 0 !important;
}
#pun-profile #profile.formal fieldset > legend > span {
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 color: #fff !important;
 background: transparent !important;
 padding: 0 !important;
 -webkit-text-fill-color: currentColor !important;
}
#pun-profile #profile.formal fieldset > legend > span::before {
 content: '';
 display: inline-block;
 width: 3px; height: 12px;
 border-radius: 2px;
 background: var(--grad-bar);
 flex-shrink: 0;
}
#pun-profile #profile.formal fieldset .fs-box {
 padding: 12px 14px !important;
 background: transparent !important;
}

/* .adinfofield внутри uploads — info-плашки */
#pun-profile .adinfofield {
 padding: 10px 12px !important;
 margin: 0 0 8px !important;
 background: rgba(147, 51, 234, 0.06) !important;
 border: 1px dashed var(--border-soft) !important;
 border-radius: 8px !important;
 font-size: 12.5px !important;
 color: var(--muted) !important;
 line-height: 1.5;
}
#pun-profile .adinfofield a.vip,
#pun-profile a.vip {
 display: inline-flex;
 align-items: center;
 padding: 2px 10px;
 background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
 color: #1a0800 !important;
 font-weight: 800 !important;
 font-size: 10.5px !important;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 border-radius: 9999px;
 text-decoration: none !important;
 margin-left: 6px;
 box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
#pun-profile .adinfofield a.vip:hover {
 box-shadow: 0 0 14px rgba(251, 191, 36, 0.7);
}

/* Список типов файлов */
#pun-profile #profile.formal fieldset ul {
 margin: 6px 0 0 !important;
 padding: 0 !important;
 list-style: none !important;
}
#pun-profile #profile.formal fieldset ul li {
 position: relative;
 padding: 4px 10px 4px 24px !important;
 margin: 3px 0 !important;
 font-size: 12.5px !important;
 color: var(--text) !important;
 background: rgba(147, 51, 234, 0.04) !important;
 border: 1px solid var(--border-soft) !important;
 border-radius: 6px !important;
 list-style: none !important;
}
#pun-profile #profile.formal fieldset ul li::before {
 content: '';
 position: absolute;
 left: 10px; top: 50%;
 transform: translateY(-50%);
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--grad-accent);
}

/* .select-file — блок кнопки загрузки */
#pun-profile .select-file {
 padding: 14px !important;
 margin: 0 0 14px !important;
 background: rgba(147, 51, 234, 0.04) !important;
 border: 2px dashed var(--border-hard) !important;
 border-radius: 12px !important;
 text-align: center;
 transition: background .15s, border-color .15s !important;
}
#pun-profile .select-file:hover {
 background: rgba(147, 51, 234, 0.08) !important;
 border-color: rgba(244, 114, 182, 0.5) !important;
}
#pun-profile #file_upload input[type="file"] {
 display: none;
}
#pun-profile #file_upload_button {
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 12px 28px !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 color: #fff !important;
 background: var(--grad-accent) !important;
 border: 1px solid rgba(244, 114, 182, 0.5) !important;
 border-radius: 9999px !important;
 cursor: pointer !important;
 box-shadow: 0 0 14px rgba(225, 29, 72, 0.35) !important;
 transition: transform .15s, box-shadow .15s !important;
}
#pun-profile #file_upload_button:hover {
 transform: translateY(-1px);
 box-shadow: 0 0 22px rgba(225, 29, 72, 0.55) !important;
}
#pun-profile #file_upload_button::before {
 content: '';
 width: 16px; height: 16px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 4l6 6h-4v6h-4v-6H6zm-6 14h12v2H6z'/></svg>") center/contain no-repeat;
         mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 4l6 6h-4v6h-4v-6H6zm-6 14h12v2H6z'/></svg>") center/contain no-repeat;
}
#pun-profile #fileQueue,
#pun-profile #file {
 margin-top: 10px;
 font-size: 12px;
 color: var(--muted-2);
}

/* Таблица файлов #filetable */
#pun-profile #filetable {
 width: 100% !important;
 border-collapse: collapse !important;
 background: transparent !important;
 margin: 8px 0 !important;
}
#pun-profile #filetable thead th {
 background: rgba(147, 51, 234, 0.10) !important;
 border: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 padding: 10px 12px !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 color: var(--muted-2) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.05em !important;
 text-align: left !important;
}
#pun-profile #filetable thead th.checker {
 text-align: center !important;
 width: 36px !important;
}
#pun-profile #filetable thead th input[type="checkbox"] {
 margin: 0 auto !important;
 display: block;
}
#pun-profile #filetable tbody:empty::after {
 content: 'У вас нет загруженных файлов';
 display: block;
 padding: 30px !important;
 text-align: center;
 color: var(--muted-2);
 font-size: 13px;
 font-style: italic;
}
#pun-profile #filetable tbody tr {
 transition: background .2s !important;
}
#pun-profile #filetable tbody tr:hover {
 background: rgba(168, 85, 247, 0.06) !important;
}
#pun-profile #filetable tbody td {
 padding: 10px 12px !important;
 border: none !important;
 border-bottom: 1px solid rgba(40, 18, 54, 0.5) !important;
 color: var(--text) !important;
 font-size: 13px !important;
}
#pun-profile #filetable input[type="checkbox"] {
 accent-color: var(--accent-purple-2);
 width: 16px; height: 16px;
 cursor: pointer;
}

/* Панель submit-кнопок под таблицей */
#pun-profile p.submitend {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 flex-wrap: wrap !important;
 padding: 12px 14px !important;
 margin: 10px 0 0 !important;
 background: rgba(0, 0, 0, 0.15) !important;
 border-top: 1px solid var(--border-soft) !important;
 border-radius: 0 0 10px 10px !important;
 justify-content: flex-end;
}
#pun-profile #uploaded-count-block {
 margin-right: auto !important;
 font-size: 12px !important;
 color: var(--muted) !important;
}
#pun-profile #uploaded-count-block strong {
 color: #fff !important;
 font-weight: 800 !important;
}
#pun-profile #update_comments,
#pun-profile #del_file {
 padding: 8px 18px !important;
 font-size: 12.5px !important;
}
#pun-profile #del_file {
 background: linear-gradient(135deg, #dc2626, #db2777) !important;
 border-color: rgba(248, 113, 113, 0.5) !important;
 box-shadow: 0 0 12px rgba(220, 38, 38, 0.30) !important;
}
#pun-profile #del_file:hover {
 box-shadow: 0 0 18px rgba(220, 38, 38, 0.55) !important;
}

/* Responsive для профиля uploads */
@media (max-width: 900px) {
 #pun-profile #profile.formal > .container,
 #pun-profile #profile10.container,
 #pun-profile [id^="profile"].container {
   grid-template-columns: 1fr !important;
 }
 #pun-profile #profilenav ul {
   flex-direction: row !important;
   flex-wrap: wrap !important;
 }
 #pun-profile #profilenav li a {
   padding: 6px 12px !important;
   font-size: 11.5px !important;
 }
}

/* Мобильные */
@media (max-width: 640px) {
 .awe-editor-content { min-height: 120px; padding: 12px; font-size: 13.5px; }
 .awe-editor-toolbar { padding: 3px; }
 .awe-editor-toolbar button { min-width: 26px !important; height: 26px !important; font-size: 12px !important; }
 .awe-editor-emoji-picker { grid-template-columns: repeat(6, 1fr); max-width: 260px; }
 .awe-editor-emoji-picker button { width: 28px !important; height: 28px !important; font-size: 18px !important; }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   59. LIVING COSMIC BACKGROUND — анимированный звёздный фон
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Дополняет ambient orbs (body::before / ::after) многослойным
   параллаксным полем звёзд + редкими падающими звёздами.
   Всё через CSS-only анимации, GPU-ускорено.
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

/* Обёртка звёзд — фиксированный слой позади всего контента */
#pun_wrap::before,
#pun_wrap::after {
 content: '';
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
}
/* Слой 1 — мелкие звёзды, быстрое движение */
#pun_wrap::before {
 background-image:
   radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent),
   radial-gradient(1px 1px at 60% 70%, rgba(244,114,182,0.6), transparent),
   radial-gradient(1px 1px at 80% 10%, rgba(192,132,252,0.7), transparent),
   radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.5), transparent),
   radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,0.6), transparent),
   radial-gradient(1px 1px at 90% 45%, rgba(192,132,252,0.5), transparent);
 background-size: 300px 300px;
 background-repeat: repeat;
 animation: stars-drift-a 120s linear infinite;
 opacity: 0.6;
}
/* Слой 2 — крупные звёзды, медленное движение (парallax) */
#pun_wrap::after {
 background-image:
   radial-gradient(2px 2px at 10% 20%, rgba(244,114,182,0.9), transparent 60%),
   radial-gradient(1.5px 1.5px at 70% 80%, rgba(255,255,255,0.9), transparent 60%),
   radial-gradient(2px 2px at 45% 55%, rgba(192,132,252,0.8), transparent 60%),
   radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,0.7), transparent 60%);
 background-size: 500px 500px;
 background-repeat: repeat;
 animation: stars-drift-b 200s linear infinite;
 opacity: 0.5;
}
@keyframes stars-drift-a {
 from { background-position: 0 0; }
 to   { background-position: -300px 300px; }
}
@keyframes stars-drift-b {
 from { background-position: 0 0; }
 to   { background-position: 500px -500px; }
}

/* Респект prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
 #pun_wrap::before,
 #pun_wrap::after { animation: none; }
}

/* &#9472;&#9472; Падающие звёзды (shooting stars) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
/* Три звезды с разными задержками, летят по диагонали */
body > .shooting-star,
.shooting-star {
 position: fixed;
 top: 0;
 left: 0;
 width: 100px;
 height: 1px;
 background: linear-gradient(90deg,
   transparent 0%,
   rgba(255,255,255,0.9) 30%,
   rgba(244,114,182,1) 70%,
   transparent 100%);
 z-index: 0;
 pointer-events: none;
 opacity: 0;
 transform: rotate(215deg);
 filter: drop-shadow(0 0 6px rgba(244,114,182,0.9));
 animation: shooting-star 8s linear infinite;
}
/* Активируется автоматически через ::before на body */
body::before {
 /* Уже используется для orbа — оставляем как есть */
}
/* Дополнительный контейнер падающих звёзд через глобальный overlay */
html::after {
 content: '';
 position: fixed;
 top: -10%; left: -10%;
 width: 120%; height: 120%;
 pointer-events: none;
 z-index: 0;
 background-image:
   linear-gradient(215deg,
     transparent 0%,
     transparent calc(30% - 2px),
     rgba(255,255,255,0.9) calc(30% - 1px),
     rgba(244,114,182,1) 30%,
     rgba(147,51,234,0.8) calc(30% + 1px),
     transparent calc(30% + 2px),
     transparent 100%);
 background-size: 150px 3px;
 background-repeat: no-repeat;
 background-position: 100% 100%;
 opacity: 0;
 animation: shooting-star-loop 15s linear infinite;
 filter: drop-shadow(0 0 4px rgba(244,114,182,0.7));
}
@keyframes shooting-star-loop {
 0%   { background-position: 110% -10%; opacity: 0; }
 5%   { opacity: 0.9; }
 15%  { background-position: -10% 110%; opacity: 0; }
 100% { background-position: -10% 110%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
 html::after { animation: none; opacity: 0; }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   60. GROUP BORDER STRIPS — цветные полоски по группам
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Уже есть подсветка рамок в секции 45, но здесь — тонкая
   акцентная левая полоска, которая расширяется при hover.
   MyBB.ru обычно ставит .gid1 / .gid2 на #pun (для текущего юзера),
   а на постах может быть класс .group1..N или .gr1..N.
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.punbb .post {
 position: relative;
}
.punbb .post::after {
 content: '';
 position: absolute;
 top: 0; left: 0; bottom: 0;
 width: 3px;
 background: rgba(192, 132, 252, 0.45); /* дефолт — фиолетовый */
 border-radius: var(--radius-md) 0 0 var(--radius-md);
 transition: width .25s ease, box-shadow .25s ease;
 pointer-events: none;
 z-index: 2;
}
.punbb .post:hover::after {
 width: 6px;
 box-shadow: 0 0 14px currentColor;
}

/* Группа 1 — Администраторы (розово-красный) */
.punbb .post.group1::after,
.punbb .post[class*="group-1"]::after,
.punbb .post.gr1::after,
.punbb .post.gid1::after {
 background: linear-gradient(180deg, #ef4444, #db2777);
 color: rgba(239, 68, 68, 0.8);
}
/* Группа 2 — Гости (серый) */
.punbb .post.group2::after,
.punbb .post.gr2::after {
 background: rgba(148, 163, 184, 0.5);
 color: rgba(148, 163, 184, 0.6);
}
/* Группа 3 — Участники (фиолетовый, дефолт) */
.punbb .post.group3::after,
.punbb .post.gr3::after {
 background: linear-gradient(180deg, #c084fc, #9333ea);
 color: rgba(192, 132, 252, 0.8);
}
/* Группа 4 — Модераторы (зелёный) */
.punbb .post.group4::after,
.punbb .post.gr4::after {
 background: linear-gradient(180deg, #4ade80, #22c55e);
 color: rgba(134, 239, 172, 0.8);
}
/* Группа 5 — VIP / Премиум (золотой) */
.punbb .post.group5::after,
.punbb .post.gr5::after {
 background: linear-gradient(180deg, #fde047, #f59e0b);
 color: rgba(253, 224, 71, 0.8);
}
/* Группа 6+ — цикл через 3 разных цвета */
.punbb .post.group6::after,
.punbb .post.gr6::after {
 background: linear-gradient(180deg, #38bdf8, #0284c7);
 color: rgba(56, 189, 248, 0.8);
}
.punbb .post.group7::after,
.punbb .post.gr7::after {
 background: linear-gradient(180deg, #fb923c, #ea580c);
 color: rgba(251, 146, 60, 0.8);
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   61. TEXT SELECTION QUOTE BUTTON — "Цитировать выделенное"
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Стили для JS-виджета (см. discord-editor.js расширение или
   отдельный скрипт quote-selection.js).
   Появляется при выделении текста внутри .post-content.
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.awe-quote-button {
 position: absolute;
 z-index: 90;
 display: none;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 background: linear-gradient(135deg,
   rgba(17, 7, 28, 0.97),
   rgba(29, 12, 46, 0.97));
 border: 1px solid rgba(244, 114, 182, 0.4);
 border-radius: 9999px;
 box-shadow:
   0 6px 20px rgba(0, 0, 0, 0.5),
   0 0 16px rgba(147, 51, 234, 0.25);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 cursor: pointer;
 font-size: 12px;
 font-weight: 600;
 color: #fff;
 opacity: 0;
 transform: translateY(4px);
 transition: opacity .15s, transform .15s, box-shadow .15s;
}
.awe-quote-button.is-visible {
 display: inline-flex;
 opacity: 1;
 transform: translateY(0);
}
.awe-quote-button:hover {
 box-shadow:
   0 8px 24px rgba(0, 0, 0, 0.6),
   0 0 24px rgba(244, 114, 182, 0.5);
}
.awe-quote-button::before {
 content: '';
 width: 14px; height: 14px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/></svg>") center/contain no-repeat;
         mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/></svg>") center/contain no-repeat;
}
.awe-quote-button::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 50%;
 transform: translateX(-50%) rotate(45deg);
 width: 8px; height: 8px;
 background: linear-gradient(135deg,
   rgba(17, 7, 28, 0.97),
   rgba(29, 12, 46, 0.97));
 border-right: 1px solid rgba(244, 114, 182, 0.4);
 border-bottom: 1px solid rgba(244, 114, 182, 0.4);
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   62. TYPEWRITER — эффект печатной машинки для info-плашек
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Стили для JS-виджета (см. system-notify.js).
   Применяется к .awe-typewriter элементам.
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.awe-typewriter {
 position: relative;
 display: inline;
 white-space: pre-wrap;
}
.awe-typewriter::after {
 content: '';
 display: inline-block;
 width: 2px;
 height: 1em;
 background: currentColor;
 vertical-align: text-bottom;
 margin-left: 1px;
 animation: awe-caret-blink 0.8s steps(2) infinite;
}
.awe-typewriter.is-done::after { animation: none; opacity: 0; }
@keyframes awe-caret-blink {
 0%   { opacity: 1; }
 50%  { opacity: 0; }
 100% { opacity: 1; }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   63. MINI TOC — мини-навигация длинной темы
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Стили для JS-виджета (см. mini-toc.js).
   Появляется справа снизу при >10 постах.
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.awe-mini-toc {
 position: fixed;
 right: 20px;
 bottom: 80px;
 z-index: 25;
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 10px 6px;
 background: linear-gradient(180deg,
   rgba(17, 7, 28, 0.85),
   rgba(29, 12, 46, 0.85));
 border: 1px solid rgba(244, 114, 182, 0.25);
 border-radius: 14px;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 max-height: calc(100vh - 200px);
 overflow-y: auto;
 scrollbar-width: thin;
 opacity: 0;
 transform: translateX(10px);
 transition: opacity .3s, transform .3s;
 pointer-events: none;
}
.awe-mini-toc.is-visible {
 opacity: 1;
 transform: translateX(0);
 pointer-events: auto;
}
.awe-mini-toc-title {
 font-size: 9px;
 font-weight: 700;
 color: var(--muted-2);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 text-align: center;
 padding: 2px 6px 6px;
 border-bottom: 1px dashed var(--border-soft);
 margin-bottom: 4px;
}
.awe-mini-toc-dot {
 display: block;
 width: 24px;
 height: 6px;
 border-radius: 3px;
 background: rgba(147, 51, 234, 0.25);
 border: none;
 cursor: pointer;
 padding: 0;
 transition: background .15s, transform .15s, width .15s;
}
.awe-mini-toc-dot:hover {
 background: rgba(192, 132, 252, 0.6);
 width: 28px;
}
.awe-mini-toc-dot.is-active {
 background: var(--grad-accent);
 width: 32px;
 box-shadow: 0 0 8px rgba(225, 29, 72, 0.5);
}
.awe-mini-toc-dot.is-read {
 background: rgba(147, 51, 234, 0.15);
}
.awe-mini-toc::-webkit-scrollbar { width: 4px; }
.awe-mini-toc::-webkit-scrollbar-thumb {
 background: var(--border-hard);
 border-radius: 2px;
}
@media (max-width: 900px) {
 .awe-mini-toc { display: none !important; }
}

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   64. SEARCH AUTOCOMPLETE — умный поиск с подсказками
   &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   Стили для JS-виджета (см. search-autocomplete.js).
   Popover под инпутом поиска с результатами.
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

.awe-search-wrap {
 position: relative;
}
.awe-search-dropdown {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 right: 0;
 min-width: 300px;
 max-width: 500px;
 max-height: 400px;
 overflow-y: auto;
 z-index: 50;
 background: linear-gradient(180deg,
   rgba(17, 7, 28, 0.97),
   rgba(29, 12, 46, 0.97));
 border: 1px solid rgba(244, 114, 182, 0.35);
 border-radius: 12px;
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 box-shadow:
   0 10px 40px rgba(0, 0, 0, 0.6),
   0 0 30px rgba(147, 51, 234, 0.15);
 padding: 8px 6px;
 display: none;
 scrollbar-width: thin;
}
.awe-search-dropdown.is-visible { display: block; }
.awe-search-dropdown::-webkit-scrollbar { width: 6px; }
.awe-search-dropdown::-webkit-scrollbar-thumb {
 background: var(--border-hard);
 border-radius: 3px;
}
.awe-search-group {
 padding: 6px 8px 2px;
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--muted-2);
 border-bottom: 1px dashed var(--border-soft);
 margin-bottom: 4px;
}
.awe-search-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 8px 10px;
 border-radius: 8px;
 cursor: pointer;
 text-decoration: none !important;
 color: var(--text) !important;
 transition: background .12s, color .12s;
}
.awe-search-item:hover,
.awe-search-item.is-selected {
 background: rgba(147, 51, 234, 0.16);
 color: #fff !important;
}
.awe-search-item-icon {
 flex-shrink: 0;
 width: 28px; height: 28px;
 border-radius: 8px;
 background: var(--grad-accent);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
}
.awe-search-item-icon img,
.awe-search-item-icon .avatar-image {
 width: 100%; height: 100%;
 border-radius: 8px;
 object-fit: cover;
 background-size: cover;
 background-position: center;
}
.awe-search-item-body {
 flex: 1;
 min-width: 0;
}
.awe-search-item-title {
 display: block;
 font-size: 13px;
 font-weight: 600;
 color: inherit;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.awe-search-item-meta {
 display: block;
 font-size: 11px;
 color: var(--muted-2);
 margin-top: 1px;
}
.awe-search-item mark {
 background: rgba(244, 114, 182, 0.25);
 color: #fff;
 padding: 0 2px;
 border-radius: 2px;
}
.awe-search-empty {
 padding: 20px;
 text-align: center;
 color: var(--muted-2);
 font-size: 12px;
 font-style: italic;
}
.awe-search-loading {
 padding: 20px;
 text-align: center;
 color: var(--muted-2);
 font-size: 12px;
}
.awe-search-loading::before {
 content: '';
 display: inline-block;
 width: 12px; height: 12px;
 border: 2px solid var(--border-hard);
 border-top-color: var(--link-hover);
 border-radius: 50%;
 vertical-align: middle;
 margin-right: 6px;
 animation: awe-spin 0.8s linear infinite;
}
@keyframes awe-spin {
 to { transform: rotate(360deg); }
}

/* &#9472;&#9472; 16. Responsive &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

/* &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;
   RESPONSIVE (консолидировано)
   &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; */

@media (max-width: 1240px) {
#pun { max-width: calc(100% - 24px); }
}

@media (max-width: 900px) {
#pun-admin_index #pun-admain {
 grid-template-columns: 1fr !important;
 }
 .punbb-admin #pun-adnav, .punbb-admin #pun-adnav {
 position: static !important;
 max-height: none !important;
 overflow: visible !important;
 }
 .punbb-admin #pun-adnav ul {
 flex-direction: row !important;
 flex-wrap: wrap !important;
 gap: 4px !important;
 }
 .punbb-admin #pun-adnav ul.adsubnav {
 flex-direction: column !important;
 width: 100%;
 margin-left: 4px !important;
 }
 .punbb-admin #pun-adnav ul li > a {
 padding: 6px 10px !important;
 font-size: 11.5px !important;
 }

  /* &#9472;&#9472; batch — */
.punbb-admin form.adcontainer,
 .punbb-admin [id^="pun-admain"] > .adcontainer {
 padding: 12px !important;
 }
 .punbb-admin .sortable > p {
 flex-direction: column !important;
 align-items: stretch !important;
 gap: 6px !important;
 }
 .punbb-admin .sortable > p > .adlabel,
 .punbb-admin .sortable > p > .adinput {
 min-width: 0 !important;
 width: 100% !important;
 }
 .punbb-admin p.adsubmitfield {
 padding: 10px !important;
 }

  /* &#9472;&#9472; batch — */
.punbb-admin .adinput.astable {
 flex-direction: column !important;
 align-items: stretch !important;
 }
 .punbb-admin .adinput.astable > label {
 width: 100%;
 }
 #pun-admin_groups .adfs-box > p {
 flex-direction: column !important;
 align-items: stretch !important;
 }
 #pun-admin_groups .adfs-box > p > .adlabel {
 order: 2;
 margin: 0 !important;
 }
 #pun-admin_ranks .adfs-box > p {
 flex-direction: column !important;
 align-items: stretch !important;
 }

  /* &#9472;&#9472; batch — */
#pun { max-width: calc(100% - 20px); padding: 0 16px 16px !important; }
 :root { --header-height: 400px; }
 #pun-title::before {
 width: calc(100% + 32px);
 margin: 0 -16px -80px;
 }

 .punbb .category thead th.tcr,
 .punbb td.tcr { width: 160px !important; font-size: 11px !important; }

 .punbb .post > .container { grid-template-columns: 170px 1fr !important; }
 .punbb .post-body { padding: 14px 16px !important; }
 .punbb .post-author { padding: 14px 10px !important; --avatar-size: 100px; }
 .punbb .post-author .pa-author { font-size: 14px !important; }

 #pun-profile #profile-left { width: 200px !important; padding: 18px 14px !important; }
 #pun-profile #profile-right { padding: 18px 18px !important; }
 #pun-profile #profile-right > li > span { min-width: 150px; }
}

@media (max-width: 768px) {
#pun-messages #profile.messages-container > .container {
 grid-template-columns: 1fr !important;
 gap: 12px !important;
 }
 #pun-messages #profilenav ul {
 flex-direction: row !important;
 flex-wrap: wrap !important;
 }
 #pun-messages #profilenav li a {
 padding: 6px 12px !important;
 font-size: 11.5px !important;
 }

 #pun-messages form#messages th.tc2:not(.pmtc24),
 #pun-messages form#messages th.tc3,
 #pun-messages form#messages td.tc2:not(.pmtc24),
 #pun-messages form#messages td.tc3 {
 display: none !important;
 }
}

@media (max-width: 640px) {
.to-top { width: 40px; height: 40px; right: 14px; bottom: 14px; }

  /* &#9472;&#9472; batch — */
#pun {
 margin: 10px !important;
 padding: 0 12px 12px !important;
 border-radius: var(--radius-md) !important;
 }
 :root { --header-height: 240px; --header-radius: 12px; }
 #pun-title { padding: 0 0 14px; }
 #pun-title::before {
 width: calc(100% + 24px);
 margin: 0 -12px -50px;
 border-radius: var(--radius-md) var(--radius-md) 0 0;
 }
 #pun-title h1,
 #title-logo-tdl h1 {
 font-size: 22px !important;
 padding: 8px 20px !important;
 }

 .punbb .category thead th.tc2,
 .punbb .category thead th.tc3,
 .punbb .category thead th.tcr,
 .punbb td.tc2,
 .punbb td.tc3,
 .punbb td.tcr { display: none !important; }

 #pun-navlinks ul.container { gap: 5px !important; }
 #pun-navlinks .container a {
 padding: 6px 12px !important;
 font-size: 12px !important;
 }

 #pun-stats ul.container {
 flex-direction: column !important;
 gap: 8px !important;
 }
 #pun-stats ul.container > li { flex-basis: auto; min-width: 0; }

 .punbb .post > .container {
 grid-template-columns: 1fr !important;
 }
 .punbb .post-author {
 border-right: none !important;
 border-bottom: 1px solid var(--border-soft) !important;
 padding: 12px 14px !important;
 }
 .punbb .post-author ul {
 flex-direction: row !important;
 flex-wrap: wrap !important;
 align-items: center !important;
 gap: 6px 12px !important;
 }
 .punbb .post-author .pa-avatar { display: none !important; }
 .punbb .post-author .pa-author { font-size: 14px !important; }
 .punbb .post-author .pa-reg,
 .punbb .post-author .pa-invites,
 .punbb .post-author .pa-respect,
 .punbb .post-author .pa-positive,
 .punbb .post-author .pa-time-visit { display: none !important; }
 .punbb .post-body { padding: 12px 14px !important; }

 .punbb .post > h3 { padding: 8px 12px !important; }
 .punbb .post > h3 .translatelink,
 .punbb .post > h3 .sharelink { display: none !important; }

 #pun-profile #viewprofile table,
 #pun-profile #viewprofile tbody,
 #pun-profile #viewprofile tr { display: block !important; width: 100% !important; }
 #pun-profile #profile-left,
 #pun-profile #profile-right {
 display: block !important;
 width: 100% !important;
 border-right: none !important;
 padding: 16px 14px !important;
 }
 #pun-profile #profile-left {
 border-bottom: 1px solid var(--border-soft) !important;
 }
 #pun-profile #pa-avatar img,
 #pun-profile #viewprofile-next.no-avatar #pa-avatar strong { max-width: 140px; }
 #pun-profile #viewprofile-next.no-avatar #pa-avatar strong { width: 140px; height: 140px; }
 #pun-profile #profile-name strong { font-size: 20px !important; }
 #pun-profile #profile-right > li > span { min-width: 130px; font-size: 10.5px !important; }
 #pun-profile #profile-right > li > strong { font-size: 12.5px !important; }

 #pun-profile #profilenav ul { gap: 4px !important; }
 #pun-profile #profilenav a { padding: 5px 10px; font-size: 11px !important; }

 .punbb .formal fieldset { padding: 12px 14px !important; }
 .punbb .formsubmit,
 .punbb .submitend { padding: 12px 14px !important; }
}

