@import url(style_cs.1792553848.css);
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
@import url('https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css');

/* =========================================================
   СЕРВИСНОЕ: прячем служебные надписи движка
   ========================================================= */

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

#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  content: "";
  display: block;
  clear: both;
}
/* текст поста ровно по своей колонке: не шире и не уже, и в постах без карточки тоже */
.punbb .post .post-body,
.punbb .post .post-box {
  width: auto !important;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

.punbb .post .post-content {
  overflow-wrap: break-word;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}  

/* пост с [hideprofile] — без карточки, текст на всю ширину */
.punbb .post.hideprofile {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}
.punbb .post.hideprofile h3,
.punbb .post.hideprofile .post-body,
.punbb .post.hideprofile .post-links { grid-column: 1 / -1; }
/* модераторы, «отредактировано», «поделиться», live */
.modlist,
.lastedit,
.punbb div#pun-live-rusff,
.punbb .topic a.sharelink {
  display: none;
}


/* =========================================================
   ОБЩЕЕ
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

ul, ol, li, dl, dd, dt { list-style: none; }
address, em { font-style: normal; }
:focus { outline: none; }

::selection {
  background: var(--active);
  color: var(--text);
}

/* скроллбар */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: var(--cream); }
*::-webkit-scrollbar-thumb { background: var(--border); }

/* ссылки */
a {
  color: var(--link);
  text-decoration: none;
  transition: color .2s;
}
a:hover { color: var(--text); }

#pun-navlinks a,
.pagelink a,
.postlink a,
.subscribelink a,
#pun-index .tclcon h3 a,
.plate { color: var(--text); }

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

h1, h2 {
  font-weight: normal;
  text-align: center;
}


/* =========================================================
   ФОРМЫ И КНОПКИ
   ========================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  font: 12px var(--font1);
  box-sizing: border-box;
}

textarea { width: 100%; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus { border-color: var(--border); }

/* обычные кнопки — светлые, с тонкой рамкой; главные (отправить, ответить) — синие, см. ниже */
.button,
input[type="submit"],
input[type="button"],
button {
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
  color: var(--text);
  font: 400 10px/1.2 var(--font1);
  text-transform: lowercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: var(--beige);
  border-color: var(--beige);
}

/* главная кнопка — синяя, как ссылки в карточках форумов, при наведении красная */
#post .formsubmit input[name="submit"],
.postlink a {
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  color: var(--card) !important;
}

#post .formsubmit input[name="submit"]:hover,
.postlink a:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: var(--card) !important;
}

fieldset { border: none; }
fieldset legend { font-weight: normal; }

.checkfield input[type="checkbox"],
.radiofield input[type="radio"] {
  margin: 0 4px;
  accent-color: var(--accent);
}

.formsubmit { padding: 10px 0 0; }
.formsubmit input { margin-right: 6px; }

#pun-admain textarea,
#pun-admain input,
#pun-admain select { color: #000 !important; }


/* =========================================================
   ФОН И КАРКАС
   ========================================================= */

html { background: var(--bg) center top / auto repeat fixed; }  /* --bg — картинка-фон из style_cs */

#pun {
  position: relative;
  width: 1020px;
  margin: 56px auto 40px;            /* сверху: вкладка меню 48px + чуть воздуха */
  background: var(--white);
}

.punbb {
  display: flex;
  flex-direction: column;
  font: 12px var(--font1);
  color: var(--text);
}


/* =========================================================
   МЕНЮ — вкладка-трапеция над шапкой
   ========================================================= */

#pun-navlinks {
  position: absolute;
  bottom: 100%;
  left: 69px;
  height: 48px;
  padding: 0 47px;                   /* скошенные бока */
  background: var(--beige);
  clip-path: polygon(47px 0, calc(100% - 47px) 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 5.9px rgba(0, 0, 0, .28);
}

#pun-navlinks .container {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 26px;
}

#pun-navlinks a {
  font-size: 10px;
  text-transform: lowercase;
}

#pun-navlinks .isactive a { color: var(--red); }

#navawards { display: none; }


/* =========================================================
   ШАПКА
   ========================================================= */

#pun-title {
  position: relative;
  z-index: 2;                        /* шапка выше плашек */
  width: 1020px;
  height: 528px;
  background: var(--header) 0 0 / 1020px 528px no-repeat;
}

#pun-title table { display: none; }


/* =========================================================
   ПРОЦЕНТЫ В ШАПКЕ
   ========================================================= */

.screen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 1020px;
  height: 528px;
  pointer-events: none;
  font: 500 17px/1 var(--font3);
  color: var(--ink);
}

.screen span {
  position: absolute;
  white-space: nowrap;
}

.screen-percent {
  left: 727px;
  top: 192px;
}

.screen-status,
.screen-timer { display: none; }


/* =========================================================
   ПЛАШКИ СПРАВА — из-под шапки торчит дата, при наведении выезжают
   ========================================================= */

.plates {
  position: absolute;
  top: 89px;
  left: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.plate {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 12px;
  box-sizing: border-box;
  background: var(--red);
  border: 1px solid var(--beige);
  font-size: 11px;
  color: var(--beige);
  white-space: nowrap;
  transform: translateX(calc(-100% + 46px));   /* видна только дата */
  transition: transform .35s ease;
}

.plate:nth-child(even) { background: var(--blue); }

.plate:hover {
  color: var(--beige);
  transform: translateX(0);
}

.plate span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.plate b { font-weight: 400; }
.plate small { font-size: 10px; font-weight: 200; }

/* дата — светлая скруглённая плашка */
.plate i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 26px;
  border-radius: 4px;
  background: var(--beige);
  font-style: normal;
  font-size: 10px;
  color: var(--text);
}


/* =========================================================
   ВЕРХНЯЯ ЗОНА: ссылки на синей полосе шапки, крошки, статус
   ========================================================= */

/* «новые сообщения, активные темы…» — внутри нижней синей полосы шапки */
#pun-ulinks {
  position: absolute;
  top: 498px;
  left: 0;
  right: 0;
  z-index: 4;
}

#pun-ulinks .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  height: 30px;
  padding: 0 60px;
  font-size: 11px;
  text-transform: lowercase;
}

#pun-ulinks li a { color: var(--beige); }
#pun-ulinks li a:hover { color: #fff; }

/* «привет, ник · последний визит» — тихо справа, на одной линии с крошками */
#pun-status {
  position: absolute;
  top: 559px;
  right: 60px;
  z-index: 2;
}

