/* ============================================================
   ПОДКЛЮЧЕНИЕ СТОРОННИХ СТИЛЕЙ
   ============================================================ */
@import url(style_cs.1782437490.css);

/* ============================================================
   ПОДКЛЮЧЕНИЕ ШРИФТОВ
   ============================================================ */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('https://forumstatic.ru/files/001c/aa/2d/13348.ttf') format('truetype');
}

@font-face {
    font-family: 'AATriple';
    font-style: normal;
    font-weight: 400;
    src: url('https://forumstatic.ru/files/001c/aa/2d/64675.otf');
}

@font-face {
    font-family: 'Hooskai';
    font-style: normal;
    font-weight: 400;
    src: url('https://forumstatic.ru/files/001c/aa/2d/66590.ttf');
}

@font-face {
    font-family: 'Bosskids';
    font-style: normal;
    font-weight: 400;
    src: url('https://forumstatic.ru/files/001c/aa/2d/81895.otf');
}

@font-face {
    font-family: 'Brand';
    font-style: normal;
    font-weight: 400;
    src: url('https://forumstatic.ru/files/001c/aa/2d/77807.otf');
}

@font-face {
    font-family: 'gasrux';
    font-style: normal;
    font-weight: 400;
    src: url('https://forumstatic.ru/files/001c/aa/2d/59266.otf');
}

/* ============================================================
   ПЕРЕМЕННЫЕ (СВЕТЛАЯ ТЕМА / БАЗОВЫЙ ДИЗАЙН)
   ============================================================ */
:root {
    /* Цветовая палитра */
    --bg-color: #15181c;
    --bg-color2: #73827f;
    --bg-color3: #abbcba;
    --bg-quote: #d3deda;
    --bg-menu: #2b3739;
    --border-color: #0f1618;
    --border2: #c5d4d3;
    --dec-text: #839391;
    --text: #0f1618;
    --link: #203939;
    --a-link: #c4c4c4;
    --bg-color2-rgb: 115, 130, 127;
    
    /* Изображения */
    --image-bg: url(https://forumstatic.ru/files/001c/aa/2d/31370.png);
    --image-bg2: url();
    
    /* Шрифты */
    --base-font: 'Brand', Arial, Verdana, sans-serif;
    --dec-font: 'Hooskai';
    --dec-font2: 'gasrux';
    --dec-symbol: 'Material Symbols Outlined';
    
    /* Меню */
    --menu-width: 300px;
    --menu-trigger-size: 50px;
    --transition-speed: 0.3s;
}

/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */
body.dark-theme {
    --bg-color: #15181c;
    --bg-color2: #3a4c4f;
    --bg-color3: #475b5f;
    --bg-quote: #394d4d;
    --bg-menu: #2b3739;
    --border-color: #0f1618;
    --border2: #c5d4d3;
    --dec-text: #839391;
    --text: #b4c3c2;
    --link: #7f9f97;
    --a-link: #c4c4c4;
    --bg-color2-rgb: 58, 76, 79;
}

/* ============================================================
   ДИЗАЙН CYBER
   ============================================================ */
body.design-cyber {
    --bg-color: #081d3a;
    --bg-color2: #a7b7d6;
    --bg-color3: #d7e1f1;
    --bg-quote: #e7ebf2;
    --bg-menu: #202451;
    --border-color: #152a4d;
    --border2: #c2c8d6;
    --dec-text: #e7ebf2;
    --text: #333a48;
    --link: #091d40;
    --a-link: #393f4b;
    --bg-color2-rgb: 167, 183, 214;
    --image-bg: url(https://forumstatic.ru/files/001c/aa/2d/80167.png);
}

body.design-cyber.dark-theme {
    --bg-color: #081d3a;
    --bg-color2: #263249;
    --bg-color3: #33425b;
    --bg-quote: #e7ebf2;
    --bg-menu: #202451;
    --border-color: #07142b;
    --border2: #52596b;
    --dec-text: #e7ebf2;
    --text: #8c99b5;
    --link: #99a3b3;
    --a-link: #5a6a89;
    --bg-color2-rgb: 38, 50, 73;
}

/* ============================================================
   ДИЗАЙН HYBRID
   ============================================================ */
body.design-hybrid {
    --bg-color: #1f1512;
    --bg-color2: #c47b6b;
    --bg-color3: #e8c5b8;
    --bg-quote: #f2dfd6;
    --bg-menu: #3d221a;
    --border-color: #2a1814;
    --border2: #d4b5a7;
    --dec-text: #c9a394;
    --text: #2a1814;
    --link: #4a2c24;
    --a-link: #b8a090;
    --bg-color2-rgb: 144, 192, 144;
    --image-bg: url(https://forumstatic.ru/files/001c/aa/2d/41596.png);
}

body.design-hybrid.dark-theme {
    --bg-color: #1f1512;
    --bg-color2: #5c3a30;
    --bg-color3: #3d2a24;
    --bg-quote: #e8c5b8;
    --bg-menu: #2a1814;
    --border-color: #1a0f0c;
    --border2: #8c6b5e;
    --dec-text: #c9a394;
    --text: #d4b5a7;
    --link: #c9a394;
    --a-link: #8c6b5e;
    --bg-color2-rgb: 42, 74, 42;
}

/* ============================================================
   БАЗОВЫЕ СТИЛИ
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    border: none;
    text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-menu) var(--border-color);
}

html {
    scroll-behavior: smooth;
}

a,
.punbb #pun-admain a {
    text-decoration: none;
    color: var(--link);
    transition: all .2s linear 0s;
    cursor: pointer;
}

a:hover,
.punbb #pun-admain a:hover {
    color: var(--a-link);
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre {
    margin: 0;
}

h1, h2 {
    padding: 10px 20px;
    font-weight: normal;
    text-align: center;
}

ul, dl, li, dd, dt {
    list-style: none;
}

address, em {
    font-style: normal;
}

::selection {
    background: var(--bg-color);
    color: var(--bg-color3);
}

:focus {
    outline: none;
}

/* ----- Статус ----- */
#pun-status {
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 12px;
    color: var(--link);
    text-transform: lowercase;
}

#pun-status span {
    white-space: nowrap;
    margin-right: 5px;
}

/* ----- Хлебные крошки ----- */
.crumbs.container {
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 12px;
    color: var(--link);
    text-transform: lowercase;
}

/* ============================================================
   ГЛАВНАЯ
   ============================================================ */

body {
    background-color: var(--bg-color);
    background-image: var(--image-bg);
    background-position: center top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
}

#pun {
    margin: 20px auto 30px;
    width: 1000px;
    max-width: 100%;
    background-color: var(--bg-color2);
    background-image: var(--image-bg2);
    border-radius: 25px;
}

#pun-title,
#pun-main > h1,
#pun-index thead,
#pun-index .tc2,
#pun-index .tc3 {
    display: none !important;
}

.punbb {
    font: 12px Arial, Verdana;
}

.punbb > div .container {
    padding: 10px 30px;
}

