@import url(style_cs.1793222509.css);

@import url(https://forumstatic.ru/files/001c/43/fc/27566.css);
@import url(https://forumstatic.ru/files/001a/28/10/55678.css);

/* Иконический шрифт */

@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Unbounded:wght@200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Raleway:ital,wght@0,100..900;1,100..900&family=Unbounded:wght@200..900&display=swap');

/* Font Awesome */

@import url('https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');

@font-face { font-family: horror; src: local("horror"), url(https://forumstatic.ru/files/0019/86/a2/53604.otf);
}

@font-face {font-family: Kudry; 
src: local("Kudry"), url(https://forumstatic.ru/files/001c/0a/be/46374.otf);
}

@font-face { font-family: Sagire; src: local("Sagire"), url(https://forumstatic.ru/files/001b/73/d1/52535.otf);
}

@font-face { font-family: Cinzel; src: local("Cinzel"), url(https://forumstatic.ru/files/001a/ff/52/15353.ttf);
}

@font-face { font-family: raleway; src: local("raleway"), url(https://forumstatic.ru/files/001b/70/14/27590.ttf);
}

@font-face { font-family: espina; src: local("espina"), url(https://forumstatic.ru/files/001b/70/14/43891.ttf);
}

@font-face { font-family: ramillas; src: local("ramillas"), url(https://forumstatic.ru/files/001b/70/14/21130.ttf);
}

@font-face { font-family: TheSilverEditorial; src: local("TheSilverEditorial"), url(https://forumstatic.ru/files/001c/a5/83/34024.ttf);
}

@font-face { font-family: nice; src: local("nice"), url(https://forumstatic.ru/files/001c/a5/83/60762.otf);
}

@font-face { font-family: things; src: local("things"), url(https://forumstatic.ru/files/001c/a5/83/33043.otf);
}

@font-face {font-family: fine; src: local("fine"), url(https://forumstatic.ru/files/001b/73/d1/67460.otf);
}

/* Полезные сервисные настройки
-------------------------------------------------------------*/

.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

#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.0;
  font-size: 0;
}

/* Основные переменные
------------------------------------------*/

:root {
--pun-bg: #eeeeee;
    --sec-bg: #f4f4f4;
    --link: #3a3a3a;
    --link-hover: #415549;
    --main-acc: #eaeaea;
    --add-acc: #4155494a;
    --pwidth: 244px;
    --pad1: 10px 30px;
    --pad2: 10px 20px;
    --pad3: 5px 10px;
    --font-family: "Manrope", sans-serif;
    --second-family: "mulish", sans-serif;
    --fa: "Font Awesome 6 Pro", "Font Awesome 6 Brands";
--second-font: "fine";
}

/* Global
------------------------------------------*/

* {
  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(--link-hover) var(--sec-bg);*/
}

/* Полоса прокрутки */

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background-color: var(--sec-bg);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--link-hover);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--link-hover);
  border-radius: 10px;
}

/* Выделение текста */

::selection {
  background: var(--link-hover);
  color: var(--pun-bg);
}

:focus {
  outline: none;
}

/* Все ссылки */

a,
.punbb #pun-admain a {
  text-decoration: none;
  color: #3a3a3ae0;
  text-transform: lowercase;
  /*font-weight: 600;*/
  transition: all .2s linear 0s;
}

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

/* Заголовки */

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

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

.multipage h1, .multipage h2 {
   display: none;
}

.multipage thead {
   display: none;
}

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

address,
em {
  font-style: normal;
}

.modlist,
.lastedit,
.punbb div#pun-live-rusff,
.punbb .topic a.sharelink {
  display: none;
}

/* Модальные окна, репутация, закладки */

#tags .container,
.post_report,
.post_reputation,
#MyBookmarks,
.inner.popup_graffiti,
.pun-modal .modal-inner,
.punbb-admin #pun-admin-award-form .inner {
  background: var(--sec-bg);
}

/* Формы
------------------------------------------- */

/* Оформление кнопок */

input.button,
#pun-admain input.button,
#sub4,
input[type="button"],
input[type="submit"] {
    padding: 5px 10px;
    cursor: pointer;
    transition: all .2s linear 0s;
    background: #3a3a3a;
    border-radius: 10px;
    color: var(--pun-bg);
    text-transform: lowercase;
    font-weight: 300;
    font-family: var(--font-family);
}

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

/* Оформление полей ввода */

input[type="text"],
input[type="password"],
textarea,
select {
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--sec-bg);
    color: #141414;
    font-family: var(--font-family);
    font-weight: 500;
}

textarea,
input,
select,
optgroup {
  font-size: 12px;
}

optgroup {
  font-weight: bold;
}

.checkfield input[type="checkbox"],
.radiofield input[type="radio"] {
  margin: 0 3px;
}

p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 20px;
  vertical-align: middle;
}

.formal .container {
  padding: var(--pad1);
}

.formsubmit {
  padding: 0;
  margin: 10px 0 0 0;
  text-align: center;
}

.formsubmit input,
.formsubmit a,
.formsubmit span {
  margin: 0 6px 0 0;
   background: #9393932e;
    font-family: var(--font-family);
    text-transform: lowercase;
    border: 1px solid var(--body-bg);
    border-radius: 29px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--textcolor);
}

fieldset {
  border: none;
}

fieldset legend {
  font-weight: bold;
  margin-bottom: 10px;
}

fieldset legend span { 
    font-family: var(--font-family);
    font-style: italic;
    border: 1px solid var(--body-bg);
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--body-bg);
}

fieldset fieldset {
  border: none;
  margin: 0;
  padding: 0 0 8px 0
}

#plng {
    border: 1px solid #3a3a3a !important;
    padding: 5px 5px 5px 8px !important;
    margin: 0 20px 0 5px!important;
    border-radius: 10px;
}

.fs-box {
  padding: 5px 0;
}

.fs-box p,
.fs-box fieldset {
  padding: 0 0 8px 0;
}

.inline .inputfield,
.inline .selectfield,
.inline .passfield {
  float: left;
  margin-right: 10px;
}

.inline .infofield {
  clear: both
}

.datafield br {
  display: none
}

.required label,
.datafield span.input {
  font-size: 10px;
}

textarea,
.longinput input {
  width: 64%;
  margin: 0;
}

.hashelp {
  position: relative;
}

/* Админка
------------------------------------------*/

.punbb-admin .adcontainer,
.punbb-admin .adformal {
  border: none;
}

.punbb-admin sup.new {
display: none;
}

/* Тело форума
------------------------------------------*/

/* Фон */

html {
  background: var(--link) url() no-repeat top center;
}

body::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  z-index: -10;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)), url(https://upforme.ru/uploads/001c/8b/c7/2/343179.png) fixed no-repeat;
    background-size: cover;
}

/* Основной контейнер */

#pun {
  margin: 30px auto;
  width: 1050px;
  background: var(--pun-bg);
}

/* Внутреннее тело */

.punbb {
  font: 11px Verdana;
    display: flex;
    flex-direction: column;
}

.punbb > div .container {
  padding: var(--pad1);
}

/* Навигационные ссылки */

#pun-navlinks {
    order: -1;
    background: transparent;
    position: absolute;
     top: 0px;      /* було 0 */
    left: 0;
    width: 100%;
    z-index: 100;
    font: 700 1.2em/100% 'mulish';
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
}

#pun-navlinks a {
 text-decoration: none;
    margin: 12px 0;
    color: rgba(217, 217, 217, 1) !important;
    font: 600 14px fine;
    text-transform: lowercase;
    background: var(--link-hover);
    letter-spacing: .5px;
    width: auto;
    text-align: center;
    /* height: 32px; */
    border-radius: 10px;
    padding: 0px 12px 3px;
    transition: .5s ease-in-out;
}

#pun-navlinks a:hover {
color: white !important;
    background: rgb(46 53 47);
    box-shadow: 0px 1px 11.7px 0px rgb(45 53 45);
}

#pun-navlinks .container {
  text-align: center;
  padding: 16px;
  font-family: 'fine';
  font-size: 18px;
}

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

/* Пользовательские ссылки */

#pun-ulinks {
    font-family: var(--font-family);
    font-size: 10px;
    text-transform: lowercase;
    margin-bottom: -5px;
}

#pun-ulinks li::before {
    content: '';
    margin-right: 3px;
}

#pun-ulinks .container {
  text-align: center;
}

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

#pun-status {
    font-family: var(--font-family);
    text-transform: lowercase;
    font-size: 11px;
    /* text-align: center; */
}

#pun-status .container strong {
    font-weight: normal;
}

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

#pun-status .status-right {
  display: none;
}

/* Хлебные крошки */

.crumbs.container {
    text-align: center;
    font-family: var(--font-family);
    font-size: 11px;
    text-transform: lowercase;
}

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

/* Копирайт */

#pun-about {
    height: 200px;
     background: url(https://forumstatic.ru/files/001c/8b/c7/36401.jpg) center var(--main-acc); 
    /* background-blend-mode: exclusion; */
}

#pun-about .container {
    font-size: 0 !important;
}

/* Главная таблица форума
------------------------------------------*/

.main table {
    table-layout: fixed;
    /* background: #eaeaea; */
    /* border: 1px solid var(--add-acc); */
    border-radius: 10px;
    width: 100%;
}

.main th {
  padding: 5px 10px;
}

.main td {
  padding: 10px;
}

.tcl {
  width: 50%;
}

.tc2,
.tc3,
.tcmod {
  text-align: center;
  width: 10%;
}

#pun-index .tc2,
#pun-index .tc3,
#pun-index .tcmod {
  visibility: hidden;
}

.tcr {
  width: 33%;
}

#pun-searchtopics .tcl,
#pun-modviewforum .tcl {
  width: 40%
}

#pun-searchtopics .tc2 {
  text-align: left;
  width: 20%;
}