#pun-status .container {
  display: flex;
  gap: 0 10px;
  font-size: 10px;
  font-weight: 200;
  text-transform: lowercase;
  color: var(--muted);
}

#pun-status strong { font-weight: 400; color: var(--text); }
#pun-status .status-right { display: none; }

/* крошки: → cat bomb → раздел → тема */
.crumbs.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 31px 60px 26px;
  font-size: 11px;
  color: var(--muted);
}

.crumbs.container a { color: var(--muted); }
.crumbs.container a:hover { color: var(--red); }
.crumbs.container .crumb-last { color: var(--text); }

/* разделители: перед первым пунктом — тонкая стрелка, дальше — «//» */
.crumbs.container em {
  font-size: 0;
}

.crumbs.container em::before {
  content: "//";
  font-size: 12px;
  color: var(--text);
}

.crumbs.container strong + em {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 7px;
  font-size: 0;
}

.crumbs.container strong + em::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--text);
}

.crumbs.container strong + em::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--text);
  border-right: 1px solid var(--text);
  transform: rotate(45deg);
}


/* =========================================================
   ОБЪЯВЛЕНИЕ
   ========================================================= */

#pun-announcement h2 { display: none; }
#pun-announcement .container { padding: 10px 60px; }


/* надпись «Форум» и заголовки страниц прячем — их заменяют крошки */
#pun-main > h1 { display: none; }


/* =========================================================
   ГЛАВНАЯ: ФОРУМЫ КАРТОЧКАМИ, КАРТИНКА СПРАВА
   ========================================================= */

/* шапка таблицы, колонки «темы / сообщения» и названия категорий не нужны */
#pun-index thead,
#pun-index .tc2,
#pun-index .tc3,
#pun-index .category h2 { display: none; }

#pun-index .category {
  width: 899px;
  margin: 0 auto 10px;
}

#pun-index .category .container { border: none; }

#pun-index .category table,
#pun-index .category tbody {
  display: block;
  width: 100%;
}

#pun-index .category tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* карточка форума */
#pun-index .category tbody tr {
    position: relative;
    display: block;
    min-height: 204px;
    box-sizing: border-box;
    background: var(--panel);
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: var(--soft);
}
/* картинка справа — своя у каждого форума (переменные --f1… в style_cs) */
#pun-index .category tbody tr::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 138px;
  background: var(--forum-img, none) center / cover no-repeat;
}

#forum_f1 { --forum-img: var(--f1); }
#forum_f2 { --forum-img: var(--f2); }
#forum_f3 { --forum-img: var(--f3); }
#forum_f4 { --forum-img: var(--f4); }
#forum_f5 { --forum-img: var(--f5); }
#forum_f6 { --forum-img: var(--f6); }

/* левая часть: название, описание, ссылки */
#pun-index td.tcl {
  display: block;
  padding: 34px;
  border: none;
}

#pun-index .tclcon {
  max-width: 380px;                  /* чтобы не заезжать на NEW/OLD */
  font-size: 12px;
  font-weight: 300;
  text-transform: lowercase;
}

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

#pun-index .tclcon h3 { margin-bottom: 12px; }

/* название — кремовая плашка с тенью */
#pun-index .tclcon h3 a {
    display: inline-block;
    padding: 7px 26px;
    background: var(--chip);
    border-radius: 0px;
    box-shadow: var(--shadow);
    font-size: 11px;
    font-weight: 400;
    color: var(--text);
    transition: background .2s;
}

#pun-index .tclcon h3 a:hover { background: var(--active); }

/* NEW / OLD — три клеточки с буквами (буквы расставляет скрипт в HTML-низе) */
#pun-index div.icon {
  position: absolute;
  top: 35px;
  left: 438px;
  display: flex;
  gap: 1px;
  width: auto;
  height: auto;
  background: none;
  transform: none;
}

#pun-index div.icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: var(--beige);
  font-size: 7px;
  font-weight: 500;
  color: #1c1c1c;
}

#pun-index tr.inew div.icon span:first-child { background: var(--red); color: var(--beige); }
#pun-index tr:not(.inew) div.icon span:nth-child(2) { background: var(--blue); color: var(--beige); }

/* последнее сообщение */
#pun-index td.tcr {
  position: absolute;
  top: 34px;
  left: 539px;
  width: 190px;
  min-height: 30px;
  padding: 0 0 0 43px;               /* 30 аватарка + 13 зазор */
  box-sizing: border-box;
  border: none;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--muted);
}

#pun-index td.tcr .user-avatar {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  margin: 0;
  transform: none;
}

#pun-index td.tcr .user-avatar img,
#pun-index td.tcr .user-avatar .avatar-image {
  display: block;
  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box;
  border: 1px solid var(--red);
  border-radius: 2px !important;
  background-size: cover !important;
  background-position: center !important;
  object-fit: cover;
}

#pun-index td.tcr .lastpost-link,
#pun-index td.tcr > a:first-of-type {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
}

#pun-index td.tcr .lastpost-link:hover,
#pun-index td.tcr > a:first-of-type:hover { color: var(--text); }

#pun-index td.tcr a { color: var(--muted); }
#pun-index td.tcr br { display: none; }


/* =========================================================
   СПИСОК ТЕМ 
   ========================================================= */

.punbb .forum {
  width: 899px;
  margin: 0 auto;
}

.punbb .forum > h2 { display: none; }

.punbb .forum table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* заголовки колонок */
.punbb .forum th {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
  text-align: left;
  color: var(--muted);
}

.punbb .forum td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.punbb .forum .tcl { width: auto; }
.punbb .forum .tc2,
.punbb .forum .tc3 { width: 70px; text-align: center; }
.punbb .forum .tcr { width: 230px; }
.punbb .forum th.tcr { padding-left: 50px; }


.punbb .forum .icon { display: none; }

.punbb .forum .tclcon {
  font-size: 10px;
  font-weight: 200;
  color: var(--muted);
}

.punbb .forum .tclcon > a {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
}

.punbb .forum .tclcon > a:hover { color: var(--accent); }


.punbb .forum tr.inew .tclcon > a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: var(--active);
  border: 1px solid var(--border);
  vertical-align: 1px;
}

.punbb .forum tr.isticky .tclcon > a { color: var(--accent); }


.punbb .forum td.tc2,
.punbb .forum td.tc3 {
  font-size: 11px;
  font-weight: 200;
  color: var(--muted);
}