/* ----- Меню навигации ----- */
#pun-navlinks {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: linear-gradient(to right, var(--border-color) 0%, var(--bg-color) 100%);
    border-bottom: 1px solid var(--text);
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 9px 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

#pun-navlinks .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
}

#pun-navlinks ul {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-style: none;
}

#pun-navlinks li {
    margin: 0;
    display: inline-block;
}

#pun-navlinks a {
    font-family: var(--dec-font2);
    font-size: 16px;
    text-transform: lowercase;
    color: var(--dec-text);
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

#pun-navlinks a:hover {
    background: rgba(255, 255, 255, 0.1);
}

#pun-navlinks li.isactive > a {
    background: rgba(255, 255, 255, 0.05);
}

#pun-navlinks .num_msg::before,
#pun-navlinks .num_msg::after,
#pun-navlinks li .num_msg::before,
#pun-navlinks li .num_msg::after {
    display: none !important;
    content: none !important;
}
/* ----- Флажок уведомлений ----- */
#pun-navlinks .num_msg {
    display: inline-block !important;
    background: var(--bg-color2);
    color: var(--text);
    font-family: var(--base-font);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
    top: -5px; 
    vertical-align: middle;
}

#pun-navlinks .num_msg:hover {
    background: var(--border2);
    color: var(--bg-color);
}

/* ----- Пользовательские ссылки ----- */
#pun-ulinks {
    margin-top: -25px;
    padding: 8px 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#pun-ulinks .container {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0 10px;
    white-space: nowrap;
}

#pun-ulinks li,
#pun-ulinks li a {
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

#pun-ulinks li a:hover {
    opacity: 0.7;
}

/* ----- Кнопки ----- */
input.button,
#pun-admain input.button,
#sub4,
input[type="button"],
input[type="submit"] {
    border-radius: 5px;
    padding: 7px 10px;
    border: none;
    cursor: pointer;
    transition: all .2s linear 0s;
    background: var(--bg-color3);
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 8px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text);
}

input.button:hover,
#pun-admain input.button:hover,
#sub4:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background: var(--bg-color2);
    color: var(--text);
}

#pun-admain select {
    padding-right: 20px;
}

/* ============================================================
   ОСНОВНАЯ ТАБЛИЦА
   ============================================================ */

.punbb:not(#pun-index, #pun-viewtopic) #pun-main {
    position: relative;
    background: var(--bg-color3);
    border-radius: 20px;
    padding: 30px;
    width: 940px;
    box-sizing: border-box;
    margin: 10px auto;
}

.punbb:not(#pun-index, #pun-viewtopic) #pun-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 470px);
    width: 20px;
    height: 100%;
    background: var(--border-color);
    border-radius: 20px 0 0 20px;
    z-index: 2;
}

.punbb:not(#pun-index, #pun-viewtopic) #pun-main::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 470px);
    width: 940px;
    height: 20px;
    background: var(--border-color);
    border-radius: 20px 20px 0 0;
    z-index: 2;
}

.punbb #pun-main .container {
    padding: 0;
}

.punbb:not(#pun-viewtopic) #pun-main .linksb,
.punbb:not(#pun-viewtopic) #pun-main .linkst,
.punbb #pun-main #subforums {
    padding: 10px 0;
}

.main table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 3px;
    color: var(--text);
    font-family: var(--base-font);
    text-transform: lowercase;
    font-weight: 400;
    font-size: 11px;
}

.main th:not(.tcmod, .pmtc24) {
    background: var(--bg-color);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 9px;
    text-transform: lowercase;
    color: var(--dec-text);
}

.main td {
    padding: 10px;
}

.tcl { width: 50%; }
.tc2, .tc3 { text-align: center; width: 10%; }
.tcr { width: 30%; }

.tcl a { font-weight: 700; }

.punbb .tcmod {
    width: 17px;
    padding: 2px;
    text-align: center;
}

/* ----- Иконки тем ----- */
div.icon {
    position: absolute;
    margin-left: -20px;
    width: 13px;
    height: 12px;
    background: var(--border2);
    border-radius: 3px;
}

tr.inew div.icon { background: var(--bg-color); }

tr.isticky div.icon {
    background: url(https://forumstatic.ru/files/001c/aa/2d/30339.svg) no-repeat top center;
}

tr.iclosed div.icon {
    background: url(https://forumstatic.ru/files/001c/aa/2d/70213.svg) no-repeat top center;
}

/* Компенсация сдвига иконок */
tbody.hasicon td.tcl {
    padding-left: 40px;
}

/* ============================================================
   КАТЕГОРИЯ НА ГЛАВНОЙ
   ============================================================ */

#pun-index .category {
    position: relative;
    margin-bottom: 30px;
}

#pun-index .category::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 455px);
    width: 20px;
    height: 100%;
    background: var(--border-color);
    border-radius: 20px 0 0 20px;
    z-index: 2;
}

#pun-index .category::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 455px);
    width: 910px;
    height: 20px;
    background: var(--border-color);
    border-radius: 20px 20px 0 0;
    z-index: 2;
}

#pun-index .category h2 {
    display: none;
}

#pun-index .category .container {
    border: none;
    border-radius: 20px 20px 0 20px;
    padding: 25px 25px 25px 40px;
    width: 910px;
    background: var(--bg-color3);
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
}

#pun-index .category .tclcon {
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 12px;
    text-align: justify;
    color: var(--text);
    padding-left: 15px;
}

#pun-index .category tr {
    display: flex;
    width: 100%;
    gap: 50px;
}

#pun-index .category tr:not(:last-of-type) {
    margin-bottom: 20px;
}

#pun-index .category .tcl h3 {
    margin-bottom: 8px;
    font-family: var(--dec-font2);
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    gap: 10px;
    align-items: center;
    padding-left: 25px;
}

#pun-index .category .tcl h3 a {
    color: var(--text);
    font-weight: 800;
}

#pun-index .category .tcr {
    font-size: 10px;
    color: var(--text);
    text-transform: lowercase;
    width: 250px;
}

#pun-index .tcr .lastpost-link {
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    color: var(--link);
    margin-bottom: 2px;
    display: inline-block;
    width: calc(100% - 35px);
}

/* ============================================================
   СТАТИСТИКА ФОРУМА
   ============================================================ */

#pun-stats {
    position: relative;
    width: 910px;
    border-radius: 20px 20px 0 20px;
    background: var(--bg-color3);
    box-sizing: border-box;
    margin: 28px auto 0;
    text-transform: lowercase;
    border: none;
}

#pun-stats::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 455px);
    width: 20px;
    height: 100%;
    background: var(--border-color);
    border-radius: 20px 0 0 20px;
    z-index: 2;
}

#pun-stats::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 455px);
    width: 910px;
    height: 20px;
    background: var(--border-color);
    border-radius: 20px 20px 0 0;
    z-index: 2;
}

#pun-stats h2 {
    position: absolute;
    top: -9px;
    right: -10px;
    padding: 0;
    z-index: 3;
    color: var(--bg-color);
    -webkit-text-stroke: 5px var(--border2);
    paint-order: stroke fill;
}