#pun-debug table .tcl {
  width: 15%;
}

#pun-debug .tcr {
  width: 90%;
}

tbody.hasicon td.tcl {
  padding-left: 40px;
}

#pun-index .hasicon td.tcl {
  padding-left: 24px;
  width: 60%;
}

/* Аватар пользователя */

#pun-index td .user-avatar {
    float: right;
    margin: 0 0 0 12px;
}

.punbb td .user-avatar .avatar-image {
    outline: 1px solid var(--main-acc);
    transition: all .2s linear 0s;
}

/* Иконки тем и форумов */

div.icon {
  position: absolute;
  margin-left: -30px;
  width: 20px;
  height: 20px;
  background: var(--link) url() no-repeat top center;
}

#pun-index div.icon {
    margin-left: -54px;
    width: 12px;
    height: 45px;
    background: var(--add-acc) url() no-repeat top center;
    border-radius: 0px 5px 5px 0px;
}

#pun-index tr.inew div.icon {
  background: var(--link-hover) url() no-repeat top center;
}

tr.inew div.icon {
  background: var() url() no-repeat top center;
}

tr.isticky div.icon {
  background: var() url() no-repeat top center;
}

tr.iclosed div.icon {
  background: var() url() no-repeat top center;
}

.multipage {
  margin-top: 10px;
}

.linkst {
  position: relative;
  padding: var(--pad2);
  display: flex;
  justify-content: space-between;
  margin: 0 30px 10px;
  text-transform: lowercase;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 10px;
  color: var(--textcolor);
}

.linkst .pagelink, .linksb {
  text-transform: lowercase;
  font-family: var(--font-family);
  font-weight: 700;
  color: var(--textcolor);
}

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

.linksb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#pun-viewtopic .linksb, #pun-main.main.multipage .linksb {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 30px 10px;
}

.linksb .pagelink {
  order: -1;
}

.subscribelink {
  width: 100%;
  text-align: right;
}

.linksb noindex {
  order: 1;
}

.linksb .postlink {
  margin-left: auto;
  text-align: right;
}

.postlink.long {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.postlink.long .new-topic {
    padding-right: 5px!important;
}

.postlink.long .new-topic, .postlink.long .new-poll {
    background: var(--link);
    padding: 2px 5px;
    border-radius: 10px;
}

.postlink.long .new-topic:hover, .postlink.long .new-poll:hover {
    background: var(--link-hover);
}

#pun .postlink.long a {
  color: #fff;
}

.topic-users-in {
    font-family: var(--font-family);
    font-size: 11px;
}

/* Меню модератора, RSS, Atom */

.modmenu .container {
  padding: var(--pad3);
  text-align: right;
}

.modmenu .container strong {
  float: left;
}

.modmenu input {
  margin-left: 10px;
}

.modmenu strong ::before {
    content: '\f591';
    font-family: 'Font Awesome 6 Pro';
    padding: 0 6px 0 0;
    font-weight: 600;
}

.modmenu strong {
    font-family: var(--font-family);
    font-size: 11px;
}

/* Главная страница
------------------------------------------*/

#pun-index thead {
  display: none;
}

/* --- Категории --- */

.category {
    width:990px;
    margin:1px auto;

transition: all .09s linear !important;
-webkit-transition: all .09s linear !important;
-moz-transition: all .09s linear !important;
-o-transition: all .09s linear !important;
margin-bottom: 20px;
min-height: 1px;
}

.category .container {
box-sizing: border-box;
background: #f4f4f4;
padding: 20px 30px;
border: 1px solid #DFDFDF;
border-radius: 0 0 16px 16px;
border-top: 0;
}

#pun-index .tclcon h3 a {
    font-family: 'fine';
    font-weight: 500;
    font-size: 28px;
    font-style: italic;
    text-transform: lowercase;
    color: var(--link);
}

#pun-index .tclcon h3 a:hover {
    letter-spacing: 0px;
    color: var(--link-hover);
}

#pun-index .tclcon .desktext {
   font-family: var(--second-family);
    font-size: 11px;
    text-transform: lowercase;
    width: 650px;
    color: #323244;
    margin-top: 5px;
    margin-bottom: 10px;
}

#pun-index .tclcon .desklink {
  display: flex;
    flex-flow: wrap;
    gap: 10px;
    margin-top: 16px;
}

#pun-index .tclcon .desklink a {
   text-transform: lowercase;
  padding: 3px 9px;
    background: #cabeae;
  border-radius: 10px;
    border: 1px solid #4155496f;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 11px;
    text-transform: lowercase;
    color: var(--link-hover);
}

#pun-index .tclcon .desklink a:hover {
    color: #fff;
    font-weight: 400;
background: #415549;
}

#pun-index .category .tcr {
  /* border-left: 1px dashed #81684f4a; */
  text-align: right;
}

#pun-index .lastpost-link {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 11px;
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-left: auto;
    width: 200px;
}

#pun-index .lastpost {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    text-transform: lowercase;
}

#pun-stats {
   font-family: var(--font-family);
   text-transform: lowercase;
   font-size: 11px;
}

/* Заголовок статистики */

#pun-stats h2 {
   display: none;
}

#pun-stats .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 20px;
    max-width: 950px;
    margin: 25px auto 0;
    box-sizing: border-box;
    padding: 10px 0;
    /*border-top: 1px dashed #81684f4a;*/
}

#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4 {
   text-align: center;
}

#pun-stats li.item1 span,
#pun-stats li.item2 span,
#pun-stats li.item3 span,
#pun-stats li.item4 span {
    display: block;
    font-weight: 600;
}

#pun-stats li.item1 strong,
#pun-stats li.item2 strong,
#pun-stats li.item3 strong,
#pun-stats li.item4 strong {
    font-weight: 400;
}

/* Активные пользователи за сутки */

li#onlinelist {
  width: 100%;
  padding: 10px 0;
  /*border-block: 1px dashed #81684f4a;*/
  text-align: justify;
}

li#onlinelist div > a {
  font-weight: 700;
}

/* Шапка форума
------------------------------------------*/

#pun-title {
    background: url(https://upforme.ru/uploads/001c/cf/a0/4/987211.jpg);
    width: 1050px;
    height: 535px;
}

#pun-title .title-logo {
  display: none;
}

/* Объявление
------------------------------------------*/

#pun-announcement h2 {
  display: none;
}

/* Подвал сайта
------------------------------------------*/

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

/* Баннеры */

.banners {
  padding: var(--pad1);
}

.banners .container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    height: 73px;
    justify-content: center;
    overflow: auto;
}

.banners a {
  opacity: .7;
}

.banners a:hover {
  opacity: 1;
}

/* Тема форума
------------------------------------------*/

.post {
    margin: 10px auto 0;
    border-radius: 12px;
    background: var(--sec-bg);
    padding: 8px 0 0;
    text-transform: none;
}

#pun-viewtopic .post {
    width: 998px;
}

.toppost,
.topicpost {
  margin-top: 0;
}

/* Контейнер сообщения */

.punbb .post .container {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  padding: var(--pad2);
}

/* Дата и номер сообщения */

.post h3 {
   background: var(--pun-bg);
}

.post h3 span {
  padding: var(--pad3);
  display: block;
  font-family: var(--font-family);
 /* background: #e8e8e8; */
  font-size: 10px;
}

/* Номер сообщения */

.post h3 strong {
  float: right;
  text-align: right;
  font-weight: normal;
}

.post h3 strong::before {
   content:'#';
}

/* Автор сообщения */

/* Автор сообщения */

.post-author {
    --user-bg: url(https://upforme.ru/uploads/001c/8b/c7/2/219267.jpg);   /* фон за замовчуванням */
    --card-bg: #e2e2e2;                                                   /* колір картки */

    width: var(--pwidth);
    text-align: center;
    box-sizing: border-box;
    background:
        linear-gradient(0deg, var(--card-bg) 70%, rgba(0, 0, 0, 0) 100%),
        var(--user-bg) top center / 100% auto no-repeat,
        var(--card-bg);
    margin-bottom: 15px;
    padding: 40px 10px 20px 10px;
    position: relative;
}

/* фон окремим юзерам: змінюється тільки картинка, розмиття лишається */

/*
#pun-viewtopic .post[data-user-id="5"]  .post-author { --user-bg: url(https://upforme.ru/uploads/001c/8c/2b/5/701926.png); }
#pun-viewtopic .post[data-user-id="6"]  .post-author { --user-bg: url(https://upforme.ru/uploads/001c/8c/2b/6/560386.png); }*/
#pun-viewtopic .post[data-user-id="3"]  .post-author { --user-bg:url(https://i.pinimg.com/1200x/d8/05/71/d80571d7e2cc676f52a7aa848134b313.jpg); }
#pun-viewtopic .post[data-user-id="4"]  .post-author { --user-bg: url(https://i.pinimg.com/736x/47/3e/5b/473e5b97843f9748fc8bd675c2680789.jpg); }
#pun-viewtopic .post[data-user-id="2"]  .post-author { --user-bg:url(https://upforme.ru/uploads/001c/8c/2b/6/560386.png); }
#pun-viewtopic .post[data-user-id="6"]  .post-author { --user-bg:url(https://upforme.ru/uploads/001c/cf/a0/6/161557.png); }

.post-author ul {
  padding: 10px;
  background: var(--sec-bg);
  border-radius: 8px;
}

.pa-author {
    font-family: var(--second-font);
    font-weight: 800;
    font-size: 19px;
    text-transform: uppercase;
}

.pa-title {
    font-family: var(--second-family);
    font-style: italic;
    font-weight: 400;
    font-size: 9px;
    text-transform: lowercase;
    padding: 5px 0;
    text-align: center;
    width: 180px;
    margin: 0 auto 5px;
}

.pa-avatar img {
    border-radius: 4px;
}

.pa-fld1 {
font-family: 'fine';
    /* font-style: italic; */
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    margin: 5px auto 0;
    text-align: center;
    /* background: #814f4f; */
    width: fit-content;
    padding: 2px 1px;
    border-radius: 10px;
    color: #814f4f;
    max-width: 180px;
    box-sizing: border-box;
}

.pa-fld2 {
    font-size: 10px;
    text-transform: lowercase;
    padding: 5px 0;
/* border-bottom: 1px dashed #81684f4a; */
    /* border-top: 1px dashed #81684f4a; */
    text-align: center;
    width: 180px;
    margin: 0px auto 5px;
}

.pa-posts,
.pa-respect, .pa-fld3 {
 display: inline-flex;
  gap: 2px;
  font-size: 10px;
  padding: 0px 5px !important;
  margin-top: 4px !important;
  width: auto;
  text-transform: lowercase;
  line-height: 13px;
  height: auto;
  margin-bottom: 2px;
}

.pa-online,
.pa-last-visit {
  display: none !important;
}

/* Текст сообщения */

.post-body {
  width: calc(100% - var(--pwidth));
  position: relative;
}

.post-box {
  padding: 10px 10px 10px 20px;
}

.post-links {
  margin-left: var(--pwidth);
  width: 100%;
  text-transform: lowercase;
  font-family: var(--font-family);
  font-size: 12px;
}

.post-links ul {
  padding: 0;
  margin-left: calc(var(--pwidth) * -1);
  text-align: right;
}

.post-links li {
  display: inline;
}

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

.pl-email,
.pl-website {
  float: left;
}

.clearer {
  clear: both;
  height: 0;
  font-size: 0;
}

.punbb .post td {
  border: 0px transparent !important;
}

pre {
  font: 12px/140% Inter, monaco, "bitstream vera sans mono", "courier new", courier, monospace;
}

.post-content em {
  font-style: italic;
}

.post .post-content td {
  border-width: 0px !important;
}

.post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}