/* последнее сообщение: квадратная аватарка + дата и автор */
.punbb .forum td.tcr {
    position: relative;
    padding-left: 50px !important;
    font-size: 10px;
    line-height: 1.4;
    color: var(--muted);
    padding-top: 0px !important;
}

.punbb .forum td.tcr .user-avatar {
  position: absolute;
  top: 50%;
  left: 12px;
  margin: 0;
  float: none;
  transform: translateY(-50%);
}

.punbb .forum td.tcr .user-avatar img,
.punbb .forum td.tcr .user-avatar .avatar-image {
  display: block;
  width: 26px !important;
  height: 26px !important;
  box-sizing: border-box;
  border: 1px solid var(--red);
  border-radius: 0 !important;
  background-size: cover !important;
  object-fit: cover;
}


.punbb .forum td.tcr > a {
  display: block;
  color: var(--accent);
}

.punbb .forum td.tcr > a:hover { color: var(--text); }
.punbb .forum td.tcr br { display: none; }

/* модераторские ссылки под таблицей */
.punbb .forum + .modmenu,
#pun-viewforum .modmenu { margin-top: 10px; }


/* =========================================================
   ПРОЧИЕ ТАБЛИЦЫ
   ========================================================= */

.punbb .main .container > table {
  width: 899px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 11px;
}

.punbb .main .container > table th {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
  text-align: left;
  color: var(--muted);
}

.punbb .main .container > table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 300;
  vertical-align: middle;
}


/* =========================================================
   СТАТИСТИКА — карточка с кремовой запиской и котиком; ПОДВАЛ — картинкой
   ========================================================= */

#pun-stats { padding: 0 0 22px; }
#pun-stats h2 { display: none; }

#pun-stats .container {
    position: relative;
    display: grid;
    grid-template-columns: 229px 1fr;
    grid-auto-flow: dense;
    column-gap: 44px;
    align-content: start;
    width: 899px;
    min-height: 187px;
    margin: 0 auto;
    padding: 28px 30px 24px 25px;
    box-sizing: border-box;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 10px;
    font-weight: 300;
    line-height: 1.8;
    text-transform: lowercase;
    color: var(--muted);
    box-shadow: var(--soft);
}

/* кремовая записка под цифрами */
#pun-stats .container::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 11px;
    width: 257px;
    height: 98px;
    background: var(--chip);
    border-radius: 0px;
    box-shadow: var(--shadow);
}

/* котик в правом нижнем углу */
#pun-stats .container::after {
  content: "";
  position: absolute;
  right: 152px;
  bottom: 1px;
  width: 69px;
  height: 64px;
  background: var(--stats-cat) center / contain no-repeat;
  pointer-events: none;
}

/* цифры — в записке: подпись слева, число справа */
#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4 {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#pun-stats strong { font-weight: 500; color: var(--text); }
#pun-stats strong a { color: var(--link); }

/* кто онлайн / за сутки — справа от записки */
#pun-stats li:not(.item1):not(.item2):not(.item3):not(.item4) {
  position: relative;
  z-index: 1;
  grid-column: 2;
  padding-right: 230px;              /* не заезжать на котика */
}

#pun-stats li:not(.item1):not(.item2):not(.item3):not(.item4) strong { font-weight: 300; color: var(--muted); }
#pun-stats li:not(.item1):not(.item2):not(.item3):not(.item4) a { font-weight: 500; }

/* подвал — синяя полоса с котами */
#pun-about {
  height: 83px;
  background: var(--footer) center / 1020px 83px no-repeat;
}

#pun-about .container {
  padding: 66px 30px 0;
  text-align: center;
  font-size: 9px;
  color: rgba(255, 253, 249, .75);
}

#pun-about a { color: rgba(255, 253, 249, .75); }
#pun-about a:hover { color: #fff; }


/* =========================================================
   ТЕМА: СТРАНИЦЫ, «ОТВЕТИТЬ», ПОДПИСКА
   ========================================================= */


.linkst, .linksb {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 905px;
    margin: 0 auto 16px;
    font-size: 11px;
}

.linksb {
    margin: 16px auto;
    margin-right: 55px;
}


.linkst div:not(.pagelink),
.linksb div:not(.pagelink) { display: contents !important; }

.linkst p,
.linksb p {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
}

.linkst .pagelink,
.linksb .pagelink {
  order: -1;
  float: none !important;
  margin: 0 auto 0 0 !important;
  padding: 0;
}

.linkst .clearer,
.linksb .clearer { display: none !important; }


#pun-viewforum .linksb a { display: none !important; }
#pun-viewforum .linksb .pagelink a,
#pun-viewforum .linksb .subscribelink a { display: inline-block !important; }

/* модераторские ссылки */
.modmenu,
.modmenu a {
  font-size: 10px;
  color: var(--muted);
}

.modmenu a:hover { color: var(--accent); }

/* номера страниц — клетками, текущая оливковая */
.pagelink { font-size: 0; }

.pagelink a,
.pagelink strong,
.pagelink span {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  margin-right: -1px;
  padding: 0 4px;
  box-sizing: border-box;
  background: var(--cream);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.pagelink strong { background: var(--active); }
.pagelink a:hover { background: var(--active); }

/* «Ответить», «Новая тема» — клавишами */
.postlink a,
.subscribelink a {
  display: inline-block;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.2;
  text-transform: lowercase;
  color: var(--text);
  transition: background .2s, border-color .2s;
}

.postlink a::before { content: "// "; white-space: pre; }

.subscribelink a:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--text);
}





/* модерирование и «в теме сейчас» */
.modmenu .container,
#topic-users-in .container {
  width: 899px;
  margin: 0 auto 10px;
  font-size: 11px;
  color: var(--muted);
}

#topic-users-in a { color: var(--text); }


/* =========================================================
   ПОСТ — одна светлая панель: слева колонка автора, справа дата и текст,
   внизу полоска со ссылками; между постами просвет
   ========================================================= */

.punbb .post {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 35px;
  width: 899px;
  margin: 0 auto 30px;
  padding-bottom: 34px;
  box-sizing: border-box;
  background: var(--panel);
  font-size: 11px;
  margin-bottom: 22px;
  padding: 16px 20px 18px 20px;
  border-radius: 0;
  box-shadow: var(--soft-post);
}

/* обёртка rusff «растворяется», и автор / текст / ссылки встают прямо в сетку поста */
.punbb .post > .container { display: contents; }
.punbb .post > .container::after { display: none; }
.punbb .post .clearer { display: none; }


/* --- дата и номер: верх правой колонки --- */