#pun-stats h2 span {
    position: relative;
    font-size: 20px;
    font-family: var(--dec-font2);
    font-weight: 800;
    color: var(--bg-color);
}

#pun-stats .container {
    padding: 35px;
    display: grid;
    grid-template-columns: 1fr 260px;
    grid-template-rows: auto auto auto auto;
    gap: 15px 40px;
    min-height: 200px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 11px;
    color: var(--text);
    position: relative;
    list-style: none;
}

#pun-stats .container::before {
    content: "";
    width: 1px;
    height: calc(100% - 70px);
    position: absolute;
    right: 300px;
    top: 35px;
    border-left: 1px dashed var(--border-color);
}

/* Онлайн — левая колонка, сверху */
#pun-stats #onlinelist {
    grid-column: 1 / 2;
    text-align: justify;
    font-family: var(--base-font);
    font-size: 11px;
    color: var(--text);
    line-height: 1.6;
    width: auto;
    margin: 0;
}

#pun-stats .onlinelist {
    grid-row: 1 / 2;
    order: 1;
}

#pun-stats .users_24h {
    grid-row: 2 / 3;
    order: 2;
}

/* Статистика — правая колонка */
#pun-stats .container > li:not(#onlinelist) {
    grid-column: 2 / 3;
    background: var(--bg-color);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    box-sizing: border-box;
    margin: 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

#pun-stats .container > li:not(#onlinelist) span {
    font-weight: 400;
    font-size: 8px;
    color: var(--dec-text);
    text-transform: lowercase;
    order: 2;
}

#pun-stats .container > li:not(#onlinelist) strong {
    font-weight: 700;
    font-size: 12px;
    color: var(--border2);
    order: 1;
}

#pun-stats .container > li:not(#onlinelist) a {
    color: var(--border2) !important;
    font-weight: 700;
    font-size: 10px;
}

#pun-stats .container > li:not(#onlinelist) a:hover {
    color: var(--a-link) !important;
}

/* item1–item4 */
#pun-stats .item1 { grid-row: 1 / 2; order: 3; }
#pun-stats .item2 { grid-row: 2 / 3; order: 4; }
#pun-stats .item3 { grid-row: 3 / 4; order: 5; }
#pun-stats .item4 { grid-row: 4 / 5; order: 6; }

#pun-stats #onlinelist div {
    font-weight: 400;
    color: var(--text);
}

#pun-stats #onlinelist div strong {
    font-weight: 700;
    color: var(--bg-color);
}

#pun-stats #onlinelist div > a {
    font-weight: 600;
    color: var(--link);
}

#pun-stats #onlinelist div > a:hover {
    color: var(--a-link);
}

#pun-stats #onlinelist div > span {
    display: block;
    margin-top: 1px;
}

#pun-stats #onlinelist div > span a {
    font-size: 11px;
    color: var(--link);
}

/* ============================================================
   ТЕМА (ПОСТЫ)
   ============================================================ */

.punbb .post h3 {
    height: 20px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    background: linear-gradient(to right, var(--bg-menu) 30%, var(--bg-color) 100%);
    color: var(--dec-text);
    border-radius: 20px 0 0 0;
    position: relative;
    margin-left: -20px;
}

.punbb .post h3 a,
.punbb .post h3 a.permalink,
.punbb .post h3 span a {
    color: var(--dec-text) !important;
    text-transform: lowercase;
}

.punbb .post h3 strong {
    float: right;
    text-align: right;
    font-weight: normal;
    padding-left: 15px;
}

.punbb .post h3 strong:before {
    content: "№ ";
}

/* Мини-профиль */
.punbb .post .post-author {
    float: left;
    width: 220px;
    margin-left: -20px;
    position: relative;
}

.punbb .post .post-author ul {
    width: 220px;
    line-height: 140%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(180deg, var(--bg-menu) 0%, var(--bg-color2) 100%);
    color: var(--text);
    text-align: center;
}

.punbb .post .post-author ul::before {
    content: "";
    display: block;
    width: 800px;
    height: 7px;
    background: var(--bg-color3);
    position: absolute;
    top: -5px;
    left: 220px;
    border-radius: 20px 0 0 0;
    z-index: 2;
}

.pa-avatar {
    width: 100%;
    padding: 10px !important;
    text-align: center;
}

.pa-avatar img {
    max-width: 180px;
    max-height: 180px;
    border: solid 1px var(--border-color);
    padding: 5px;
    border-radius: 5px;
}

.pa-author {
    width: 100%;
    font-family: var(--dec-font2);
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 10px 0 !important;
    color: var(--border2);
}

.pa-author a { color: var(--border2) !important; }
.pa-author a:hover { color: var(--a-link) !important; }

li.pa-title {
    width: 100%;
    font-size: 12px;
    text-align: center;
    padding: 0 10px !important;
    text-transform: lowercase;
    font-family: var(--dec-font2);
    color: var(--text);
}

/* Тело поста */
.punbb .post .container {
    margin: 0 0 20px 0 !important;
    padding: 0 20px 10px 20px;
    background: var(--bg-color3);
    box-sizing: border-box;
    border-radius: 0;
}

.punbb .post-body {
    margin-left: 220px;
    padding: 0 0 1px 0;
}

.punbb .post-content {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    text-align: justify;
    color: var(--text);
    font-family: var(--base-font);
    line-height: 150%;
}

/* Ссылки под постом */
.post-links {
    width: 100%;
    border-top: 1px dashed var(--border-color);
}

.post-links ul {
    padding: 15px 20px;
    text-align: right;
    text-transform: lowercase;
}

.post-links li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 10px;
}

.post-links li:not(:first-of-type) {
    padding-left: 10px;
}

.post-links li a { color: var(--link); }
.post-links li a:hover { color: var(--text); }
.post-links li.pl-share,
.post-links li.pl-reports { display: none; }

/* Подпись */
.post-sig {
    padding: 15px;
    margin-top: 15px;
    border-top: 1px dashed var(--border-color);
}

.post-sig dt { display: none; }

.post-sig dd {
    margin: 0;
    padding: 5px 0;
    font-family: var(--dec-font);
    font-size: 13px;
    color: var(--text);
    font-style: italic;
    text-align: right;
}

/* ============================================================
   ЦИТАТЫ, КОД, СПОЙЛЕРЫ
   ============================================================ */

.quote-box,
.code-box {
    margin: 1.8em 0 0.7em 0;
    background: var(--bg-quote);
    border-radius: 10px;
    box-shadow: 0 -5px 0 0 var(--bg-menu);
    padding: 10px 15px;
    max-width: 80%;
}