.post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  text-align: justify;
  text-transform: none;
}

.post-content img {
  vertical-align: middle;
}

.scrollbox {
  width: 100%;
  overflow: auto;
  max-height: 200px;
}

.quote-box,
.code-box {
        margin: 20px 10px 10px;
    padding: 12px;
    border: 1px solid var(--add-acc);
    background: var(--pun-bg);
    border-radius: 12px;
    position: relative;
}

.code-box strong a {
   color: var(--link);
}

.quote-box cite, .code-box strong {
    font-weight: bold;
    font-style: normal;
    background: #d3cfc8;
    padding: 3px 20px;
    border-radius: 15px;
    position: absolute;
    top: -6px;
    color: var(--link);
    margin-left: 15px;
    font-family: var(--font-family);
    font-size: 11px;
    text-transform: lowercase;
    transform: translateY(-50%);
}

.code-box strong.legend {
  display: block;
  padding-bottom: 5px;
  font-weight: bold;
  font-style: normal;
}

.post-content .spoiler-box>div::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--link-hover);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s linear 0s;
}

.post-content .spoiler-box > div.visible::before {
    transform: translateY(-50%) scale(50%);
}

.post-content .spoiler-box>div {
    background: transparent !important;
    padding-left: 25px!important;
    position: relative;
}

.post-sig dt {
  border-bottom: 1px solid var(--link-hover);
  width: 300px;
  margin: 10px auto;
}

#main-reply {
  box-sizing: border-box;
  border-radius: 0 0 10px 10px;
}

#post-form legend >span {
  display:none;
}

#tags {
  position: relative;
}

#tags .container {
  padding: var(--pad3) !important;
  top: 0 !important;
}

/* Профиль и личные сообщения
------------------------------------------*/

#pun-profile {
    font-family: var(--font-family);
    text-transform: lowercase;
}

#pun-profile h1 span {
    font-size: 15px;
    padding: 5px;
    border-top: 1px dashed #81684f4a;
    border-bottom: 1px dashed #81684f4a;
}

#pun-profile h1 {
    display: none !important;
}

#viewprofile-next {
   margin-left: 30px;
}

#viewprofile tr {
    display: flex;
    gap: 50px;
    align-items: center;
}

#viewprofile-next #profile-left {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    outline: 10px solid var(--main-acc);
    padding-bottom: 10px;
}

#viewprofile-next #profile-left li#profile-name strong {
    font-family: var(--second-family);
    font-style: italic;
    font-weight: 800 !important;
    font-size: 15px;
    text-transform: uppercase;
}

#profile-left li#profile-title strong {
    width: 180px;
    display: block;
    text-align: center;
}

#profile .container {
  padding-left: 200px;
  min-height: 100px;
}

#profilenav {
  float: left;
  width: 180px;
  margin-left: -180px;
}

#profilenav h2 {
   display: none;
}

#viewprofile h2,
#profilenav h2 {
  padding: 0;
  margin: 0;
}

#profilenav li {
  padding: 0 0 13px;
}

#profilenav li a {
    /* background: var(--main-acc); */
    text-align: center;
    border-radius: 10px;
    color: #000000;
    padding: 2px 10px;
}

#viewprofile li {
  padding: 5px 0;
}

#profile-right li {
  display: flex;
}

#profile-right li span {
    width: 146px;
    flex-shrink: 0;
    background: var(--main-acc);
    text-align: center;
    padding: 2px 0;
    border-radius: 10px;
    color: #000000;
}

#profile-right li span a {
    color: #000000;
}

#profile-left li strong, #profile-right li strong {
  font-weight: normal !important;
}

img.avatardemo {
  float: right;
  margin: 0 0 8px 18px;
}

#pun-messages .clearer {
  display: none;
}

/* Прочие страницы
------------------------------------------*/

#pun-userlist .formal,
#pun-userlist .formal .container {
  margin-bottom: 0;
}

#pun-userlist .tc2 {
  text-align: left;
  width: 20%;
}

#pun-userlist .tcl {
  width: 40%
}

.info .container {
  padding: var(--pad3);
}

.info .container .backlink {
  padding-top: 8px;
}

.info-box {
  margin: 0 0 10px 0;
}

.info-box * {
  padding: 0 0 5px 0;
}

.info-box .legend {
  font-weight: bold;
}

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

.tipsy #respect figcaption {
  margin-top: 0;
}

/* Кнопки прокрутки вверх и вниз
-------------------------------------------------------*/

.go-up,
.go-down {
  cursor: pointer;
  z-index: 9999;
  display: none;
  position: fixed;
  margin-left: 1050px !important;
  box-sizing: border-box;
  transition: all .3s linear 0s;
}

.go-up {
    top: 420px;
    width: 20px;
    height: 60px;
    line-height: 0px;
    border-radius: 0px 10px 10px 0px;
    text-align: center;
    padding-left: 0px;
    background: var(--link-hover);
}

.go-down {
    top: 497px;
    width: 20px;
    height: 60px;
    line-height: 0px;
    text-align: center;
    padding-left: 0px;
 background: #cabeae;
    border-radius: 0px 10px 10px 0px;
}

.go-down:hover,
.go-up:hover {
  opacity: 1;
}

»
   (.reveal-modal-bg) до кінця правила `.character {…
}

`.
   Нижче лишається `.plads-img-grid …` і все інше.
   Теми беруться зі змінних форуму, окремих стилів не треба.
   ========================================================= */

/* ========== ПЕРСОНАЛЬНА СТОРІНКА (модальне вікно) ========== */

/* ---------- затемнення фону ---------- */
.reveal-modal-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 100;
  display: none;
}

/* ---------- вікно ---------- */

.reveal-modal {
  --m-line: 1px solid color-mix(in srgb, var(--link-hover) 28%, transparent);
  visibility: hidden;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  width: 860px;
  height: 360px;
  padding: 0;
  display: block;
  box-sizing: border-box;
  background: var(--sec-bg);
  border: var(--m-line);
  border-radius: 12px;
  /* перший шар: затемнення всього екрана, другий: тінь вікна */
  box-shadow: 0 0 0 200vmax rgba(10, 13, 10, .72), 0 18px 50px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.reveal-modal::before { display: none;
}

.reveal-modal .close-reveal-modal {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  font-size: 22px;
  line-height: .5;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  color: var(--link);
  opacity: .55;
  transition: opacity .2s ease;
}

.reveal-modal .close-reveal-modal:hover { opacity: 1; color: var(--link-hover);
}

/* контейнери всередині: без старого темного фону */

.reveal-modal .character {
  width: 100%;
  height: 358px;
  max-height: none;
  padding: 0;
  display: block;
  background: none;
  border: 0;
  overflow: hidden;
}

.reveal-modal .charinner {
  display: flex;
  width: 100%;
  height: 358px;
  gap: 0;
  flex-wrap: nowrap;
}

.charinner * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--link-hover) 55%, transparent) transparent;
}

/* ---------- підпис розділу ---------- */

.ch_title {
  position: absolute;
  top: -10px;
  left: 14px;
  z-index: 2;
  margin: 0;
  padding: 3px 12px 4px;
  border-radius: 999px;
  background: var(--link-hover);
  color: #f1f1ef;
  font: 400 12px/1 var(--second-font);
  letter-spacing: .6px;
  text-transform: lowercase;
  white-space: nowrap;
}

/* =========================================================
   ЛІВА КОЛОНКА: персонаж + ТВІНКИ
   ========================================================= */

.ch_twins {
  flex-shrink: 0;
  width: 280px;
  height: 358px;
  padding: 18px 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: color-mix(in srgb, var(--link-hover) 14%, var(--sec-bg));
  border-right: var(--m-line);
}

/* картка персонажа */

.me {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.me_avatar {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  border: var(--m-line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  /* filter: grayscale(100%);  розкоментуй, якщо аватар має бути чорно-білим */
}

.me_text { min-width: 0; max-height: 80px; overflow: auto;
}

.me_text h4 {
  margin: 0 0 4px;
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--link-hover);
}

.me_text p {
  margin: 0;
  font-family: var(--second-family);
  font-size: 9px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--link) 72%, transparent);
}