.punbb .post h3 {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
  font-size: 9px;
  font-weight: 300;
  color: var(--hint);
  align-self: start;
  min-width: 0;
  min-height: 11px;
  border: 0;
  box-shadow: none;
  font: 400 9px/11px var(--font1);
}

.punbb .post h3 > span {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.punbb .post h3 > span > a,
.punbb .post h3 .permalink {
  order: 0;
  margin-right: auto;
  color: var(--hint);
  text-transform: none;
  padding: 0;
  font: inherit;
}

.punbb .post h3 > span > a:hover { color: var(--red); }

.punbb .post h3 .fontButtons {
  order: 9;
  display: flex;
  gap: 0;
  margin: 0 8px 0 0;
  padding: 0;
  float: none;
  background: none;
  border: none;
  align-self: start;
}

.punbb .post h3 .fontButtons button {
  min-width: 16px;
  height: 11px;
  padding: 0 3px;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 9px;
  line-height: 11px;
  color: var(--muted);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.punbb .post h3 .fontButtons button:hover { background: none; color: var(--red); }

.punbb .post h3 strong {
  order: 10;
  float: none;
  font-weight: 400;
  color: var(--hint);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
}

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

.FNTslider,
#fntSlider { display: none !important; }


.punbb .post .post-author {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    float: none;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 0 25px;
    padding: 20px 16px 25px;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--author-line);
    border-radius: 0 0 3px 0;
    box-shadow: none;
    font: 400 9px / 1.4 var(--font1);
    color: var(--muted);
    text-align: left;
    /* left: -38px; */
}




.punbb .post .post-author > ul {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  justify-items: center;
  align-items: start;
  gap: 0 16px;
  margin: 0;
  padding: 0;
}

.punbb .post .post-author > ul > li {
  grid-column: 1 / -1;
  grid-row: auto;
  order: 0;
  min-width: 0;
}

/* Ник: плашка от левого края */
.punbb .post .post-author > ul > li.pa-author {
    position: relative;
    z-index: 1;
    order: -3;
    justify-self: start;
    align-self: start;
    min-height: 20px;
    max-width: calc(100% + 6px);
    margin: 0 0 0 -16px;
    padding: 3px 22px 3px 12px;
    box-sizing: border-box;
    background: var(--chip);
    border: 0;
    border-radius: 0px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .28);
    font: 500 11px / 14px var(--font1);
    color: var(--ink);
    text-align: left;
    overflow-wrap: anywhere;
    transform: rotate(-1deg);
    top: -21px;
}

.punbb .post .post-author .pa-author a { color: inherit; }
.punbb .post .post-author .pa-author a:hover { color: var(--red); }

/* Статус сразу под ником */
.punbb .post .post-author > ul > li.pa-title {
    order: -2;
    justify-self: stretch;
    align-self: start;
    min-height: 18px;
    margin: 0 0 0 -5px;
    padding: 3px 0 2px;
    box-sizing: border-box;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: 400 9px / 13px var(--font1);
    color: var(--status);
    text-align: left;
    overflow-wrap: anywhere;
    margin-top: -11px;
}

/* Аватар динамический: небольшие изображения не увеличиваются */
.punbb .post .post-author > ul > li.pa-avatar {
  position: static;
  order: -1;
  justify-self: center;
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: center;


  margin: 8px 0 17px;
  padding: 0;
}

.punbb .post .post-author .pa-avatar img {
  position: static;
  display: block;




  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* Два счётчика рядом: иконка над числом */
.punbb .post .post-author > ul > li.pa-posts,
.punbb .post .post-author > ul > li.pa-respect {
  position: relative;
  grid-row: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 27px;
  margin: 0 !important;
  padding: 0;
  background: none;
  border: 0;
  font: 400 9px/12px var(--font1);
  color: var(--text);
}

.punbb .post .post-author > ul > li.pa-posts {
  order: 1;
  grid-column: 1;
  justify-self: end;
}
.punbb .post .post-author > ul > li.pa-respect {
  order: 2;
  grid-column: 2;
  justify-self: start;
}
.punbb .post .post-author .pa-posts .fld-name,
.punbb .post .post-author .pa-respect .fld-name { display: none; }
.punbb .post .post-author .pa-posts::before,
.punbb .post .post-author .pa-respect::before {
  display: block;
  font: 400 9px/11px var(--fa);
  color: var(--muted);
}
.punbb .post .post-author .pa-posts::before { content: "\f075"; }
.punbb .post .post-author .pa-respect::before { content: "\f004"; }
.punbb .post .post-author .pa-respect a,
.punbb .post .post-author .pa-respect span:not(.pa-num) { font-size: 0; }
.punbb .post .post-author .pa-num { font-size: 9px !important; }
.punbb .post .post-author .pa-respect a img { display: none; }
.punbb .post .post-author .pa-link {
  position: absolute;
  inset: -2px -4px;
  z-index: 2;
}
.punbb .post .post-author .pa-posts:hover,
.punbb .post .post-author .pa-respect:hover,
.punbb .post .post-author .pa-posts:hover::before,
.punbb .post .post-author .pa-respect:hover::before,
.punbb .post .post-author .pa-respect:hover * { color: var(--red); }

/* Онлайн под карточкой, как в макете */
.punbb .post .post-author > ul > li.pa-online,
.punbb .post .post-author > ul > li.pa-last-visit {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  bottom: auto;
  display: block;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  font: 400 7px/10px var(--font1);
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--hint);
}
.punbb .post .post-author .pa-online::before,
.punbb .post .post-author .pa-last-visit::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--blue);
}
.punbb .post .post-author .pa-last-visit::before { background: var(--border); }
.punbb .post .post-author .pa-online strong,
.punbb .post .post-author .pa-last-visit strong { font-weight: 400; color: inherit; }
.punbb .post .post-author .pa-online br,
.punbb .post .post-author .pa-last-visit br { display: none; }
.punbb .post .post-author .pa-gifts,
.punbb .post .post-author .pa-awards { display: none; }

/* --- текст поста --- */

.punbb .post .post-body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 15px 0 20px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  align-self: start;
  float: none;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--font1);
}

.post-content p { margin-bottom: 10px; }
.post-content p:last-child { margin-bottom: 0; }
.post-content img { max-width: 100%; }
.post-content a { color: var(--accent); }
.post-content a:hover { color: var(--text); }

.post-sig {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 10px;
  color: var(--muted);
}