.quote-box cite,
.code-box strong.legend {
    display: block;
    background: var(--bg-menu);
    color: var(--border2);
    font-family: var(--dec-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    margin: -15px 0 10px 20px;
    border-radius: 0 0 10px 10px;
    width: fit-content;
    font-style: normal;
}

.quote-box cite a,
.code-box strong.legend a {
    color: var(--border2) !important;
    font-weight: 700;
}

.quote-box cite a:hover,
.code-box strong.legend a:hover {
    color: var(--a-link) !important;
}

.quote-box blockquote,
.code-box .scrollbox {
    padding: 5px 0;
    color: var(--text);
    font-family: var(--base-font);
    font-size: 12px;
    line-height: 150%;
}

.code-box .scrollbox {
    max-height: 200px;
    overflow: auto;
}

.code-box pre {
    font-family: monospace;
    font-size: 11px;
    line-height: 140%;
}

.spoiler-box > div {
    cursor: pointer;
    padding: 7px 0 7px 24px;
    font-family: var(--dec-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-transform: lowercase;
    position: relative;
    transition: all 0.2s ease;
}

.spoiler-box > div:hover { color: var(--a-link); }

.post-content hr {
    border: none;
    background: var(--border-color);
    width: 100%;
    height: 1px;
    opacity: 0.4;
    margin: 1em 0;
}

.post-content mark,
.highlight-text {
    background: var(--bg-color2);
    color: var(--text);
    padding: 1px 4px;
    border-radius: 3px;
}

.post-content del {
    text-decoration: line-through;
    text-decoration-color: var(--bg-menu);
    opacity: 0.7;
}

.post-content del:hover { opacity: 1; }

/* ============================================================
   ФОРМА ОТВЕТА
   ============================================================ */

#post-form label {
    font-family: var(--dec-font2);
    font-weight: 400;
    text-transform: lowercase;
    color: var(--dec-text);
}

#pun-viewtopic #post-form {
    background: var(--bg-color3);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin: 10px 30px;
}

.punbb #post-form .container {
    padding: 20px 40px;
}

#post-form h2,
#post-form #post fieldset legend {
    display: none;
}

.resizable-textarea > span {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
}

#main-reply {
    resize: both;
    overflow-y: auto !important;
    min-height: 80px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/*#tags .container,
#float {
    padding: 10px;
    max-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), 2px 3px 4px rgba(0, 0, 0, 0.09), 5px 7px 5px rgba(0, 0, 0, 0.05);
    background: var(--bg-color3);
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 10px;
    color: var(--text);
    text-transform: lowercase;
}

#float {
    position: absolute;
    width: 140px;
    left: calc(50% - 175px);
    display: none;
    text-align: center;
}*/

#tags .container {
    padding: 10px;
    max-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), 2px 3px 4px rgba(0, 0, 0, 0.09), 5px 7px 5px rgba(0, 0, 0, 0.05);
    background: var(--bg-color3);
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 10px;
    color: var(--text);
    text-transform: lowercase;
}

#post-form input.submit {
    background: var(--bg-color3);
    color: var(--text);
}

#post-form input.submit:hover {
    background: var(--bg-color2);
}

#addition-area,
#font-area {
    height: 180px;
    scrollbar-width: thin;
    border: 0 !important;
    border-radius: 10px 0 0 10px !important;
    overflow: auto;
}

/* ============================================================
   СКРЫТЫЕ ЭЛЕМЕНТЫ + CLEARFIX
   ============================================================ */
.acchide,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
#post-form h2,
.punbb .forum h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
#pun-index #pun-main h1,
#pun-announcement h2,
#pun-index .main thead tr,
.punbb .multipage .topic h2,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#profilenav h2,
#profilenav .profile-title,
#viewprofile h2:first-child,
#profilenav + h2,
.profile-nav h2,
#pun-userlist .main h2,
#pun-live-rusff,
.cooltext, .cool1, .cool2, .cool3 {
    display: none !important;
}

#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}

/* ============================================================
   ПАГИНАЦИЯ
   ============================================================ */

.multipage { margin-top: 10px; }

.linkst {
    position: relative;
    padding: 5px 31px;
    display: flex;
    justify-content: space-between;
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 9px;
    color: var(--text);
    text-transform: lowercase;
}

.pagelink::before {
    content: "\f518";
    font-family: var(--dec-symbol);
    font-weight: 400;
    margin-right: 11px;
}

.linkst .postlink { text-align: right; }

.linksb {
    position: relative;
    padding: 5px 31px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 11px;
    color: var(--text);
    text-transform: lowercase;
}

.linksb .pagelink { order: -1; font-weight: 400; }
.linksb .pagelink strong { font-weight: 700; }
.subscribelink { width: 100%; text-align: right; }
.linksb noindex { order: 1; }
.linksb .postlink { margin-left: auto; text-align: right; }
.linksb a, .linkst a { color: var(--link); }

/* ============================================================
   МОДЕРАТОРСКОЕ МЕНЮ
   ============================================================ */

.punbb #pun-main .modmenu .container {
    padding: 10px 0;
    text-align: right;
    font-family: var(--base-font);
    font-weight: 600;
    font-size: 11px;
    color: var(--text);
    text-transform: lowercase;
}

#pun-viewforum #pun-main .modmenu .container,
#pun-searchtopics #pun-main .modmenu .container {
    border-block: 1px dashed var(--border-color);
    font-weight: 400;
    font-size: 10px;
}

#pun-modviewforum #pun-main .modmenu .container {
    border-block: 1px dashed var(--border-color);
    padding: 7px 0;
    display: flex;
    align-items: center;
}

#pun-viewtopic #pun-main .modmenu .container {
    padding: 5px 31px;
}

#pun-modviewforum #pun-main .modmenu .container strong {
    margin-right: auto;
}

#pun-viewforum .modmenu .container strong:before {
    content: "\f304";
    font-family: var(--dec-symbol);
    font-weight: 300;
    margin-right: 3px;
}

.modmenu a { color: var(--text); }
.modmenu .container strong { float: left; }
.modmenu input { margin-left: 10px; }

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

#viewprofile { margin-top: 10px; }
#viewprofile .container { padding: 0; }

#viewprofile tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    background: var(--bg-color3);
    padding: 25px;
    border-radius: 20px;
}

/* Левая колонка */
#profile-left {
    text-align: center;
    width: 28% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    box-sizing: border-box;
    background: var(--bg-color);
    border-radius: 15px;
}

#profile-left li { list-style: none; padding: 0; }

#pa-avatar img {
    border: solid 2px var(--border-color);
    padding: 5px;
    border-radius: 10px;
    max-width: 180px;
    height: auto;
    box-sizing: border-box;
}

/* Правая колонка */
#profile-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: auto !important;
    flex: 2;
    padding: 0 !important;
}

#profile-right li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-color);
    border-radius: 10px;
    padding: 12px 10px;
    box-sizing: border-box;
    font-size: 10px;
    list-style: none;
    gap: 4px;
    min-height: 60px;
}

#profile-right li span {
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 9px;
    color: var(--dec-text);
    text-transform: lowercase;
}

#profile-right li strong,
#profile-right li strong a {
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 11px;
    color: var(--border2) !important;
}

#profile-right li strong a:hover { color: var(--a-link) !important; }
#profile-right #pa-fld1 { grid-column: 1 / -1; }