/* список твінків */

.twins_box {
  position: relative;
  flex: none;
  height: 228px;
  padding: 18px 10px 10px;
  box-sizing: border-box;
  background: var(--pun-bg);
  border: var(--m-line);
  border-radius: 10px;
}

.twins_inner {
  position: absolute;
  inset: 18px 10px 10px 10px;          /* жорсткі межі: все, що не влізло, прокручується */
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.twin_item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--sec-bg);
  border-radius: 10px;
}

.twin_item img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.twin_item a {
  font-family: var(--second-font);
  font-size: 14px;
  line-height: 1.1;
  color: var(--link);
}

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

/* =========================================================
   ЦЕНТР: ФОНИ
   ========================================================= */

.ch_bgs {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 262px;
  height: 308px;
  margin-left: 14px;
  padding: 22px 12px 12px;
  box-sizing: border-box;
  background: var(--pun-bg);
  border: var(--m-line);
  border-radius: 10px;
}

.bgs_inner {
  position: absolute;
  inset: 22px 12px 12px 12px;          /* жорсткі межі: все, що не влізло, прокручується */
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 72px;
  gap: 5px;
}

.bgs_inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: var(--m-line);
  display: block;
}

/* =========================================================
   ПРАВА КОЛОНКА: ПЛАШКИ (лампаси) + КУПОНИ
   ========================================================= */

.ch_right {
  flex-shrink: 0;
  width: 304px;
  height: 358px;
  padding: 26px 14px 18px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ch_plates {
  position: relative;
  flex: none;
  height: 200px;
  padding: 0 8px 8px 10px;
  box-sizing: border-box;
  background: var(--pun-bg);
  border: var(--m-line);
  border-radius: 10px;
}

.plates_inner {
  position: absolute;
  inset: 20px 8px 10px 8px;          /* жорсткі межі: все, що не влізло, прокручується */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* кожна плашка: горизонтальна картинка 220x41 */

.plates_inner img {
  display: block;
  flex-shrink: 0;
  width: 220px;
  height: 41px;
  object-fit: cover;
  border-radius: 6px;
}

.plates_inner .tooltip { display: block; flex-shrink: 0;
}

/* роздільник у сітці */

.divider {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 4px 0;
  opacity: .35;
}

.divider span {
  width: 80%;
  height: 0;
  border-bottom: 1px dashed var(--link);
}

/* підказки */

.tooltip { position: relative; display: inline-block; line-height: 0;
}

.tooltip .tooltiptext {
  position: fixed;                 /* позицію виставляє маленький скрипт */
  z-index: 10;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 110px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--link-hover);
  color: #f1f1ef;
  font: 500 9px/1.25 var(--second-family);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;
}

/* купони */

.ch_coupons {
  position: relative;
  flex-shrink: 0;
  height: 96px;
  padding: 20px 10px 8px;
  box-sizing: border-box;
  background: var(--pun-bg);
  border: var(--m-line);
  border-radius: 10px;
}

.coupons_inner {
  position: absolute;
  inset: 20px 10px 8px 10px;          /* жорсткі межі: все, що не влізло, прокручується */
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coupon_item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--sec-bg);
  border-radius: 10px;
}

.coupon_item::before {
  content: '\f145';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--link-hover);
  color: #f1f1ef;
  font: 900 10px/1 'Font Awesome 6 Pro';
}

.coupon_item span {
  display: block;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.1;
  color: var(--link);
}

.coupon_item p {
  margin: 1px 0 0;
  font-family: var(--second-family);
  font-size: 8px;
  line-height: 1.2;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--link) 70%, transparent);
}

.plads-img-grid,
.plads-img-grid tr,
.plads-img-grid td {
  border: none !important;
  background: transparent;
}

/* Формы
------------------------------------------- */

#font-area {
    height: 220px;
    width: 680px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    padding: 15px !important;
    max-height: 144px;
    overflow: auto;
}

.noNull:before {
  content: "+";
  font-size: 9px;
  display: inline-block;
  margin-left: -6px;
  margin-top: 0px;
  position: absolute;
}

div .post-rating p>a {
  text-align: center;
  outline: 1px solid transparent;
  font-weight: 700;
  background: url(https://forumstatic.ru/files/001b/a6/d4/26514.svg) no-repeat center;
  background-size: 38px auto;
  position: relative;
  padding-left: 1px;
  z-index: 100;
  width: 38px;
  height: 38px;
  text-align: center;
  font-size: 11px !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 34px;
  letter-spacing: -1px;
  color: #3a3a3a;
}

/* Сердечко репутації: темніше після "змінити репутацію" та при наведенні */
div .post-rating p>a {
  transition: filter .3s ease, color .3s ease;
}
 
.mylike .post-rating p>a,
.post-rating.mylike p>a,
div .post-rating p>a:hover {
  filter: brightness(.78);   /* менше число = темніше (0.6 темніше, 0.9 ледь помітно) */
}
 

div.dark-style .post-rating p>a {
  color: var(--link-hover) !important;
}

div.post-vote {
    margin-bottom: 65px;
}

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

.post.dark-style div.post-vote p>a {
  background: url(https://forumstatic.ru/files/0012/d8/04/38128.png?) no-repeat;
  background-size: 100%;
}

#pun-navlinks a:not(.NextShow)+span.odd { 
display:none!important;
}

#pun-navlinks a#New-exit {
  background: transparent!important; 
  position:absolute;
  z-index:100000!important;
  margin-top: -1px !important;
  margin-left: 30px !important;
  display:inline-block!important;
}

#pun-navlinks #New-exit img { 
position: absolute;
width: 18px;
height: auto;
transition: .63s;
}

#pun-navlinks #New-exit:hover img {
transition: .63s;
 opacity: .42;
}

.punbb #pun-navlinks a#New-exit:before {
    content:none;
}

.punbb #pun-navlinks #form-login input {
text-align: center;
border: 1px solid #5D6755;
text-rendering: auto; 
color: #000000!important;  
margin-top: 4px!important;
margin-bottom: 3px!important;
border-radius: 5px; 
letter-spacing: 0.2; 
word-spacing: normal; 
text-transform: none; 
text-indent: 0px; 
text-shadow: none; 
display: inline-block!important; 
text-align: center;
box-sizing: border-box;
height:20px;
width:67px;
width: 110px;
padding: 4px;
font: normal normal 400 11px/normal Verdana!important; rgb(250, 255, 189)
background-color: rgba(250,255,189,.88);
}

.punbb #form-login #fld1:empty,#form-login #fld2:empty,
.punbb #form-login #fld1,#form-login #fld2 { 
background-color: #d4d4d4;
}

.punbb #pun-navlinks #form-login input[type="submit"] { 
margin: 13px 0 2px!important;
box-sizing: border-box;
height:26px;
width:67px;
font-size: 11px!important;
color: #ffffff !important;
background: #2c2c2c;
border: 1px outset rgba(161,172,152,.8)!important;
text-align: center;
padding: 0 12px!important;
border-radius: 13px;
font-family: Verdana!important;
font-weight: 700!important;
transition: all 0.5s ease-in-out 0s;
letter-spacing: 0.8;
cursor:pointer;

/*border: 2px outset #83693E!important; 
color:#565462!important;
font-weight:700!important; */
}

.punbb #pun-navlinks #form-login input[type="submit"]:hover {
  opacity:0.6;
}

.punbb #pun-navlinks #form-login { 
background: #EFEFEF;
min-height:183px;
border: 1px solid #626262;
border-radius: 0px 0px 6px 6px;
color: #000000;/*BCBCBC;*/
display: block;
font: 11px "Verdana";
left: 0px;
padding: 8px 12px;
margin: 1px 0;
position: absolute !important;
text-align: center;
word-spacing: normal;
white-space: normal;
/*text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.235);*/
text-transform: none;
letter-spacing: 0.2px!important; 
top: 6px;
width: 122px;
z-index: 100000!important;
}

#pun-navlinks #navlogin #form-login {
  margin-left: -30px;/*Подвижки формы влево от вход*/
}

#pun-navlinks #navlogout #form-login { 
  margin-left: -30px;/*Подвижки формы влево от выход*/
}

.ismoderator #pun-navlinks #navlogout #form-login {
  margin-left: -30px!important;/*Подвижки формы влево от выход для АМС*/
}

#pun-navlinks #form-login input[value="Войти"]+p { 
 margin: 11px 0;
}

.punbb #pun-navlinks #form-login a.Rega, 
.punbb #pun-navlinks #form-login a.Forgot { 
position:relative; 
text-transform: none!important; 
z-index:20; 
cursor:pointer; 
font: normal normal 200 10px/normal Verdana!important; 
letter-spacing: 0.4!important; 
display:inline;
background: none!important;
padding: 0 0 0 3px!important;
color: #76333C!important;
font-size: 9px!important;
/*text-shadow: 1px 1px 1px rgba(40, 52, 61, 0.39);*/
}

.punbb #pun-navlinks #form-login a.Rega:before, 
.punbb #pun-navlinks #form-login a.Forgot:before {
  content:none;
}

#form-login input.none { 
outline:red dashed 2px!important;
}

#List-UserNames { 
position:absolute; 
margin-top:-9px; 
min-height:90px; 
width:220px; 
right:100%; 
padding: 12px 19px 12px 17px; 
background: #EFEFEF;
border-color: #626262; /* Цвет границы */
border-style: solid; /* Стиль границы */
border-width: 1px 1px 1px 1px; /* Толщина границы */ 
border-radius:0 0 0px 6px;
text-align:center; 
/*box-shadow:inset 0.23em 0 3.4em rgba(20,20,11,.99);*/
}