/* --- Все действия внизу поста: иконки и подписи --- */
.punbb .post .post-links {
grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  min-width: 0;
  min-height: 22px;
  margin: 18px 0 0;
  padding: 0 80px 0 0;
  box-sizing: border-box;
}
.punbb .post .post-links > ul {
display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 22px;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
}
.punbb .post .post-links li { margin: 0; padding: 0; }
.punbb .post .post-links li.cb-left { order: -1; }
.punbb .post .post-links li.cb-push { margin-left: auto; }
.punbb .post .post-links li.cb-hide { display: none !important; }
.punbb .post .post-links li a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 10px/1.5 var(--font1);
  text-transform: lowercase;
  color: var(--muted);
}
.punbb .post .post-links li a:hover { color: var(--red); }
.punbb .post .post-links li a::before { font: 400 8px/1 var(--fa); }
.punbb .post .post-links a[href*="profile.php"]::before { content: "\f007"; }
.punbb .post .post-links a[href*="pmsend"]::before,
.punbb .post .post-links a[href*="messages"]::before { content: "\f0e0"; }
.punbb .post .post-links a[href*="delete.php"]::before { content: "\f1f8"; }
.punbb .post .post-links a[href*="edit.php"]::before { content: "\f303"; }
.punbb .post .post-links li.pl-quote a::before { content: "\f10e"; }
.punbb .post .post-links .pl-email.email,
.punbb .post .post-links .pl-website { display: none; }

/* --- дополнения к посту --- */

.punbb .post::before {
  content: none;
}

.punbb .post h3 > span > a::before,
.punbb .post h3 .permalink::before {
  content: "//";
  display: inline-block;
  margin-right: 10px;
  color: var(--hint-light);
}

.punbb .post .post-box {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
  background: none;
  border: 0;
  box-shadow: none;
  font: inherit;
  color: inherit;
}

/* пост с [hideprofile] — всё на всю ширину, включая ссылки внизу */
.punbb .post.hideprofile h3,
.punbb .post.hideprofile .post-body,
.punbb .post.hideprofile .post-links {
  grid-column: 1 / -1;
}

/* --- быстроплюс --- */


.post-rating {
  position: absolute;
  right: 24px;
  bottom: 27px;
}

.post-vote {
  position: absolute;
  right: 0;
  bottom: 27px;
}

.punbb .post .post-vote p > a,
.post-vote p > a {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  box-sizing: border-box;
  background: var(--cream);
  border: 1px solid var(--border);
  font-size: 11px !important;
  line-height: 18px;
  text-align: center;
  color: var(--text);
}

.post-vote p > a:first-child { margin-left: 0; }
.post-vote p > a:hover { background: var(--active); }


.punbb .post .post-vote p > a { font-size: 0 !important; }
.post-vote p > a::before { content: "+"; font-size: 12px; font-weight: 200; }
.post-vote p > a[href*="v=0"]::before { content: "\2212"; }

.punbb .post .post-rating p > a,
.post-rating p > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  background: var(--red);
  border: 1px solid var(--border);
  font-size: 9px !important;
  color: var(--cream);
  transition: background .2s;
}

.post-rating p > a::before {
  content: "";
  width: 9px;
  height: 8px;
  background: var(--cream);
  -webkit-mask: var(--heart) center / contain no-repeat;
          mask: var(--heart) center / contain no-repeat;
  opacity: .55;
  transition: opacity .2s;
}

.post-rating p > a:hover { background: var(--accent); color: var(--cream); }

.post-rating p > a:hover::before,
.post-rating p > a.noNullLiked::before { opacity: 1; }

.post-rating p > a.active { animation: heart-pop .35s ease; }

@keyframes heart-pop {
  50% { transform: scale(1.18); }
}


/* сердечко и плюс — одной высоты с иконками действий */
.punbb .post .post-rating p > a,
.punbb .post .post-vote p > a {
  box-sizing: border-box;
  height: 22px;
  line-height: 20px;
}


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

#post,
.punbb .formal {
  width: 899px;
  margin: 0 auto 30px;
}

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

#main-reply {
  height: 220px;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}


.like-all-posts {
  display: block;
  margin: 0 0 10px auto;
}



/* панель редактора — полоска над полем, сливается с ним в один блок */
#form-buttons {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: var(--bar);
  border: 1px solid var(--line);
  border-bottom: none;
}

#main-reply { border-top-style: dashed !important; }

#form-buttons table { width: auto !important; margin: 0 !important; }

#form-buttons table tr {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
}

#form-buttons td {
  position: relative;
  display: inline-flex;
  width: 24px !important;
  height: 24px;
  padding: 0;
  background: none !important;
}

#form-buttons td img {
  width: 100%;
  height: 100%;
  opacity: 0;                       
  cursor: pointer;
}

#form-buttons td::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font: 400 12px var(--fa);
  color: var(--muted);
  pointer-events: none;
  transition: color .2s, background .2s;
}

#form-buttons td:hover::before {
  background: var(--card);
  color: var(--red);
}

#button-font::before { content: '\f031'; }
#button-size::before { content: '\f034'; }
#button-bold::before { content: '\f032'; }
#button-italic::before { content: '\f033'; }
#button-underline::before { content: '\f0cd'; }
#button-strike::before { content: '\f0cc'; }
#button-indent::before { content: '\f03c'; }
#button-left::before { content: '\f036'; }
#button-center::before { content: '\f037'; }
#button-right::before { content: '\f038'; }
#button-justify::before { content: '\f039'; }
#button-link::before { content: '\f0c1'; }
#button-spoiler::before { content: '\f518'; }
#button-image::before { content: '\f302'; }
#button-video::before { content: '\f144'; }
#button-hide::before { content: '\f30d'; }
#button-quote::before { content: '\f27a'; }
#button-code::before { content: '\f121'; }
#button-color::before { content: '\f53f'; }
#button-table::before { content: '\f009'; }
#button-sticker::before { content: '\f257'; }
#button-keyboard::before { content: '\f11c'; }
#button-smile::before { content: '\f118'; }
#button-addition::before { content: '\f0d7'; }
#button-upload::before { content: '\f093'; }

#button-files_rusff,
#button-graffiti_rusff { display: none !important; }


/* счётчик символов — только число, слева, маленькой синей плашкой с разделителем */
#plng {
  order: -1;
  float: none;
  display: flex;
  align-items: center;
  padding-right: 10px;
  border-right: 1px solid var(--line);
  font-size: 0;
}

#plng b {
  min-width: 18px;
  padding: 3px 6px;
  border-radius: 2px;
  background: var(--blue);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--card);
}


#post .formsubmit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}

#post .formsubmit input,
#togglePreview .button { margin: 0; }




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