/* Навигация профиля */
#profilenav {
    float: left;
    width: 14em;
    margin: 0 0 0 -14.8em;
    display: inline;
}

#profilenav h2 {
    background: var(--bg-menu);
    border-radius: 10px 10px 0 0;
    height: 25px;
    text-align: center;
    padding: 5px 0 0 0;
    margin: 0 0 -0.6em 0;
}

#profilenav h2 span {
    font-family: var(--base-font);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--border2);
}

#profilenav ul {
    padding: 15px;
    margin: 0 0 1em 0;
    background: var(--bg-color3);
    border-radius: 0 0 10px 10px;
    list-style: none;
}

#profilenav ul li {
    margin: 5px 0;
    text-align: center;
    font-size: 10px;
    text-transform: lowercase;
}

#profilenav ul li a {
    display: block;
    padding: 6px 15px;
    border-radius: 5px;
    background: var(--bg-color);
    color: var(--dec-text) !important;
    font-family: var(--base-font);
    font-weight: 600;
    font-size: 10px;
    transition: all 0.2s ease;
}

#profilenav ul li a:hover,
#profilenav ul li.isactive a {
    background: var(--bg-menu);
    color: var(--border2) !important;
}

#profile .container { padding-left: 16em; width: auto; }

/* ============================================================
   ПОЛЯ ВВОДА
   ============================================================ */

input[type="text"],
input[type="password"],
textarea,
select {
    border-radius: 5px;
    background: var(--bg-quote);
    border: none;
    padding: 4px 10px 5px 10px;
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.415;
    color: var(--text);
}

input[type="text"],
input[type="password"],
select {
    box-sizing: border-box;
}

select {
    text-transform: lowercase;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-quote) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2337405f' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
    padding-right: 28px;
}

textarea {
    font-size: 14px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

/* ============================================================
   СТРАНИЦА ПЕРЕАДРЕСАЦИИ
   ============================================================ */

.redirect-page { background: var(--bg-color) !important; }
.redirect-page #pun { background: none !important; background-color: transparent !important; }

#pun-redirect #pun-main {
    background: var(--bg-color3) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin: 50px auto !important;
    max-width: 600px !important;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#pun-redirect #pun-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: var(--border-color);
    border-radius: 20px 0 0 20px;
}

#pun-redirect #pun-main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--border-color);
    border-radius: 20px 20px 0 0;
}

#pun-redirect h1 {
    font-family: var(--dec-font2) !important;
    font-size: 18px !important;
    color: var(--bg-color) !important;
    text-transform: lowercase;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

#pun-redirect .info .container {
    font-family: var(--dec-font) !important;
    font-size: 18px !important;
    color: var(--text) !important;
    padding: 20px !important;
    line-height: 1.6 !important;
}

#pun-redirect .backlink {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px dashed var(--border-color);
}

#pun-redirect .backlink a {
    display: inline-block;
    font-family: var(--base-font) !important;
    font-size: 12px !important;
    color: var(--link) !important;
    text-transform: lowercase;
    transition: all 0.2s ease;
}

#pun-redirect .backlink a:hover { color: var(--a-link) !important; }

/* ============================================================
   БОКОВОЕ МЕНЮ
   ============================================================ */

.side-menu {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--menu-width));
    width: var(--menu-width);
    height: 100vh;
    background-color: var(--bg-color2);
    color: var(--text);
    font-family: var(--base-font);
    z-index: 1000;
    transition: left var(--transition-speed) ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 0 15px 15px 0;
    overflow-y: auto;
    box-sizing: border-box;
}

.side-menu.open { left: 0; }

.menu-inner {
    padding: 25px 20px;
    padding-top: 70px;
}

.menu-inner h2,
.menu-inner h3 {
    font-family: var(--dec-font2);
    color: var(--text);
    text-transform: lowercase;
    margin-bottom: 15px;
    padding: 0;
    text-align: left;
    font-size: 1.4em;
}

.menu-inner h3 {
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 10px;
}

.menu-inner hr {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 20px 0;
    opacity: 0.6;
}

.design-switcher {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.design-btn {
    background: var(--bg-color3);
    color: var(--text);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px 15px;
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.design-btn:hover {
    background: var(--bg-quote);
    transform: translateY(-1px);
}

.design-btn.active {
    background: var(--bg-menu);
    color: var(--border2);
    border-color: var(--bg-menu);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.theme-switcher { margin-bottom: 10px; }

.theme-btn {
    width: 100%;
    background: var(--bg-color);
    color: var(--dec-text);
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-family: var(--base-font);
    font-weight: 700;
    font-size: 11px;
    text-transform: lowercase;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.theme-btn:hover {
    background: var(--bg-menu);
    color: var(--border2);
}

.menu-links ul { list-style: none; padding: 0; margin: 0; }
.menu-links li { margin-bottom: 5px; }

.menu-links a {
    display: block;
    padding: 8px 12px;
    color: var(--link);
    text-decoration: none;
    border-radius: 5px;
    font-size: 13px;
    text-transform: lowercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.menu-links a:hover {
    background: var(--bg-color3);
    color: var(--a-link);
}

.menu-trigger {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--menu-trigger-size);
    height: var(--menu-trigger-size);
    background-color: var(--bg-menu);
    color: var(--dec-text);
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left var(--transition-speed) ease-in-out, background-color 0.2s;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    font-size: 24px;
    padding: 0;
    outline: none;
}

.menu-trigger:hover {
    background-color: var(--bg-color2);
    color: var(--text);
}

.menu-trigger.open { left: var(--menu-width); }

.menu-trigger .icon {
    transition: transform 0.3s ease;
    display: block;
}

.menu-trigger.open .icon { transform: rotate(90deg); }

body.dark-theme .side-menu {
    --bg-color2: var(--bg-color);
    background-color: var(--bg-color2);
}

body.dark-theme .menu-trigger {
    --bg-menu: var(--bg-color2);
    background-color: var(--bg-menu);
}

/* ============================================================
   КНОПКИ ПРОКРУТКИ
   ============================================================ */

.scroll-btn {
    position: fixed;
    right: calc(50% - 520px);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-menu);
    color: var(--border2);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--dec-symbol);
}

.scroll-btn:hover {
    opacity: 1;
    background: var(--bg-color2);
    color: var(--text);
    box-shadow: 0 0 15px rgba(var(--bg-color2-rgb, 115, 130, 127), 0.5);
    transform: scale(1.05);
}

.scroll-btn:active { transform: scale(0.95); }

.scroll-btn .material-symbols {
    font-family: 'Material Symbols Outlined';
    font-size: 28px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    pointer-events: none;
}

.scroll-btn.scroll-top {
    bottom: 80px;
    width: 44px;
    height: 44px;
}

.scroll-btn.scroll-top .material-symbols { font-size: 30px; }

.scroll-btn.scroll-bottom {
    bottom: 25px;
    width: 36px;
    height: 36px;
}

.scroll-btn.scroll-bottom .material-symbols { font-size: 24px; }

.scroll-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   ШАПКА NEOPOLIS (1000 × 306)
   ============================================================ */
#neopolis-header {
    width: 1000px;
    max-width: 100%;
    height: 306px;
    margin: 0 auto 30px;
    position: relative;
    background-image: url('https://forumstatic.ru/files/001c/aa/2d/59566.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 0 15px 15px;
    overflow: visible; /* Было hidden — меняем на visible */
    box-sizing: border-box;
}

/* Тёмная подложка для читаемости */
#neopolis-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 15px 15px; /* Добавляем скругление */
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   АДМИНИСТРАТОРЫ (слева)
   ============================================================ */
.neo-admins {
    position: absolute;
    top: 230px;
    left: 180px;
    display: flex;
    gap: 25px;
    z-index: 5;
}

.neo-member-ava {
    width: 35px;
    height: 35px;
    border-radius: 6px;
    overflow: visible; /* Было hidden — меняем, чтобы подсказка не обрезалась */
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    display: block;
}

.neo-member-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px; /* Добавляем скругление самой картинке */
}

.neo-member-ava:hover {
    border-color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    z-index: 10; /* Повышаем, чтобы подсказка была поверх всего */
}

/* Подсказка при наведении */
.neo-member-ava::after {
    content: attr(data-name);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--base-font);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
    line-height: 1.4;
}