.punbb #List-UserNames ul {
padding: 0;
overflow:hidden; 
overflow-y:auto; 
min-height:36px; 
max-height:72px;/*Видимое число Ников без прокрутки! сейчас - 4*/
}

.punbb #List-UserNames li {
display: block!important;
position: relative;
background: #2c2c2c;
text-transform:none!important;
text-align: left;
box-shadow: 2px 2px 1px rgb(149, 151, 143);
padding-left: 5px!important;
font: normal normal 700 12x/normal Verdana!important;
letter-spacing: 0.4;
margin: 1px auto!important;
padding: 2px 0;
transition: .33s;
}

.punbb #List-UserNames li:hover { 
opacity:.84; 
/*background:#83693E!important;*/
}

.punbb #List-UserNames li>b { 
cursor: pointer;
opacity: .9;
color: #fffefe;;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
letter-spacing: 0.3;
}

.punbb #List-UserNames li>b:hover { 
opacity:.93; 
text-shadow:1px 1px 1px rgba(0,0,0,.6);
}

#List-UserNames ul::-webkit-scrollbar { 
width: 3px; 
height: 5px;
}

#List-UserNames ul::-webkit-scrollbar-track { 
background-color: #393A38; 
border: 0px solid #d7d8d9; 
box-shadow: none;
}

#List-UserNames ul::-webkit-scrollbar-thumb {
background-color: #C0BFBD;
border: 0px solid #d7d8d9; 
box-shadow: none;
}

#List-UserNames ul li>span { 
display:inline-block; 
padding:0 3px; 
position:absolute; 

opacity:.88; 
cursor:pointer; 
top:0;bottom:0; 
right:2px; 
color:#fff; 
font: normal normal
 
700 10.56px/normal Verdana; 
text-shadow:1px 1px 1px rgba(0,0,0,.6);
}

#List-UserNames ul:empty:before { 
display:inline-block; 
content: "У Вас нет запомненных ников, введенных через форму справа, или через перенос ниже!";
}

#navlogin #exit-2 { 
display:none;
}

#pun:not(.isguest) #navlogout .Rega, 
#pun:not(.isguest) #navlogout .Forgot { 
display:none!important;
}

#List-UserNames ul+span { 
display:inline-block; 
padding:6px 0 8px 0; 
text-align:left; 
font: normal normal 400 10.56px/normal Verdana;
}

.punbb #List-UserNames input { 
border: 1px solid #5D6755!important; 
text-shadow: none!important; 
color:#333!important;
background-color: #D4D4D4;
font: normal normal 400 11px/normal Verdana!important; 
/* box-shadow: inset 0px 0px 3px rgba(100,102,80,.97); */ 
margin-top: 9px; 
padding: 2px !important; 
vertical-align: middle;
}

#List-UserNames ul+span b { 
font: normal normal 400 13px/normal Verdana; 
padding:0 3px; 
color: #000000;
}

#List-UserNames .a1-copy { 
display:inline-block!important; 
cursor:pointer; 
float:left;
}

#List-UserNames .a1-paste { 
cursor:pointer; 
display:inline-block!important; 
float:right;
}

.tipsy.a11 { 
font: normal normal 400 11px/normal Verdana!important; 
margin-top:-22px!important; 
margin-left: 148px!important; 
max-width:170px;
}

#pun-index #pun-crumbs1 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#pun-index #pun-crumbs1 p.container {
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
}

/* ---------- LIGHT: сірий + малиновий (як було) ---------- */

/* селектор підсилено: перебиває будь-які інші :root, що лишились у файлі */

/* ========== THEME SWITCH: LIGHT / DARK (змінні обох тем, у т.ч. картинки категорій) ========== */

:root:not([data-forum-theme="dark"]) {
  color-scheme: light;
  --pun-bg: #eeeeee;
  --sec-bg: #f4f4f4;
  --link: #3a3a3a;
  --link-hover: #75424a;
  --link-hover-text: #75424a;   /* колір тексту посилань при наведенні */
  --main-acc: #eaeaea;
  --add-acc: #75424a4a;

  --header-image: url(" https://upforme.ru/uploads/001c/a5/83/2/860860.jpg");
/*  --header-image: url("https://upforme.ru/uploads/001c/a5/83/2/75657.jpg");*/
 
  /* футер: СВІТЛА тема */
  --footer-img: url(https://upforme.ru/uploads/001c/a5/83/2/31919.jpg);
 
  /* плашки announcements */
  --ann-bg: #75424a;
  --ann-ring: #94626b;
  --ann-date-bg: #85505a;
  --ann-text: #f2eeee;
  --ann-hover-bg: #e4e4e4;
  --ann-hover-text: #3a3a3a;
  --ann-hover-ring: #f2f2f2;
 
  /* розміщення елементів у шапці: СВІТЛА тема */
  --quote-top: 277px;  --quote-left: 49px;  --quote-w: 259px;  --quote-h: 99px;
  --b1-top: 101px;     --b1-left: 77px;     --b1-rot: -4deg;
  --b2-top: 116px;     --b2-left: 188px;    --b2-rot: 0deg;
  --b3-top: 107px;     --b3-left: 282px;    --b3-rot: 5deg;
  --nav-top: 127px;    --nav-left: 440px;   --nav-rot: 16deg;
  --nav-color: #3d3b3b;
  --best-link: #4f3a4f;
 
  --theme-control-bg: #f4f4f4;
  --theme-control-text: #75424a;
  --theme-control-border: #75424a66;

  /* ---- картинки категорій (світла тема) ---- */
  --cat1-img: url(https://forumstatic.ru/files/001c/a5/83/24761.jpg);
  --cat2-img: url(https://forumstatic.ru/files/001c/a5/83/57217.jpg);
  --cat3-img: url(https://forumstatic.ru/files/001c/a5/83/61580.jpg);
  --cat4-img: url(https://forumstatic.ru/files/001c/a5/83/79077.jpg);
  --cat5-img: url(https://forumstatic.ru/files/001c/a5/83/50824.jpg);
  --cat6-img: url(https://upforme.ru/uploads/001c/cf/a0/4/865488.png);
  --cat7-img: url(https://upforme.ru/uploads/001c/cf/a0/4/421802.png);
  --cat8-img: linear-gradient(135deg, #75424a55, #75424a22); /* ЗАМІНИ на url(посилання) */
  --cat-overlay: rgba(0, 0, 0, 0);
  --icon-old: url(https://upforme.ru/uploads/001c/a5/83/2/499178.png);
  --icon-new: url(https://upforme.ru/uploads/001c/a5/83/2/696156.png);
}

/* ---------- DARK: темний фон + зелений акцент ---------- */

:root[data-forum-theme="dark"] {
  color-scheme: dark;
 --pun-bg: #cccccc;
    --sec-bg: #d7d7d7;
    --link: #333d33;
    --link-hover: #415549;
    --main-acc: #d0d0d0;
    --add-acc: #7d5e3340;
  /* --header-image: url(https://upforme.ru/uploads/001c/a5/83/2/503297.jpg); */
  --header-image: url(https://upforme.ru/uploads/001c/cf/a0/4/136285.jpg); 

  /* футер: ТЕМНА тема */
  --footer-img: url(https://upforme.ru/uploads/001c/a5/83/2/279815.jpg);
 
  --ann-bg: #415549;
  --ann-ring: #5b7565;
  --ann-date-bg: #4e6558;
  --ann-text: #eef2ee;
  --ann-hover-bg: #d6dad4;
  --ann-hover-text: #1f261f;
  --ann-hover-ring: #e6e9e4;
 
  /* розміщення в шапці: ТЕМНА тема.
     Стартові значення = світлим. Підбирайте під темну картинку шапки. */
  --quote-top: 277px;  --quote-left: 49px;  --quote-w: 259px;  --quote-h: 99px;
  --b1-top: 101px;     --b1-left: 77px;     --b1-rot: -4deg;
  --b2-top: 116px;     --b2-left: 188px;    --b2-rot: 0deg;
  --b3-top: 107px;     --b3-left: 282px;    --b3-rot: 5deg;
  --nav-top: 127px;    --nav-left: 440px;   --nav-rot: 16deg;
  --nav-color: #e6e6e6;
  --best-link: #d6dad4;
 
  --theme-control-bg: #2a2d2a;
  --theme-control-text: #9fbaa8;
  --theme-control-border: #41554999;

  /* ---- картинки категорій (темна тема) ---- */
  --cat1-img: url(https://forumstatic.ru/files/001c/a5/83/24761.jpg);
  --cat2-img: url(https://forumstatic.ru/files/001c/a5/83/57217.jpg);
  --cat3-img: url(https://forumstatic.ru/files/001c/a5/83/61580.jpg);
  --cat4-img: url(https://forumstatic.ru/files/001c/a5/83/79077.jpg);
  --cat5-img: url(https://forumstatic.ru/files/001c/a5/83/50824.jpg);
  --cat6-img: url(https://upforme.ru/uploads/001c/cf/a0/4/865488.png);
 --cat7-img: url(https://upforme.ru/uploads/001c/cf/a0/4/421802.png);
  --cat8-img: linear-gradient(135deg, #41554955, #41554922); /* ЗАМІНИ на url(посилання) */
  --cat-overlay: rgba(20, 26, 22, .45);
  --icon-old: url(https://upforme.ru/uploads/001c/a5/83/2/292276.png);
  --icon-new: url(https://upforme.ru/uploads/001c/a5/83/2/812674.png);
}

/* ---------- Базові поверхні й текст ---------- */

html, body {
  color: var(--link);
}

:root[data-forum-theme="dark"] html,
:root[data-forum-theme="dark"] {
  background-color: #101210;
}

body::before {
  background-color: transparent;
}

#pun {
  color: var(--link);
}

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

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

#pun-navlinks a {
  background: var(--link-hover);
}

#pun-navlinks a:hover {
  background: var(--link);
}

#pun-index .category .container,
#pun .post,
#pun .post-author ul,
#pun .quote-box,
#pun .code-box,
#pun .formal .container,
#pun #tags .container,
#pun .post_report,
#pun .post_reputation,
#pun #MyBookmarks,
#pun .inner.popup_graffiti,
#pun .pun-modal .modal-inner {
  background-color: var(--sec-bg);
  color: var(--link);
}

#pun .post h3 {
  background: var(--pun-bg);
  color: var(--link);
}

#pun-index .tclcon h3 a,
#pun-index .tclcon h3 a:hover {
  color: var(--link);
}

#pun-index .tclcon .desktext {
  color: var(--link);
}

#pun-index .tclcon .desklink a {
  background: var(--main-acc);
  border-color: var(--add-acc);
  color: var(--link-hover-text);
}

#pun-index .tclcon .desklink a:hover {
  background: var(--link-hover);
  color: #fff;
}

#pun-title {
  background-image: var(--header-image);
  background-position: center top;
  background-repeat: no-repeat;
}

#pun input[type="text"],
#pun input[type="password"],
#pun textarea,
#pun select {
  background: var(--sec-bg);
  color: var(--link);
  border: 1px solid var(--add-acc);
}


#pun .quote-box cite,
#pun .code-box strong {
  background: var(--main-acc);
  color: var(--link);
}

#pun .post-author {
  color: var(--link);
}

/* ---------- Додатково для ТЕМНОЇ теми ---------- */

:root[data-forum-theme="dark"] #pun .post .post-author {
  background-color: var(--pun-bg);
}

:root[data-forum-theme="dark"] #pun .post-author ul {
  background: var(--sec-bg);
}

:root[data-forum-theme="dark"] #pun .pa-fld1 {
  color: var(--link-hover-text);
}


:root[data-forum-theme="dark"] #pun-navlinks a:hover {
  background: #2e3a32;
}

:root[data-forum-theme="dark"] #pun .category .container {
  border-color: #343834;
}

:root[data-forum-theme="dark"] #pun .texttable,
:root[data-forum-theme="dark"] #pun .textact {
  background-color: var(--sec-bg);
  color: var(--link);
}

/* ---------- Картинки категорій і футера по темах ---------- */

#pun-about {
  background-image: var(--footer-img);
}

/* ---------- Розміщення елементів у шапці по темах ---------- */

.hdr-quote,
.hdr-best {
  position: absolute;
}

.hdr-quote {
  top: var(--quote-top);
  margin-left: var(--quote-left);
  width: var(--quote-w);
  height: var(--quote-h);
}

.hdr-best1 { top: var(--b1-top); margin-left: var(--b1-left); width: 70px; transform: rotate(var(--b1-rot));
}

.hdr-best2 { top: var(--b2-top); margin-left: var(--b2-left); width: 70px; transform: rotate(var(--b2-rot));
}

.hdr-best3 { top: var(--b3-top); margin-left: var(--b3-left); width: 90px; transform: rotate(var(--b3-rot));
}

.hdr-best a {
  color: var(--best-link) !important;
}

/* навігація "navigation" у шапці (стилі з HTML-верху лишаються, тут лише позиція) */

html .spirit_nav-wrap {
  top: var(--nav-top);
  margin-left: var(--nav-left);
}

html .nav_button {
  color: var(--nav-color);
/*  transform: rotate(var(--nav-rot));*/
}

/* ---------- Плашки announcements (горизонтальні) ---------- */

#announcements {
  justify-content: center;
}

#announcements .inner {
  display: flex;
  gap: 18px;
  padding: 10px 14px 12px;
  overflow: auto hidden;
  justify-content: safe center;
}

#announcements .announcement {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 46px;
  box-sizing: border-box;
  margin-left: 24px;            /* місце під кружечок, що виступає ліворуч */
  padding: 0 24px 0 44px;
  background: var(--ann-bg);
  color: var(--ann-text);
  border-radius: 999px;
  overflow: visible;
  transition: background .25s ease, color .25s ease;
}