#pun-profile h1 { display: none; }


#profilenav {
  width: 899px;
  margin: 0 auto 22px;
}

#profilenav h2 { display: none; }

#profilenav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
}

#profilenav li + li::before {
  content: "·";
  margin: 0 8px;
  color: var(--line);
}

#profilenav li a {
  font-size: 10px;
  text-transform: lowercase;
  color: var(--muted);
}

#profilenav li a:hover,
#profilenav li.isactive a { color: var(--link); }

#profile .container { padding: 0; }


#viewprofile {
  width: 899px;
  margin: 0 auto 30px;
}

#viewprofile table,
#viewprofile tbody { display: block; width: 100%; }

#viewprofile tr {
  display: flex;
  align-items: flex-start;
  gap: 39px;
}


#viewprofile #profile-left {
  position: relative;
  flex: 0 0 210px;
  width: 210px !important;
  padding: 16px 16px 14px !important;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--card-line);
  font-size: 9px;
  color: var(--muted);
  text-align: center;
}


#viewprofile #profile-left:has(> li),
#viewprofile #profile-left *:has(> li) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

#viewprofile #profile-left li {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

#viewprofile #profile-left strong,
#viewprofile #profile-left b { font-weight: 400 !important; }

#viewprofile #profile-left #profile-name {
  order: -3;
  margin-bottom: 8px !important;
  font-size: 12px;
  color: var(--text);
}

#viewprofile #profile-left #pa-avatar,
#viewprofile #profile-left .pa-avatar { order: -2; margin-bottom: 10px !important; }

#viewprofile #profile-left img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

#viewprofile #profile-left #profile-title {
  order: -1;
  width: auto !important;
  margin-bottom: 10px !important;
  padding: 4px 18px !important;
  background: var(--cream);
  border-radius: 3px;
  box-shadow: var(--shadow);
  color: var(--text);
}


#viewprofile #profile-left #pa-online,
#viewprofile #profile-left #pa-last-visit {
  font-weight: 200;
  text-transform: lowercase;
}

#viewprofile #profile-left #pa-online::before,
#viewprofile #profile-left #pa-last-visit::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  background: var(--blue);
  vertical-align: 1px;
}

#viewprofile #profile-left #pa-last-visit::before { background: var(--beige); }


#viewprofile #profile-left .profile-edit { order: 10; margin-top: 10px !important; }

#viewprofile #profile-left .profile-edit a {
  display: inline-block;
  padding: 3px 12px;
  background: var(--cream);
  border-radius: 3px;
  box-shadow: var(--shadow);
  font-size: 9px;
  text-transform: lowercase;
  color: var(--text);
}

#viewprofile #profile-left .profile-edit a:hover { background: var(--active); }


#viewprofile #profile-right {
  flex: 1;
  width: auto !important;
  padding: 0 !important;
}

#viewprofile #profile-right:has(> li),
#viewprofile #profile-right *:has(> li) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
}

#viewprofile #profile-right li {
  margin: 0 !important;
  padding: 9px 14px 10px !important;
  border: 1px solid var(--line);
  background: var(--card);
}

#viewprofile #profile-right li > span:first-child {
  display: block;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: 9px;
  font-weight: 200;
  text-transform: lowercase;
  color: var(--muted);
}

#viewprofile #profile-right li > span:first-child a { color: var(--muted); }

#viewprofile #profile-right li strong {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
}

/* длинные поля — на всю ширину */
#viewprofile #profile-right #pa-email,
#viewprofile #profile-right #pa-posts { grid-column: 1 / -1; }

/* «у пользователя нет подарков» */
#pun-profile #profile-gifts,
#pun-profile .profile-gifts,
#viewprofile + p,
#viewprofile ~ .container {
  width: 899px;
  margin: 0 auto 20px;
  font-size: 10px;
  color: var(--muted);
}


/* =========================================================
   КНОПКИ UP / DOWN — кремовые плашки справа от форума
   ========================================================= */

#ToTop,
#OnBottom {
  position: fixed;
  left: calc(50% + 607px);
  z-index: 50;
  display: none;
  padding: 7px 26px;
  background: var(--cream);
  border: none;
  border-radius: 3px;
  box-shadow: var(--shadow);
  font: 500 12px/normal var(--font1);
  text-align: center;
  color: var(--text);
  cursor: pointer;
  transition: transform .2s ease;
}

#ToTop { top: calc(50% - 27px); }
#OnBottom { top: calc(50% + 27px); }

/* при наведении — «оп» вправо */
#ToTop:hover,
#OnBottom:hover { transform: translateX(5px); }


/* =========================================================
   ДИММЕР ЯРКОСТИ
   ========================================================= */

#screenDimmer {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 999;
  font-family: var(--font1);
}

#dimmerToggle {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 15px;
}

#dimmerToggle i { font-style: normal; }

#dimmerPanel {
  position: absolute;
  top: 46px;
  right: 0;
  display: none;
  width: 150px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--border);
}

#dimmerPanel.active { display: block; }

#dimmerPanel span {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
}

#dimmerRange {
  width: 100%;
  accent-color: var(--accent);
}


/* =========================================================
   РАЗМЕР И ШРИФТ В ПОСТАХ
   ========================================================= */

.fontButtons {
  display: inline-flex;
  gap: 4px;
  float: right;
  margin-right: 10px;
}

.fontButtons button {
  min-width: 26px;
  padding: 3px 6px;
  font-size: 11px;
}
#pun-admain a {    cursor: pointer;
    color: var(--red) !important;
    font-family: var(--font1);
    font-size: 11px;}



.punbb .post .post-rating p.container,
.punbb .post .post-vote p.container {
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
}

.punbb .post .post-vote p.container > a {
  margin: 0 !important;
}

.punbb .post .post-rating {
right: 24px;
  bottom: 18px;
}
.punbb .post .post-vote {
right: 0;
  bottom: 18px;
}

/* Окна редактора — под панелью кнопок */
#tags {
  position: relative;
  z-index: 20;
}

#tags > .container {
  position: absolute;
  top: 0 !important;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(30, 15, 17, .12);
  color: var(--text);
  font: 12px/1.5 var(--font1);
}


/* =========================================================
   КОД — шапка с действиями «скопировать | в форму ответа» (их ставит скрипт в HTML-низе)
   ========================================================= */

.punbb .code-box {
  margin: 14px 0;
  padding: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.punbb .code-box strong.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bar);
  border: none;
  border-bottom: 1px dashed var(--line);
  font: 400 10px/1.4 var(--font1);
  text-transform: lowercase;
  color: var(--muted);
}