.neo-member-ava:hover::after {
    opacity: 1;
}

/* ============================================================
   АКТИВИСТЫ (справа)
   ============================================================ */
.neo-activists {
    position: absolute;
    top: 230px;
    right: 180px;
    display: flex;
    gap: 25px;
    z-index: 5;
}

.neo-member-ava::after {
    content: attr(data-name);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--base-font);
    white-space: pre;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
    line-height: 1.4;
}

/* ============================================================
   КНОПКИ СМЕНЫ ПАЛИТРЫ (справа, вертикально)
   ============================================================ */
.neo-palette-btns {
    position: absolute;
    top: 40px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
}

/* Три кнопки палитры */
.neo-palette-btn {
    width: 25px;
    height: 25px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
    outline: none;
    position: relative;
}

.neo-palette-btn:hover {
    border-color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.neo-palette-btn.active {
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* Цвета кнопок */
.neo-palette-btn[data-design="default"] {
    background: #73827f;
}

.neo-palette-btn[data-design="cyber"] {
    background: #a7b7d6;
}

.neo-palette-btn[data-design="hybrid"] {
    background: #c47b6b;
}

/* Тёмные варианты */
body.dark-theme .neo-palette-btn[data-design="default"] {
    background: #3a4c4f;
}

body.dark-theme .neo-palette-btn[data-design="cyber"] {
    background: #263249;
}

body.dark-theme .neo-palette-btn[data-design="hybrid"] {
    background: #5c3a30;
}

/* Отступ перед кнопкой темы */
.neo-palette-btns .neo-theme-toggle {
    margin-top: 35px; /* 10px (обычный gap) + 35px = 45px отступа от третьей */
}

/* Кнопка смены темы (круглая, с иконкой) */
.neo-theme-toggle {
    width: 25px;
    height: 25px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    box-sizing: border-box;
    outline: none;
    overflow: hidden;
}

.neo-theme-toggle:hover {
    border-color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.neo-theme-toggle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   АДАПТИВ: ПЛАНШЕТЫ (≤1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    #neopolis-header {
        width: 100%;
        height: auto;
        min-height: 250px;
        border-radius: 0;
    }
    
    .neo-admins {
        top: 180px;
        left: 20px;
        gap: 15px;
    }
    
    .neo-activists {
        top: 180px;
        right: 20px;
        gap: 15px;
    }
    
    .neo-palette-btns {
        top: 20px;
        right: 10px;
        gap: 8px;
    }
    
    .neo-palette-btns .neo-theme-toggle {
        margin-top: 30px;
    }
    
    .neo-member-ava {
        width: 30px;
        height: 30px;
    }
}

/* ============================================================
   АДАПТИВ: ТЕЛЕФОНЫ (≤600px)
   ============================================================ */
@media screen and (max-width: 600px) {
    #neopolis-header {
        min-height: 200px;
        border-radius: 0;
    }
    
    .neo-admins {
        top: 150px;
        left: 10px;
        gap: 8px;
    }
    
    .neo-activists {
        top: 150px;
        right: 10px;
        gap: 8px;
    }
    
    .neo-palette-btns {
        top: 10px;
        right: 5px;
        gap: 6px;
    }
    
    .neo-palette-btn,
    .neo-theme-toggle {
        width: 22px;
        height: 22px;
    }
    
    .neo-palette-btns .neo-theme-toggle {
        margin-top: 25px;
    }
    
    .neo-member-ava {
        width: 28px;
        height: 28px;
        border-radius: 4px;
    }
    
    .neo-member-ava::after {
        display: none;
    }
}

/* ============================================================
   АДАПТИВ: ПЛАНШЕТЫ (≤1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    
    /* Форум */
    #pun {
        width: 100% !important;
        margin: 60px 5px 20px 5px !important;
        border-radius: 15px !important;
    }
    
    .punbb > div .container {
        padding: 10px 15px !important;
    }
    
    /* Меню */
    #pun-navlinks {
        padding: 6px 10px;
    }
    
    #pun-navlinks a {
        font-size: 13px;
        padding: 5px 8px;
    }
    
    #pun-navlinks ul {
        gap: 4px;
    }
    
    /* Пользовательские ссылки */
    #pun-ulinks {
        margin-top: -15px;
        padding: 6px 0;
    }
    
    #pun-ulinks li,
    #pun-ulinks li a {
        font-size: 10px;
    }
    
    #pun-ulinks .container {
        gap: 4px;
    }
    
    /* Шапка */
    #neopolis-header {
        width: calc(100% - 10px);
        height: 280px;
        border-radius: 0 0 12px 12px;
        margin: 0 auto 20px;
    }
    
    .neo-admins {
        top: auto;
        bottom: 20px;
        left: 15px;
        gap: 12px;
    }
    
    .neo-activists {
        top: auto;
        bottom: 20px;
        right: 15px;
        gap: 12px;
    }
    
    .neo-palette-btns {
        top: 20px;
        right: 10px;
        gap: 8px;
    }
    
    .neo-palette-btns .neo-theme-toggle {
        margin-top: 30px;
    }
    
    .neo-member-ava {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }
    
    .neo-member-ava::after {
        bottom: -18px;
        font-size: 9px;
        padding: 1px 6px;
    }
    
    /* Таблицы */
    .punbb:not(#pun-index, #pun-viewtopic) #pun-main {
        width: auto !important;
        margin: 5px !important;
        padding: 15px !important;
        border-radius: 10px !important;
    }
    
    .punbb:not(#pun-index, #pun-viewtopic) #pun-main::before,
    .punbb:not(#pun-index, #pun-viewtopic) #pun-main::after {
        display: none !important;
    }
    
    /* Категории */
    #pun-index .category {
        margin-bottom: 20px !important;
    }
    
    #pun-index .category .container {
        width: auto !important;
        margin: 0 5px !important;
        padding: 15px !important;
        border-radius: 12px 12px 0 12px !important;
    }
    
    #pun-index .category::before,
    #pun-index .category::after {
        display: none !important;
    }
    
    #pun-index .category tr {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    #pun-index .category tr:not(:last-of-type) {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px dashed var(--border-color);
    }
    
    #pun-index .category .tcl h3 {
        font-size: 17px !important;
        padding-left: 10px !important;
    }
    
    #pun-index .category .tcr {
        width: auto !important;
        padding-left: 10px !important;
    }
    
    /* Статистика */
    #pun-stats {
        width: auto !important;
        margin: 20px 5px 0 !important;
        border-radius: 12px 12px 0 12px !important;
    }
    
    #pun-stats::before,
    #pun-stats::after {
        display: none !important;
    }
    
    #pun-stats .container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    #pun-stats .container::before {
        display: none !important;
    }
    
    #pun-stats #onlinelist {
        grid-column: 1 / -1 !important;
    }
    
    #pun-stats .container > li:not(#onlinelist) {
        grid-column: 1 / -1 !important;
    }
    
    #pun-stats h2 {
        position: static !important;
        text-align: center !important;
        padding: 10px !important;
        -webkit-text-stroke: 2px var(--border2) !important;
    }
    
    #pun-stats h2 span {
        font-size: 16px !important;
    }
    
    /* Посты */
    .punbb .post .post-author {
        width: 140px !important;
    }
    
    .punbb .post .post-author ul {
        width: 140px !important;
    }
    
    .punbb .post .post-author ul::before {
        left: 140px !important;
        width: 500px !important;
    }
    
    .punbb .post-body {
        margin-left: 140px !important;
    }
    
    .pa-avatar img {
        max-width: 100px !important;
        max-height: 100px !important;
    }
    
    .pa-author {
        font-size: 14px !important;
    }
    
    /* Боковое меню */
    .side-menu {
        width: 280px !important;
    }
    
    .menu-trigger.open {
        left: 280px !important;
    }
    
    /* Кнопки прокрутки */
    .scroll-btn {
        right: 10px !important;
    }
    
    .scroll-btn.scroll-top {
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
    }
    
    .scroll-btn.scroll-top .material-symbols {
        font-size: 24px !important;
    }
    
    .scroll-btn.scroll-bottom {
        bottom: 20px !important;
        width: 30px !important;
        height: 30px !important;
    }
    
    .scroll-btn.scroll-bottom .material-symbols {
        font-size: 18px !important;
    }
    
    /* Профиль */
    #viewprofile tbody tr {
        flex-direction: column !important;
        padding: 15px !important;
    }
    
    #profile-left {
        width: 100% !important;
    }
    
    #profile-right {
        grid-template-columns: 1fr 1fr !important;
    }
    
    #profilenav {
        float: none !important;
        width: auto !important;
        margin: 0 0 15px 0 !important;
    }
    
    #profile .container {
        padding-left: 0 !important;
    }
}