#announcements .announcement .date {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--ann-ring);
  border-radius: 50%;
  background: var(--ann-date-bg);
  color: #fff;
  font: 400 17px/1 "Instrument Serif", serif;
  letter-spacing: .3px;
  transition: border-color .25s ease;
}

#announcements .announcement .column {
  padding: 0;
  overflow: visible;
}

#announcements .announcement em {
  display: block;
  height: auto;
  max-width: 20ch;
  font: 400 11px/1.25 var(--second-family);
  text-transform: lowercase;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#announcements .announcement span {
  display: block;
  height: auto;
  max-width: 24ch;
  font: 100 10px/1.25 var(--second-family);
  text-transform: lowercase;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#announcements .announcement:hover {
  background: var(--ann-hover-bg);
  color: var(--ann-hover-text);
}

#announcements .announcement:hover .date {
  background: var(--ann-date-bg);
  border-color: var(--ann-hover-ring);
  color: #fff;
}

/* ---------- Перемикач теми: тепер у лівому верхньому куті ---------- */

#forum-theme-switch {
  position: fixed;
  top: 14px;
  left: 14px;
  right: auto;
  bottom: auto;
  z-index: 9999;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 5px;
  border: 1px solid var(--theme-control-border);
  border-radius: 30px;
  background: var(--theme-control-bg);
  box-shadow: 0 4px 18px #0002;
}

#forum-theme-switch button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-control-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

#forum-theme-switch button:hover {
  transform: translateY(-1px);
}

#forum-theme-switch button[aria-pressed="true"] {
  background: var(--link-hover);
  color: #fff;
}

#forum-theme-switch button:focus-visible {
  outline: 2px solid var(--theme-control-text);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  #forum-theme-switch {
    top: 8px;
    left: 8px;
    right: auto;
    bottom: auto;
  }
}

/* ---------- Менша відстань між рядком «привет, …» і категоріями ---------- */

#pun-status .container {
  padding-bottom: 0;                 /* верхній відступ лишається як був */
}

#pun-index #pun-crumbs1 p.container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#pun-index .category:nth-of-type(1) {
  margin-top: 4px;                   /* регулятор: більше число = далі від рядка «привет» */
}

/* ---------- Сторінка теми: менша відстань між хлібними крихтами і повідомленнями ---------- */

#pun-viewtopic #pun-crumbs1 p.container {
  padding-bottom: 0;                 /* під рядком » necro test » … » код */
}

#pun-viewtopic .linkst {
  padding-top: 0;
  padding-bottom: 0;                 /* рядок «страница: 1 … ответить» */
  margin-bottom: 4px;                /* відстань до першого повідомлення */
}

/* ---------- Дата й номер повідомлення: рамка справа від автора ---------- */

:root { --meta-line: #cfcfcf;
}

:root[data-forum-theme="dark"] { --meta-line: #3b413b;
}

#pun .post {
  position: relative;
}

#pun .post h3 {
  position: absolute;
  top: 18px;                                  /* вирівняно по верху картки автора */
  left: calc(var(--pwidth) + 40px);
  right: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid var(--meta-line);
  border-radius: 10px;
}

#pun .post h3 span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 500;
  color: var(--link);
}

#pun .post h3 strong {
  float: none;
  font-weight: 500;
}

#pun .post h3 strong::before {
  content: '';                                /* прибирає «#» перед номером */
}

#pun .post h3 .FNTslider {
  float: none;
  margin: 0 8px;
}

/* місце під рамку над текстом повідомлення */

#pun .post-box {
  padding-top: 50px;
}

/* повідомлення зі схованим мініпрофілем [hideprofile]: рамка на всю ширину */

#pun .post.hideprofile h3 {
  left: 30px;
}

/* ---------- Рамка дати = як у code / quote ---------- */

#pun .post h3 {
  border: 1px solid var(--add-acc);
  border-radius: 12px;
}

/* на скріні номер стояв ліворуч, а час праворуч; повертаємо як у вашому зразку:
   час зліва, номер справа */

#pun .post h3 span {
  flex-direction: row-reverse;
}

/* ---------- Рамка навколо мініпрофілю = як у code / quote ---------- */

#pun .post .post-author {
  border: 1px solid var(--add-acc);
  border-radius: 12px;
}

/* ---------- Профіль: по центру, заокруглені краї ---------- */

#viewprofile-next {
  margin: 0 auto;                    /* замість margin-left: 30px */
  width: 990px;                      /* як ширина категорій */
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px 30px;                /* місце для рамки навколо аватара (outline 10px) */
  background: var(--sec-bg);
  border-radius: 16px;
}

/* якщо фон лежить на зовнішніх обгортках, а не на #viewprofile-next */

#pun-profile #profile .container,
#pun-profile #viewprofile,
#pun-profile #viewprofile .container {
  background: transparent;
  border-radius: 16px;
}

#pun-profile #profile {
  width: 990px;
  max-width: calc(100% - 60px);
  margin: 0 auto;
}