/* маленькая синяя метка «код» слева */
.punbb .code-box strong.legend::before {
  content: "код";
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--blue);
  font-size: 9px;
  color: var(--card);
}

.punbb .code-box .cb-code-act {
  color: var(--muted);
  cursor: pointer;
  transition: color .2s;
}

.punbb .code-box .cb-code-act:hover { color: var(--red); }
.punbb .code-box .cb-code-act.is-done { color: var(--blue); }

.punbb .code-box .cb-code-sep {
  width: 1px;
  height: 10px;
  background: var(--line);
}

.punbb .code-box pre {
  margin: 0;
  padding: 12px;
  max-height: 300px;
  overflow: auto;
  background: none;
  border: none;
  color: var(--text);
  font: 11px/1.6 Consolas, monospace;
  white-space: pre-wrap;
}


/* =========================================================
   ЦИТАТА — светлая карточка: имя плашкой внутри слева, значок кавычек в квадратике справа
   ========================================================= */

.punbb .quote-box:not(.spoiler-box) {
  position: relative;
  margin: 14px 0;
  padding: 34px 16px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* «hello kitty написал(а):» — маленькая плашка в левом верхнем углу */
.punbb .quote-box:not(.spoiler-box) > cite {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 50px);
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--blue);
  font: 500 8px/1.3 var(--font1);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--card);
}

.punbb .quote-box:not(.spoiler-box) > cite a { color: inherit; }
.punbb .quote-box:not(.spoiler-box) > cite a:hover { color: var(--beige); }

/* кавычки — в маленьком квадратике в правом верхнем углу */
.punbb .quote-box:not(.spoiler-box)::after {
  content: "\f10e";
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  font: 400 7px/1 var(--fa);
  color: var(--muted);
}

.punbb .quote-box:not(.spoiler-box) > blockquote {
  margin: 0;
  padding: 0;
  color: var(--text);
}


.punbb .post #post,
.punbb .post .formal {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.punbb .post #post fieldset,
.punbb .post #post .fs-box,
.punbb .post #post .resizable-textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.punbb .post #post textarea {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* =========================================================
   СПОЙЛЕР 
   ========================================================= */

.punbb .quote-box.spoiler-box {
  margin: 12px 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
}

.punbb .quote-box.spoiler-box > div {
  position: relative;
  display: block;
  margin: 0;
  padding: 7px 12px 7px 30px;
  background: none !important;           
  border: none;
  color: var(--muted);
  font: 400 10px/1.4 var(--font1);
  cursor: pointer;
  user-select: none;
  transition: color .2s;
}

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

.punbb .quote-box.spoiler-box > div::before {
  content: "\f067";                     /* плюс */
  position: absolute;
  top: 50%;
  left: 12px;
  width: 10px;
  margin-top: -6px;
  font: 400 10px/12px var(--fa);
  text-align: center;
  transition: transform .3s ease;
}


.punbb .quote-box.spoiler-box > div.visible::before {
  content: "\f068";
  transform: rotate(180deg);
}

.punbb .quote-box.spoiler-box > div.visible { border-bottom: 1px dashed var(--line); }

.punbb .quote-box.spoiler-box > blockquote {
  margin: 0;
  padding: 12px;
  color: var(--text);
}


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

#pun-userlist .formal {
  width: 899px;
  margin: 0 auto 24px;
}

#pun-userlist .formal legend { display: none; }


#pun-userlist form .cb-fields,
#pun-userlist form.cb-fields {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

#pun-userlist form .cb-field {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#pun-userlist form .cb-field br { display: none; }

#pun-userlist .formal label {
  font-size: 9px;
  font-weight: 200;
  text-transform: lowercase;
  color: var(--muted);
}

#pun-userlist .formal input[type="text"],
#pun-userlist .formal select {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

#pun-userlist .formal input[type="text"] { width: 200px; }


#pun-userlist form .cb-note {
  flex: 0 0 100%;
  margin: 6px 0 0 !important;
  font-size: 10px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--muted);
}

#pun-userlist .formal .formsubmit { padding-top: 10px; }


#pun-userlist .user-avatar img,
#pun-userlist .user-avatar .avatar-image {
  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box;
  border: 1px solid var(--red);
  border-radius: 0 !important;
  background-size: cover !important;
  object-fit: cover;
}


/* =========================================================
   ССЫЛКИ В ОПИСАНИЯХ ФОРУМОВ НА ГЛАВНОЙ
   ========================================================= */


#pun-index .tclcon a:not(h3 a) {
  color: var(--link);
  border-bottom: 1px dashed currentColor;
  transition: border-color .2s, color .2s;
}

#pun-index .tclcon a:not(h3 a):hover {
  color: var(--text);
  border-bottom-style: solid;
}


#pun-index .tclcon .f-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* ссылки под описанием — синие кнопки, при наведении красные */
#pun-index .tclcon .f-links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--blue);
  border: 1px solid var(--beige);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--card);
  transition: background .2s;
}

#pun-index .tclcon .f-links a::before { content: "// "; white-space: pre; }

#pun-index .tclcon .f-links a:hover {
  background: var(--red);
  color: var(--card);
}




.punbb .post .post-content table,
.punbb .post .post-content tr,
.punbb .post .post-content th,
.punbb .post .post-content td {
  border: none;
  background: none;
}

.punbb .post .post-content table { border-collapse: collapse; }




.punbb .post-content table {
  border: none !important;
  border-collapse: collapse;
}

.punbb .post-content table th,
.punbb .post-content table td {
  border: none !important;
  vertical-align: top;
}



/* =========================================================
   ОНЛАЙН НА АВАТАРКЕ — маленький красный квадратик у нижнего края
   ========================================================= */

.punbb .user-avatar { position: relative; }

.punbb .user-avatar .isonline {
  position: absolute !important;
  top: 26px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--red) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px var(--card) !important;
  filter: none;
  animation: none;
}

.punbb .user-avatar .isonline::before { display: none; }

/* в списке тем аватарка меньше (26px) */
.punbb .forum td.tcr .user-avatar .isonline { top: 22px !important; left: 10px !important; }


/* =========================================================
   ГОСТЕВАЯ: ДЕРЖИМ ВНЕШНОСТИ — html-блок в посте (шаблон в html_гостевая.txt)
   ========================================================= */