/* ============================================================
   АДАПТИВ: ТЕЛЕФОНЫ (≤600px)
   ============================================================ */
@media screen and (max-width: 600px) {
    
    /* Форум */
    #pun {
        margin: 50px 2px 10px 2px !important;
        border-radius: 10px !important;
    }
    
    .punbb > div .container {
        padding: 8px 10px !important;
    }
    
    /* Меню */
    #pun-navlinks {
        padding: 5px 8px;
    }
    
    #pun-navlinks a {
        font-size: 11px;
        padding: 4px 6px;
    }
    
    #pun-navlinks ul {
        gap: 2px;
    }
    
    /* Пользовательские ссылки */
    #pun-ulinks {
        margin-top: -8px;
        padding: 4px 0;
    }
    
    #pun-ulinks li,
    #pun-ulinks li a {
        font-size: 9px;
    }
    
    #pun-ulinks .container {
        gap: 2px;
    }
    
    /* Шапка */
    #neopolis-header {
        width: calc(100% - 4px);
        height: 220px;
        border-radius: 0 0 8px 8px;
        margin: 0 auto 15px;
    }
    
    .neo-admins {
        bottom: 15px;
        left: 8px;
        gap: 8px;
    }
    
    .neo-activists {
        bottom: 15px;
        right: 8px;
        gap: 8px;
    }
    
    .neo-palette-btns {
        top: 10px;
        right: 5px;
        gap: 6px;
    }
    
    .neo-palette-btn,
    .neo-theme-toggle {
        width: 20px;
        height: 20px;
    }
    
    .neo-palette-btns .neo-theme-toggle {
        margin-top: 25px;
    }
    
    .neo-member-ava {
        width: 26px;
        height: 26px;
        border-radius: 4px;
        border-width: 1px;
    }
    
    .neo-member-ava::after {
        display: none;
    }
    
    /* Таблицы */
    .punbb:not(#pun-index, #pun-viewtopic) #pun-main {
        margin: 3px !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    /* Категории */
    #pun-index .category .container {
        padding: 10px !important;
        border-radius: 8px 8px 0 8px !important;
    }
    
    #pun-index .category .tcl h3 {
        font-size: 15px !important;
        padding-left: 5px !important;
    }
    
    #pun-index .category .tclcon {
        font-size: 10px !important;
        padding-left: 5px !important;
    }
    
    #pun-index .tcr .lastpost-link {
        font-size: 10px !important;
    }
    
    /* Статистика */
    #pun-stats .container {
        padding: 10px !important;
        font-size: 10px !important;
    }
    
    #pun-stats h2 span {
        font-size: 13px !important;
    }
    
    /* Посты */
    .punbb .post .post-author {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 8px !important;
    }
    
    .punbb .post .post-author ul {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        border-radius: 8px !important;
        padding: 8px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    
    .punbb .post .post-author ul::before {
        display: none !important;
    }
    
    .pa-avatar {
        width: auto !important;
        padding: 0 !important;
    }
    
    .pa-avatar img {
        max-width: 35px !important;
        max-height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        border-radius: 50% !important;
        padding: 2px !important;
    }
    
    .pa-author {
        width: auto !important;
        font-size: 12px !important;
        padding: 0 !important;
    }
    
    li.pa-title {
        width: auto !important;
        font-size: 9px !important;
        padding: 0 !important;
    }
    
    .punbb .post-body {
        margin-left: 0 !important;
    }
    
    .punbb .post h3 {
        margin-left: 0 !important;
        border-radius: 6px 0 0 0 !important;
        font-size: 0.75em !important;
        padding: 8px 10px !important;
        height: auto !important;
    }
    
    .punbb .post .container {
        margin: 0 0 10px 0 !important;
        padding: 0 8px 8px 8px !important;
    }
    
    .post-links ul {
        padding: 10px !important;
    }
    
    .post-links li {
        font-size: 9px !important;
    }
    
    /* Боковое меню */
    .side-menu {
        width: 260px !important;
    }
    
    .menu-trigger {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
        border-radius: 0 8px 8px 0 !important;
    }
    
    .menu-trigger.open {
        left: 260px !important;
    }
    
    /* Кнопки прокрутки */
    .scroll-btn {
        right: 5px !important;
        border-radius: 8px !important;
    }
    
    .scroll-btn.scroll-top {
        bottom: 55px !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    .scroll-btn.scroll-top .material-symbols {
        font-size: 20px !important;
    }
    
    .scroll-btn.scroll-bottom {
        bottom: 12px !important;
        width: 26px !important;
        height: 26px !important;
    }
    
    .scroll-btn.scroll-bottom .material-symbols {
        font-size: 16px !important;
    }
    
    /* Профиль */
    #profile-right {
        grid-template-columns: 1fr !important;
    }
    
    #pa-avatar img {
        max-width: 80px !important;
    }
    
    /* Хлебные крошки */
    .crumbs.container {
        font-size: 10px !important;
    }
    
    /* Поля ввода */
    input[type="text"],
    input[type="password"],
    textarea,
    select {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
    
    /* Цитаты */
    .quote-box,
    .code-box {
        max-width: 100% !important;
        margin: 1em 0 0.5em 0 !important;
        padding: 8px 10px !important;
    }
    
    .quote-box cite,
    .code-box strong.legend {
        font-size: 11px !important;
        margin: -12px 0 8px 10px !important;
        padding: 2px 8px !important;
    }
}
#tags .container {
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
}