/* посилання в тексті постів — жирні й кольорові */
.punbb .post-content a:not(.dice-btn) {
  font-weight: 700;
  text-decoration: none;
  color: var(--link, #75424a);
}
[data-forum-theme="dark"] .punbb .post-content a:not(.dice-btn) {
  color: var(--link, #415549);
}
.punbb .post-content a:not(.dice-btn):hover {
  text-decoration: underline;
}

/* ---------- Навігація «navigation»: позиція і палітра по темах ---------- */

/* СВІТЛА тема */

:root:not([data-forum-theme="dark"]) {
  --nav-top: 127px;                    /* вертикаль */
  --nav-left: 440px;                   /* горизонталь */
  --nav-rot: 16deg;                    /* нахил */

  --nav-color: #75424a;                /* напис «navigation» */
  --nav-color-hover: #3a3a3a;
  --nav-dd-bg: #eaeaea;                /* випадне меню */
  --nav-dd-border: #75424a4a;
  --nav-dd-link-bg: #75424a;
  --nav-dd-link-text: #f4f4f4;
  --nav-dd-link-hover-bg: #f4f4f4;
  --nav-dd-link-hover-text: #75424a;
  --best-link: #5c3038;                /* alastor / marlene / charlotte */
}

/* ТЕМНА тема */

:root[data-forum-theme="dark"] {
    --nav-top: 407px;
    --nav-left: 600px;
    --nav-rot: 0deg;
    --nav-color: #9fbaa800;
    --nav-color-hover: #ffffff00;
    --nav-dd-bg: #222522;
    --nav-dd-border: #41554999;
    --nav-dd-link-bg: #415549;
    --nav-dd-link-text: #e8ece6;
    --nav-dd-link-hover-bg: #d6dad4;
    --nav-dd-link-hover-text: #1f261f;
    --best-link: #c4d4c9;
}

html .nav_button:hover {
  color: var(--nav-color-hover);
}

html .nav_block {
  background: var(--nav-dd-bg);
  border: 1px solid var(--nav-dd-border);
}

html .nav_block .link a {
  background: var(--nav-dd-link-bg);
  color: var(--nav-dd-link-text) !important;
}

html .nav_block .link a:hover {
  background: var(--nav-dd-link-hover-bg);
  color: var(--nav-dd-link-hover-text) !important;
}

/* =========================================================
   МІНІПРОФІЛЬ: плашка fld4 + статистика (іконка + число)
   ========================================================= */

/* ---------------------------------------------------------
   1. Плашка внизу картки (поле fld4)
   --------------------------------------------------------- */

/* картка автора: плашка завжди внизу */

#pun .post-author ul {
  display: flex;
  flex-direction: column;
}

/* плашка */

#pun .post-author .pa-fld4 {
  order: 99;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  margin: 14px -10px -10px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: var(--ann-bg);
  color: var(--ann-text);
  font: 400 8px/1.4 var(--second-family);
  text-transform: none;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

#pun .post-author .pa-fld4 a {
  color: inherit;
}

/* перший рядок тексту: великі літери, жирніше */

#pun .post-author .pa-fld4::first-line {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

/* картинка з поля: на всю плашку, під текстом */

#pun .post-author .pa-fld4 img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

/* затемнення поверх картинки */

#pun .post-author .pa-fld4:has(img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .21);
  /*background: color-mix(in srgb, var(--ann-bg) 55%, transparent);*/
}

/* ---------------------------------------------------------
   2. Статистика над плашкою fld4: контурна іконка + число
   --------------------------------------------------------- */

/* ряд: 3 або 4 пункти рівномірно по ширині картки */

#pun .post-author .addflds {
  order: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin-top: 6px;
}

/* один пункт: без фону й рамки */

#pun .post-author .addflds > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: 0;
  line-height: 1;
}

/* старий текст («mess: 5») ховаємо, коли скрипт зчитав число */

#pun .post-author .addflds > li[data-val] {
  font-size: 0;
}

/* іконка (контурна) */

#pun .post-author .addflds > li::before {
  font-family: 'Font Awesome 6 Pro';
  font-weight: 400;
  font-size: 12px;
  color: var(--link);
  opacity: .6;
  transition: color .2s ease, opacity .2s ease;
}

#pun .post-author .addflds > .pa-posts::before { content: '\f4a6';
}

/* повідомлення */

#pun .post-author .addflds > .pa-respect::before { content: '\f004';
}

/* серце */

#pun .post-author .addflds > .pa-giftbox::before { content: '\f0e0';
}

/* конверт (подарунки) */

#pun .post-author .addflds > .pa-fld3::before { content: '\24';
}

/* долар (money) */

/* число */

#pun .post-author .addflds > li[data-val]::after {
  content: attr(data-val);
  margin-top: 5px;
  font: 400 10px/1 arial;
  color: var(--link);
}

/* при наведенні іконка підсвічується кольором теми */

#pun .post-author .addflds > li:hover::before {
  color: var(--link-hover);
  opacity: 1;
}

/* посилання «Уважение» лишається клікабельним */

#pun .post-author .addflds > .pa-respect a {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: 0;
}

/* ---------- Картинки категорій і іконки (обидві теми) ---------- */

/* ---------- Каркас категорії ---------- */

/* ========== КАТЕГОРІЇ НА ГОЛОВНІЙ ========== */

#pun-index .category h2 {
  display: none;                         /* стару смугу-банер ховаємо */
}

#pun-index .category .container {
  position: relative;
  margin: 0;
  padding: 0;
  background: var(--sec-bg);
  border: 1px solid var(--add-acc);
  border-radius: 12px;
}

:root[data-forum-theme="dark"] #pun #pun-index .category .container {
  border-color: var(--add-acc);          /* темна рамка тепер за палітрою теми */
}

/* вертикальна картинка зліва на всю висоту */

#pun-index .category .container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 100%;
  background: var(--cat1-img) center / cover no-repeat;
  border-radius: 11px 0 0 11px;
}

/* ---------- Рядки форумів ---------- */

#pun-index .category table tr {
  display: flex;
  align-items: center;
  gap: 0 30px;
  position: relative;
  margin: 15px 20px 15px 150px;          /* 150px = місце під картинку зліва */
  padding: 10px 0;
}

/* пунктирні лінії між форумами */

#pun-index .category tbody:not(:last-of-type) tr,
#pun-index .category tr:not(:last-child) {
  border-bottom: 1px dashed var(--add-acc);
  padding-bottom: 24px;
}

#pun-index .category tbody td {
  padding: 0;
}

#pun-index .category tbody td.tcl {
  flex: 1;
  width: auto;
  min-width: 0;
}

#pun-index .category tbody td.tcr {
  flex: none;
  width: 280px;
}

#pun-index .category td.tc2,
#pun-index .category td.tc3,
#pun-index .category td.tcmod {
  display: none;
}

/* текстовий блок поруч з короною */

#pun-index .category td div.tclcon {
  margin: 0;
  display: flow-root;
}

#pun-index .tclcon .desktext {
  width: auto;
  max-width: 650px;
}

/* ---------- Корона: стара / нова ---------- */

#pun-index .category tr div.icon {
  position: static;
  float: left;
  display: block;
  width: 91px;
  height: 80px;
  margin: 0 10px 0 -35px;
  background: var(--icon-old) center / contain no-repeat;
  border-radius: 0;
}

#pun-index .category tr.inew div.icon {
  background: var(--icon-new) center / contain no-repeat;
}

/* затемнення: у світлій теми немає, у темній 25% */

/* темна тема: інші картинки й корони */

/* картинка категорії = затемнення поверх картинки */

#pun-index .category:nth-of-type(1) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat1-img);
}

#pun-index .category:nth-of-type(2) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat2-img);
}

#pun-index .category:nth-of-type(3) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat3-img);
}

#pun-index .category:nth-of-type(4) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat4-img);
}

#pun-index .category:nth-of-type(5) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat5-img);
}

#pun-index .category:nth-of-type(6) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat6-img);
}

#pun-index .category:nth-of-type(7) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat7-img);
}

#pun-index .category:nth-of-type(8) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat8-img);
}

/* ========== ANNOUNCEMENTS ========== */

/* ---------- Кольори по темах ---------- */

:root:not([data-forum-theme="dark"]) {
  --ann2-bg: #dcdddf;
  --ann2-hover-bg: #d0d1d4;
  --ann2-text: #2b2f31;
  --ann2-badge: linear-gradient(135deg, #a9737d, #75424a);
  --ann2-ring: rgba(255, 255, 255, .55);
}

:root[data-forum-theme="dark"] {
  --ann2-bg: #c3c5c4;
  --ann2-hover-bg: #b8bab9;
  --ann2-text: #1f261f;
  --ann2-badge: linear-gradient(135deg, #5f7d6c, #415549);
  --ann2-ring: rgba(255, 255, 255, .4);
}

/* ---------- Ряд ---------- */

#announcements .inner {
  gap: 14px;
  padding: 6px 14px;
}

/* ---------- Пілюля ---------- */

#announcements .inner .announcement {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  min-width: 170px;
  margin-left: 0;
  padding: 0 24px 0 7px;
  box-sizing: border-box;
  background: var(--ann2-bg);
  color: var(--ann2-text);
  border-radius: 999px;
  transition: background .25s ease;
}

#announcements .inner .announcement:hover {
  background: var(--ann2-hover-bg);
  color: var(--ann2-text);
}

/* ---------- Дата: круг усередині пілюлі ---------- */

#announcements .inner .announcement .date {
  position: static;
  transform: none;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: var(--ann2-badge);
  color: #fff;
  font: 700 13px/1 "Instrument Serif", serif;
  letter-spacing: .2px;
}

#announcements .inner .announcement:hover .date {
  border: 0;
  background: var(--ann2-badge);
}

/* ---------- Текст ---------- */

#announcements .inner .announcement .column {
  padding: 0;
}

#announcements .inner .announcement em {
  max-width: 24ch;
  font: 500 9px/1.3 var(--second-family);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: inherit;
}

#announcements .inner .announcement span {
  max-width: 28ch;
  font: 400 9px/1.3 var(--second-family);
  letter-spacing: .4px;
  color: inherit;
  opacity: .7;
}

/* Announcements: текст ближче до кружка */

#announcements .inner .announcement {
  justify-content: flex-start;   /* замість space-between */
  gap: 10px;                     /* відстань між кружком і текстом */
  min-width: 0;                  /* пілюля підлаштовується під текст */
}

/* ---------- Навігація «navigation»: позиція й прозорий напис ---------- */

/* світла тема: те саме місце, що в темній, але на 5px нижче */

:root:not([data-forum-theme="dark"]) {
  --nav-top: 418px;
  --nav-left: 600px;
  --nav-rot: 0deg;
  --nav-color: transparent;
  --nav-color-hover: transparent;
}

/* темна тема: позиція як була, напис прозорий */