.cb-guest {
  position: relative;
  width: 813px;
  max-width: 100%;
  height: 516px;
  margin: 0 auto;
  background: var(--guest-bg) 0 0 / 813px 516px no-repeat;
  font: 400 12px/1.25 var(--font1);
  color: var(--text);
}

/* --- текст на записке, чуть наклонён --- */
.cb-guest__note {
  position: absolute;
  top: 89px;
  left: 80px;
  width: 272px;
  transform: rotate(-2deg);
  transform-origin: left top;
}

.cb-guest__note h4 {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
}

.cb-guest__note p { margin: 0; }
.cb-guest__note p + p { max-width: 194px; margin-top: 10px; }
.cb-guest__note b { font-weight: 500; }
.cb-guest__note a { font-weight: 500; color: var(--red); }
.cb-guest__note a:hover { color: var(--text); }

/* --- две колонки: парни / девушки --- */
.cb-guest__cols {
  position: absolute;
  top: 180px;
  left: 324px;
  display: flex;
  gap: 12px;
}

.cb-guest__col {
    position: relative;
    width: 228px;
    height: 259px;
    background: var(--card);
    box-shadow: var(--shadow);
    --thumb: var(--blue);
}

.cb-guest__col.is-girls { --thumb: var(--red); }

/* ярлык boys / girls */
.cb-guest__tag {
  position: absolute;
  top: 10px;
  left: 16px;
  padding: 7px 26px;
  background: var(--thumb);
  border-radius: 3px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: var(--cream);
}

/* список со своим скроллом: серая дорожка, цветной ползунок */
.cb-guest__list {
    position: absolute;
    top: 52px;
    left: 16px;
    right: 17px;
    height: 186px;
    padding-right: 14px;
    overflow-y: scroll;
    font-weight: 400;
    line-height: 20px;
    text-transform: lowercase;
}

/* Chrome, Safari, Edge: тонкая полоска 3px с ползунком, без стрелок */
.cb-guest__list::-webkit-scrollbar { width: 3px; }
.cb-guest__list::-webkit-scrollbar-track { background: var(--gray); }
.cb-guest__list::-webkit-scrollbar-thumb { min-height: 22px; background: var(--thumb); border-radius: 0; }
.cb-guest__list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Firefox понимает только такую запись */
@-moz-document url-prefix() {
  .cb-guest__list {
    scrollbar-width: thin;
    scrollbar-color: var(--thumb) var(--gray);
  }
}

.cb-guest__list a:hover { color: var(--thumb); }

/* разделитель-дата: стрелка + тонкий текст */
.cb-guest__date {
  position: relative;
  margin: 22px 0 8px;
  padding-left: 22px;
  font-weight: 300;
  line-height: 14px;
  color: var(--label);
}

.cb-guest__date:first-child { margin-top: 0; }

.cb-guest__date::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--label);
}

.cb-guest__date::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 10px;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--label);
  border-right: 1px solid var(--label);
  transform: rotate(45deg);
}

/* --- поля и кнопка «взять код» --- */
.cb-guest__form {
  position: absolute;
  top: 450px;
  left: 323px;
  display: flex;
  gap: 11px;
}

.cb-guest__form input[type="text"] {
    width: 163px;
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--card);
    border: none;
    box-shadow: var(--shadow);
    font: 400 12px var(--font1);
    color: var(--text);
}

.cb-guest__form input[type="text"]::placeholder { color: var(--label); }
.cb-guest__form input[type="text"]:focus { box-shadow: var(--shadow), inset 0 0 0 1px var(--beige); }
.cb-guest__form input.is-empty { box-shadow: var(--shadow), inset 0 0 0 1px var(--red); }

.cb-guest__form .cb-guest__btn {
  width: 117px;
  height: 36px;
  margin-left: 3px;
  padding: 0;
  background: linear-gradient(115deg, var(--blue) 2%, var(--blue-dark) 100%);
  border: 1px solid var(--beige);
  border-radius: 2px;
  box-shadow: none;
  font: 500 12px var(--font1);
  text-transform: lowercase;
  color: var(--cream);
  transition: filter .2s;
}

.cb-guest__form .cb-guest__btn:hover {
  background: linear-gradient(115deg, var(--red) 2%, #b23f37 100%);
  border-color: var(--beige);
}

.cb-guest__form .cb-guest__btn.is-done { filter: saturate(.6); }


/* =========================================================
   ПРАВИЛА — html-блок в посте с [hideprofile] (шаблон в html_правила.txt)
   ========================================================= */

.cb-rules {
  position: relative;
  width: 813px;
  max-width: 100%;
  margin: 0 auto;
  padding: 131px 0 40px 51px;        /* сверху место под котиков */
  box-sizing: border-box;
  font: 300 12px/1.35 var(--font1);
  color: var(--text);
}

/* подложка с мягкой внутренней тенью сверху — как прямоугольник в макете */
.cb-rules::before {
  content: "";
  position: absolute;
  inset: 20px 0 0 0;
  background: var(--white);
  box-shadow: inset 0 5px 6.3px 2px rgba(0, 0, 0, .04);
  pointer-events: none;
}

/* котики с репликами — картинкой сверху */
.cb-rules__cats {
  z-index: 1;
  position: absolute;
  top: 33px;
  left: 365px;
  width: 312px;
  height: 115px;
  background: var(--rules-cats) center / contain no-repeat;
  pointer-events: none;
}

/* один раздел правил: ярлык + серая карточка с текстом */
.cb-rules__block {
  position: relative;
  z-index: 1;
  width: 693px;
  max-width: 100%;
  padding-top: 16px;                 /* место, куда ярлык заходит над карточкой */
}

.cb-rules__block + .cb-rules__block { margin-top: 15px; }

/* ярлык раздела — светлая плашка с тенью, чуть наклонена, заходит на карточку */
.cb-rules__tag {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  padding: 7px 10px;
  background: var(--chip);
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: var(--text);
  transform: rotate(-2deg);
}

.cb-rules__card {
  margin: 0 0 0 4px;
  padding: 29px 23px 32px 36px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.cb-rules__card p { margin: 0 !important; }          /* перебиваем общие отступы абзацев в постах */
.cb-rules__card p + p { margin-top: 7px !important; }

/* подпункты «    - …» — с отступом */
.cb-rules__card .sub {
  display: block;
  padding-left: 16px;
}

/* ссылки внутри текста («в теме») — цветом текста, с тонким подчёркиванием */
.cb-rules__card a {
  color: inherit;
  border-bottom: 1px dashed var(--border);
  transition: color .2s, border-color .2s;
}

.cb-rules__card a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}