/* ============================================================
   Минипрофиль
   ============================================================ */

/* ============================================================
   КВАДРАТИКИ ДЛЯ МИНИ-ПРОФИЛЯ (Material Symbols Outlined)
   ============================================================ */

/* ----- Квадратики вместо текста «Сообщений:» и «Уважение:» ----- */
.pa-posts .fld-name,
.pa-respect .fld-name {
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: relative;
    vertical-align: middle;
    background: var(--bg-menu);
    color: var(--dec-text);
    border-radius: 4px;
}

.pa-posts .fld-name::before,
.pa-respect .fld-name::before {
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dec-text);
    transition: color 0.2s ease;
}

.pa-posts .fld-name::before {
    content: "\e0c9";  /* chat_bubble_outline */
}

.pa-respect .fld-name::before {
    content: "\e838";  /* star */
}

.pa-respect .fld-name a {
    font-size: 0 !important;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.pa-respect .fld-name a::before {
    content: "\e838";
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--dec-text);
    transition: color 0.2s ease;
}

.pa-respect .fld-name a:hover::before {
    color: var(--border2);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ----- Контейнер для чисел ----- */
.pa-posts,
.pa-respect {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text);
    padding: 3px 12px;
}

.pa-posts .fld-name + *,
.pa-respect .fld-name + span {
    font-size: 11px;
}

/* ----- Дополнительные поля ----- */
li.pa-fld4,
li.pa-fld5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text);
    padding: 3px 12px;
}

li.pa-fld4 .fld-name,
li.pa-fld5 .fld-name {
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: relative;
    background: var(--bg-menu);
    color: var(--dec-text);
    border-radius: 4px;
}

li.pa-fld4 .fld-name::before {
    content: "\ea80";  /* payments */
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    color: var(--dec-text);
}

li.pa-fld5 .fld-name::before {
    content: "\e7fe";  /* person_add */
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    color: var(--dec-text);
}

/* ============================================================
   ДОСЬЕ ПЕРСОНАЖА (pa-fld1)
   ============================================================ */
li.pa-fld1 {
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.character-dossier {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--base-font);
    color: var(--text);
}

.character-dossier::before,
.character-dossier::after {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: var(--border2);
    opacity: 0.4;
    margin: 0 auto;
}

.character-dossier::before {
    margin-bottom: 8px;
}

.character-dossier::after {
    margin-top: 8px;
}

.dossier-name {
    font-family: var(--dec-font2);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--border2) !important;
    text-align: center;
    transition: opacity 0.3s ease;
}

.dossier-name:hover {
    opacity: 0.7;
}

.dossier-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.info-line {
    font-size: 10px;
    text-transform: lowercase;
    color: var(--dec-text);
    letter-spacing: 0.5px;
}

.dossier-link {
    font-size: 10px;
    font-style: italic;
    color: var(--link) !important;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    padding: 3px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.dossier-link:hover {
    background: var(--bg-color2);
    color: var(--text) !important;
    border-color: var(--bg-color2);
}

.dossier-quote {
    font-size: 11px;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    color: var(--dec-text);
    margin-top: 6px;
    padding: 0 5px;
}

.dossier-quote a {
    color: var(--link) !important;
    font-style: italic;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: opacity 0.3s ease;
}

.dossier-quote a:hover {
    opacity: 0.7;
}

/* ============================================================
   БЕЙДЖ ДЛЯ ССЫЛОК (pa-fld3)
   ============================================================ */
li.pa-fld3 {
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
}

li.pa-fld3 a {
    display: block;
    width: 100%;
    background: var(--bg-menu);
    color: var(--dec-text) !important;
    text-align: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: var(--base-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

li.pa-fld3 a:hover {
    opacity: 0.8;
    color: var(--border2) !important;
}

/* ============================================================
   ПОСЛЕДНИЙ ВИЗИТ
   ============================================================ */
li.pa-last-visit {
    font-size: 9px;
    color: var(--dec-text);
    opacity: 0.7;
    text-align: center;
    padding: 5px 10px;
    text-transform: lowercase;
}

li.pa-last-visit .fld-name {
    display: none;
}

/* ============================================================
   КВАДРАТИК ДЛЯ ИГРОВЫХ ПОСТОВ (pa-fld5)
   ============================================================ */
li.pa-fld5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text);
    padding: 3px 12px;
}

li.pa-fld5 .fld-name {
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: relative;
    background: var(--bg-menu);
    color: var(--dec-text);
    border-radius: 4px;
}

li.pa-fld5 .fld-name::before {
    content: "\e7f1";  /* forum */
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    color: var(--dec-text);
}

li.pa-fld5 .fld-name + * {
    font-size: 11px;
}

/* ============================================================
   ИГРОВЫЕ ПОСТЫ (pa-fld5) — В ОДНУ СТРОКУ
   ============================================================ */
li.pa-fld5 {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text);
    padding: 3px 12px;
    order: 0;  /* заставит быть в порядке с pa-posts */
}

li.pa-fld5 .fld-name {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: relative;
    background: var(--bg-menu);
    color: var(--dec-text);
    border-radius: 4px;
}

li.pa-fld5 .fld-name::before {
    content: "\e7f1";  /* forum */
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    color: var(--dec-text);
}

li.pa-fld5 .fld-name + span {
    font-size: 11px;
    color: var(--text);
}

/* Фиксим расположение pa-posts и pa-respect */
.pa-posts,
.pa-respect,
li.pa-fld5 {
    order: 0;
}