:root[data-forum-theme="dark"] {
  --nav-top: 407px;
  --nav-left: 600px;
  --nav-rot: 0deg;
  --nav-color: transparent;
  --nav-color-hover: transparent;
}

/* ---------- Плашка fld4: градієнт замість картинки ---------- */

/* світла тема: бордовий */

:root:not([data-forum-theme="dark"]) {
  --plate-bg: linear-gradient(120deg, #5a2f36 0%, #75424a 45%, #a9737d 100%);
}

/* темна тема: зелений */

:root[data-forum-theme="dark"] {
  --plate-bg: linear-gradient(120deg, #2b3a31 0%, #415549 50%, #6f8f7a 100%);
}

#pun .post-author .pa-fld4 {
  background: var(--plate-bg);
}

/* ---------- Репутація: плюс ховаємо, сердечко веде на статистику ---------- */

/* плюс (relation.php) прибираємо повністю */

#pun .post-author .pa-respect a[href*="relation.php"] {
  display: none !important;
}

/* посилання на статистику (respect.php) розтягнуте на плашку із сердечком */

#pun .post-author .addflds > .pa-respect a[href*="respect.php"] {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: 0;
}

/* ========== КНОПКИ: єдиний стиль (відправити / подивитись / усі інші) ========== */
:root:not([data-forum-theme="dark"]) {
  --btn-bg: #75424a;
  --btn-text: #f4f4f4;
  --btn-border: #75424a;
  --btn-hover-bg: #f4f4f4;
  --btn-hover-text: #75424a;
}
:root[data-forum-theme="dark"] {
  --btn-bg: #415549;
  --btn-text: #e8ece6;
  --btn-border: #415549;
  --btn-hover-bg: #d6dad4;
  --btn-hover-text: #1f261f;
}

#pun input.button,
#pun input[type="button"],
#pun input[type="submit"],
#pun button.button,
#pun a.button,
#pun #sub4,
#pun .formsubmit input,
#pun .formsubmit a.button {
  box-sizing: border-box;
  padding: 4px 14px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  line-height: 1.3;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
#pun input.button:hover,
#pun input[type="button"]:hover,
#pun input[type="submit"]:hover,
#pun button.button:hover,
#pun a.button:hover,
#pun #sub4:hover,
#pun .formsubmit input:hover,
#pun .formsubmit a.button:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  border-color: var(--btn-border);
}

/* друга кнопка (посмотреть): контурна */
#pun input[name="preview"],
#pun .formsubmit input[name="preview"] {
  background: transparent;
  color: var(--btn-border);
}
#pun input[name="preview"]:hover {
  background: var(--btn-bg);
  color: var(--btn-text);
}

/* відступ між кнопками */
#pun .formsubmit input + input,
#pun .formsubmit input + a {
  margin-left: 6px;
}

/* ========== ПОСИЛАННЯ: без жирного ========== */
#pun .linkst,
#pun .linksb,
#pun .linkst .pagelink,
#pun .linksb .pagelink,
#pun .pagelink a,
#pun .pagelink strong,
#pun .subscribelink,
#pun .subscribelink a,
#pun .linksb a,
#pun .linkst a,
#pun .postlink a,
#pun li#onlinelist div > a,
#pun .topic-users-in a {
  font-weight: 400;
}
#pun .pagelink strong,
#pun .pagelink .current {
  color: var(--link-hover);   /* поточна сторінка: колір + жирний */
  font-weight: 700;
}

/* ========== ПОСИЛАННЯ В МІНІПРОФІЛІ (лз, описи): жирні й кольорові ========== */
#pun .post-author .pa-fld2 a,
#pun .post-author .pa-fld3 a,
#pun .post-author .pa-title a {
  color: var(--link-hover) !important;
  font-weight: 700 !important;
  text-decoration: none;
  border-bottom: 0;
  transition: color .2s;
}
#pun .post-author .pa-fld2 a:hover,
#pun .post-author .pa-fld3 a:hover,
#pun .post-author .pa-title a:hover {
  color: var(--link) !important;
  font-weight: 700 !important;
}

/* ========== АКТИВНІ КОРИСТУВАЧІ: вужчий відступ між колонками ========== */
#pun-online table {
  table-layout: fixed;
  width: 100%;
}
#pun-online table th:nth-child(1),
#pun-online table td:nth-child(1) { width: 32%; text-align: left; }
#pun-online table th:nth-child(2),
#pun-online table td:nth-child(2) { width: 42%; text-align: left; }
#pun-online table th:nth-child(3),
#pun-online table td:nth-child(3) { width: 26%; text-align: right; }
#pun-online table td { padding: 8px 10px; }

/* ========== КНОПКА «КИНУТЬ КУБИК» у формі ответа ========== */
#pun .formsubmit.has-dice-btn { position: relative; }
#pun .formsubmit .dice-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 4px 14px;
  background: transparent;
  color: var(--btn-border);
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#pun .formsubmit .dice-btn:hover {
  background: var(--btn-bg);
  color: var(--btn-text);
}

/* ===== реакції: праворуч біля лайків + під дизайн ===== */
.punbb .post-body .reactions-root {
  position: absolute;
  right: 62px;
  bottom: 19px;
  padding: 0;
  z-index: 5;
}
.punbb .reactions-container {
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
}
.punbb .reaction-counters-container {
  flex-direction: row-reverse;
  gap: 6px;
}

/* чіпи */
.punbb .reaction-chip {
  height: 26px;
  border: 1px solid rgba(107,61,70,.35) !important;
  background: transparent !important;
  color: #6b3d46;
  transition: all .25s ease;
}
.punbb .reaction-chip:not(.reaction-chip--disabled):hover {
  background: rgba(107,61,70,.08) !important;
  border-color: rgba(107,61,70,.7) !important;
}
.punbb .reaction-chip.reaction-chip--clicked {
  background: rgba(107,61,70,.14) !important;
  border-color: #6b3d46 !important;
}
.punbb .reaction-counter {
  border-radius: 13px;
  padding: 0 8px 0 6px;
  font-size: 11px;
}
.punbb .reaction-counter__count {
  color: #6b3d46 !important;
  font-weight: 600;
}

/* кнопка «+» */
.punbb .reaction-picker-button { width: 26px; border-radius: 50% !important; }
.punbb .reaction-picker-button svg { color: #6b3d46 !important; width: 11px; height: 11px; }

/* панель емодзі відкривається вліво, щоб не вилазила за край */
.punbb .reaction-picker-panel { right: 0; left: auto; }



/* бульбашка цитування виділеного */
#Bubble a {
  width: 25px;
  height: 20px;
  display: block;
  text-decoration: none !important;
}
#Bubble a::before {
  content: '\f10e';
  font-family: 'FontAwesome';
  position: absolute;
  top: -16px;
  width: 25px;
  height: 20px;
  display: block;
  padding: 5px 0 0;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: var(--link, #6b3d46);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  transition: transform .2s ease;
}
#Bubble a:hover::before { transform: scale(1.1); }

/* Прибрати поле "plashka" зі сторінки профілю (у постах плашка лишається) */
#profile-right li:has(.plank),
#profile-right li:has(.modal-link) {
  display: none !important;
}

/* швидка зміна акаунтів: текст порожнього списку (без кракозябр) */
#form-login #List-UserNames ul:empty::before {
  content: "\423  \432 \430 \441  \43d \435 \442  \437 \430 \43f \43e \43c \43d \435 \43d \43d \44b \445  \43d \438 \43a \43e \432 , \432 \432 \435 \434 \451 \43d \43d \44b \445  \447 \435 \440 \435 \437  \444 \43e \440 \43c \443  \441 \43f \440 \430 \432 \430  \438 \43b \438  \447 \435 \440 \435 \437  \43f \435 \440 \435 \43d \43e \441  \43d \438 \436 \435 !" !important;
}
#form-login #List-UserNames ul:not(:empty)::before {
  content: none !important;
}

<!-- Міст для редактора ЛЗ: передає редактору в [html] мініпрофіль того, хто його відкрив -->
<script>
(function(){
  var cache = null;
  function decode(b){ try { return new TextDecoder(document.characterSet || 'windows-1251').decode(b); } catch(e) { return new TextDecoder().decode(b); } }
  function get(u){ return fetch(u, {credentials:'same-origin'}).then(function(r){ return r.arrayBuffer(); }).then(decode); }
  function load(){
    if (cache) return cache;
    cache = (typeof UserID === 'undefined' || !(UserID > 1) ? Promise.resolve(null) :
      get('/search.php?action=show_user_posts&user_id=' + UserID).then(function(h){
        var m = h.match(/viewtopic\.php\?pid=(\d+)/); if (!m) return null;
        return get('/viewtopic.php?pid=' + m[1]).then(function(t){
          var d = new DOMParser().parseFromString(t, 'text/html'), post = d.querySelector('#p' + m[1]);
          if (!post) return null;
          var body = post.querySelector('.post-body'); if (body) body.remove();
          var chain = [], el = post.parentElement;
          while (el && el.tagName !== 'BODY') { chain.unshift({t:el.tagName.toLowerCase(), id:el.id, c:el.className}); el = el.parentElement; }
          return {post:post.outerHTML, chain:chain, bodyId:d.body.id, bodyClass:d.body.className,
            css:[].map.call(document.querySelectorAll('link[rel~="stylesheet"]'), function(l){ return l.href; }),
            style:[].map.call(document.querySelectorAll('style'), function(s){ return s.textContent; }).join('\n'),
            theme:document.documentElement.getAttribute('data-forum-theme') || 'light'};
        });
      })).catch(function(){ return null; });
    return cache;
  }
  window.addEventListener('message', function(e){
    if (!e.data || !e.data.lzWantMe || !e.source) return;
    var src = e.source;
    load().then(function(r){ try { src.postMessage({lzMe:r}, '*'); } catch(x){} });
  });
})();
</script>