/* Подключение темы */

@import url("style_cs.1780087087.css");

/* Общие компоненты темы */

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 100.01%;
  position: initial;
  background:
    var(--base-bg) fixed top center / cover,
    #1a1a1a;
}
/* Шапка и подвал */

#pun-title table {
  width: 1100px;
  height: 412px;
  background: var(--head);
  margin-left: -30px;
}
#pun-about p.container {
  display: flex;
  background: var(--ftr-im);
  margin: -50px 0 -40px -30px;
  height: 140px;
  overflow: hidden;
  width: 1100px;
  justify-content: center;
  align-items: center;
}
#pun-title,
#pun-title .container,
#pun-stats h2,
#pun-navlinks .container,
.punbb .modmenu .container,
#profilenav h2 span,
.punbb .main .container,
.punbb .main h2,
.punbb .section .container,
.punbb th,
.punbb td.tc2,
.punbb td.tc3,
.punbb .info-box,
.punbb #pun-main .info-box .legend,
.punbb .post .container,
.punbb .post-body,
.punbb .post-links,
.punbb .post h3,
.punbb .post h3 span,
.punbb .formal fieldset .post-box,
.punbb legend span,
#viewprofile h2 span,
#viewprofile li,
#viewprofile li strong,
#viewprofile li div,
#setmods dl,
#setmods dd,
.punbb-admin #pun-admain .adcontainer,
.punbb-admin #pun-admain legend span {
  background-color: transparent;
  color: var(--text);
  font-weight: normal;
  font-style: normal;
}

/* Цитаты и код */

.punbb .quote-box,
.punbb .code-box {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 4px 4px 20px #0000000d;
}

.punbb input,
.punbb textarea {
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--bord);
  padding: 8px;
  border-radius: 5px;
}

#pun-popup_awards div,
#pun-reputation div {
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--bord);
}

/* Ссылки */

.punbb a,
.punbb a:link,
.punbb a:visited,
#pun-navlinks a,
#pun-ulinks a,
.punbb li.isactive a,
.punbb li.isactive a:link,
.punbb li.isactive a:visited,
.punbb-admin #pun-admain a,
.punbb-admin #pun-admain a:link,
.punbb-admin #pun-admain a:visited {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.7s ease-in-out, background-color 0.7s ease-in-out, border-color 0.7s ease-in-out;
}

.punbb a:hover,
.punbb a:focus,
.punbb a:active,
#pun-ulinks a:focus,
#pun-ulinks a:active,
.punbb-admin #pun-admain .nodefault,
.punbb-admin #pun-admain a:hover,
.punbb-admin #pun-admain a:focus,
.punbb-admin #pun-admain a:active {
  color: var(--accent2);
  text-decoration: none;
}
#pun-ulinks a {
  font-size: 11px;
  color: var(--text);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  font-family: var(--main-font);
}
#pun-ulinks a:hover {
  color: var(--accent2);
}
#pun-navlinks a {
  color: var(--navi-link);
  font: 400 20px var(--sec-font);
  letter-spacing: 0.5px;
  margin: 0 8px;
  text-transform: none;
}
#pun-navlinks a:hover,
#pun-navlinks a:focus,
#pun-navlinks a:active {
  color: var(--navi-link-hov);
}

/* Иконки тем */

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) table div.icon,
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.iclosed div.icon,
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.isticky div.icon,
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.inew div.icon {
  margin-right: 11px;
  margin-left: 4px;
  box-sizing: border-box;
  margin-top: 0;
  width: 16px;
  height: 16px;
  background: #92938e;
  mask: url(https://forumstatic.ru/files/001c/8d/fd/34855.svg) no-repeat center
    left / contain;
  -webkit-mask: url(https://forumstatic.ru/files/001c/8d/fd/34855.svg) no-repeat
    center left / contain;
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.iclosed div.icon {
  background: var(--text);
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.isticky div.icon {
  background: var(--accent);
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.inew div.icon {
  background: var(--accent2);
}

#pun-main div.catleft,
#pun-main div.catright {
  display: none;
}ul.post-ul-Sp,
.post-img-Sp {
  text-align: center;
}
#pun-main h2,
#pun th {
  text-align: center;
}
#pun-navlinks .container,
#pun-ulinks .container {
  text-align: center;
}
.modlist {
  font-size: 95.05%;
}
#pun-stats h2 span {
  display: none;
}
#pun td .modlist {
  display: none;
}
.lastedit {
  display: none;
}
#pun-navlinks #navawards {
  display: none;
}

/* Скроллбар и выделение */

::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--accent);
}
::selection {
  background: var(--accent);
  color: #f3ebdf;
  text-shadow: none;
}
#html-header ::-webkit-scrollbar,
.bnrs ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
td.tcr a {
  font-size: 13px;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

/* Аватары */

.punbb .user-avatar .avatar-image {
  opacity: 0.77;
  width: 31px;
  height: 31px;
  mix-blend-mode: luminosity;
  border-radius: 4px;
}
.punbb .user-avatar {
  margin: 1px 10px 2px 0;
  height: 30px;
  float: left;
  position: relative;
  width: 36px;
  grid-area: avatar;
  justify-self: end;
  align-self: start;
}

.punbb .user-avatar .isonline {
  background: #6a6a6a;
  animation: none;
  width: 7px;
  height: 7px;
  z-index: 2;
}
#pun-index .tclcon a {
  display: inline-block;
  position: relative;
}
.category .container thead {
  display: none;
}
#counters a img {
  opacity: 0.4;
  transition: opacity 2s;
}
#counters a:hover img {
  opacity: 1;
}
/* Модалки и панели редактора */

#font-area,
#size-area,
#color-area,
#table-area,
#smilies-area,
#image-area,
#imageup-area,
#imageattach-area,
#video-area,
#keyboard-area,
#addition-area {
  position: absolute;
  right: 6px;
  top: 43px;
  overflow-y: auto;
  padding-top: 10px;
  background: var(--quote);
  border: 1px solid var(--bord);
}
.pun-modal .modal-inner {
  width: 700px;
  max-width: 94%;
  height: auto;
  max-height: 44em;
  margin: 12% auto 0;
  position: relative;
  z-index: 120000;
  overflow: hidden;
  background: var(--base-bg2);
  border: 1px solid var(--bord);
}
/* Кнопки */

.button {
  font-family: var(--main-font);
  background-color: #4c4c4c;
  font-size: 10px;
  margin-top: 5px;
  transition: color 0.5s ease-in-out 0s, background-color 0.5s ease-in-out 0s, border-color 0.5s ease-in-out 0s;
  text-transform: uppercase;
  color: #dddddd;
  padding: 4px 20px 5px;
  cursor: pointer;
  letter-spacing: 0;
  border: 1px solid #464646;
}
.button:hover {
  background-color: #282828;
  color: #cfccbb;
}
#MyBookmarks {
  width: 240px;
  background: var(--quote);
  border: 1px solid var(--bord);
}
#BookmCntToggle.default-style {
  color: #345f6b;
}
#mask_dialog .inner {
  background: var(--quote);
  border: 1px solid var(--bord);
  padding: 8px;
}
#MyBookmarks h2 {
  margin: 10px 0 10px 0;
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) .tclcon a {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) .tclcon a:hover {
  color: var(--text);
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) td.tcr a {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--main-font);
  text-transform: lowercase;
  grid-area: date;
  display: inline-block;
  text-align: right;
}
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) span.byuser {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--main-font);
  grid-area: byuser;
  text-align: right;
}

#tags .container {
  position: absolute;
  right: 6px;
  top: 57px;
  background: var(--quote);
  border: 1px solid var(--bord);
  max-height: 255px;
  border-radius: 10px;
  overflow-y: auto;
  padding: 10px;
}
#imageupload-left input[type="button"] {
  width: auto;
  text-align: center;
}
#MyBookmarks h1,
#MyBookmarks h2,
.editBookmark h2 {
  position: relative;
  width: auto;
  z-index: 9999999;
  margin-left: 0;
}

#pun-stats .container a {
  color: var(--accent);
  font-weight: 600;
}
#pun-stats .container a:hover {
  color: var(--text);
  font-weight: 600;
}

/* Редактор: кнопки форматирования */

#form-buttons {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  flex-direction: row;
}
#form-buttons table {
  width: 100%;
}
#form-buttons table tr {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  padding: 0;
  justify-content: space-between;
}
#form-buttons td {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  margin: 4px 0 5px;
  padding: 10px;
  border: 1px solid var(--bord);
  border-radius: 4px;
  background: none;
  background-color: var(--podform);
  background-image: none;
}
#form-buttons td::before {
  font-family: "Font Awesome 6 Pro";
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color 1s ease, background-color 1s ease;
  background: var(--podform);
  border-radius: 4px;
}
#form-buttons td:hover::before {
  color: #2f3040;
}
#button-keyboard {
  display: none;
}

#button-font::before {
  content: "\f031";
}
#button-size::before {
  content: "\f894";
}
#button-bold::before {
  content: "\f032";
}
#button-italic::before {
  content: "\f033";
}
#button-underline::before {
  content: "\f0cd";
}
#button-strike::before {
  content: "\f0cc";
}
#button-left::before {
  content: "\f036";
}
#button-right::before {
  content: "\f038";
}
#button-center::before {
  content: "\f037";
}
#button-link::before {
  content: "\f0c1";
}
#button-spoiler::before {
  content: "\f518";
}
#button-image-insert::before {
  content: "\f03e";
}
#button-video::before {
  content: "\f144";
}
#button-hide::before {
  content: "\f30d";
}
#button-quote::before {
  content: "\f27a";
}
#button-indent-btn::before {
  content: "\f878";
}
#button-code::before {
  content: "\f121";
}
#button-color::before {
  content: "\f53f";
}
#button-table::before {
  content: "\f009";
}
#button-smile::before {
  content: "\f118";
}
#button-keyboard::before {
  content: "\f11c";
}
#button-addition::before {
  content: "\f0d7";
}
#button-image::before {
  content: "\f302";
}
#button-sticker::before {
  content: "\f118";
}
#button-music::before {
  content: "\f001";
}
#button-mask::before {
  content: "\f630";
}
#button-voice::before {
  content: "\f130";
}
#button-ChangeСase::before {
  content: "\f422";
}
#button-transL::before {
  content: "\f0ec";
}
#button-vkladka::before {
  content: "\e475";
}
#button-float::before {
  content: "\f03c";
}
#sticker-pack-button::before {
  content: "\f59a";
}
#dice-roll-btn::before {
  content: "\f522";
}
.icons-vkladka:hover,
.tab-list:hover {
  color: var(--accent);
  transform: none;
  transition: none;
}
.pa-online::before {
  content: "колдует";
}
.icons-vkladka:hover::before {
  margin-top: 0;
}
#pun-index .tcl h3 a {
  font-weight: 400;
  z-index: 1;
}
#pun-index .tcl h3 a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  z-index: -1;
}
#pun-index .tcl h3 a::before {
  content: "";
  background: var(--bord);
  height: 13px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform 0.8s cubic-bezier(0.64, 0.51, 0.55, 1) 0s;
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  border-radius: 4px;
}
.custom_tag_secondquote {
  background: #292828;
  color: var(--tab-text);
  border: 1px solid var(--sec-text);
  border-radius: 6px;
  overflow: hidden;
  display: block;
  padding: 10px 20px;
}

.gpc-open-btn {
  gap: 0;
}
#form-buttons .gpc-open-btn {
  font-size: 0;
}
.gpc-open-btn::before {
  content: "\f70e";
  font-family: "Font Awesome 6 Pro";
  font-size: 11px;
  color: var(--text);
}

td#button-smile {
  display: none;
}
.indOnline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 16px;
  border-radius: 4px;
  background: var(--accent2);
  z-index: 0;
}
.indOnline::before {
  display: block;
  position: relative;
  width: 9px;
  height: 9px;
  margin-top: 3px;
  color: var(--tab-text);
  font-family: var(--sec-font);
  font-size: 20px;
  font-style: normal;
  content: "*";
}
.indOffline {
  display: none;
}
.pa-online,
.pa-last-visit {
  display: none;
}
.banners_bottom {
  position: absolute;
  margin-top: 55px;
  left: 0;
  width: 100%;
  height: 33px;
  overflow: hidden;
}
.banners_bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  will-change: transform;
  opacity: 0.7;
}

/* Базовая разметка */

html {
  margin: 0;
  padding: 0;
  width: 100%;
}
.punbb * {
  margin: 0;
}
.punbb ul,
.punbb dl,
.punbb li,
.punbb dd,
.punbb dt {
  list-style: none;
}
.punbb img {
  border: none;
}
.punbb .main table {
  table-layout: fixed;
  width: 100%;
}
.checkfield input[type="checkbox"],
.radiofield input[type="radio"] {
  margin: 0 0.3em;
}
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle;
}
.punbb {
  float: none;
  width: auto;
  height: auto;
  margin: 0 30px;
  font: normal 70% Verdana;
}
.punbb textarea,
.punbb input,
.punbb select,
.punbb optgroup {
  font:
    12px verdana,
    arial,
    helvetica,
    sans-serif;
  background: var(--podform);
  border: 1px solid var(--bord);
  outline: none;
  accent-color: var(--text);
  color: var(--text);
}
.punbb h1,
.punbb h2,
.punbb h3,
.punbb h4,
.punbb table,
.punbb th {
  font-size: 1em;
  font-weight: normal;
}
.punbb h1 span,
.punbb legend span {
  font-size: 11px;
}
.punbb pre {
  font:
    1.1em/140% monaco,
    "bitstream vera sans mono",
    "courier new",
    courier,
    monospace;
}
.punbb address,
.punbb em {
  font-style: normal;
}.punbb a {
  text-decoration: underline;
}
.punbb optgroup {
  font-weight: bold;
}
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.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;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}
#pun {
  margin: 100px auto;
  width: 1100px;
  background: var(--base-bg2) repeat-y;
  position: relative;
}
#pun-redirect,
#pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  min-height: 100px;
}

#pun-redirect {
  border: 0 none;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  background: var(--base-bg) fixed top center/cover;
}
#pun-redirect * {
  border: 0 none;
}
#pun-redirect .main-title {
  display: none;
}
#pun-redirect.punbb .info .container {
  text-align: center;
  display: block;
  margin: 5% auto;
  font-size: 13px;
  font-family: var(--main-font);
  padding: 30px 0;
  height: auto;
  border: 0;
  text-transform: lowercase;
  width: 900px;
  font-weight: 500;
  margin-top: 120px;
  color: var(--text);
}
.punbb .section,
.punbb .main {
  margin-bottom: 1em;
}
.punbb .category,
.punbb .post {
  margin-top: 0.4em;
}
.punbb #pun-category1,
.punbb .toppost,
.punbb .topicpost {
  margin-top: 0;
}
#pun-post .topic {
  margin-top: 1em;
}
.punbb .section,
.punbb .forum,
.punbb .formal,
.punbb .modmenu,
.punbb .info,
.punbb .category,
.punbb .post {
  border-style: none;
  border-width: 0;
}
.punbb .container {
  border-style: none;
  border-width: 0;
}
.punbb .section h2,
#pun-main h1,
#pun-main h2,
#pun-debug h2 {
  font-family: var(--main-font);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
  text-align: center;
  width: auto;
  letter-spacing: 0.6px;
  text-transform: lowercase;
  margin: -20px 0 20px 0;
}

#pun-main h1 {
  display: none;
}
/* Контент и посты */

.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: justify;
}

.punbb .post-content em {
  font-style: italic;
}
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}
.post-content hr {
  opacity: 0.5;
  margin: 0.8em 0;
}
.punbb .post-content a {
  font-weight: bold;
  color: var(--accent);
}
.punbb .post-content a:hover {
  font-weight: bold;
  color: var(--text);
}
.punbb .post-sig dt {
  display: block;
  text-align: center;
  border-top: 1px dotted #707070;
  width: auto;
  margin: 20px 50px;
}
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  overflow-wrap: break-word;
}
.punbb .post-content img {
  vertical-align: text-bottom;
}
.punbb .post-content img.postimg {
  vertical-align: middle;
}
.punbb .post-content .blockcode,
.punbb .post-content blockquote {
  width: 100%;
}
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
}
.punbb .post-content .quote-box,
.punbb .post-content .code-box {
  margin: 1em 0 1em 0;
  padding: 0;
}

.post-content td {
  border-width: 1px;
  border-style: solid;
  padding: 0.4em 0.5em;
  overflow: hidden;
  text-align: left;
  font-size: 0.8em;
}
.punbb .quote-box cite,
.punbb .code-box strong.legend {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  font-family: var(--main-font);
  margin-bottom: 8px;
  width: auto;
  text-transform: none;
  font-style: normal;
  letter-spacing: 0;
  display: flex;
  gap: 4px;
  margin-left: 0;
  color: var(--sec-text);
  background: var(--pf-bg) bottom center/cover;
  padding: 7px 20px;
  border-bottom: 1px solid var(--bord);
}
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
}
.punbb .info-box * {
  padding: 0 0 0.7em 0;
}
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
}
.punbb .linkst {
  font-size: 10px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 5px;
  position: relative;
  padding: 0 0;
}
.multipage {
  margin-top: 1em;
}
.linkst .postlink {
  text-align: right;
}
.punbb .linksb {
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: none;
  margin-top: 10px;
}
.linksb .pagelink {
  float: left;
  width: auto;
  text-align: left;
}

.pagelink a {
  padding: 0 3px;
}
.linksb .postlink {
  float: right;
  width: auto;
}
.subscribelink {
  clear: both;
  display: flex;
  float: right;
  background: var(--quote);
  padding: 5px 15px 6px;
  border-radius: 4px;
}
/* Формы и таблицы */

.punbb .formal .container {
  padding: 0em 2.3em 1.1em 2.3em;
}
.punbb .formsubmit {
  margin: 1em 0 0;
  padding: 0 0 0 1.7em;
}
.punbb .formsubmit input,
.punbb .formsubmit a,
.punbb .formsubmit span {
  margin: 0 0.6em 0 0;
}
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0;
}
.punbb fieldset legend {
  padding: 0;
  margin: 0;
  font-size: 0;
}
.punbb fieldset legend span {
  padding: 0;
  margin: 0;
  font-size: 0;
  font-family: var(--main-font);
  text-transform: uppercase;
}
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0;
}
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
}
.punbb .fs-box p,
.punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;
}
.punbb .inline .inputfield,
.punbb .inline .selectfield,
.punbb .inline .passfield {
  float: left;
  margin-right: 1em;
}
.punbb .inline .infofield {
  clear: both;
}
.punbb .datafield br {
  display: none;
}
.punbb .required label,
.punbb .datafield span.input {
  font-weight: bold;
  font-family: var(--main-font);
  margin-bottom: 0;
  display: inline-flex;
  text-transform: uppercase;
}
.punbb .datafield span.input a {
  font-weight: normal;
}
.punbb .areafield span.input,
.punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%;
}
.punbb textarea,
.punbb .longinput input {
  width: 64%;
  margin: 0;
}
.punbb .hashelp {
  position: relative;
}
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
}
.punbb #profile .helplinks {
  top: 1.5em;
}
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
}
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
}
.punbb .main .tcl {
  text-align: left;
  width: 45%;
  border-left-style: none;
  border-left-width: 0;
}
#pun-viewforum .tc2,
#pun-viewforum .tc3,
#pun-viewforum .tcmod {
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: lowercase;
  width: 8%;
}
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "byuser avatar"
    "date avatar";
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
}

#pun-index .tcr {
  width: 35%;
  position: relative;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--main-font);
  display: flex;
  letter-spacing: 0;
  align-items: center;
}

div#pun-profile .tcr {
  width: 90%;
}
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  background-color: transparent;
  width: 40%;
  text-transform: lowercase;
}
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  background-color: transparent;
  text-align: center;
  width: 30%;
}
#pun-debug table .tcl {
  background-color: transparent;
  width: 15%;
  white-space: normal;
}
#pun-debug .tcr {
  background-color: transparent;
  width: 90%;
  white-space: normal;
}

#pun-index .tcl h3 {
  font-family: var(--sec-font);
  font-size: 20px;
  text-align: left;
  height: auto;
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 21px;
}

#pun-index .tcl {
  width: 70%;
  position: relative;
  overflow: visible;
}
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
}
.punbb td .modlist {
  display: block;
  padding-top: 0.3em;
}
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 10px 0;
}
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1.5em;
}

* html .tclcon {
  height: 1px;
}
#pun-index td div.tclcon {
  text-align: justify;
  position: relative;
  font-family: var(--main-font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
.punbb div.icon {
  float: left;
  display: block;
}

#pun-messages .main .tc2 {
  text-align: center;
}
/* Системные блоки PunBB */

#pun-title,
#pun-navlinks {
  border-color: #202021;
}
.punbb .container,
.punbb .post-body {
  border-color: transparent;
}
.punbb .main h1,
.punbb .main h2,
#pun-debug h2,
.punbb-admin #pun-admain h2 {
  border-color: transparent;
}
.punbb td,
.punbb fieldset,
#viewprofile ul,
#profilenav ul,
.punbb .post .post-body,
.post-links ul,
.post-links,
.usertable table {
  border-color: transparent;
}
.punbb th {
  border-color: transparent;
  font-size: 0;
}

#pun-ulinks li,
#pun-announcement h2 span,
li#onlinelist,
#pun-help .formal .info-box h3.legend span {
  border-color: transparent;
}

#pun-ulinks li a,
#pun-announcement h2,
li#onlinelist div,
#pun-help .formal .info-box h3.legend {
  border-color: transparent;
}

.punbb .divider {
  border-color: transparent;
}

.punbb .formal fieldset .post-box,
.punbb .info-box {
  border: 1px solid transparent;
}
/* Посты */

#pun-viewtopic .post h3 {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}
.post h3 span strong:before {
  content: "#";
}
.punbb .post h3 span {
  display: flex;
  font: 400 12px var(--main-font);
  height: auto;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
  gap: 5px;
  text-transform: uppercase;
}
.punbb .post h3 strong {
  width: auto;
  order: 2;
  font-size: 14px;
  font-family: var(--sec-font);
  color: var(--text);
  font-weight: 400;
}

/* Посты: тело и ссылки */

.punbb .post-body {
  margin-left: 250px;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
}
.punbb .post-box {
  padding: 10px 10px 15px 10px;
}
.punbb fieldset .post-box {
  margin-bottom: 0.8em;
}
.punbb .post-links ul {
  padding: 0;
  text-align: right;
  font-size: 11px;
  font-family: var(--main-font);
  font-weight: 400;
  text-transform: lowercase;
  margin: 0 20px 0 5px;
}
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
}
.pl-email,
.pl-website {
  float: left;
}
a.reportlink {
  font-size: 0;
}
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
}

/* Профиль автора в посте */

.punbb .post .post-author {
  --race-frame-color: transparent;
  --race-frame-w: 1px;
  --race-frame-radius: var(--radius);
  float: left;
  width: 240px;
  margin: 10px 0 0;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 11px;
  padding-top: 0;
  position: relative;
  color: var(--prof-text);
  background: var(--profile-bg) center/cover;
  box-sizing: border-box;
  border-radius: var(--radius);
  box-shadow: 4px 5px 10px #00000024;
  border: 1px solid var(--prof-bord);
  z-index: 0;
}
#pun-main .post-author ul {
  text-align: center;
}
.punbb .post .post-author ul,
.punbb .post .post-author p {
  padding: 0 0 10px 0;
  line-height: 160%;
}
.punbb .post .post-author a {
  color: var(--prof-link);
  font-weight: 600;
}
.punbb .post .post-author a:hover {
  color: var(--prof-text);
}

/* Профиль автора: имя и статус */

.pa-author {
  font-family: var(--sec-font);
  text-transform: none;
  text-align: center;
  position: relative;
  padding: 0;
  margin-top: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pa-author a {
  font-weight: 400;
  letter-spacing: 0;
  background: var(--accent2);
  color: var(--tab-text);
  padding: 4px 10px;
  font-size: 15px;
  border-radius: 5px 5px 0 0;
}
.pa-author a:hover {
  background: var(--dark-bord);
}
li.pa-title {
  font-size: 10px;
  font-weight: 400;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  text-transform: none;
}

/* Профиль автора: аватар и поля */

.author-wrap {
  margin: 0 10px 0;
  border-radius: var(--radius);
  padding: 5px;
  background: var(--kndr-img) center/cover;
  border: 1px solid var(--dark-bord);
}
.punbb .pa-avatar img {
  max-width: 200px;
  margin-bottom: 0;
  margin-top: 5px;
  box-sizing: initial;
  border-radius: 4px;
}
.pa-fld1 {
  border-top: 1px solid var(--dark-bord);
  margin: 10px -5px 0;
  padding: 10px;
  background: linear-gradient(180deg, #0000004d, transparent);
}
.pa-fld1 .lz-name {
  font-family: var(--sec-font);
  font-size: 13px;
  text-transform: uppercase;
}
.pa-fld1 .lz-name a {
  font-weight: 400;
}
.pa-fld1 .lz-text {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  margin: 5px 5px 0;
}
.pa-fld2 race {
  background: var(--accent2);
  padding: 2px 10px 5px;
  border-radius: 0 0 5px 5px;
}
.pa-fld6 {
  width: 238px;
  height: 190px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--profile);
}
.pa-fld6 img {
  vertical-align: top;
  width: 100%;
  mask: linear-gradient(0deg, rgba(217, 217, 217, 0) 0%, #141c1b 100%);
  -webkit-mask: linear-gradient(
    0deg,
    rgba(217, 217, 217, 0) 0%,
    var(--profile) 100%
  );
  overflow: hidden;
  filter: grayscale(0.4);
  border-radius: 4px;
}
.pers-plah {
  width: 220px;
  height: 32px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  color: var(--tab-text);
  cursor: pointer;
  display: flex;
  background: var(--pers-pl) center/cover;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 9px;
  transform: translateX(-50%);
  left: 50%;
  padding: 0;
}
pers-plah img {
  border-radius: 6px;
}
.pers-plah-text {
  font-weight: 500;
  font-size: 11px;
  z-index: 9;
  text-shadow: 1px 1px 10px rgb(0 0 0 / 54%);
  text-transform: lowercase;
}
.punbb .modmenu .container {
  padding: 5px 0 0;
  text-align: right;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: lowercase;
}
.punbb .modmenu strong,
.punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
}

div#topic-users-in a {
  padding: 0 1px;
}

div#topic-users-in a::after {
  content: ",";
}

div#topic-users-in a:last-child::after {
  content: "";
}
.punbb .modmenu .container strong {
  float: left;
}
.punbb .modmenu input {
  margin-left: 1em;
}

div#topic-modmenu span {
  display: none;
}
.punbb .info .container {
  padding: 0.8em 1em;
}
.punbb .info .container .backlink {
  padding-top: 0.8em;
}
/* Профиль пользователя */

#profile .container {
  padding-left: 18.6em;
}
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
}
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
}
#viewprofile ul,
#profilenav ul {
  margin: 0;
  padding: 0;
}
#viewprofile h2,
#profilenav h2 {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 14px 0em 14px;
}
#viewprofile h2 span,
#profilenav h2 span {
  padding: 0 5px;
  position: relative;
}
#viewprofile li,
#setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
}
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
}
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
}
#viewprofile li strong,
#viewprofile li div,
#setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
}
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em;
}

#viewprofile #pa-fld2 div {
  padding: 0;
}

.pa-fld2 img {
  width: 20px;
  height: 20px;
}

#viewprofile #profile-signature p {
  padding: 1em;
}
/* Список пользователей — базовые таблицы */

#pun-userlist .formal,
#pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
}
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
}
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
}
/* Шапка и навигация */

#pun-title {
  margin: 0;
  border-style: none;
  border-width: 0;
}
#pun-title h1 {
  display: block;
}
#pun-title .container {
  border-style: none;
}
#pun-title h1 span {
  display: none;
  font-size: 1.5em;
}
#pun-pagelinks {
  position: absolute;
  top: 55px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
}
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0;
}
#pun-pagelinks .container li {
  display: inline;
}
#pun-pagelinks li a,
#pun-pagelinks a:link,
#pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float: left;
  width: 100%;
}
#pun-pagelinks a:active,
#pun-pagelinks a:focus {
  position: relative;
  margin: 0;
}

#pun-pagelinks li a span {
  display: block;
  margin: 0 1em;
}
#pun-navlinks {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-transform: uppercase;
  justify-content: center;
  margin: 0;
  width: 100%;
  position: absolute;
  top: -66px;
  background: #19191996;
  border: 1px solid var(--dark-bord);
  height: 50px;
  border-radius: 10px;
  left: 0;
}

#pun-navlinks .container {
  padding: 0;
}

#pun-navlinks li {
  display: inline;
  margin: 0;
}
#pun-ulinks {
  margin: 0;
}
#pun-ulinks .container {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;

  margin-top: -72px;
  border-radius: 20px;
  border: 1px solid var(--bord);
  padding: 5px;
  box-shadow: 2px 2px 11px #19191917;
}
#pun-ulinks li,
#pun-ulinks li a {
  display: inline-block;
}
#pun-ulinks li a {
  padding: 0 6px;
}
#pun-ulinks li.item1,
#pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0;
}
#pun-status,
#pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
}
#pun-status .container {
  font-size: 11px;
  font-family: var(--main-font);
  font-weight: 400;
  letter-spacing: 0;
  height: auto;
  text-transform: none;
  margin-top: 22px;
}
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
}
#pun-crumbs1 {
  font-weight: 400;
}
#pun-crumbs1 p.container {
  height: auto;
  font-family: var(--main-font);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  margin-top: 7px;
}

#pun-crumbs1 p.container a,
#pun-crumbs2 p.container a {
  font-weight: 400;
  transition: 1s;
}

#pun-crumbs1 p.container a:hover,
#pun-crumbs2 p.container a:hover {
  transition: 1s;
  font-weight: 400;
}
#pun-break1 {
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: 0 0 0 0;
  position: relative;
}
/* Объявления, статистика и подвал */

#pun-announcement h2 {
  display: none;
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
}
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
#pun-announcement .container {
  padding: 0;
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 101%;
  font-family: "Arial";
}
#pun-stats .container {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 15px 20px;
  font-family: var(--main-font);
  border-radius: 8px;
  background: var(--podform);
  margin: 20px 0 10px;
  position: relative;
  border: 1px solid var(--bord);

  box-shadow: 2px 2px 11px #19191917;
}
#pun-stats li.item1,
#pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
}
#pun-stats li.item3,
#pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
}
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  text-align: justify;
}
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
}
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
}
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
}
#pun-about {
  margin-top: 0;
  margin-bottom: 0;
}
#pun-about .container {
  border-top-style: none;
  text-align: center;
  line-height: 150%;
}
#pun-about p span {
  display: block;
  padding-left: 50%;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: uppercase;
}
#pun-crumbs2 {
  font-weight: 400;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
}
#pun-crumbs2 .container {
  font-family: var(--main-font);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  height: auto;
}
#pun-break4 {
  margin: -2px 1em;
  border-style: none;
  border-width: 0 0;
  position: relative;
  height: 0;
}
/* Справка */

#pun-help .formal .info-box h3.legend {
  border-bottom-style: none;
  border-bottom-width: 0;
  padding-bottom: 0;
  margin-bottom: 0.8em;
}

#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: none;
  border-bottom-width: 0;
  font-size: 1.1em;
}
#pun-help .formal p,
#pun-help .formal dd {
  margin-bottom: 1em;
}
#pun-help .formal ul,
#pun-help .formal dl {
  padding: 0 0 0 1em;
}
#pun-help .formal li {
  padding: 0;
  line-height: 130%;
}
#pun-help .formal li * {
  vertical-align: text-top;
}
#pun-help .formal dt span {
  font:
    1.4em/120% monaco,
    "bitstream vera sans mono",
    "courier new",
    courier,
    monospace;
}
#pun-help .formal .parsedmsg,
#pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
}

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

/* Быстрый ответ */

#main-reply {
  text-align: justify;
  padding: 15px 20px;
}


/* Главная страница и категории */

#pun-index .category .tc2,
#pun-index .category .tc3,
#f-subforums .tc2,
#f-subforums .tc3 {
  display: none;
}

#pun-index .isub {
  display: none;
}

html * {
  box-sizing: border-box;
}

.pa-ip {
  font-size: 9px;
  margin-top: 5px;
}
#pun-index .category h2,
#pun-stats h2 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 -10px 0;
  position: relative;
  background: var(--cat-branch) center no-repeat;
  height: 34px;
  width: 100%;
  opacity: 0.5;
}
#pun-stats h2 {
  background: transparent;
  height: 0;
}

#pun-index .category h2 span,
#pun-stats h2 span {
  -webkit-text-size-adjust: 100%;
  font-size: 38px;
  position: relative;
  font-weight: 400;
  text-transform: lowercase;
  color: #858585;
  font-family: var(--sec-font);
  height: 44px;
  overflow: hidden;
  line-height: 48px;
}

#pun-index .category table tr {
  margin: 10px 0;
  -webkit-appearance: none;
  display: flex;
  gap: 0 30px;
  position: relative;
  background: var(--podform);
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--bord);

  box-shadow: 2px 2px 11px #19191917;
}

#pun-viewforum .tcr {
  position: relative;
  display: flex;
  gap: 0 10px;
  align-items: center;
}

.postlink.long {
  width: auto;
}

.pagelink,
.new-poll a,
.new-topic a,
.postlink span a {
  padding: 3px 10px;
  text-transform: lowercase;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--main-font);
  border: 1px solid var(--bord);
  box-shadow: 2px 2px 11px #19191917;
}

.forum tr {
  margin: 10px 0;
  display: flex;
  gap: 20px;
  font: 400 11px var(--main-font);
  align-items: center;
  text-transform: lowercase;
  border-radius: 6px;
  padding: 0 10px;
  border: 1px solid var(--bord);

  box-shadow: 2px 2px 11px #19191917;
}

.forum thead {
  display: none;
}

.topic a.sharelink {
  float: right;
  margin-left: 1em;
  display: none;
}

.reactions-root {
  display: none;
}

#profile .container fieldset legend span {
  padding: 0;
  margin: 0;
  font-size: 10px;
  font-family: var(--main-font);
  text-transform: uppercase;
}

#pun-main h2 span {
  font-size: 0;
}

/* HTML-шапка */

#html-header {
  color: var(--tab-text);
}

.punbb .main .tc2,
.punbb .main .tc3,
.punbb .main .tcmod {
  width: 8%;
}

.html-box a {
  width: 180px;
  text-align: center;
  height: 40px;
  background: var(--profile-bg);
  overflow: hidden;
  border: 1px solid var(--text);
  color: var(--quote);
  border-radius: 4px;
  transform: scale(1);
  display: inline-block;
  margin: 2px 10px;
}

.html-box a img {
  width: 40px;
  float: left;
  margin-left: 5px;
}
.html-box a p.one {
  font-size: 12px;
  margin-top: 5px;
  font-family: var(--main-font);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0;
}

.html-box a p.two {
  font-size: 10px;
  font-family: var(--main-font);
}

.html-box a:hover {
  transform: scale(0.9);
}

#tooltip {
  position: absolute;
  background: var(--accent2);
  max-width: 200px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
  font-family: var(--main-font);
  font-size: 11px;
  display: none;
  color: #efeee4;
  text-align: center;
  padding: 6px 22px;
  font-weight: 400;
}

.tcr-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.punbb .post-content .quote-box,
.spoiler-box {
  padding: 0;
}

#pun-admain .adlabel {
  width: 18em;
}

#plng {
  font-size: 10px;
  font-weight: 400;
  margin-top: 0;
  display: flex;
  align-items: center;
  transition: color 0.3s ease-in-out 0s, background-color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
  text-transform: uppercase;
  white-space: nowrap;
  gap: 5px;
  font-family: var(--main-font);
  border-radius: 5px;
  background: var(--quote);
  border: 1px solid var(--bord);
  padding: 4px 20px;
}

.post-content .spoiler-box > div {
  background: transparent;
  position: relative;
  padding: 10px;
  font-family: var(--main-font);
}

.spoiler-box {
  padding: 0;
}

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

#pun-index .datetime,
#pun-index .byuser {
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
}

#html-header a,
.winter #html-header a:hover {
  color: var(--navi-link-hov);
  font-weight: 600;
}

#html-header a:hover,
.winter #html-header a {
  color: var(--navi-link);
}

.post-content .spoiler-box > div.visible {
  border-bottom: 1px solid var(--bord);
  border-radius: 4px 4px 0 0;
}
.post-content .spoiler-box > blockquote.visible {
  padding: 20px 30px;
  background: var(--podform);
  border-radius: 0 0 4px 4px;
}

.post-content .spoiler-box > div:before {
  content: "\f070";
  font-family: "FontAwesome";
  font-size: 11px;
  transition: color 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
  align-items: center;
  margin-right: 10px;
  color: var(--sec-text);
  opacity: 0.5;
}

.post-content .spoiler-box > div.visible:before {
  content: "\f06e";
  opacity: 1;
}

#pun-index td div.tclcon podf {
  font-size: 11px;
}

a.permalink {
  background: var(--quote);
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--bord);
  font-size: 10px;
  flex-shrink: 0;
}

.allps {
  margin: 4px 0 0 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  font-size: 9px;
  align-items: center;
  text-transform: lowercase;
}

select#mod-options {
  font-family: var(--main-font);
  font-size: 10px;
  text-transform: uppercase;
  padding: 0 5px;
  margin: 0;
  border-radius: 6px;
}

#pun-profile #viewprofile ul {
  background: var(--podform);
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--bord);
}

/* Профиль пользователя — расширенное оформление */

#viewprofile #profile-left {
  text-transform: lowercase;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  background: var(--quote) top right/cover;
  font-size: 12px;
  font-family: var(--main-font);
  padding: 20px;
  color: #383636;
  border-right: 1px solid var(--bord);
  border-radius: 10px 0 0 10px;
}

#profile-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: auto;
  border-radius: 0;
  padding: 20px;
  box-sizing: border-box;
}

#viewprofile #profile-left li strong,
#viewprofile #profile-left li strong a {
  color: var(--text);
}

#profile-right li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: auto;
  text-align: center;
  padding: 10px 10px;
  font-size: 11px;
  background: #00000008;
  border: 1px solid #0000000a;
  gap: 6px;
  font-family: var(--main-font);
}

#profile-right #pa-fld1 {
  width: 100%;
}

#profile-right .pers_plash {
  background-image: none;
  background-repeat: no-repeat;
  width: 200px;
  height: 40px;
  position: relative;
  padding: 0;
  margin: 0;
}

#profile-right .pers_plash_text {
  font-size: 7px;
  margin: 0 20px;
}

#pun #profile-right li span {
  float: none;
  margin: 0;
  width: auto;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0;
}

#profile-right li strong {
  padding: 0;
  text-transform: none;
}

.Add {
  width: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-size: 10px;
  font-family: var(--main-font);
  letter-spacing: 0;
  color: var(--text);
  font-weight: 300;
  font-style: normal;
}

.tms,
.mssg {
  font-size: 0;
}

.tms:before {
  position: relative;
  display: block;
  font-weight: 600;
  content: "\f447";
  font-size: 11px;
  font-family: "Font Awesome 6 Pro";
  color: var(--sec-text);
}

.mssg:before {
  position: relative;
  display: block;
  font-weight: 600;
  content: "\f70e";
  font-size: 11px;
  color: var(--sec-text);
  font-family: "Font Awesome 6 Pro";
}

.Tems_And_messages {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pf-wrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
  width: 176px;
}

.pf-span {
  background: var(--bord);
  border-radius: 6px;
  padding: 3px 10px;
  text-transform: none;
  font-size: 12px;
}

.pforums {
  background: var(--bord);
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 11px;
}

#pun-index .category table tr + tr {
  margin: 15px 0;
  padding: 20px;
}

.forum-nav {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.forum-nav a {
  background: var(--accent2);
  padding: 3px 10px;
  border-radius: 6px;
  color: var(--tab-text);
  text-transform: uppercase;
  font-size: 10px;
}

.forum-nav a:hover {
  background: var(--accent2);
}
#pun-index .category tr.inew {
  background: var(--pf-bg) center/cover;
  box-shadow: 5px 6px 10px #00000014;
}

#pun-stats .statsinfo {
  display: flex;
  gap: 33px;
  margin-bottom: -4px;
  margin-top: 0;
  background: var(--sts-bg) center/cover;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--bord);
}

#pun-stats .statsinfo li {
  text-align: center;
  font-size: 11px;
  text-transform: none;
}

.wrap-resp {
  display: flex;
  gap: 10px;
  justify-content: center;
  font-size: 11px;
  align-items: center;
  margin: 9px 0 10px;
}

.pa-posts .fld-name,
.pa-respect .fld-name,
.pa-fld4 .fld-name,
.pa-fld5 .fld-name {
  font-size: 0;
}

.pa-posts .fld-name:before,
.pa-respect .fld-name:before,
.pa-fld4 .fld-name:before,
.pa-fld5 .fld-name:before {
  content: "\f0e0";
  font-family: FontAwesome;
  font-size: 11px;
  color: var(--accent2);
  margin-right: 5px;
  font-weight: 600;
}
.pa-respect .fld-name:before {
  content: "\f004";
}

.pa-fld4 .fld-name:before {
  content: "\f219";
  font-family: "Font Awesome 5 Pro";
}

.pa-fld5 .fld-name:before {
  content: "\f52d";
  font-family: "Font Awesome 5 Pro";
}

.pa-respect span a {
  padding: 1px;
  width: 12px;
  height: 12px;
  position: absolute;
  margin-top: 0;
  margin-left: -16px;
}

.pa-posts span a {
  padding: 1px;
  width: 12px;
  height: 12px;
  position: absolute;
  margin-top: 0;
  margin-left: -12px;
}

.quote-box blockquote,
.code-box .blockcode {
  padding: 10px 20px;
  position: relative;
}

.blockcode {
  max-height: 150px;
  overflow: auto;
}

.bnrs {
  background: var(--ftr-im);
  width: 1100px;
  height: 117px;
  position: absolute;
  left: 0;
  margin-top: 22px;
  border-radius: 10px;
  border: 1px solid var(--dark-bord);
}

.bnrs div {
  height: 46px;
  display: flex;
  margin: 15px;
  overflow-y: hidden;
  overflow-x: auto;
  gap: 10px;
}

.bnrs div img {
  opacity: 0.4;
  transition: opacity 0.7s ease-in-out 0s, filter 0.7s ease-in-out 0s;
}

.bnrs div img:hover {
  opacity: 1;
  transition: opacity 0.7s ease-in-out 0s, filter 0.7s ease-in-out 0s;
}

.activees,
.activees2 {
  height: 45px;
  width: 187px;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0 16px;
  left: 71px;
  top: 14px;
  align-items: center;
}

.activees::before {
  content: "Акции";
  left: 0;
  top: calc(100% + 6px);
  text-align: center;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  font-family: var(--sec-font);
  color: var(--ks-copy-btn-hover-fg);
  opacity: 0.8;
}

.activees2::before {
  content: "";
  left: 0;
  top: calc(100% + 6px);
  text-align: center;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  font-family: var(--sec-font);
  color: var(--ks-copy-btn-hover-fg);
  opacity: 0.8;
}

.activees2 {
  left: auto;
  right: 71px;
  top: 259px;
  width: 224px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.activees div,
.activees2 div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  box-shadow: 6px 5px 10px #00000000;
  opacity: 0.7;
}

.activees img,
.activees2 img {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.activees div:after,
.activees2 div:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  transition: opacity 0.6s ease-in-out 0s, background-color 0.6s ease-in-out 0s;
  mix-blend-mode: multiply;
}

.activees div:hover img,
.activees2 div:hover img {
  filter: grayscale(100%);
}

.activees div:hover:after,
.activees2 div:hover:after {
  opacity: 1;
  background: var(--navi-link-hov);
}

/* Рейтинг и реакции постов */

.punbb .post-rating a:hover:before,
.punbb .post-vote a:hover:before {
  color: var(--text);
}

.punbb .post-rating a:hover:before {
  color: var(--text);
}

.punbb .post-rating a {
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  color: var(--text);
  gap: 5px;
}

.punbb .post-rating a:before {
  content: "\f004";
  font: 13px FontAwesome;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: color 0.4s linear 0s, background-color 0.4s linear 0s;
  color: var(--accent);
}

.punbb .post-rating p,
.punbb .post-vote {
  line-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 0 10px;
  margin: 0;
  align-self: stretch;
  background: var(--bord);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--main-font);
  font-size: 10px;
}

.punbb .post-rating {
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.rsp_wrap {
  margin: 10px 0 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  gap: 20px;
}
.rsp_wrap .post-vote p {
  padding: 0;
  margin-right: 0;
}
.rsp_wrap .post-vote {
  padding: 0;
  cursor: pointer;
}
.rsp_wrap .post-vote .container {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rsp_wrap .post-vote a.positive {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  width: 100%;
  height: 100%;
}

.kindred-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 123px;
  padding: 5px 16px;
  border-radius: 10px;
  font-family: var(--sec-font);
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 5px 5px 10px #00000030;
  background: var(--plash);
}

.knews {
  position: absolute;
  left: 352px;
  width: 446px;
  top: 180px;
  text-align: justify;
  border-radius: 10px;

  height: 110px;
}

.knews text {
  display: flex;
  flex-direction: column;
  margin: 10px;
  overflow-y: auto;
  height: 84px;
  font-family: var(--main-font);
  padding-right: 10px;
  gap: 7px;
  align-content: flex-start;
  align-items: flex-start;
}

.knews text p date {
  background: var(--accent2);
  padding: 0 5px;
  border-radius: 5px;
}

.kindred-quote {
  position: absolute;
  width: 192px;
  font-family: var(--sec-font);
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.5px;
  left: 811px;
  top: 263px;
  color: var(--tab-text);
}

.kindred-quote ac {
  color: var(--text-tab-accent);
}

.pf-text {
  background: transparent;
  padding: 5px 10px;
  margin: 6px 0;
  border-radius: 6px;

  border: 1px solid var(--bord);
  box-shadow: 4px 5px 20px #00000014;
}
.pf-lnks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.pf-lnks a {
  background: var(--accent);
  color: var(--tab-text);
  padding: 2px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: var(--main-font);
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 10px;
}

.pf-lnks a:hover {
  background: var(--dark-bord);
}

#stylelist {
  position: absolute;
  top: 17px;
  margin: 0;
  left: 540px;
  padding: 0;
  overflow: hidden;
  width: 50px;
  list-style-type: none;
  display: flex;
  height: 22px;
  flex-direction: row;
  opacity: 1;
  border-radius: 20px;
  justify-content: space-between;
}
#stylelist li[data="light"] a,
#stylelist li[data="dark"] a {
  border-radius: 100%;
  font-weight: 400;
  font-size: 0;
  color: var(--tab-text);
  display: flex;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
}

#stylelist li[data="dark"] a::before {
  content: "";
  background: var(--tab-text);
  mask: url(https://forumstatic.ru/files/001c/70/50/57676.svg) no-repeat center
    left;
  -webkit-mask: url(https://forumstatic.ru/files/001c/70/50/57676.svg) no-repeat
    center left;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  width: 15px;
  height: 15px;
}

#stylelist li[data="light"] a::before {
  content: "";
  background: var(--bt-bg);
  mask: url(https://forumstatic.ru/files/001c/70/50/21300.svg) no-repeat center
    left;
  -webkit-mask: url(https://forumstatic.ru/files/001c/70/50/21300.svg) no-repeat
    center left;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  width: 17px;
  height: 17px;
}

#stylelist li.active {
  background: var(--accent2);
  border-radius: 100%;
}

#stylelist li.active a:before {
  background: var(--tab-text);
}

.dark .pagelink,
.dark .new-poll a,
.dark .new-topic a,
.dark .postlink span a {
  color: var(--text);
}

div#pun-live-rusff {
  display: none;
}

.kindred-header {
  display: none;
}

/* Фиксированная навигация */

#pun-navlinks.scroll_navi {
  z-index: 10;
  position: fixed;
  top: 0;
  width: 1100px;
  background: var(--profile-bg) center/cover;
  height: 79px;
  left: auto;
  border-radius: 0;
  margin-left: -30px;
}

#pun-ulinks.scroll_navi {
  z-index: 10;
  position: fixed;
  top: 42px;
  left: auto;
  margin-left: -30px;
  width: 1100px;
}

#pun-ulinks.scroll_navi .container {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  margin-top: 0;
  border-radius: 20px;
  border: none;
  padding: 5px;
  box-shadow: none;
}
#pun-navlinks.scroll_navi .container {
  top: 0;
  height: 24px;
  margin-top: -22px;
}

#pun-ulinks.scroll_navi a {
  color: var(--navi-link);
}

#pun-ulinks.scroll_navi a:hover {
  color: var(--navi-link-hov);
}

#pun-navlinks.nav-scrolled {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-transform: uppercase;
  justify-content: center;
  width: calc(100% + 60px);
  z-index: 9;
  background: var(--profile-bg);
  height: 50px;
  border-radius: 0;
  backdrop-filter: none;
  left: 0;
  position: sticky;
  top: 0;
  margin: -478px 0 426px -30px;
  border: 1px solid var(--dark-bord);
  border-width: 0 1px 1px 1px;
}

#pun-ulinks.user-scrolled .container {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--quote);
  backdrop-filter: none;
  margin-top: -72px;
  border-radius: 0;
  border: 1px solid var(--bord);
  padding: 5px;
  box-shadow: none;
  border-width: 0 1px 1px 1px;
}

#pun-ulinks.user-scrolled {
  z-index: 8;
  position: sticky;
  top: 50px;
  margin: 353px 0 0 0;
}

.forum-name {
  display: none;
}

label.fm-toggle {
  display: none;
}

#pun-searchposts .pa-author strong {
  font-weight: 400;
  font-size: 16px;
}

#profile-right #pa-fld2 img {
  width: 20px;
}
.minimal-toggle {
  display: none;
}

.pa-reg {
  display: none;
}
.spirit-clock {
  display: none;
  position: absolute;
  width: 211px;
  height: 211px;
  left: 833px;
  top: 37px;
}

.spring .spirit-clock {
  display: block;
}

.sclock {
  --cx: 104.5px;
  --cy: 104.5px;

  background: url(https://forumstatic.ru/files/001c/8d/fd/89606.webp);
  width: 209px;
  height: 209px;
  position: relative;
}

.sclock-aw {
  --w: 16px;
  --h: 49px;
  --pivot-x: 8px;
  --pivot-y: 49px;

  position: absolute;
  width: var(--w);
  height: var(--h);
  left: calc(var(--cx) - var(--pivot-x));
  top: calc(var(--cy) - var(--pivot-y));
  transform-origin: var(--pivot-x) var(--pivot-y);
  will-change: transform;
  z-index: 2;
}

.sclock-ar {
  --w: 20px;
  --h: 71px;
  --pivot-x: 10px;
  --pivot-y: 71px;

  position: absolute;
  width: var(--w);
  height: var(--h);
  left: calc(var(--cx) - var(--pivot-x));
  top: calc(var(--cy) - var(--pivot-y));
  transform-origin: var(--pivot-x) var(--pivot-y);
  will-change: transform;
  z-index: 3;
}

.spirit-clock,
.spirit-clock img {
  -webkit-user-drag: none;
  user-select: none;
}

.sclock-aw img,
.sclock-ar img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

a.clock-link-disabled {
  cursor: default;
}

a.clock-link-active {
  cursor: pointer;
}
/* Мобильный режим */

/* Мобильный вид только для узких touch-экранов */

@media screen and (max-width: 540px) and (hover: none) and (pointer: coarse) {
  html.force-mobile,
  body.force-mobile,
  .force-mobile #pun,
  .force-mobile .punbb {
    width: 100%;
    height: 100%;
    padding: 0;
    -webkit-text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
    margin: auto;
  }

  .force-mobile #pun-searchtopics .tc2 {
    width: 100%;
    display: flex;
    font-size: 11px;
    margin-left: 5px;
  }

  body.force-mobile,
  html.force-mobile body {
    position: relative;
    background-position: center 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    z-index: 1;
  }

  .force-mobile #pun {
    max-width: 540px;
    padding: 0;
    border-radius: 0;
    background: var(--base-bg2);
    position: relative;
    border: none;
  }

  .force-mobile .punbb .pa-avatar:after {
    display: none;
  }

  .force-mobile #pun-ulinks,
  .force-mobile #pun-navlinks .container li a,
  .force-mobile #pun-navlinks .container li a:hover {
    margin: 0 5px;
  }

  .force-mobile #pun-ulinks:before {
    content: "\f0c9";
    font-family: "Font Awesome 6 Pro";
    font-size: 25px;
    color: var(--accent);
  }

  .force-mobile #pun-ulinks .container {
    top: 42px;
    padding: 10px;
    margin: 0;
    left: 0;
    width: 140px;
    height: auto;
    background: var(--profile-bg);
    border-radius: 6px;
    border: none;
  }

  .force-mobile #pun-ulinks li {
    display: block;
    margin-bottom: 5px;
    background: var(--accent);
    text-align: center;
    border-radius: 5px;
    transition: color 0.5s linear 0s, background-color 0.5s linear 0s, border-color 0.5s linear 0s;
  }

  .force-mobile #pun-ulinks li a {
    display: block;
    margin: 0;
    color: var(--navi-link);
    font-size: 12px;
    padding: 0;
  }

  .force-mobile #pun-title table {
    margin: AUTO;
    box-sizing: border-box;
    background: var(--mob-head);
    width: 100%;
    height: 268px;
    display: flex;
    align-items: center;
    border-bottom: none;
    justify-content: center;
  }

  .force-mobile #pun-about p.container {
    width: 100%;
    margin-left: -10px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  .force-mobile #pun-ulinks {
    margin: -40px 0 0 21px;
    position: sticky;
    top: 9px;
    left: 0;
    line-height: 32px;
    border: 0;
    z-index: 9;
    width: 30px;
  }

  .force-mobile #pun-ulinks ul {
    display: none;
    z-index: 10000;
    position: absolute;
    top: 47px;
    right: 0;
  }
  .force-mobile #pun-ulinks:hover ul,
  .force-mobile #pun-ulinks:focus ul {
    display: block;
  }

  .force-mobile #pun-ulinks > span.notify-bubble {
    display: block;
  }

  .force-mobile #pun-navlinks .container li {
    padding: 0 1px;
    margin: 0;
    line-height: 19px;
  }
  .force-mobile #navrules,
  .force-mobile #navextra2,
  .force-mobile #navextra3,
  .force-mobile #navextra4,
  .force-mobile #navextra5,
  .force-mobile #navextra6,
  .force-mobile #navextra7,
  .force-mobile #navextra8,
  .force-mobile #navextra9,
  .force-mobile #navextra10 {
    display: none;
  }
  .force-mobile #pun-navlinks .container li a {
    display: inline-block;
    padding: 0;
    font-size: 16px;
  }


  .force-mobile #pun-status span {
    white-space: break-spaces;
    margin-right: 0.5em;
  }

  .force-mobile #stylelist {
    top: 23px;
    width: 100%;
    left: 0;
    gap: 4px;
    justify-content: center;
  }

  .force-mobile .kindred-quote {
    position: absolute;
    width: 100%;
    font-family: var(--sec-font);
    text-align: center;
    text-transform: uppercase;
    font-style: italic;
    font-size: 9px;
    letter-spacing: 0.5px;
    left: 0;
    top: 214px;
    color: var(--bord);
  }

  .force-mobile .knews {
    position: absolute;
    left: 20px;
    top: 162px;
    text-align: justify;
    border-radius: 0;
    height: 83px;
    width: calc(100% - 200px);
  }

  .force-mobile .knews text {
    height: 58px;
  }

  .force-mobile #pun-status .container {
    text-align: left;
    position: relative;
    box-sizing: border-box;
    top: -2px;
    left: 0;
    width: 100%;
    background: var(--podform);
    padding: 5px 10px;
    height: auto;
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--bord);
    border-width: 1px 0;
    border-radius: 0;
  }
  .force-mobile #pun-crumbs1 p.container,
  .force-mobile #pun-crumbs2 p.container {
    text-align: left;
    margin: 0 10px;
    height: auto;
    padding: 0;
    box-sizing: border-box;
  }
  .force-mobile #pun-crumbs1 p.container {
    margin: 10px;
  }

  .force-mobile .punbb .linkst {
    height: 20px;
    font-size: 8px;
    text-transform: uppercase;
    align-items: center;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0 0 10px 0;
  }

  .force-mobile .punbb .linksb {
    margin: 0 10px;
    gap: 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 12px;
  }

  .force-mobile .punbb tbody.hasicon td.tcl {
    padding: 0;
    display: block;
    width: 100%;
  }

  .force-mobile .forum td.tcr {
    margin-bottom: 0;
    display: block;
    text-align: right;
    width: 100%;
    margin-top: 2px;
    padding: 0;
  }

  .force-mobile #pun-index td div.tclcon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .force-mobile .pf-wrap {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .force-mobile #pun-stats .container {
    padding: 15px 15px 15px 15px;
    margin: 0;
    border-width: 1px 0;
    border-radius: 0;
  }
  .force-mobile #pun-stats li.item1,
  .force-mobile #pun-stats li.item2 {
    float: none;
    margin-bottom: 0;
  }
  .force-mobile #pun-stats li.item3,
  .force-mobile #pun-stats li.item4 {
    text-align: left;
    margin-bottom: 0;
  }

  .force-mobile #pun-about p.container {
    border: none;
    background-image: none;
    margin: 0 0 -100px -80px;
    background-position: bottom left;
    background-repeat: repeat-x;
    overflow-x: hidden;
    width: auto;
    padding-bottom: 0;
  }

  .force-mobile #pun-crumbs2 .container {
    margin-left: 20px;
    margin-top: 0;
  }
  .force-mobile .post-author {
    float: none;
    margin: 0;
    border-width: 0;
    width: 100%;
    border-radius: 0;
  }
  .force-mobile #pun-main .post-author ul {
    padding: 20px 0;
  }

  .force-mobile #pun-viewtopic .post h3 {
    border-radius: 0;
  }

  .force-mobile .punbb .post h3 strong {
    float: right;
    width: auto;
    text-align: center;
    font-weight: normal;
    margin-top: 0;
  }

  .force-mobile .post-author li {
    text-align: left;
  }


  .force-mobile .punbb .modmenu .container {
    text-transform: none;
    margin: 0 10px;
  }

  .force-mobile .pa-avatar img {
    object-fit: cover;
    width: 60px;
    height: 60px;
  }
  .force-mobile .punbb .post-links ul {
    padding: 0;
    height: auto;
    border-top-style: dashed;
    border-top-width: 1px;
    background: transparent;
    font-size: 11px;
    font-family: var(--main-font);
    font-weight: 400;
    margin: 10px 0;
    display: flex;
  }

  .force-mobile .punbb .post .container {
    padding-right: 0;
  }

  .force-mobile .punbb .post-box {
    padding: 10px 10px 0 10px;
  }
  .force-mobile .punbb .post-body {
    margin-left: 0;
  }

  .force-mobile .punbb .formal .container {
    padding: 0;
  }
  .force-mobile .punbb fieldset {
    padding: 0 10px;
  }

  .force-mobile #pun-viewforum .main table {
    table-layout: fixed;
    width: 100%;
    padding: 10px;
  }
  .force-mobile #pun-searchtopics .main .tcl,
  .force-mobile #pun-viewforum .main .tcl {
    width: 100%;
    padding: 0;
  }
  .force-mobile #pun-break1,
  .force-mobile #pun-break2,
  .force-mobile #pun-break3,
  .force-mobile #pun-break4,
  .force-mobile .category th,
  .force-mobile .category .tc2,
  .force-mobile .category .tc3,
  .force-mobile .forum th,
  .force-mobile .forum .tc2,
  .force-mobile .forum .tc3,
  .force-mobile #post-form legend {
    display: none;
    width: 0;
  }

  .force-mobile #profile-left,
  .force-mobile #profile-right {
    width: 100%;
    display: block;
  }
  .force-mobile #main-reply {
    width: 100%;
  }

  .force-mobile #form-buttons td {
    padding: 0 5px;
    display: inline-block;
    width: 27px;
    background-image: none;
    position: relative;
    height: 27px;
    margin: 0;
  }

  .force-mobile #button-files_rusff {
    display: none;
  }

  .force-mobile #form-buttons td:hover {
    background-color: transparent;
  }

  .force-mobile #profilenav li {
    padding: 7px 15px;
    display: inline-block;
  }
  .force-mobile #profilenav {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  .force-mobile #profile .container {
    padding: 0;
  }

  .force-mobile #notify-settings {
    display: none;
  }

  .force-mobile #viewprofile h2,
  .force-mobile #profilenav h2 {
    margin: 0 0 10px 0;
  }
  .force-mobile #viewprofile ul,
  .force-mobile #profilenav ul {
    padding: 0;
    margin: 0 0 15px 0;
    border: none;
    background-color: transparent;
  }
  .force-mobile #pun-messages .tclcon {
    padding: 10px 0 10px 17px;
  }

  .force-mobile #pun-messages .user-avatar {
    display: none;
  }

  .force-mobile #pun-messages table Div.icon,
  .force-mobile #pun-messages TR.inew Div.icon {
    margin-top: 13px;
  }
  .force-mobile #register input,
  .force-mobile #register select,
  .force-mobile #profile input,
  .force-mobile #profile select,
  .force-mobile #punbbsearch input,
  .force-mobile #punbbsearch select {
    max-width: 200px;
  }
  .force-mobile #pun-userlist .main .tcl,
  .force-mobile #pun-searchtopics .main .tcl,
  .force-mobile #pun-modviewforum .main .tcl {
    background-color: transparent;
    width: 20%;
  }

  .force-mobile #pun-userlist .user-avatar {
    display: none;
  }
  .force-mobile #pun-userlist .usertable .container {
    padding: 0 0.3em 2.3em 0.3em;
    border-top: none;
  }

  .force-mobile #pun-userlist .main .tc2,
  .force-mobile #pun-searchtopics .main .tc2 {
    width: 15%;
  }

  .force-mobile #BookmCntToggle {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.3s ease-out;
    top: -142px;
    display: none;
  }

  .force-mobile #tags .container {
    position: absolute;
    right: 0;
    top: 83px;
    left: 0;
    z-index: 2;
    width: 350px;
    padding: 10px;
    box-sizing: border-box;
  }

  .force-mobile .punbb .section h2,
  .force-mobile #pun-main h1,
  .force-mobile #pun-main h2,
  .force-mobile #pun-debug h2 {
    margin: 0 0 10px 0;
    display: none;
  }
  .force-mobile .post-img-Sp {
    width: 140px;
    margin: 10px 6px 0;
    display: none;
  }

  .force-mobile #form-buttons tr {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0;
    flex-wrap: wrap;
    margin: 0;
    gap: 8px;
    margin-bottom: 20px;
  }
  .force-mobile #pun-main .category h2,
  .force-mobile #pun-stats h2 {
    margin: 0;
    text-align: center;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    border-width: 0;
    background: transparent;
    height: 30px;
  }

  .force-mobile #pun-index .category table tr {
    -webkit-appearance: none;
    display: block;
    margin: 0 20px;
    position: relative;
    overflow: visible;
  }

  .force-mobile #pun-index .category table tr + tr {
    margin: 15px 20px;
  }

  .force-mobile #pun-index .tcl h3 {
    text-align: left;
    height: auto;
    display: block;
    margin-top: 0;
    letter-spacing: 0.5px;
    font-weight: 400;
  }

  .force-mobile .punbb .user-avatar {
    margin: 1px 0 2px 20px;
    float: right;
    display: none;
  }

  .force-mobile #pun-viewforum .tcr {
    position: relative;
    display: block;
    width: 100%;
    gap: 0 10px;
    align-items: center;
  }

  .force-mobile #pun-announcement .container .html-box a {
    display: none;
  }

  .force-mobile #form-buttons table,
  .force-mobile #form-buttons tbody,
  .force-mobile #form-buttons tr {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
  }

  .force-mobile #pun-index .tcr {
    width: 100%;
    display: block;
    text-align: right;
    margin-top: 10px;
  }

  .force-mobile #pun-navlinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    text-transform: lowercase;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    top: -2px;
    background: var(--profile-bg) center/cover;
    height: 45px;
    border: 1px solid var(--dark-bord);
    border-width: 1px 0;
    border-radius: 0;
  }

  .force-mobile .go-up,
  .force-mobile .go-down,
  .force-mobile #pun::before {
    display: none;
  }

  .force-mobile #pun-navlinks .container {
    padding: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
  }

  .force-mobile #pun-index .category h2 span,
  .force-mobile #pun-stats h2 span {
    font-size: 24px;
    justify-content: center;
  }

  .force-mobile .punbb .post h3 span {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
  }

  .force-mobile #pun-stats h2 span {
    font-size: 16px;
  }

  .force-mobile #pun-mod .category .tc2 {
    display: block;
    width: auto;
  }

  .force-mobile #pun-ulinks .container {
    display: none;
  }

  .force-mobile #pun-navlinks .container li a {
    padding: 0;
    font-family: "FontAwesome";
    font-size: 20px;
  }

  .force-mobile #pun-navlinks .container li a span {
    font-size: 0;
  }
  .force-mobile #pun-navlinks li#navindex a:before {
    content: "\f015";
  }
  .force-mobile #pun-navlinks li#navuserlist a:before {
    content: "\f0c0";
  }
  .force-mobile #pun-navlinks li#navsearch a:before {
    content: "\f002";
  }
  .force-mobile #pun-navlinks li#navprofile a:before {
    content: "\f2bd";
  }
  .force-mobile #pun-navlinks li#navpm a:before {
    content: "\f0e0";
  }
  .force-mobile #pun-navlinks li#navadmin a:before {
    content: "\f013";
  }
  .force-mobile #pun-navlinks li#navlogout a:before {
    content: "\f08b";
  }
  .force-mobile #pun-navlinks li#navregister a:before {
    content: "\f234";
  }
  .force-mobile #pun-navlinks li#navlogin a:before {
    content: "\f02e";
  }
  .force-mobile #pun-navlinks li#navpr_1 a:before {
    content: "\f1d8";
  }
  .force-mobile #pun-navlinks li#navpr_2 a:before {
    content: "\f02d";
  }
  .force-mobile #pun-navlinks li#navprofiles a:before {
    content: "\f02d";
  }
  .force-mobile #pun-navlinks li#navextra1 a:before {
    content: "\f02e";
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-size: 20px;
  }
  .force-mobile #pun-navlinks li#navextraBL a:before {
    content: "\f05e";
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-size: 20px;
  }

  .force-mobile #pun-index .category .container {
    border-radius: 0;
    border-width: 1px 0;
  }
  .force-mobile .Add {
    display: none;
  }
  .force-mobile #pun-index .tcl h3 a {
    font-size: 17px;
  }

  .force-mobile .pf-text {
    margin-top: 3px;
  }

  .force-mobile .forum tr {
    margin: 10px 0;
    display: flex;
    gap: 0;
    font: 400 11px var(--main-font);
    background: var(--quote);
    text-transform: lowercase;
    border-radius: 6px;
    padding: 10px;
    height: auto;
    flex-direction: column;
  }

  .force-mobile .pa-author a {
    font-weight: 400;
    padding: 4px 10px;
    border-radius: var(--radius);
  }

  .force-mobile .pa-fld2 {
    text-align: center;
  }

  .force-mobile .post-author li.pa-fld3 {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .force-mobile .post-author li.pa-fld3 > pers-plah {
    display: block;
  }

  .force-mobile .prof-wrap {
    background: var(--quote);
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #8f8d8d63;
    box-shadow: 6px 7px 10px #91909042;
  }

  .force-mobile #form-buttons {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
  }

  .force-mobile #plng {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .force-mobile #form-buttons table tr {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 0;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .force-mobile #pun-adnav ul {
    display: flex;
    flex-wrap: wrap;
  }

  .force-mobile #pun-adnav {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  .force-mobile .adminmain {
    padding-left: 0;
    margin-bottom: 0;
  }

  .force-mobile .punbb {
    height: auto;
  }

  .force-mobile .punbb-admin .adminmain {
    padding: 0em 0;
  }

  .force-mobile .punbb-admin #pun-adnav {
    float: none;
    clear: both;
    width: 100%;
    margin-left: 0em;
    display: block;
    box-sizing: border-box;
  }

  .force-mobile .punbb-admin {
    width: 100%;
    max-width: 540px;
    background: #c9c7c4;
  }
  .force-mobile #pun-admain fieldset {
    border-color: transparent;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .force-mobile .admin-advert-block {
    width: 100%;
    height: 60px;
  }

  .force-mobile #pun-admain fieldset .handle,
  .force-mobile #pun-admain fieldset p {
    border-left-width: 10em;
  }

  .force-mobile #pun-admain .adlabel {
    width: 11em;
    margin-left: -10em;
  }

  .force-mobile #pun-stats .statsinfo {
    display: flex;
    margin-bottom: 0;
    margin-top: 0;
    justify-content: flex-start;
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    gap: 5px;
  }
  .force-mobile #pun-title table::before {
    display: none;
    content: "kindred spirits";
  }
  .force-mobile #pun-ulinks.scroll_navi .container {
    display: none;
  }

  .force-mobile #pun-ulinks.scroll_navi:hover ul,
  .force-mobile #pun-ulinks.scroll_navi:focus ul {
    display: block;
    background: var(--profile-bg);
    border-radius: 6px;
  }

  .force-mobile #pun-navlinks.scroll_navi {
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--profile-bg) center/cover;
    height: 57px;
    left: auto;
    border-radius: 0;
    margin-left: -30px;
  }

  .force-mobile #pun-navlinks.scroll_navi .container {
    top: 0;
    height: 24px;
    margin-top: 0;
  }

  .force-mobile .activees,
  .force-mobile .activees2 {
    height: 45px;
    width: auto;
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0 16px;
    left: 30px;
    top: 20px;
    align-items: center;
    justify-content: center;
  }

  .force-mobile .activees2 {
    left: auto;
    right: 30px;
  }
  .force-mobile #pun-navlinks.nav-scrolled {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-transform: uppercase;
    justify-content: flex-end;
    width: 100%;
    z-index: 9;
    background: var(--navi-bg);
    height: 50px;
    border-radius: 0;
    backdrop-filter: none;
    left: 0;
    position: sticky;
    top: 0;
    margin: -3px 0 0 -30px;
    border: 1px solid var(--dark-bord);
    border-width: 1px;
  }


  .force-mobile .forum-name span {
    text-shadow: 0 0 10px #0000004d;
    background: transparent;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 10vw;
  }

  .force-mobile .forum-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    font-family: var(--sec-font);
    font-size: 40px;
    text-transform: uppercase;
    color: var(--tab-text);
    font-weight: 400;
    padding: 0 25px;
    left: 50%;
    transform: translateX(-50%);
    top: 86px;
    width: 100%;
  }
  .force-mobile label.fm-toggle {
    display: flex;
    justify-content: center;
    margin-top: -21px;
    position: relative;
    gap: 6px;
  }

  .force-mobile .kindred-info {
    top: 60px;
    padding: 2px 16px;
    display: none;
  }

  .force-mobile .scroll-rail {
    display: none;
  }
  .force-mobile tr.tr-divider {
    display: block;
    text-transform: uppercase;
    font-family: var(--sec-font);
    letter-spacing: 0.6px;
    padding: 0 10px;
  }

  .force-mobile .activees::before,
  .force-mobile .activees2::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
    font-family: var(--sec-font);
    color: var(--ks-copy-btn-hover-fg);
    opacity: 0.8;
  }

  .force-mobile .spirit-clock {
    position: absolute;
    width: 105.5px;
    height: 105.5px;
    left: auto;
    top: 145px;
    right: 20px;
  }

  .force-mobile .sclock {
    --cx: 52.25px;
    --cy: 52.25px;

    background: url(https://forumstatic.ru/files/001c/8d/fd/89606.webp);
    width: 104.5px;
    height: 104.5px;
    background-size: cover;
    position: relative;
  }

  .force-mobile .sclock-aw {
    --w: 8px;
    --h: 24.5px;
    --pivot-x: 4px;
    --pivot-y: 24.5px;

    position: absolute;
    width: var(--w);
    height: var(--h);
    left: calc(var(--cx) - var(--pivot-x));
    top: calc(var(--cy) - var(--pivot-y));
    transform-origin: var(--pivot-x) var(--pivot-y);
    will-change: transform;
    z-index: 2;
  }

  .force-mobile .sclock-ar {
    --w: 10px;
    --h: 35.5px;
    --pivot-x: 5px;
    --pivot-y: 35.5px;

    position: absolute;
    width: var(--w);
    height: var(--h);
    left: calc(var(--cx) - var(--pivot-x));
    top: calc(var(--cy) - var(--pivot-y));
    transform-origin: var(--pivot-x) var(--pivot-y);
    will-change: transform;
    z-index: 3;
  }

  .force-mobile .author-wrap {
    margin: 10px 20px;
    border-radius: 0;
    background: var(--kndr-img) top center/cover;
    display: flex;
    gap: 10px;
    padding: 5px 10px;
    width: auto;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: row-reverse;
    box-shadow: 6px 5px 10px #00000000;
    border: 1px solid var(--dark-bord);
  }

  .force-mobile .pa-title {
    font-size: 10px;
    margin: 33px 0 0 0;
  }

  .force-mobile .pa-author {
    margin: 21px 0 0 103px;
    font-size: 20px;
    display: flex;
    gap: 20px;
    position: absolute;
  }


  .force-mobile .pa-fld1 {
    display: none;
  }

  .force-mobile .pa-fld6 {
    width: 100%;
    overflow: hidden;
    height: 90px;
    border-radius: 0;
  }

  .force-mobile .pa-fld6 img {
    border-radius: 0;
    height: 90px;
    object-fit: cover;
    opacity: 0.5;
  }

  .force-mobile .punbb .post .post-author .pa-avatar {
    width: 60px;
  }
}
/* Панель настроек */

.settings-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 92vw;
  background: transparent;
  color: var(--tab-text);
  border-right: 1px solid var(--dark-bord);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transform: translateX(-104%);
  transition: transform 0.28s ease;
  z-index: 1550;
  padding: 60px 14px 20px;
  box-sizing: border-box;
  overflow-y: auto;
  font: 14px/1.45 var(--main-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  backdrop-filter: blur(18px);
}

.settings-menu::-webkit-scrollbar {
  width: 8px;
}

.settings-menu::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 8px;
}

.settings-menu::-webkit-scrollbar-track {
  background: transparent;
}

.settings-menu.open {
  transform: translateX(0);
}

.settings-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 1500;
}

.settings-menu__overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.settings-menu__toggle,
.settings-menu__close {
  position: fixed;
  top: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--dark-bord);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  z-index: 1600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.settings-menu__toggle {
  left: 12px;
  background: var(--dark-bord);
}

.settings-menu__close {
  right: 12px;
  background: transparent;
  backdrop-filter: blur(18px);
}

.settings-menu__toggle:hover,
.settings-menu__close:hover {
  background: var(--accent2);
}

.settings-menu__toggle:focus-visible,
.settings-menu__close:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

.settings-menu__toggle i,
.settings-menu__close i {
  font-size: 20px;
}

.settings-menu__toggle i {
  color: var(--tab-text);
}

.settings-menu__close i {
  color: #fff;
}

.settings-menu__toggle--hidden {
  display: none;
}

.settings-menu__section {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--dark-bord);
}

.settings-menu__section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.settings-menu__section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--tab-text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.settings-menu__section > ul,
.settings-menu__submenu {
  list-style: none;
  display: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.settings-menu__section > ul {
  padding: 0;
  margin: 0;
}

.settings-menu__section.open > ul {
  display: block;
  opacity: 1;
}

.settings-menu__section li {
  border-radius: 4px;
  line-height: 1.35;
  user-select: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  cursor: pointer;
  padding: 8px 10px;
}

.settings-menu__section li > a {
  display: block;
  color: inherit;
  text-decoration: none;
  margin: -8px -10px;
  padding: 8px 10px;
  border-radius: 4px;
}

.settings-menu__section li > a:hover,
.settings-menu__section li > a:active {
  background: var(--accent2);
}

.settings-menu__section li > a:focus-visible,
.settings-menu__section li:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

.settings-menu__section li:hover,
.settings-menu__section li:active {
  border: 1px solid var(--dark-bord);
}

.settings-menu__section li:hover {
  background: var(--sec-text);
}

.settings-menu__section li:active {
  background: var(--text);
}

.settings-menu__item--has-children {
  position: relative;
}

.settings-menu__item--has-children > .settings-menu__expand {
  background: none;
  border: none;
  margin-left: 6px;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.settings-menu__item--has-children > .settings-menu__expand i {
  transition: transform 0.2s ease;
}

.settings-menu__item--has-children.open > .settings-menu__expand i {
  transform: rotate(90deg);
}

.settings-menu__submenu {
  padding-left: 14px;
  margin: 6px 0 0;
}

.settings-menu__item--has-children:hover > .settings-menu__submenu,
.settings-menu__item--has-children.open > .settings-menu__submenu {
  display: block;
  opacity: 1;
}

@media screen and (max-width: 992px) and (hover: none) and (pointer: coarse) {
  .settings-menu {
    width: 280px;
  }
}

@media screen and (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .settings-menu {
    width: 86vw;
    max-width: none;
    border-right: 0;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    padding-left: calc(14px + env(safe-area-inset-left, 0));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
  }

  .settings-menu__toggle {
    bottom: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
    top: auto;
  }

  .settings-menu__toggle i {
    font-size: 22px;
  }

  .settings-menu__close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }

  .settings-menu__close i {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-menu,
  .settings-menu__overlay {
    transition: none;
  }
}

@media print {
  .settings-menu,
  .settings-menu__overlay,
  .settings-menu__toggle,
  .settings-menu__close {
    display: none;
  }
}
#notify-link .unreads,
#navpm .unreads {
  border-radius: 5px;
  font:
    bold 11px Tahoma,
    Verdana;
  cursor: pointer;
  color: var(--navi-link);
  background: var(--accent2);
}
.font-resizer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0.5em;
  position: relative;
  width: 100%;
  justify-content: flex-start;
}

.pa-respect img {
  display: none;
}

.icon[data-new-topics]:before,
.subforums span[data-new-topics]:before {
  background: var(--accent);
  color: var(--tab-text);
  left: -22px;
}

#pun-messages .user-avatar {
  display: none;
}


h2.chars_title {
  font-family: var(--sec-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
  text-align: center;
  width: auto;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}
button.chars__view-btn {
  background: var(--accent);
  border: 1px solid var(--accent2);
  border-radius: 5px;
  padding: 5px 10px;
  text-transform: uppercase;
  font-family: var(--main-font);
  font-size: 11px;
  color: var(--bt-bg);
}

button.chars__view-btn.is-active {
  background: var(--accent2);
}

.chars__views {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  justify-content: center;
}

.chars__filters {
  background: var(--quote);
  padding: 10px 20px;
  border: 1px solid var(--bord);
  border-radius: 5px;
}
.chars__card {
  border: 1px solid var(--bord);
  background: var(--quote);
  border-radius: 5px;
  font-family: var(--main-font);
}

.chars__card-title {
  font-family: var(--sec-font);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bt-bg);
  padding: 2px 10px;
  border-radius: 5px;
}

.chars__card.is-related {
  border-color: var(--accent);
  box-shadow: none;
}

.chars__col {
  background: var(--quote);
  border-radius: 5px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chars__col-title {
  background: var(--accent);
  border-radius: 5px;
  padding: 5px;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  color: var(--bt-bg);
  font-family: var(--main-font);
}

section.chars__sec {
  align-items: center;
  background: var(--htm-clr);
  border-radius: 5px;
  border: 1px solid var(--bord);
  padding: 10px 20px;
}

h4.chars__sec-title {
  font-family: var(--sec-font);
  font-size: 15px;
  color: var(--accent2);
  line-height: 10px;
}

.chars__lines {
  margin: 10px;
  font-family: var(--main-font);
}

span.chars__line-left {
  font-weight: bold;
}

.chars__mini {
  border-radius: 8px;
  background: var(--quote);
  border: 1px solid var(--bord);
}

.chars__mini-grid {
  margin-top: 10px;
}

.chars__mini-name {
  word-break: break-all;
  text-align: center;
  font-family: var(--main-font);
}

.chars__mini-role {
  text-align: center;
}

.font-resizer button {
  background: var(--quote);
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--bord);
  color: var(--text);
}

@media screen and (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .custom_tag.chrono-episode {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .custom_tag.chrono-episode .chrono-images {
    grid-row: auto;
    grid-column: 1;
  }
  .custom_tag.chrono-episode > .chrono-display,
  .custom_tag.chrono-episode .chrono-date,
  .custom_tag.chrono-episode .chrono-location,
  .custom_tag.chrono-episode .chrono-members,
  .custom_tag.chrono-episode > .chrono-announce {
    grid-column: 1;
  }
  .custom_tag.chrono-episode .chrono-date,
  .custom_tag.chrono-episode .chrono-location {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
.kindred-aca {
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.ka-head {
  text-transform: none;
  background: var(--kndr-img) top/cover;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--tab-text);
  align-items: center;
  border-radius: 5px 5px 0 0;
  gap: 0;
  font-family: var(--sec-font);
  font-size: 36px;
  text-shadow: 3px 0 10px #4646463b;
}

.ka-head span {
  font-family: var(--main-font);
  text-transform: uppercase;
  font-size: 13px;
}

.ka-text {
  font-family: var(--main-font);
  padding: 20px 30px;
  line-height: 20px;
  font-size: 13px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.ka-text text {
  border: 1px solid var(--bord);
  background: var(--htm-clr);
  border-radius: 5px;
  padding: 10px 20px;
}
/* BB-коды и custom_tag */

.custom_tag.char-card {
  display: flex;
  background: var(--htm-clr);
  padding: 20px;
  border-radius: 6px;
  border: 1px solid var(--bord);
  flex-wrap: wrap;
  gap: 10px;
}

.custom_tag.char-card .char-field,
.custom_tag.char-card .char-face-proto,
.custom_tag.char-card .char-pair,
.custom_tag.char-card .char-status,
.custom_tag.char-card .char-role,
.custom_tag.char-card .char-gift,
.custom_tag.char-card .char-gift-desc,
.custom_tag.char-card .char-appearance,
.custom_tag.char-card .char-bio,
.custom_tag.char-card .char-misc,
.custom_tag.char-card .char-bondlevel {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--bord);
  border-radius: 5px;
  background: var(--quote);
  box-shadow: 5px 5px 10px #00000008;
  font-family: var(--main-font);
}
.custom_tag.char-card p {
  margin: 0;
  padding: 0;
  line-height: normal;
}
.custom_tag.char-card .char-occupation > p {
  display: none;
}
.custom_tag.char-card .char-image {
  grid-column: 1 / 3;
  grid-row: 2;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  width: 100%;
  display: flex;
  justify-content: center;
}

.custom_tag.char-card .char-image p {
  display: flex;
  gap: 10px;
}

.custom_tag.char-card .char-image img {
  max-width: 100%;
  display: block;
  border-radius: 5px;
  outline: 1px solid var(--bord);
  margin: 0;
  box-shadow: 5px 5px 10px #00000012;
  width: 200px;
  height: 250px;
  object-fit: cover;
  object-position: center;
}
.custom_tag.char-card .char-name-ru {
  font-family: var(--sec-font, var(--main-font, serif));
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  flex: 1;
}
.custom_tag.char-card .char-name-en {
  font-size: 16px;
  font-family: var(--sec-font);
  flex: 1;
}
.custom_tag.char-card .char-face-proto {
  width: 100%;
}

.custom_tag.char-face-proto .custom_tag {
  display: inline-flex;
}
.char-face-fandom,
.char-face-canon {
  white-space: nowrap;
}
.char-face-fandom p,
.char-face-canon p {
  display: inline;
  margin: 0;
}

.char-face-fandom p::before {
  content: "[";
}
.char-face-fandom p::after {
  content: "]";
}

.char-face-fandom::after {
  content: "";
}
.char-face-fandom:has(+ .char-face-canon p:not(:empty))::after {
  content: var(--face-sep, " — ");
  opacity: 0.75;
  margin: 0 0.25em;
}

.char-face-canon:has(p:empty) {
  display: none;
}
.char-face-canon p:empty {
  display: none;
}

.custom_tag.char-card .char-birthdate,
.custom_tag.char-card .char-age,
.custom_tag.char-card .char-gender,
.custom_tag.char-card .char-race,
.custom_tag.char-card .char-pair,
.custom_tag.char-card .char-bondlevel {
  flex: 1;
}
.custom_tag.char-card .char-occupation {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.custom_tag.char-card .char-status,
.custom_tag.char-card .char-role {
  padding: 6px 10px;
  border-color: var(--bord);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.custom_tag.char-card .char-ability {
  display: flex;
  background: transparent;
  padding: 0;
  border: 0;
  gap: 10px;
  box-shadow: none;
}
.custom_tag.char-card .char-gift,
.custom_tag.char-card .char-gift-desc {
  flex: 1;
  font-weight: 400;
}
.custom_tag.char-card .char-appearance,
.custom_tag.char-card .char-bio,
.custom_tag.char-card .char-misc {
  grid-column: 1 / 3;
}
.custom_tag.char-card .char-appearance {
  grid-row: 9;
}
.custom_tag.char-card .char-bio {
  grid-row: 10;
}
.custom_tag.char-card .char-misc {
  grid-row: 11;
}
.custom_tag.char-card .char-name-ru::before {
  content: "Имя и фамилия";
}
.custom_tag.char-card .char-name-en::before {
  content: "Имя (латиницей)";
}
.custom_tag.char-card .char-face-proto::before {
  content: "Прототип внешности";
}
.custom_tag.char-card .char-birthdate::before {
  content: "Дата рождения";
}
.custom_tag.char-card .char-age::before {
  content: "Возраст";
}
.custom_tag.char-card .char-gender::before {
  content: "Пол";
}
.custom_tag.char-card .char-race::before {
  content: "Раса";
}
.custom_tag.char-card .char-pair::before {
  content: "Родственная душа";
}
.custom_tag.char-card .char-occupation::before {
  content: "Занятость";
  display: block;
  margin-bottom: 6px;
  opacity: 0.8;
}
.custom_tag.char-card .char-gift::before {
  content: "Дар";
}
.custom_tag.char-card .char-gift-desc::before {
  content: "Особенности дара";
}
.custom_tag.char-card .char-bondlevel::before {
  content: "Уровень связи";
}
.custom_tag.char-card .char-appearance::before {
  content: "Внешность";
}
.custom_tag.char-card .char-bio::before {
  content: "Биография";
}
.custom_tag.char-card .char-misc::before {
  content: "Дополнительно";
}
.custom_tag.char-card .char-field::before,
.custom_tag.char-card .char-face-proto::before,
.custom_tag.char-card .char-pair::before,
.custom_tag.char-card .char-gift::before,
.custom_tag.char-card .char-gift-desc::before,
.custom_tag.char-card .char-bondlevel::before,
.custom_tag.char-card .char-appearance::before,
.custom_tag.char-card .char-bio::before,
.custom_tag.char-card .char-misc::before {
  display: block;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink2);
  opacity: 0.7;
  font-family: var(--sec-font);
  font-weight: 400;
  width: 100%;
}
.custom_tag.char-card .char-bio p + p,
.custom_tag.char-card .char-misc p + p,
.char-gift-desc p,
.char-appearance p {
  margin-top: 8px;
}
.custom_tag.char-card .char-gift-desc br {
  content: "";
}

.custom_tag.custom_tag_charpt.char-field.personal-text {
  display: none;
}
@media screen and (max-width: 860px) and (hover: none) and (pointer: coarse) {
  .custom_tag.char-card {
    --photo-w: 160px;
    grid-template-columns: var(--photo-w) 1fr;
  }

  .custom_tag.char-card .char-image {
    grid-row: 2;
  }

  .custom_tag.char-card .char-name-ru,
  .custom_tag.char-card .char-birthdate,
  .custom_tag.char-card .char-race {
    grid-column: 1;
  }

  .custom_tag.char-card .char-name-en,
  .custom_tag.char-card .char-age,
  .custom_tag.char-card .char-gender {
    grid-column: 2;
  }

  .custom_tag.char-card .char-face-proto {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .custom_tag.char-card .char-pair {
    grid-column: 1 / 3;
    grid-row: 8;
  }

  .custom_tag.char-card .char-bondlevel {
    grid-column: 1 / 3;
    grid-row: 9;
  }

  .custom_tag.char-card .char-occupation {
    grid-column: 1 / 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .custom_tag.char-card .char-gift {
    grid-column: 1 / 3;
  }

  .custom_tag.char-card .char-gift-desc {
    grid-column: 1 / 3;
    grid-row: 7;
  }

  .custom_tag.char-card .char-appearance {
    grid-column: 1 / 3;
    grid-row: 11;
  }

  .custom_tag.char-card .char-bio {
    grid-column: 1 / 3;
    grid-row: 12;
  }

  .custom_tag.char-card .char-misc {
    grid-column: 1 / 3;
    grid-row: 13;
  }
}
@media screen and (max-width: 540px) and (hover: none) and (pointer: coarse) {
  .custom_tag.char-card {
    --photo-w: 100%;
    grid-template-columns: 1fr;
  }
  .custom_tag.char-card .char-name-ru,
  .custom_tag.char-card .char-name-en,
  .custom_tag.char-card .char-face-proto,
  .custom_tag.char-card .char-birthdate,
  .custom_tag.char-card .char-age,
  .custom_tag.char-card .char-gender,
  .custom_tag.char-card .char-race,
  .custom_tag.char-card .char-pair,
  .custom_tag.char-card .char-bondlevel,
  .custom_tag.char-card .char-occupation,
  .custom_tag.char-card .char-gift,
  .custom_tag.char-card .char-gift-desc,
  .custom_tag.char-card .char-appearance,
  .custom_tag.char-card .char-bio,
  .custom_tag.char-card .char-misc {
    grid-column: 1;
  }
  .custom_tag.char-card .char-image img {
    max-width: 100%;
    height: 100px;
    width: 100px;
  }

  .custom_tag.char-card .char-status,
  .custom_tag.char-card .char-role {
    padding: 6px 10px;
    background: var(--accent);
    border-color: var(--accent2);
    color: var(--button-text);
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
}
/* Редактор и вспомогательные панели */

.hotkeys-trigger {
  display: inline-flex;
  margin: 0 5px;
  padding: 6px 20px;
  border: 1px solid #464646;
  border-radius: 6px;
  background-color: #4c4c4c;
  color: #ddddde;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hotkeys-trigger:hover,
.hotkeys-trigger:focus {
  background-color: #d6e6f5;
  outline: none;
}

.hotkeys-modal {
  background: var(--quote);
  border: 1px solid var(--bord);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
  padding: 0;
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 8px;
  font-family: var(--main-font);
  animation: hkfadein 0.18s;
}

@keyframes hkfadein {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.hotkeys-modal.hk-box {
  padding: 1em 1.5em 1.2em;
  position: relative;
  outline: none;
}

.hotkeys-modal h3 {
  margin: 0 0 0.8em;
  font-size: 1.1em;
  text-align: left;
  font-weight: bold;
  color: var(--accent);
}

.hotkeys-modal ul {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}

.hotkeys-modal li {
  margin-bottom: 0.35em;
  font-size: 1em;
}
.pa-fld2 {
  position: absolute;
  background: var(--profile-bg);
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid var(--prof-bord);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
  left: 50%;
  top: -15px;
  z-index: 9;
}
.reply-char-counter {
  margin: 0 20px;
  background: var(--quote);
  width: auto;
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  border: 1px solid var(--bord);
  font-family: var(--main-font);
}

@media screen and (max-width: 540px) and (hover: none) and (pointer: coarse) {
  .minimal-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    justify-content: center;
    margin: 0 10px;
    position: relative;
  }

  .minimal-toggle input {
    display: none;
  }

  .minimal-switch {
    width: 44px;
    height: 24px;
    background: var(--dark-bord);
    border-radius: 12px;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease, left 0.2s ease;
  }

  .minimal-knob {
    width: 20px;
    height: 20px;
    background: var(--quote);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: background-color 0.2s ease, transform 0.2s ease, left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .minimal-toggle input:checked + .minimal-switch {
    background: var(--dark-bord);
  }
  .minimal-toggle input:checked + .minimal-switch .minimal-knob {
    transform: translateX(20px);
  }

  .minimal-label {
    display: none;
  }
}
tr.tr-divider {
  display: block;
  text-transform: uppercase;
  font-family: var(--sec-font);
  letter-spacing: 0.6px;
}

body.mask-modal-open {
  overflow: hidden;
  touch-action: none;
}

/* Модалка масок */

#mask-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  animation: fadeIn 0.2s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#mask-dialog {
  background: var(--dialog-bg);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  width: 90vw;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-color);
  font-size: 1rem;
  font-family: var(--main-font);
}

.mask-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 380px;
}

.mask-preview-panel,
.mask-form-panel,
.mask-storage-panel,
.mask-actions {
  background: var(--panel-bg-light);
  padding: var(--gap);
}

.mask-actions {
  background: var(--quote);
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--small-gap);
}

.mask-preview-panel {
  flex: 0 0 25%;
  border-right: 1px solid var(--panel-border);
  overflow-y: auto;
  min-width: 160px;
  max-width: 260px;
}

.mask-form-panel {
  flex: 1 1 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.mask-storage-panel {
  flex: 0 0 25%;
  border-left: 1px solid var(--panel-border);
  display: grid;
  grid-auto-rows: min-content;
  row-gap: var(--small-gap);
  overflow-y: auto;
  min-width: 160px;
  max-width: 260px;
}

.mask-storage-panel.drag-over {
  background: var(--quote);
}

.mask-templates-container {
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
}

.mask-templates-container label {
  margin-right: var(--small-gap);
  font-weight: 600;
  color: var(--text-color);
}

.mask-templates-container select {
  padding: var(--small-gap);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--form-bg);
  outline: none;
}

.mask-templates-container select:focus-visible {
  border-color: var(--input-focus);
}

.mask-form,
.mask-form-field {
  display: flex;
  flex-direction: column;
}

.mask-form {
  row-gap: var(--gap);
}

.mask-form-field {
  row-gap: var(--small-gap);
}

.mask-field-label {
  font-weight: 600;
  color: var(--text-color);
}

.mask-field-input,
.mask-form-field textarea {
  padding: var(--small-gap);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--text-color);
  background: var(--form-bg);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
}

.mask-field-input:focus-visible,
.mask-form-field textarea:focus-visible {
  border-color: var(--input-focus);
}

.mask-template-btn {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.2s,
    transform 0.2s;
}

.mask-template-btn:hover,
.mask-template-btn:focus-visible {
  text-decoration: underline;
}

.mask-storage-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--small-gap);
  padding: calc(var(--small-gap) * 1.5) var(--gap);
  background: var(--form-bg);
  border: 1px solid var(--input-border);
  cursor: grab;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  border-radius: var(--radius);
}

.mask-storage-item:active {
  cursor: grabbing;
}

.mask-storage-item.highlight,
.mask-storage-item.mask-dragging {
  opacity: 0.6;
  outline: 2px dashed var(--primary-color);
  outline-offset: 2px;
}

.mask-storage-item.drop-target {
  border: 2px dashed var(--primary-color);
  margin: 0;
  padding: calc(var(--small-gap)-1px) var(--gap);
}

.mask-storage-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mask-placeholder {
  background-color: #cbb9b9;
  border: 2px dashed var(--accent);
  margin: var(--small-gap) 0;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.2s;
  min-height: var(--avatar-size);
}

.mask-storage-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 50%;
  background: #eaeaea;
}

.mask-preview-avatar {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 250px;
  margin-bottom: var(--gap);
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--bord);
}

.mask-preview-bbcode,
.mask-preview-html,
.mask-preview-text,
.mask-preview-link {
  margin-bottom: var(--small-gap);
  color: var(--text-color);
  font: 500 14px/100% var(--main-font);
}

.mask-preview-link {
  text-decoration: none;
  color: var(--primary-color);
}

.mask-preview-link:hover {
  text-decoration: underline;
}

.mask-preview-code {
  margin-top: var(--gap);
  padding: var(--gap);
  background: var(--form-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  color: #555;
  max-height: 150px;
  overflow: auto;
}

.mask-action-btn {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: var(--radius);
  padding: var(--small-gap) var(--gap);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
  min-width: 120px;
}

.mask-action-btn:hover,
.mask-action-btn:focus-visible {
  background: var(--button-hover);
}

.mask-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--error-color);
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
  transition:
    background 0.2s,
    color 0.2s;
}


.mask-errors {
  margin-top: var(--small-gap);
  color: var(--error-color);
  font-size: 0.875rem;
}

.mask-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: var(--small-gap);
  border-radius: var(--small-gap);
  font-size: 0.875rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2001;
  max-width: 240px;
  word-break: break-word;
}

.mask-tooltip--visible {
  opacity: 1;
}

.mask-storage-item.mask-dragging ~ .mask-tooltip,
.mask-tooltip--visible:empty {
  display: none;
}

.mask-tooltip-field {
  margin-bottom: 4px;
}
.mask-tooltip-field:last-child {
  margin-bottom: 0;
}

.drag-handle {
  cursor: grab;
  user-select: none;
  font-size: 1.3em;
  margin-right: 8px;
  color: var(--accent);
  transition: color 0.2s;
  vertical-align: middle;
}
.drag-handle:active {
  cursor: grabbing;
  color: #888;
}

.mask-preview-panel::-webkit-scrollbar,
.mask-storage-panel::-webkit-scrollbar {
  width: var(--scrollbar-width);
}
.mask-preview-panel::-webkit-scrollbar-thumb,
.mask-storage-panel::-webkit-scrollbar-thumb {
  background: var(--input-border);
  border-radius: 4px;
}
.mask-preview-panel::-webkit-scrollbar-thumb:hover,
.mask-storage-panel::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.mask-storage-empty {
  color: #aaa;
  text-align: center;
  font-size: 1.08em;
  padding: 2em 0 1.5em;
  opacity: 0.9;
  user-select: none;
}

.mask-templates-container select:focus-visible,
.mask-field-input:focus-visible,
.mask-form-field textarea:focus-visible,
.mask-action-btn:focus-visible,
.mask-template-btn:focus-visible,
.mask-delete-btn:focus-visible,
.drag-handle:focus-visible,
.mask-move-up:focus-visible,
.mask-move-down:focus-visible {
  outline: 2px solid var(--input-focus);
  outline-offset: 2px;
}

.mask-move-up,
.mask-move-down {
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 1.2em;
  cursor: pointer;
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: var(--radius);
  transition:
    background 0.2s,
    color 0.2s;
}
.mask-move-up:hover,
.mask-move-down:hover,
.mask-move-up:focus-visible,
.mask-move-down:focus-visible {
  background: var(--panel-bg-light);
  color: var(--primary-hover);
}

@media screen and (max-width: 900px) and (hover: none) and (pointer: coarse) {
  #mask-dialog {
    max-height: 100vh;
    overflow-y: auto;
  }

  .mask-content {
    display: block;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    min-height: 0;
  }

  .mask-preview-panel,
  .mask-form-panel,
  .mask-storage-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: none;
    padding: 8px 12px;
  }

  .mask-preview-panel,
  .mask-storage-panel {
    border-bottom: 1px solid var(--panel-border);
  }

  .mask-storage-panel {
    max-height: 150px;
    overflow-y: auto;
  }

  .mask-actions {
    flex-direction: column;
    gap: var(--small-gap);
    padding: 8px 12px 12px;
  }
}

@media screen and (max-width: 600px) and (hover: none) and (pointer: coarse) {
  #mask-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    font-size: 0.95rem;
    border-radius: 0;
  }

  .mask-content {
    max-height: calc(100vh - 120px);
    padding: 0;
  }

  .mask-preview-panel,
  .mask-form-panel,
  .mask-storage-panel {
    padding: 8px 3vw;
  }

  .mask-preview-avatar {
    max-width: 100%;
    max-height: 170px;
  }

  .mask-actions {
    flex-direction: column;
    gap: 6px;
    padding: 8px 3vw 10px;
  }
}

@media screen and (max-width: 420px) and (hover: none) and (pointer: coarse) {
  #mask-dialog {
    font-size: 0.91rem;
  }

  .mask-form-field,
  .mask-form,
  .mask-actions {
    gap: 6px;
    row-gap: 6px;
  }
}

.mask-actions .mask-action-btn[data-action="cancel"] {
  display: block;
  visibility: visible;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mask-actions {
    padding-bottom: calc(55px + env(safe-area-inset-bottom));
  }
}
#navprofiles {
  position: relative;
  z-index: 999;
}

#pun-navlinks.section .multiacc-profilemenu {
  position: absolute;
  top: 20px;
  right: 0;
  width: max-content;
  height: auto;
  background: var(--base-bg);
  border-radius: 10px;
  border: 1px solid var(--dark-bord);
  color: var(--tab-text);
  padding: 0;
  overflow: hidden;
}

.multiacc-profilemenu li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  gap: 10px;
  width: 100%;
}

.multiacc-profilemenu li a {
  display: block;
  flex-grow: 1;
  text-align: left;
  padding-left: 20px;
  position: relative;
}

.multiacc-profilemenu li:first-child {
  background-color: #121212;
  font-weight: 700;
}

#pun-navlinks.section .multiacc-profilemenu li {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.8rem;
  padding: 6px 16px 10px;
  border-bottom: 1px solid var(--dark-bord);
  top: 0;
}

#pun-navlinks.section .multiacc-profilemenu li:last-child {
  border-bottom: 0;
}

#pun-navlinks.section .multiacc-profilemenu li:hover {
  box-shadow: inset 0 0 30px 3px rgba(43, 67, 62, 0.2);
}

#pun-navlinks.section .multiacc-profilemenu li a {
  color: var(--bord);
}

#pun-navlinks.section .multiacc-profilemenu li a:hover {
  color: #888;
}

.multiacc-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--bord);
}

.multiacc-dialog {
  z-index: 9999;
  padding: 10px;
  font-size: 0.8rem;
  background: var(--quote);
  border: 1px solid var(--bord);
  color: var(--text);
}

.multiacc-dialog > form {
  border: 1px solid #ccc;
  padding: 10px 10px 2px;
}

.multiacc-dialog input {
  padding: 4px 10px;
  border: 1px solid var(--bord);
  background: var(--bt-bg);
  border-radius: 5px;
}

.multiacc-dialog div {
  display: flex;
  justify-content: center;
  font-weight: 500;
  font-family: var(--main-font);
}

.multiacc-dialog div:not(.multiacc-dialog div:last-child) {
  flex-direction: column;
}

.multiacc-dialog button {
  margin: 6px;
  padding: 4px 8px;
  background: var(--bt-bg);
  color: var(--text);
  border: 1px solid var(--bord);
  border-block: 0;
  border-radius: 4px;
  cursor: pointer;
}

.multiacc-dialog button:hover {
  color: #444;
}
.posts-char-count-wrapper {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 20px;
}

.posts-char-count:before {
  content: "количество символов: ";
  text-transform: uppercase;
  opacity: 0.5;
}
.posts-char-count {
  font-family: var(--main-font);
  font-size: 12px;
}
#quote-bubble {
  background: var(--accent);
  border: 1px solid var(--accent2);
  color: var(--bt-bg);
  font-family: var(--main-font);
}
/* Переключатель темы */

.ts-style-btn {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  background: var(--sec-text);
  border: 1px solid var(--dark-bord);
  border-radius: 4px;
}

.ts-style-btn::before {
  content: "\f56b";
  width: 17px;
  height: 17px;
  display: block;
  font-family: "Font Awesome 6 Pro", "FontAwesome";
  color: var(--tab-text);
  font-size: 17px;
  font-weight: 400;
}

.ts-style-btn.ts-style-winter:before {
  content: "\f2dc";
}

.ts-style-btn.ts-style-spring:before {
  content: "\f18c";
}

.ts-style-mount {
  display: flex;
  gap: 10px;
}

.custom_tag.chrono-episode {
  background: var(--htm-bg) center/cover;
  border: 1px solid var(--bord);
  overflow: hidden;
  border-radius: 5px;
  font-family: var(--main-font);
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.custom_tag.chrono-episode .chrono-date,
.custom_tag.chrono-episode .chrono-location {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 44px;
  flex-direction: column;
  border: 1px solid var(--bord);
  background: var(--quote);
  flex: 1;
  border-radius: 5px;
  padding: 10px 20px;
}

.custom_tag.chrono-episode p {
  margin: 0;
  padding: 0;
  line-height: normal;
}

.custom_tag.chrono-episode .chrono-members {
  background: var(--quote);
  border-radius: 5px;
  border: 1px solid var(--bord);
  display: grid;
  padding: 10px 20px;
  gap: 8px 12px;
  align-items: start;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.custom_tag.chrono-episode .chrono-members .chrono-member p {
  margin: 0;
}

.custom_tag.chrono-episode > .chrono-announce {
  background: var(--quote);
  margin: 0 30px 20px;
  border-radius: 5px;
  border: 1px solid var(--bord);
  display: flex;
  padding: 10px 20px;
  gap: 3px;
  flex-direction: column;
  align-items: flex-start;
}
.unread-notifications #notifications-wrap table {
  padding: 10px 15px;
}
.font-resizer .slider {
  accent-color: var(--accent);
}
.scroll-rail {
  position: fixed;
  right: auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 5px 0;
  background: var(--plash);
  color: var(--tab-text);
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--dark-bord);
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
  margin-left: 1100px;
}

.scroll-rail.rail-up {
  bottom: 170px;
}
.scroll-rail.rail-down {
  bottom: 110px;
}
.dice-modal {
  background: var(--podform);
  padding: 1.5em;
  border-radius: 6px;
  width: 320px;
  max-width: 90%;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  border: 1px solid var(--bord);
}

.dice-modal h3 {
  margin-top: 0;
  font-size: 1.1em;
  font-family: var(--main-font);
}
.dice-modal label {
  display: block;
  margin: 0.8em 0 0.5em;
  font-size: 0.9em;
  font-family: var(--main-font);
}
input#dice-count {
  border-radius: 4px;
  border: none;
  padding: 3px 5px;
}

.dice-modal input[type="text"] {
  width: 100%;
  padding: 0.4em;
  box-sizing: border-box;
}
.dice-modal .actions {
  text-align: right;
  margin-top: 1em;
}
.dice-modal button {
  padding: 0.5em 1em;
  margin-left: 0.5em;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid var(--bord);
  font-family: var(--main-font);
  text-transform: uppercase;
  font-size: 12px;
}
.modal-dialog {
  background: var(--quote);
  border-radius: 5px;
  font-family: var(--main-font);
  font-size: 0.9em;
}

.modal-dialog input {
  border-radius: 4px;
  border: 1px solid var(--bord);
  background: var(--podform);
}

.modal-actions button {
  background: var(--accent);
  border: 1px solid var(--accent2);
  padding: 3px 10px;
  border-radius: 5px;
  color: #dddddd;
  text-transform: uppercase;
  font-family: var(--main-font);
}

.modal-actions {
  display: flex;
  gap: 10px;
}
.episode-alert {
  border: 2px solid var(--accent);
}
.float-toolbar {
  display: none;
  position: absolute;
  background: var(--podform);
  font-family: var(--main-font);
  border: 1px solid #bbb;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 99;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 14px;
  margin-top: 6px;
}
.float-toolbar .float-btn {
  cursor: pointer;
  margin: 0 6px;
  font-size: 18px;
  color: #333;
  transition: color 0.2s;
}
.float-toolbar .float-btn:hover {
  color: var(--accent);
}
#button-float {
  background: url("https://i.imgur.com/CUf5wNZ.png") no-repeat center 7px;
  width: 34px;
  min-width: 34px;
  cursor: pointer;
}

.float-toolbar strong {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}
.modal__content {
  margin: 20px;
  background: var(--dark-bord);
  border-radius: 5px;
  border: 1px solid var(--button-hover);
  padding: 20px;
}

.post-content .highlight-text {
  background-color: var(--accent);
  color: var(--bt-bg);
}

.post-content abbr {
  cursor: help;
  border-bottom: 1px dotted #000;
}
.custom_tag.kindredaca p {
  margin: 0;
  padding: 5px 0 0 0;
  line-height: normal;
}
.custom_tag.kindredaca {
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.custom_tag.kahead {
  text-transform: none;
  background: var(--kndr-img) top/cover;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--tab-text);
  align-items: center;
  border-radius: 5px 5px 0 0;
  gap: 0;
  font-family: var(--sec-font);
  font-size: 36px;
  text-shadow: 3px 0 10px #4646463b;
}

.custom_tag.kaheadtitle {
  font-family: var(--main-font);
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
}

.custom_tag.katext {
  font-family: var(--main-font);
  padding: 20px 30px;
  line-height: 20px;
  font-size: 13px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.custom_tag.katexttext {
  border: 1px solid var(--bord);
  background: var(--htm-clr);
  border-radius: 5px;
  padding: 10px 20px;
}

.pa-fld2 div {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Asther;
  font-size: 13px;
  text-transform: lowercase;
  color: #fff;
}
.kindred-info .ki-ash {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  display: block;
  z-index: 2;
}

.kindred-info .ki-ash img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
  pointer-events: auto;
  -webkit-user-drag: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

@media screen and (max-width: 520px) and (hover: none) and (pointer: coarse) {
  .kindred-info {
    padding-right: 36px;
    font-size: 13px;
  }
  .kindred-info .ki-ash {
    right: 10px;
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kindred-info .ki-ash img {
    transition: none;
  }
}

.custom_tag.chrono-episode .chrono-images p {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.custom_tag.custom_tag_chronodisplay.chrono-display p {
  line-height: normal;
  font-size: 21px;
  color: var(--accent2);
  background: var(--quote);
  padding: 0 30px;
  border-radius: 0 0 5px 5px;
  border: 1px solid var(--bord);
  border-width: 0 1px 1px 1px;
  font-family: var(--sec-font);
  text-transform: uppercase;
}

.custom_tag.custom_tag_chronoimages.chrono-images p img {
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.custom_tag.custom_tag_chronodisplay.chrono-display {
  display: flex;
  justify-content: center;
}
.custom_tag.custom_tag_chronodata.chrono-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 30px;
}

.custom_tag.custom_tag_chronodate.chrono-date:before,
.custom_tag.custom_tag_chronolocation.chrono-location:before,
.custom_tag.custom_tag_chronomembers.chrono-members:before,
.custom_tag.custom_tag_chronoannounce.chrono-announce:before {
  content: "Дата";
  text-transform: uppercase;
  font-family: var(--sec-font);
  color: var(--dialog-bg);
  font-size: 12px;
  letter-spacing: 0.7px;
  background: var(--pers-pl) center/cover;
  padding: 1px 10px;
  border-radius: 5px;
  width: fit-content;
  grid-column: 1 / -1;
}

.custom_tag.custom_tag_chronolocation.chrono-location:before {
  content: "Локация";
}

.custom_tag.custom_tag_chronomembers.chrono-members:before {
  content: "Участники";
}

.custom_tag.custom_tag_chronoannounce.chrono-announce:before {
  content: "Сюжет";
}

.custom_tag.custom_tag_chronoserial.chrono-serial {
  display: none;
}
/* Модалка стикеров */

#sticker-pack-button {
  cursor: pointer;
  position: relative;
}
#sticker-pack-button.loading {
  opacity: 0.6;
  cursor: progress;
}

.sticker-pack-modal-container {
  position: absolute;
  z-index: 1000;
  top: 200%;
  transform: translateX(-50%);
  margin-top: 4px;
}

.sticker-pack-modal {
  position: relative;
  width: 560px;
  max-width: 96vw;
  height: 320px;
  max-height: 320px;
  background: var(--quote);
  color: var(--text);
  border-radius: 6px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--bord);
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible;
}

.sticker-pack-modal.active {
  display: flex;
}

.sticker-pack-modal .modal__tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 8px;
  min-height: 40px;
  background: transparent;
  border-bottom: 1px solid var(--bord);
  position: relative;
  margin: 4px 8px 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.sticker-pack-modal .modal__tabs::-webkit-scrollbar {
  height: 6px;
}
.sticker-pack-modal .modal__tabs::-webkit-scrollbar-track {
  background: transparent;
}
.sticker-pack-modal .modal__tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.sticker-pack-modal .modal__tab {
  cursor: pointer;
  padding: 6px 12px;
  margin: 0;
  border-radius: 5px 5px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  font: inherit;
  min-height: 32px;
  box-sizing: border-box;
}

.sticker-pack-modal .modal__tab.active {
  background: var(--accent);
  box-shadow: none;
  color: var(--bt-bg, #f3f1f2);
  border-color: var(--accent2);
  margin-bottom: -1px;
}

.sticker-pack-tab-icon {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 4px;
  object-fit: contain;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}

.sticker-pack-modal .modal__content {
  margin: 0;
  background: transparent;
  border: none;
  padding: 10px;
  box-sizing: border-box;
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
}

.sticker-pack-modal .modal__content.active {
  display: flex;
}

.sticker-pack-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.sticker-pack-item {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sticker-pack-item img {
  max-width: 44px;
  max-height: 44px;
  display: block;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out;
}

.sticker-pack-item:hover img {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 0 0 2px var(--accent2);
  background-color: rgba(0, 0, 0, 0.03);
}

.sticker-pack-remove-item {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #b00;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-pack-modal-add {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 4px 8px;
  border-top: 1px solid var(--bord);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--podform);
  box-sizing: border-box;
  border-radius: 4px;
}

.sticker-pack-modal-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--bord);
  border-radius: 4px;
  background: var(--htm-clr);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  height: 30px;
}

.sticker-pack-modal-input::placeholder {
  color: var(--sec-text);
  opacity: 0.7;
}

.sticker-pack-modal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--quote);
}

.sticker-pack-modal-add-btn,
.sticker-pack-modal__close {
  border-radius: 4px;
  border: 1px solid var(--accent2);
  background: var(--accent);
  color: var(--bt-bg, #f3f1f2);
  cursor: pointer;
  font: inherit;
}

.sticker-pack-modal-add-btn {
  flex: 0 0 auto;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sticker-pack-modal-add-btn:hover,
.sticker-pack-modal__close:hover {
  filter: brightness(1.05);
}

.sticker-pack-modal-add-btn:active,
.sticker-pack-modal__close:active {
  transform: translateY(1px);
}

.sticker-pack-modal__footer {
  border-top: 1px solid var(--bord);
  padding: 6px 10px;
  background: var(--podform);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sticker-pack-modal__close {
  min-width: 80px;
  padding: 10px;
  font-size: 12px;
}

i.fa-user {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 600px) and (hover: none) and (pointer: coarse) {
  #sticker-pack-button {
    position: static;
  }

  .sticker-pack-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    margin-top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.45);
  }

  .sticker-pack-modal-container.active {
    display: flex;
  }

  .sticker-pack-modal {
    width: 100%;
    max-width: 420px;
    height: 380px;
    max-height: min(380px, 100%);
  }

  .sticker-pack-modal.active {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .sticker-pack-modal .modal__tabs {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 2px 8px 4px;
    margin: 0;
    border-bottom: none;
    border-right: 1px solid var(--bord);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    gap: 4px;
  }

  .sticker-pack-modal .modal__tab {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
  }

  .sticker-pack-modal .modal__tab.active {
    background: var(--accent);
    color: var(--bt-bg, #f3f1f2);
    border-color: var(--accent2);
    margin-bottom: 0;
  }

  .sticker-pack-modal .modal__tab img,
  .sticker-pack-modal .modal__tab .sticker-pack-tab-icon {
    width: 28px;
    height: 28px;
    display: block;
    margin: auto;
    object-fit: contain;
  }

  .sticker-pack-modal .modal__tab i.sticker-pack-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .sticker-pack-modal .modal__content {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    padding: 10px;
  }

  .sticker-pack-modal .modal__content.active {
    display: flex;
  }

  .sticker-pack-modal__footer {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .sticker-pack-modal-add {
    padding: 4px 6px;
  }

  .sticker-pack-modal-input,
  .sticker-pack-modal-add-btn {
    height: 28px;
    font-size: 11px;
  }
}

#pun-reputation .post_reputation textarea {
  font-size: 16px;
}
#messages strong a {
  font-weight: 900;
  font-size: 0.8rem;
}
#ks-closed-topic-recovery {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--overlay-bg, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap, 16px);
}

#ks-closed-topic-recovery .ks-ctr__panel {
  width: min(920px, 100%);
  background: var(--dialog-bg, #d1cfcf);
  color: var(--text-color, #333);
  border: 1px solid var(--panel-border, #b5b5b5);
  border-radius: var(--radius, 6px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  padding: var(--small-gap, 8px);
  font-family:
    var(--main-font, system-ui),
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}

#ks-closed-topic-recovery .ks-ctr__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-gap, 8px);
  margin-bottom: var(--small-gap, 8px);
}

#ks-closed-topic-recovery .ks-ctr__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--sec-text, var(--text-color, #333));
}

#ks-closed-topic-recovery .ks-ctr__iconbtn {
  appearance: none;
  border: 1px solid var(--input-border, #a9a5a5);
  background: var(--panel-bg-light, #cbc9ca);
  color: var(--text-color, #333);
  border-radius: calc(var(--radius, 6px) + 2px);
  padding: 6px 10px;
  cursor: pointer;
}

#ks-closed-topic-recovery .ks-ctr__iconbtn:hover {
  background: var(--form-bg, #b5b5b5);
}

#ks-closed-topic-recovery .ks-ctr__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-color, #666);
  margin-bottom: var(--small-gap, 8px);
}

#ks-closed-topic-recovery .ks-ctr__ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

#ks-closed-topic-recovery code {
  background: var(--panel-bg-light, #cbc9ca);
  border: 1px solid var(--panel-border, #b5b5b5);
  padding: 1px 6px;
  border-radius: calc(var(--radius, 6px) - 2px);
  color: var(--text-color, #333);
}

#ks-closed-topic-recovery .ks-ctr__ta {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  background: var(--form-bg, #b5b5b5);
  color: var(--text-color, #333);
  border: 1px solid var(--input-border, #a9a5a5);
  border-radius: var(--radius, 6px);
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}

#ks-closed-topic-recovery .ks-ctr__ta:focus {
  border-color: var(--input-focus, #915252);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--input-focus, #915252) 25%, transparent);
}

#ks-closed-topic-recovery .ks-ctr__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--small-gap, 8px);
  margin-top: var(--small-gap, 8px);
}

#ks-closed-topic-recovery .ks-ctr__btn {
  appearance: none;
  border: 1px solid var(--input-border, #a9a5a5);
  background: var(--button-bg, #915252);
  color: var(--button-text, #dddbdc);
  padding: 8px 12px;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#ks-closed-topic-recovery .ks-ctr__btn:hover {
  background: var(--button-hover, #272727);
}

#ks-closed-topic-recovery .ks-ctr__hint {
  margin-top: var(--small-gap, 8px);
  font-size: 12px;
  color: var(--muted-color, #666);
  min-height: 16px;
}

.winter #pun-navlinks,
.winter #pun-navlinks.nav-scrolled {
  background: url(https://forumstatic.ru/files/001c/8d/fd/13277.jpg);
}

.winter .activees div:after,
.winter .activees2 div:after {
  background: #879db3bd;
}

.winter .activees div:hover:after,
.winter .activees2 div:hover:after {
  opacity: 1;
  background: var(--navi-link-hov);
}

.winter .pa-fld1 {
  border-top: 1px solid var(--prof-bord);
  background: linear-gradient(180deg, #edebec87, transparent);
}
.punbb .post-video {
  width: 100%;
  max-width: 100%;
}

.punbb .post-video__inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.punbb .post-video__inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.copy-post-btn,
.copy-all-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ks-copy-btn-size);
  height: var(--ks-copy-btn-size);
  margin-left: var(--ks-copy-btn-gap);
  padding: 0;
  border-radius: var(--ks-copy-btn-radius);
  border: 1px solid var(--ks-copy-btn-border);
  background: var(--ks-copy-btn-bg);
  color: var(--ks-copy-btn-fg);
  box-shadow: var(--ks-copy-btn-shadow);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  line-height: 1;
  transform: translateZ(0);
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease;
}

.copy-post-btn:hover,
.copy-all-btn:hover {
  background: var(--ks-copy-btn-hover-bg);
  color: var(--ks-copy-btn-hover-fg);
  border-color: var(--dark-bord, #232323);
}

.copy-post-btn:active,
.copy-all-btn:active {
  background: var(--ks-copy-btn-active-bg);
  color: var(--ks-copy-btn-active-fg);
  transform: translateY(1px);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
}

.copy-post-btn:focus-visible,
.copy-all-btn:focus-visible {
  outline: none;
  box-shadow: var(--ks-copy-btn-shadow), var(--ks-copy-btn-focus);
}

.copy-post-btn:disabled,
.copy-all-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.copy-post-btn > i,
.copy-all-btn > i {
  font-size: var(--ks-copy-btn-icon-size);
  line-height: 1;
  pointer-events: none;
}

.punbb .post h3 .copy-post-btn {
  position: relative;
  top: -1px;
}
#pun-main h1 .copy-all-btn {
  position: relative;
  top: -2px;
}
.winter .pa-author a {
  background: var(--dark-bord);
}

.winter .indOnline {
  background: var(--dark-bord);
}

.winter .author-wrap {
  border: 1px solid var(--prof-bord);
}

.spring #pun-navlinks {
  background: var(--navi-bg);
}

.spring .scroll-rail {
  box-shadow: var(--shadow);
}

.spring #pun-ulinks .container {
  background: var(--transp-bg);
}

.spring #pun-index .category tr.inew {
  background: var(--pf-bg) center/cover;
  box-shadow: var(--shadow2);
  border: 1px solid var(--bord2);
}

.spring .author-wrap {
  background: var(--kndr-img) center/cover;
  border: 1px solid var(--prof-bord);
  color: var(--tab-text);
}

.spring .punbb .post .post-author a:hover {
  color: var(--tab-text);
}

.spring .ka-text text {
  border: 1px solid var(--bord2);
  background: var(--bord);
}

.spring .custom_tag.char-card .char-image {
  color: var(--tab-text);
}

.spring .academy-panel {
  border: 1px solid var(--dark-bord);
}

.spring .academy-panel-body {
  color: var(--tab-text);
}

.spring .pa-fld1 {
  border-top: 1px solid var(--prof-bord);
  background: linear-gradient(180deg, #472d5e4a, transparent);
}

.spring .punbb .post .post-author {
  box-shadow: var(--shadow);
}

.cm-no-backdrop {
  background: #14111136;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.cm-shell {
  background: var(--base-bg) right/cover;
  border: 1px solid var(--dark-bord);
}

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

.cm-close {
  border: 1px solid var(--dark-bord);
  background: var(--cm-accent2);
  color: var(--tab-text);
}

.cm-barrow__top {
  font-size: 13px;
  color: var(--tab-text);
  text-transform: uppercase;
}

.cm-barrow__value {
  color: var(--bord);
}

.cm-name {
  font-weight: 400;
  font-family: var(--sec-font);
  color: var(--tab-text);
}

.modal__tabs {
  background: var(--cm-accent);
  border: 1px solid var(--dark-bord);
  margin: 20px;
  border-radius: var(--radius);
}

.modal__tab {
  border-radius: 0;
  color: var(--cm-panel);
}

.modal__tab + .modal__tab {
  border-left: 1px solid var(--dark-bord);
}

.modal__tab.active {
  background: var(--accent2);
  box-shadow: none;
}

.modal__tab:not(.active):hover {
  background: var(--dark-bord);
}

.ts-style-btn.ts-style-summer:before {
  content: "\f185";
}

.ts-style-btn.is-active {
  border: 1px solid var(--accent);
  background: var(--accent2);
}

/* Список пользователей */

#pun-userlist .formal,
#pun-userlist .usertable {
  margin-top: 16px;
}

#pun-userlist .formal .container,
#pun-userlist .usertable .container {
  box-sizing: border-box;
  margin: 0;
  padding: 18px;
  background: var(--quote, var(--podform, transparent));
  border: 1px solid var(--bord, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow, 4px 4px 20px #0000000d);
}

#pun-userlist .formal .fs-box.inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

#pun-userlist .formal p {
  margin: 0;
}

#pun-userlist .formal .infofield {
  grid-column: 1 / -1;
  padding-top: 4px;
  color: var(--sec-text, var(--text, inherit));
  font-size: 11px;
  line-height: 1.45;
}

#pun-userlist .formal input[type="text"],
#pun-userlist .formal select {
  box-sizing: border-box;
  width: 100%;
}

#pun-userlist .formal .formsubmit {
  margin-top: 12px;
  text-align: center;
}

#pun-userlist .usertable table,
#pun-userlist .usertable thead,
#pun-userlist .usertable tbody,
#pun-userlist .usertable tr,
#pun-userlist .usertable th,
#pun-userlist .usertable td {
  border: 0;
  background: transparent;
}

#pun-userlist .usertable table {
  display: block;
  width: 100%;
  table-layout: auto;
}

#pun-userlist .usertable thead {
  display: none;
}

#pun-userlist .usertable tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#pun-userlist .usertable tr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "name name name"
    "title relation posts"
    "registered registered lastvisit";
  gap: 10px 12px;
  box-sizing: border-box;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  background: var(--podform, var(--quote, transparent));
  border: 1px solid var(--bord, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow, 4px 4px 20px #0000000d);
}

#pun-userlist .usertable tr::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, currentColor);
  opacity: 0.55;
}

#pun-userlist .usertable tr:hover {
  border-color: var(--accent, var(--bord, transparent));
}

#pun-userlist .usertable td,
#pun-userlist .usertable td.tcl,
#pun-userlist .usertable td.tc2,
#pun-userlist .usertable td.tc3 {
  display: flex;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  padding: 0;
  color: var(--text, inherit);
  text-align: left;
  text-transform: none;
}

#pun-userlist .usertable td:not(.username) {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--quote, transparent) 62%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--bord, currentColor) 68%, transparent);
  border-radius: 7px;
  font: 600 12px/1.25 var(--main-font, Arial, sans-serif);
}

#pun-userlist .usertable td:not(.username)::before {
  display: block;
  color: var(--sec-text, var(--text, inherit));
  font: 500 9px/1.1 var(--main-font, Arial, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

#pun-userlist .usertable td.user_title {
  grid-area: title;
}

#pun-userlist .usertable td.user_title::before {
  content: "статус";
}

#pun-userlist .usertable td.relation {
  grid-area: relation;
  color: var(--accent, inherit);
}

#pun-userlist .usertable td.relation::before {
  content: "уважение";
}

#pun-userlist .usertable td.num_posts {
  grid-area: posts;
}

#pun-userlist .usertable td.num_posts::before {
  content: "сообщений";
}

#pun-userlist .usertable td.registered {
  grid-area: registered;
}

#pun-userlist .usertable td.registered::before {
  content: "зарегистрирован";
}

#pun-userlist .usertable td.last_visit {
  grid-area: lastvisit;
}

#pun-userlist .usertable td.last_visit::before {
  content: "был";
}

#pun-userlist .usertable td.username {
  grid-area: name;
  align-items: center;
  gap: 12px;
  padding: 0 0 32px 0;
  border-bottom: 1px solid var(--bord, transparent);
}

#pun-userlist .usertable .usersname {
  display: block;
  min-width: 0;
}

#pun-userlist .usertable .usersname a {
  display: inline-block;
  max-width: 100%;
  font: 500 21px/1.15 var(--sec-font, var(--main-font, Arial, sans-serif));
  text-transform: none;
  overflow-wrap: anywhere;
}

#pun-userlist .usertable .user-avatar {
  flex: 0 0 56px;
  display: block;
  float: none;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
}

#pun-userlist .usertable .user-avatar a,
#pun-userlist .usertable .avatar-image {
  display: block;
  width: 56px;
  height: 56px;
}

#pun-userlist .usertable .avatar-image {
  opacity: 1;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  mix-blend-mode: normal;
}

#pun-userlist .usertable .isonline {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--podform, #fff);
  border-radius: 50%;
  background: var(--accent, currentColor);
}

@media screen and (max-width: 540px) and (hover: none) and (pointer: coarse) {
.force-mobile #pun-userlist .formal .container,
.force-mobile #pun-userlist .usertable .container {
  margin-right: 10px;
  margin-left: 10px;
  padding: 12px;
  border-radius: 8px;
}

.force-mobile #pun-userlist .formal .fs-box.inline {
  grid-template-columns: 1fr;
  gap: 10px;
}

.force-mobile #pun-userlist .formal .formsubmit {
  padding: 0 10px;
}

.force-mobile #pun-userlist .usertable tbody {
  grid-template-columns: 1fr;
  gap: 10px;
}

.force-mobile #pun-userlist .usertable tr {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "name name"
    "title title"
    "relation posts"
    "registered lastvisit";
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
}

.force-mobile #pun-userlist .usertable td.username {
  gap: 10px;
  padding-bottom: 10px;
}

.force-mobile #pun-userlist .usertable .usersname a {
  font-size: 18px;
}

.force-mobile #pun-userlist .usertable .user-avatar {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
}

.force-mobile #pun-userlist .usertable .user-avatar a,
.force-mobile #pun-userlist .usertable .avatar-image {
  width: 46px;
  height: 46px;
}

.force-mobile #pun-userlist .usertable td:not(.username) {
  min-height: 39px;
  padding: 7px 8px;
  font-size: 11px;
}
}

/* Летняя тема */

/* Летняя тема: шапка и навигация */

:root[data-style="summer"] #pun-navlinks,
:root[data-style="summer"] #pun-navlinks.nav-scrolled {
  background: var(--navi-bg);
  border-color: var(--dark-bord);
  box-shadow: var(--shadow);
}

:root[data-style="summer"] #pun-navlinks a {
  color: var(--navi-link);
  text-shadow: none;
}

:root[data-style="summer"] body.dark #pun-navlinks a {
  text-shadow: 0 1px 3px #000;
}

:root[data-style="summer"] #pun-navlinks a:hover,
:root[data-style="summer"] #pun-navlinks a:focus,
:root[data-style="summer"] #pun-navlinks a:active {
  color: var(--navi-link-hov);
}

:root[data-style="summer"] #pun-title {
  position: relative;
  width: 1100px;
  margin-left: -30px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 14px 28px rgba(100, 54, 32, 0.18),
    inset 0 0 0 1px color-mix(in srgb, var(--dark-bord) 75%, transparent);
}

:root[data-style="summer"] #pun-title .container {
  position: relative;
  overflow: visible;
}

:root[data-style="summer"] #pun-title table {
  position: relative;
  width: 1100px;
  margin-left: 0;
  background: var(--head) center center / cover no-repeat;
  border-radius: 7px 7px 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 232, 0.14),
    inset 0 -48px 58px var(--summer-head-edge),
    inset 0 32px 42px var(--summer-head-fade);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 89%,
    rgba(0, 0, 0, 0.72) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 89%,
    rgba(0, 0, 0, 0.72) 96%,
    transparent 100%
  );
}

:root[data-style="summer"] #pun-title table::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 78px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--summer-pun-overlay-top) 46%, transparent) 46%,
    color-mix(in srgb, var(--summer-pun-overlay-mid) 74%, transparent) 100%
  );
}

:root[data-style="summer"] body.dark #pun-title table::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(21, 8, 4, 0.32) 44%,
    rgba(10, 4, 3, 0.62) 100%
  );
}

:root[data-style="summer"] #pun-title::before {
  content: "Kindred Spirits";
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  font-family: "Asther", "auge", serif;
  font-size: 68px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--summer-title-color);
  text-shadow:
    0 1px 0 rgba(255, 246, 234, 0.82),
    0 3px 15px rgba(0, 0, 0, 0.28),
    0 0 18px color-mix(in srgb, var(--summer-title-glow) 65%, transparent);
  white-space: nowrap;
  pointer-events: none;
}

:root[data-style="summer"] body.dark #pun-title::before {
  text-shadow:
    0 1px 0 #3a1a10,
    0 3px 15px #000,
    0 0 18px #e17638a0;
}

:root[data-style="summer"] #pun-title::after {
  content: "";
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 43px;
  transform: translateX(-50%);
  width: 600px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--summer-head-fade) 78%, transparent) 0%,
    color-mix(in srgb, var(--summer-head-fade) 30%, transparent) 45%,
    transparent 72%
  );
  pointer-events: none;
}

:root[data-style="summer"] #stylelist {
  position: absolute;
  z-index: 30;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 22px;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  visibility: visible;
  opacity: 1;
}

:root[data-style="summer"] #stylelist li {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent2) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--tab-text) 54%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
}

:root[data-style="summer"] #stylelist li.active {
  background: var(--accent2);
  border-color: var(--tab-text);
}

:root[data-style="summer"] #stylelist li[data="light"] a,
:root[data-style="summer"] #stylelist li[data="dark"] a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  color: var(--tab-text);
}

:root[data-style="summer"] #stylelist li[data="light"] a::before,
:root[data-style="summer"] #stylelist li[data="dark"] a::before {
  content: "";
  display: block;
  background: var(--tab-text);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-size: contain;
}

:root[data-style="summer"] #stylelist li[data="light"] a::before {
  width: 13px;
  height: 13px;
  -webkit-mask-image: url("https://forumstatic.ru/files/001c/70/50/21300.svg");
  mask-image: url("https://forumstatic.ru/files/001c/70/50/21300.svg");
}

:root[data-style="summer"] #stylelist li[data="dark"] a::before {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url("https://forumstatic.ru/files/001c/70/50/57676.svg");
  mask-image: url("https://forumstatic.ru/files/001c/70/50/57676.svg");
}

:root[data-style="summer"] .kindred-info {
  z-index: 12;
  top: 136px;
  color: var(--tab-text);
  background: color-mix(in srgb, var(--accent2) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--tab-text) 22%, transparent);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.18);
}

:root[data-style="summer"] .knews {
  z-index: 12;
  top: 190px;
  left: 356px;
  width: 420px;
  height: 90px;
  background: color-mix(in srgb, var(--summer-status-fill) 28%, transparent);
  border-radius: 8px;
}

:root[data-style="summer"] .knews text {
  height: 70px;
  margin: 10px 12px;
  gap: 6px;
  color: var(--tab-text);
}

:root[data-style="summer"] .knews text p {
  display: block;
  padding: 0;
  line-height: 1.2;
}

:root[data-style="summer"] .knews text p date {
  background: color-mix(in srgb, var(--accent2) 84%, transparent);
  color: var(--tab-text);
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 5px;
}

:root[data-style="summer"] .knews text p a {
  color: var(--accent);
  font-weight: 700;
}

:root[data-style="summer"] .knews text p a:hover {
  color: var(--navi-link-hov);
}

:root[data-style="summer"] body.dark .knews {
  top: 218px;
  left: auto;
  right: 72px;
  width: 330px;
  height: auto;
  min-height: 76px;
  padding: 8px 12px;
  background: linear-gradient(
    180deg,
    rgba(35, 15, 8, 0.76),
    rgba(18, 7, 4, 0.62)
  );
  border: 1px solid rgba(232, 129, 78, 0.34);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.32),
    inset 0 0 24px rgba(255, 117, 49, 0.08);
  backdrop-filter: blur(2px);
}

:root[data-style="summer"] body.dark .knews text {
  height: auto;
  margin: 0;
  padding-right: 0;
  gap: 4px;
}

:root[data-style="summer"] body.dark .knews text p {
  line-height: 1.25;
}

:root[data-style="summer"] body.dark .knews text p date {
  background: rgba(211, 105, 63, 0.78);
  color: #fff0dd;
}

:root[data-style="summer"] body.dark .knews text p a {
  color: #ffd2ad;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
}

:root[data-style="summer"] body.dark .knews text p a:hover {
  color: #fff0d7;
}

:root[data-style="summer"] #pun-ulinks .container {
  background: color-mix(in srgb, var(--summer-card-bg-soft) 66%, transparent);
  border-color: color-mix(in srgb, var(--summer-card-border) 72%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}

/* Летняя тема: статус, хлебные крошки и подвал */

:root[data-style="summer"] #pun-status {
  display: block;
  visibility: visible;
  opacity: 1;
  margin: 2px auto 15px;
  padding: 0;
  position: relative;
  z-index: 90;
  color: var(--summer-status-text);
  pointer-events: auto;
  user-select: text;
}

:root[data-style="summer"] #pun-status h2 {
  display: none;
}

:root[data-style="summer"] #pun-status p.container {
  display: flex;
  position: relative;
  isolation: isolate;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 30px;
  margin: 0;
  padding: 6px 64px 6px;
  overflow: visible;
  line-height: 1.35;
  color: var(--summer-status-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  user-select: text;
}

:root[data-style="summer"] #pun-status p.container::before,
:root[data-style="summer"] #pun-status p.container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  -webkit-mask-image: var(--summer-status-mask);
  mask-image: var(--summer-status-mask);
  z-index: 0;
}

:root[data-style="summer"] #pun-status p.container::before {
  top: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at center,
      var(--summer-status-fill-soft) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-status-fill) 82%, transparent),
      color-mix(in srgb, var(--summer-status-fill) 38%, transparent)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(178, 122, 86, 0.28),
    0 8px 18px var(--summer-status-shadow);
}

:root[data-style="summer"] #pun-status p.container::after {
  top: 0;
  bottom: 0;
  border-top: 1px solid var(--summer-status-line);
  border-bottom: 1px solid
    color-mix(in srgb, var(--summer-status-line) 72%, transparent);
}

:root[data-style="summer"] #pun-status span,
:root[data-style="summer"] #pun-status strong,
:root[data-style="summer"] #pun-status a {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  user-select: text;
}

:root[data-style="summer"] #pun-status span {
  color: var(--summer-status-text);
}

:root[data-style="summer"] #pun-status strong {
  color: var(--summer-status-strong);
  font-weight: 700;
}

:root[data-style="summer"] #pun-status a {
  color: var(--summer-status-link);
  font-weight: 600;
}

:root[data-style="summer"] #pun-status a:hover {
  color: var(--summer-status-link-hover);
}

:root[data-style="summer"] body:not(.dark) #pun-status p.container {
  text-shadow: 0 1px 2px rgba(255, 246, 235, 0.92);
}

:root[data-style="summer"] body.dark #pun-status p.container {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
}

:root[data-style="summer"] #pun-status .item3.status-right {
  display: inline;
  margin-left: auto;
}

:root[data-style="summer"] #pun-status .item4.status-right {
  display: none;
}

:root[data-style="summer"] #pun-break1,
:root[data-style="summer"] #pun-break3,
:root[data-style="summer"] #pun-break4 {
  height: 0;
  margin: 0;
  border: 0;
}

:root[data-style="summer"] #pun-crumbs1 p.container {
  margin-top: 6px;
}

/* Летняя тема: главная страница */

:root[data-style="summer"] #pun-index .category tr,
:root[data-style="summer"] #pun-index .category tr.inew {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 76%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 90%, transparent)
  );
  border: 1px solid var(--summer-card-border);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] body.dark #pun-index .category tr,
:root[data-style="summer"] body.dark #pun-index .category tr.inew {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 70%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 86%, transparent)
  );
}

:root[data-style="summer"] #pun-index .category h2 {
  opacity: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

:root[data-style="summer"] #pun-index .category h2::before {
  inset: 0;
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(720px, 92%);
  height: 104px;
  transform: translate(-50%, -50%);
  background: var(--cat-branch) center center / 100% auto no-repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
  filter: sepia(0.18) saturate(0.88);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    rgba(0, 0, 0, 0.82) 36%,
    rgba(0, 0, 0, 0.34) 62%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    rgba(0, 0, 0, 0.82) 36%,
    rgba(0, 0, 0, 0.34) 62%,
    transparent 82%
  );
}

:root[data-style="summer"] .punbb .category td,
:root[data-style="summer"] .punbb .category th {
  color: var(--text);
}

:root[data-style="summer"] .punbb .category a {
  color: var(--accent);
}

:root[data-style="summer"] .punbb .category a:hover {
  color: var(--accent2);
}

:root[data-style="summer"] body.dark .punbb .category a {
  color: #ee8d5f;
}

:root[data-style="summer"] body.dark .punbb .category a:hover {
  color: #ffb17d;
}

:root[data-style="summer"] .forum-nav a {
  background: var(--accent2);
  color: var(--tab-text);
}

:root[data-style="summer"] .forum-nav a:hover {
  background: var(--dark-bord);
}

:root[data-style="summer"] #pun-stats .container {
  background: linear-gradient(
    180deg,
    var(--summer-card-bg-soft),
    var(--summer-card-bg)
  );
  border: 1px solid var(--summer-card-border);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #pun-stats .statsinfo {
  background: var(--sts-bg) center / cover;
  border: 1px solid
    color-mix(in srgb, var(--summer-card-border) 78%, transparent);
}

:root[data-style="summer"] #pun-about {
  position: relative;
  z-index: 2;
  margin-top: 10px;
}

:root[data-style="summer"] #pun-about p.container {
  position: relative;
  width: 1100px;
  height: 170px;
  margin: -34px 0 -34px -30px;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 10px 10px;
  isolation: isolate;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-footer-fade) 18%, transparent) 0%,
      color-mix(in srgb, var(--summer-footer-fade) 68%, transparent) 34%,
      color-mix(in srgb, var(--summer-footer-fade) 18%, transparent) 68%,
      var(--summer-footer-fade) 100%
    ),
    var(--ftr-im) center center / cover no-repeat;
  box-shadow:
    inset 0 34px 54px
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 42%, transparent),
    inset 0 -34px 48px
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 68%, transparent);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.22) 20px,
    #000 68px,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.22) 20px,
    #000 68px,
    #000 100%
  );
}

:root[data-style="summer"] #pun-about p.container::before {
  top: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      var(--summer-footer-fade) 0%,
      color-mix(in srgb, var(--summer-footer-fade) 22%, transparent) 24%,
      color-mix(in srgb, var(--summer-footer-fade) 12%, transparent) 68%,
      var(--summer-footer-fade) 100%
    ),
    var(--ftr-im) center center / cover no-repeat;
}

:root[data-style="summer"] #pun-about p.container::after {
  bottom: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--summer-pun-overlay-bottom) 0%,
    transparent 22%,
    transparent 76%,
    var(--summer-pun-overlay-bottom) 100%
  );
}

:root[data-style="summer"] #pun-about p.container .item1,
:root[data-style="summer"] #pun-about p.container a {
  position: relative;
  z-index: 2;
}

/* Летняя тема: общие компоненты */

:root[data-style="summer"] .scroll-rail {
  background: var(--plash);
  color: var(--tab-text);
  box-shadow: var(--shadow);
}

:root[data-style="summer"] .author-wrap {
  background: var(--kndr-img) center / cover;
  border: 1px solid var(--prof-bord);
  color: var(--tab-text);
  box-shadow: var(--shadow);
}

:root[data-style="summer"] .pa-fld1 {
  border-top: 1px solid var(--prof-bord);
  background: linear-gradient(180deg, var(--summer-profile-fade), transparent);
}

:root[data-style="summer"] .pa-author a,
:root[data-style="summer"] .indOnline {
  background: var(--accent2);
  color: var(--tab-text);
}

:root[data-style="summer"] .pa-author a:hover {
  background: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style="summer"] .punbb .post .post-author {
  box-shadow: var(--shadow);
}

:root[data-style="summer"] .punbb .post .post-author a {
  color: var(--prof-link);
}

:root[data-style="summer"] .punbb .post .post-author a:hover {
  color: var(--prof-text);
}

:root[data-style="summer"] .activees div::after,
:root[data-style="summer"] .activees2 div::after {
  background: color-mix(in srgb, var(--accent) 72%, transparent);
}

:root[data-style="summer"] .activees div:hover::after,
:root[data-style="summer"] .activees2 div:hover::after {
  opacity: 1;
  background: var(--navi-link-hov);
}

:root[data-style="summer"] .ka-text text {
  border: 1px solid var(--bord2);
  background: var(--bord);
}

:root[data-style="summer"] .custom_tag.char-card .char-image {
  color: var(--tab-text);
}

:root[data-style="summer"] .academy-panel {
  border: 1px solid var(--dark-bord);
}

:root[data-style="summer"] .academy-panel-body {
  color: var(--tab-text);
}

:root[data-style="summer"] .button,
:root[data-style="summer"] .punbb .button,
:root[data-style="summer"] input[type="button"],
:root[data-style="summer"] input[type="submit"] {
  background-color: var(--accent2);
  border-color: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style="summer"] .button:hover,
:root[data-style="summer"] .punbb .button:hover,
:root[data-style="summer"] input[type="button"]:hover,
:root[data-style="summer"] input[type="submit"]:hover {
  background-color: var(--dark-bord);
  color: var(--tab-text);
}

/* Летняя тема: посты и профиль автора */

:root[data-style="summer"] #pun-viewtopic {
  color: var(--text);
}

:root[data-style="summer"] #pun-viewtopic .main-title,
:root[data-style="summer"] #pun-viewtopic #pun-main h1 {
  display: none;
}

:root[data-style="summer"] #pun-viewtopic .linkst,
:root[data-style="summer"] #pun-viewtopic .linksb {
  min-height: 34px;
  margin: 10px 0 10px;
  color: var(--sec-text);
}

:root[data-style="summer"] #pun-viewtopic .pagelink,
:root[data-style="summer"] #pun-viewtopic .postlink span a,
:root[data-style="summer"] #pun-viewtopic .new-topic a,
:root[data-style="summer"] #pun-viewtopic .new-poll a,
:root[data-style="summer"] #pun-viewtopic .subscribelink,
:root[data-style="summer"] #pun-viewtopic #plng {
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  text-transform: lowercase;
}

:root[data-style="summer"] #pun-viewtopic .post {
  position: relative;
  margin: 20px 0 34px;
  padding: 0;
  background: transparent;
  border: 0;
}

:root[data-style="summer"] #pun-viewtopic .post h3 {
  margin: 0 0 9px;
  padding: 0;
  text-align: left;
  background: transparent;
}

:root[data-style="summer"] #pun-viewtopic .post h3 span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  padding: 0;
  color: var(--sec-text);
  font: 400 11px var(--main-font);
  text-transform: none;
  gap: 12px;
}

:root[data-style="summer"] #pun-viewtopic .post h3 a.sharelink,
:root[data-style="summer"] #pun-viewtopic .post h3 em.reportview {
  display: none;
}

:root[data-style="summer"] #pun-viewtopic .font-resizer button,
:root[data-style="summer"] #pun-viewtopic .copy-post-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 7px;
  color: var(--text);
  box-shadow: var(--summer-card-shadow);
  cursor: pointer;
  transition: 0.5s ease;
}

:root[data-style="summer"] #pun-viewtopic .font-resizer button:hover,
:root[data-style="summer"] #pun-viewtopic .copy-post-btn:hover {
  background: var(--accent);
  border-color: var(--accent2);
  color: var(--tab-text);
}

:root[data-style="summer"] #pun-viewtopic .font-resizer input.slider {
  width: 104px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--accent2) 0 28%,
    color-mix(in srgb, var(--bord) 76%, transparent) 28% 100%
  );
  box-shadow: none;
  accent-color: var(--accent2);
}

:root[data-style="summer"] #pun-viewtopic .post h3 .copy-post-btn {
  order: 20;
  font-size: 0;
}

:root[data-style="summer"] #pun-viewtopic .post h3 .copy-post-btn i,
:root[data-style="summer"] #pun-viewtopic .post h3 .copy-post-btn::before {
  font-size: 12px;
}

:root[data-style="summer"] #pun-viewtopic .post h3 a.permalink {
  order: 30;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 12px;
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  font-size: 10px;
}

:root[data-style="summer"] #pun-viewtopic .post h3 strong {
  order: 40;
  width: auto;
  color: var(--text);
  font: 400 14px var(--sec-font);
}

:root[data-style="summer"] #pun-viewtopic .post h3 strong::before {
  content: "#";
}

:root[data-style="summer"] #pun-viewtopic .post > .container {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--text);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 10px;
  padding: 12px 16px 14px;
  grid-template-rows: 1fr auto;
  align-items: stretch;
}

:root[data-style="summer"] #pun-viewtopic .post .post-author {
  border: 1px solid var(--prof-bord);
  border-radius: 10px;
  color: var(--prof-text);
  box-shadow: var(--summer-topic-shadow);
  overflow: visible;
  position: relative;
  float: none;
  grid-column: 1;
  width: auto;
  min-height: 0;
  margin: 12px 0 0;
  padding: 0 12px 12px;
  align-self: stretch;
  border-color: color-mix(in srgb, var(--prof-bord) 86%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-topic-paper-strong) 42%, transparent),
      color-mix(in srgb, var(--summer-topic-panel-strong) 82%, transparent)
    ),
    var(--profile-bg) center top / cover;
  grid-row: 1;
}

:root[data-style="summer"] #pun-viewtopic .post .post-author::before {
  content: "\f52d";
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--prof-bord);
  background: var(--summer-topic-panel-strong);
  color: var(--accent);
  font-family: "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 400;
  box-shadow: var(--summer-card-shadow);
  left: 50%;
  top: -20px;
  width: 38px;
  height: 38px;
  font-size: 16px;
  z-index: 2;
}

:root[data-style="summer"] #pun-viewtopic .post .post-author::after {
  border-color: var(--race-frame-color, transparent);
  opacity: 0.72;
}

:root[data-style="summer"] #pun-viewtopic .post .post-author ul,
:root[data-style="summer"] #pun-viewtopic .post .post-author p {
  padding: 0;
  margin: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-author .pa-fld2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--prof-bord);
  background: var(--summer-topic-panel-strong);
  z-index: 6;
  top: -20px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: color-mix(in srgb, var(--prof-bord) 90%, transparent);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

:root[data-style="summer"] #pun-viewtopic .post-author .pa-fld2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

:root[data-style="summer"] #pun-viewtopic .pa-author {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 8px;
  gap: 6px;
}

:root[data-style="summer"] #pun-viewtopic .pa-author a {
  position: relative;
  z-index: 2;
  border-radius: 6px;
  background: var(--summer-topic-label-bg);
  color: var(--summer-topic-label-text);
  font: 400 15px var(--sec-font);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);
  box-shadow: var(--summer-card-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: calc(100% - 34px);
  padding: 4px 14px 5px;
  line-height: 1.2;
  text-align: center;
}

:root[data-style="summer"] #pun-viewtopic .pa-author a:hover {
  background: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style="summer"] #pun-viewtopic .indOnline {
  background: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--tab-text) 28%, transparent);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #pun-viewtopic .author-wrap {
  position: relative;
  z-index: 1;
  margin: -2px 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--prof-bord) 76%, transparent);
  box-shadow: var(--summer-topic-glow);
  padding: 10px 10px 12px;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-topic-panel-strong) 24%, transparent),
      color-mix(in srgb, var(--summer-topic-panel) 12%, transparent)
    ),
    var(--kndr-img) center top / cover;
  margin-top: 2px;
}

:root[data-style="summer"] #pun-viewtopic .pa-title {
  position: relative;
  z-index: 2;
  margin: 0 0 7px;
  padding: 0;
  color: var(--prof-text);
  font: 600 10px var(--main-font);
  text-align: center;
  text-transform: lowercase;
}

:root[data-style="summer"] #pun-viewtopic .pa-avatar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

:root[data-style="summer"] #pun-viewtopic .pa-avatar img {
  max-width: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 7px;
  outline: 1px solid color-mix(in srgb, var(--prof-bord) 66%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  width: min(100%, 184px);
  max-height: 280px;
}

:root[data-style="summer"] #pun-viewtopic .post-author.no-avatar .pa-avatar,
:root[data-style="summer"]
  #pun-viewtopic
  .post-author.no-avatar
  .pa-avatar
  img.defavtr {
  display: none;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld6 {
  width: 100%;
  height: 160px;
  left: 0;
  top: 0;
  border-radius: 10px 10px 0 0;
  opacity: 0.72;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld6 img {
  filter: grayscale(0.2) sepia(0.16);
  opacity: 0.72;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 13px 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--prof-bord) 62%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel) 48%, transparent),
    color-mix(in srgb, var(--profile) 36%, transparent)
  );
  color: var(--prof-text);
  text-align: center;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld1 .lz-name {
  color: var(--accent);
  font: 400 13px var(--sec-font);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld1 .lz-text {
  margin: 6px 3px 0;
  color: var(--prof-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

:root[data-style="summer"] #pun-viewtopic .wrap-resp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  color: var(--prof-text);
  font: 500 10px var(--main-font);
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 10px 0 10px;
}

:root[data-style="summer"] #pun-viewtopic .wrap-resp li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

:root[data-style="summer"] #pun-viewtopic .wrap-resp .fld-name::before {
  color: var(--accent);
}

:root[data-style="summer"] #pun-viewtopic .pa-last-visit,
:root[data-style="summer"] #pun-viewtopic .pa-online,
:root[data-style="summer"] #pun-viewtopic .pa-awards {
  display: none;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld3 {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  margin-top: 8px;
}

:root[data-style="summer"] #pun-viewtopic .pa-fld3 > pers-plah,
:root[data-style="summer"] #pun-viewtopic .pa-fld3 .pers-plah {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--pers-pl) center / cover;
  color: var(--text);
  text-align: center;
  font: 600 10px var(--main-font);
  text-transform: lowercase;
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #pun-viewtopic .post-body {
  padding: 0;
  border: 0;
  grid-column: 2;
  min-width: 0;
  margin-left: 0;
  grid-row: 1;
}

:root[data-style="summer"] #pun-viewtopic .post-box {
  position: relative;
  border: 1px solid var(--summer-topic-border);
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
  overflow: hidden;
  min-height: 260px;
  padding: 20px 26px 18px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--summer-topic-paper-strong) 100%, transparent) 0%,
    color-mix(in srgb, var(--summer-topic-paper) 94%, transparent) 38%,
    color-mix(in srgb, var(--summer-topic-paper-strong) 86%, transparent) 100%
  );
  padding-bottom: 58px;
}

/* Летняя тема: форма ответа */

:root[data-style="summer"] #pun-viewtopic .post-box::before,
:root[data-style="summer"] #post-form::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(
      circle at 92% 8%,
      color-mix(in srgb, var(--accent) 11%, transparent) 0 14%,
      transparent 38%
    ),
    radial-gradient(
      circle at 5% 18%,
      color-mix(in srgb, var(--accent2) 8%, transparent) 0 11%,
      transparent 34%
    );
  opacity: 0.72;
}

:root[data-style="summer"] #post-form::before {
  z-index: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-content {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--text);
  font: 400 13px/1.72 var(--main-font);
  text-align: justify;
  font-size: 14px;
  line-height: 1.72;
}

:root[data-style="summer"] #pun-viewtopic .post-content > p {
  margin: 0;
  padding: 0 0 1em;
}

:root[data-style="summer"] #pun-viewtopic .post-content hr {
  margin: 18px 48px 16px;
  border: 0;
  border-top: 1px dotted var(--summer-topic-line);
  opacity: 1;
}

:root[data-style="summer"] #pun-viewtopic .post-sig dt {
  border-top: 1px dotted var(--summer-topic-line);
  margin: 20px 48px 14px;
  margin-left: 0;
  margin-right: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-sig dd,
:root[data-style="summer"] #pun-viewtopic .post-sig p {
  color: var(--accent);
  text-align: right;
  font: italic 600 12px var(--main-font);
  margin-right: 0;
}

/* Летняя тема: хроника */

:root[data-style="summer"] .custom_tag.chrono-episode {
  position: relative;
  display: block;
  margin: 0 0 18px;
  padding: 36px 34px 28px;
  overflow: hidden;
  border: 1px solid var(--summer-topic-border);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-topic-panel-strong) 92%, transparent),
      color-mix(in srgb, var(--summer-topic-panel) 86%, transparent)
    ),
    var(--pf-bg) center / cover;
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
}

:root[data-style="summer"] .custom_tag.chrono-episode::before,
:root[data-style="summer"] .custom_tag.chrono-episode::after {
  content: "\f06c";
  position: absolute;
  top: 74px;
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  font-family: "Font Awesome 6 Pro", "FontAwesome";
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.42;
}

:root[data-style="summer"] .custom_tag.chrono-episode::before {
  left: 32px;
  transform: rotate(-28deg);
}

:root[data-style="summer"] .custom_tag.chrono-episode::after {
  right: 32px;
  transform: scaleX(-1) rotate(-28deg);
}

:root[data-style="summer"] .chrono-display {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: -37px auto 15px;
  text-align: center;
}

:root[data-style="summer"] .chrono-display p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(460px, 100%);
  max-width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 7px 54px 8px;
  border: 1px solid var(--summer-topic-border-soft);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--summer-topic-panel-strong);
  color: var(--summer-topic-title);
  font: 400 22px/1.05 var(--sec-font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] .chrono-display p::before,
:root[data-style="summer"] .chrono-display p::after {
  content: "";
  width: 34px;
  height: 1px;
  margin: 0 14px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--summer-topic-title-soft),
    transparent
  );
}

:root[data-style="summer"] .chrono-data {
  position: relative;
  z-index: 2;
  display: block;
}

:root[data-style="summer"] .chrono-images p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
}

:root[data-style="summer"] .chrono-images img.postimg,
:root[data-style="summer"] .chrono-images img {
  width: 92px;
  height: 68px;
  margin: 0;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid
    color-mix(in srgb, var(--tab-text) 42%, var(--summer-topic-border));
  box-shadow: var(--summer-topic-thumb-shadow);
  filter: saturate(0.92) contrast(0.96);
  transition: 0.6s ease;
}

:root[data-style="summer"] .chrono-images img:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) contrast(1.02);
}

:root[data-style="summer"] .chrono-date,
:root[data-style="summer"] .chrono-location,
:root[data-style="summer"] .chrono-members,
:root[data-style="summer"] .chrono-announce {
  position: relative;
  z-index: 2;
  min-height: 58px;
  margin: 10px 0 0;
  padding: 17px 22px 15px 76px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  background: var(--summer-topic-paper-strong);
  color: var(--text);
  box-shadow: var(--summer-topic-glow);
}

:root[data-style="summer"] .chrono-date::before,
:root[data-style="summer"] .chrono-location::before,
:root[data-style="summer"] .chrono-members::before,
:root[data-style="summer"] .chrono-announce::before {
  position: absolute;
  top: 14px;
  left: 66px;
  padding: 4px 10px 5px;
  border-radius: 5px;
  background: var(--summer-topic-label-bg);
  color: var(--summer-topic-label-text);
  font: 600 10px/1 var(--main-font);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] .chrono-date::before {
  content: "дата";
}

:root[data-style="summer"] .chrono-location::before {
  content: "локация";
}

:root[data-style="summer"] .chrono-members::before {
  content: "участники";
}

:root[data-style="summer"] .chrono-announce::before {
  content: "сюжет";
}

:root[data-style="summer"] .chrono-date::after,
:root[data-style="summer"] .chrono-location::after,
:root[data-style="summer"] .chrono-members::after,
:root[data-style="summer"] .chrono-announce::after {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--summer-topic-icon-bg);
  color: var(--accent);
  font-family: "Font Awesome 6 Pro", "FontAwesome";
  font-size: 15px;
  font-weight: 400;
}

:root[data-style="summer"] .chrono-date::after {
  content: "\f073";
}

:root[data-style="summer"] .chrono-location::after {
  content: "\f3c5";
}

:root[data-style="summer"] .chrono-members::after {
  content: "\f0c0";
}

:root[data-style="summer"] .chrono-announce::after {
  content: "\f52d";
}

:root[data-style="summer"] .chrono-date p,
:root[data-style="summer"] .chrono-location p,
:root[data-style="summer"] .chrono-announce p,
:root[data-style="summer"] .chrono-member p {
  margin: 18px 0 0;
  padding: 0;
  color: var(--text);
  line-height: 1.55;
  text-align: left;
}

:root[data-style="summer"] .chrono-members {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

:root[data-style="summer"] .chrono-member p {
  margin-top: 0;
}

:root[data-style="summer"] .chrono-members .chrono-member:first-of-type p {
  margin-top: 18px;
}

:root[data-style="summer"] .chrono-announce {
  margin-top: 12px;
}

:root[data-style="summer"] #pun-viewtopic .post-rating,
:root[data-style="summer"] #pun-viewtopic .post-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-rating p,
:root[data-style="summer"] #pun-viewtopic .post-vote p {
  min-height: 26px;
  margin: 0;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #pun-viewtopic .post-rating a::before {
  color: var(--accent);
}

:root[data-style="summer"] #pun-viewtopic .post-vote a.positive:hover,
:root[data-style="summer"] #pun-viewtopic .post-rating a:hover::before {
  color: var(--tab-text);
}

:root[data-style="summer"] #pun-viewtopic .post-links {
  background: transparent;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  margin: 18px 0 0;
  padding: 14px 8px 0;
  border-top: 1px solid
    color-mix(in srgb, var(--summer-topic-border-soft) 58%, transparent);
}

:root[data-style="summer"] #pun-viewtopic .post-links ul {
  color: var(--sec-text);
  font: 400 11px var(--main-font);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-links li {
  display: inline-flex;
  padding: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-links a {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 999px;
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
  text-transform: lowercase;
  min-height: 30px;
}

:root[data-style="summer"] #pun-viewtopic .modmenu .container {
  margin: 10px 0 0;
  padding: 8px 0;
  color: var(--sec-text);
}

:root[data-style="summer"] #topic-users-in {
  color: var(--text);
}

:root[data-style="summer"] #post-form {
  position: relative;
  margin: 24px 0 12px;
  padding: 16px 14px 18px;
  border: 1px solid var(--summer-topic-border);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    var(--summer-topic-panel-strong),
    var(--summer-topic-panel)
  );
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
  overflow: visible;
  isolation: isolate;
}

:root[data-style="summer"] #post-form::after {
  content: "\f52d";
  position: absolute;
  right: 36px;
  bottom: 24px;
  color: color-mix(in srgb, var(--accent) 28%, transparent);
  font-family: "Font Awesome 6 Pro", "FontAwesome";
  font-size: 94px;
  font-weight: 300;
  line-height: 1;
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 1;
}

:root[data-style="summer"] #post-form h2 {
  position: relative;
  z-index: 10;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 24px;
  margin: 0 0 12px;
  padding: 0 0 0 24px;
  text-align: left;
  background: transparent;
}

:root[data-style="summer"] #post-form h2::before {
  content: "\f52d";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  font-family: "Font Awesome 6 Pro", "FontAwesome";
  font-size: 16px;
  font-weight: 400;
}

:root[data-style="summer"] #post-form h2 span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  font: 400 16px var(--sec-font);
  color: var(--summer-topic-title);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

:root[data-style="summer"] #post-form form.container {
  position: relative;
  z-index: 10;
  overflow: visible;
  padding: 0;
  background: transparent;
}

:root[data-style="summer"] #post-form fieldset {
  position: relative;
  z-index: 20;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
}

:root[data-style="summer"] #post-form fieldset legend,
:root[data-style="summer"] #post-form fieldset legend span,
:root[data-style="summer"] #post-form .fs-box.hashelp > p:first-child {
  display: none;
}

:root[data-style="summer"] #post-form .fs-box,
:root[data-style="summer"] #post-form .fs-box.hashelp {
  position: relative;
  z-index: 20;
  overflow: visible;
  padding: 0;
}

:root[data-style="summer"] #form-buttons {
  position: relative;
  margin: 0 0 12px;
  gap: 6px;
  z-index: 120;
}

:root[data-style="summer"] #form-buttons table tr {
  justify-content: flex-start;
  gap: 4px;
}

:root[data-style="summer"] #form-buttons td {
  width: 27px;
  height: 25px;
  padding: 0;
  border-color: var(--summer-topic-border-soft);
  background: transparent;
}

:root[data-style="summer"] #form-buttons td::before {
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  color: var(--text);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #form-buttons td:hover::before {
  background: var(--accent);
  color: var(--tab-text);
}

:root[data-style="summer"] #main-reply {
  position: relative;
  display: block;
  width: 100%;
  min-height: 180px;
  margin: 0;
  padding: 16px 18px;
  resize: vertical;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  background: var(--summer-topic-input);
  color: var(--text);
  box-shadow: var(--summer-topic-glow);
  font: 400 13px/1.65 var(--main-font);
  z-index: 10;
}

:root[data-style="summer"] #main-reply:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-style="summer"] #post-form .reply-char-counter {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 5px 10px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 7px;
  background: var(--summer-topic-panel);
  color: var(--sec-text);
  font: 400 10px var(--main-font);
  text-transform: uppercase;
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #post-form .formsubmit {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
}

:root[data-style="summer"] #post-form .formsubmit .button,
:root[data-style="summer"] #post-form .formsubmit button {
  min-width: 104px;
  height: 32px;
  margin: 0;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--accent2);
  border: 1px solid var(--dark-bord);
  color: var(--tab-text);
  box-shadow: var(--summer-card-shadow);
  font: 700 10px var(--main-font);
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

:root[data-style="summer"] #post-form .formsubmit .preview {
  background: transparent;
  color: var(--accent);
  border-color: var(--summer-topic-border-soft);
}

:root[data-style="summer"] #post-form .formsubmit .button:hover,
:root[data-style="summer"] #post-form .formsubmit button:hover {
  background: var(--dark-bord);
  color: var(--tab-text);
}

/* Летняя тема: дополнительные кнопки формы ответа */

:root[data-style="summer"] #post-form .formsubmit .hotkeys-trigger {
  min-width: 46px;
  width: 46px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--summer-topic-border-soft);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  font: 700 14px/1 var(--main-font);
  text-transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root[data-style="summer"] #post-form .formsubmit .hotkeys-trigger:hover {
  background: var(--accent2);
  border-color: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style="summer"] body.dark #post-form .formsubmit .hotkeys-trigger {
  color: var(--summer-topic-title);
}

:root[data-style="summer"] #post-form .formsubmit .ks-btn-fill-profile {
  margin-left: auto;
}

:root[data-style="summer"] #post-form .formsubmit .ks-btn-fill-profile,
:root[data-style="summer"] #post-form .formsubmit .ks-btn-create-page,
:root[data-style="summer"] #post-form .formsubmit .ks-btn-change-group {
  justify-self: flex-end;
}

:root[data-style="summer"] #pun-crumbs2 .container {
  margin-top: 14px;
}

:root[data-style="summer"] body.dark #pun-viewtopic .font-resizer button,
:root[data-style="summer"] body.dark #pun-viewtopic .copy-post-btn,
:root[data-style="summer"] body.dark #pun-viewtopic .post h3 a.permalink,
:root[data-style="summer"] body.dark #pun-viewtopic .pagelink,
:root[data-style="summer"] body.dark #pun-viewtopic .postlink span a,
:root[data-style="summer"] body.dark #pun-viewtopic .subscribelink,
:root[data-style="summer"] body.dark #pun-viewtopic #plng {
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
}

:root[data-style="summer"] #pun-viewtopic .main .post {
  position: relative;
  margin: 18px 0 26px;
  padding: 0;
  border: 1px solid var(--summer-topic-border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-shell) 90%, transparent),
    color-mix(in srgb, var(--summer-topic-panel) 92%, transparent)
  );
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
  isolation: isolate;
  overflow: visible;
  border-left-color: color-mix(
    in srgb,
    var(--summer-topic-border) 14%,
    transparent
  );
  border-right-color: color-mix(
    in srgb,
    var(--summer-topic-border) 14%,
    transparent
  );
}

:root[data-style="summer"] #pun-viewtopic .main .post h3 {
  margin: 0;
  padding: 10px 16px;
  min-height: 48px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--summer-topic-border) 72%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel-strong) 82%, transparent),
    color-mix(in srgb, var(--summer-topic-panel) 74%, transparent)
  );
  border-radius: 18px 18px 0 0;
}

:root[data-style="summer"] body.dark #pun-viewtopic .post-box {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--summer-topic-paper-strong) 92%, transparent) 0%,
    color-mix(in srgb, var(--summer-topic-paper) 82%, transparent) 40%,
    color-mix(in srgb, var(--summer-topic-paper-strong) 88%, transparent) 100%
  );
}

:root[data-style="summer"] #pun-viewtopic .post-box::before {
  background:
    radial-gradient(
      circle at 94% 10%,
      color-mix(in srgb, var(--accent) 10%, transparent) 0 12%,
      transparent 40%
    ),
    radial-gradient(
      circle at 8% 92%,
      color-mix(in srgb, var(--accent2) 9%, transparent) 0 10%,
      transparent 34%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--summer-topic-panel) 34%, transparent) 0%,
      transparent 26%,
      transparent 74%,
      color-mix(in srgb, var(--summer-topic-panel) 22%, transparent) 100%
    );
  opacity: 0.75;
}

:root[data-style="summer"] #pun-viewtopic .rsp_wrap {
  margin-top: 12px;
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  margin: 0;
}

:root[data-style="summer"] #pun-viewtopic .reactions-root {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

:root[data-style="summer"] #pun-viewtopic .reaction-picker-button.reaction-chip,
:root[data-style="summer"]
  #pun-viewtopic
  .reaction-counters-container
  .reaction-chip {
  min-width: 32px;
  min-height: 28px;
  border-radius: 8px;
  border: 1px solid var(--summer-topic-border-soft);
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #pun-viewtopic .post-links li.pl-delete {
  margin-left: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-links a:hover {
  background: var(--accent);
  border-color: var(--accent2);
  color: var(--tab-text);
}

:root[data-style="summer"] #pun-viewtopic .post-links .profile,
:root[data-style="summer"] #pun-viewtopic .post-links .pm,
:root[data-style="summer"] #pun-viewtopic .post-links .email {
  margin-right: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-sig {
  margin-top: 18px;
}

:root[data-style="summer"] #pun-viewtopic .custom_tag.chrono-episode {
  margin-bottom: 20px;
}

:root[data-style="summer"] #pun-viewtopic .post-author:has(.pa-fld2)::before {
  opacity: 0.35;
  transform: translateX(-50%) scale(0.92);
}

:root[data-style="summer"] #pun-viewtopic .post-author .pa-fld2 > div,
:root[data-style="summer"] #pun-viewtopic .post-author .pa-fld2 > span,
:root[data-style="summer"] #pun-viewtopic .post-author .pa-fld2 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--summer-topic-title);
  font: 400 14px/1 var(--sec-font);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

:root[data-style="summer"] #pun-viewtopic .pa-author .indOnline {
  flex: 0 0 auto;
  margin: 0;
}

:root[data-style="summer"] #tags {
  position: relative;
  z-index: 90;
  overflow: visible;
}

:root[data-style="summer"] #post-form .areafield,
:root[data-style="summer"] #post-form .resizable-textarea,
:root[data-style="summer"] #post-form .resizable-textarea > span {
  position: relative;
  z-index: 10;
  overflow: visible;
}

:root[data-style="summer"] #font-area,
:root[data-style="summer"] #size-area,
:root[data-style="summer"] #color-area,
:root[data-style="summer"] #table-area,
:root[data-style="summer"] #smilies-area,
:root[data-style="summer"] #image-area,
:root[data-style="summer"] #imageup-area,
:root[data-style="summer"] #imageattach-area,
:root[data-style="summer"] #video-area,
:root[data-style="summer"] #keyboard-area,
:root[data-style="summer"] #addition-area,
:root[data-style="summer"] #spoiler-area,
:root[data-style="summer"] #float-toolbar,
:root[data-style="summer"] #tags .container {
  z-index: 5000;
  pointer-events: auto;
  box-shadow:
    0 12px 28px rgba(139, 86, 50, 0.16),
    var(--summer-topic-glow);
}

:root[data-style="summer"] body.dark #font-area,
:root[data-style="summer"] body.dark #size-area,
:root[data-style="summer"] body.dark #color-area,
:root[data-style="summer"] body.dark #table-area,
:root[data-style="summer"] body.dark #smilies-area,
:root[data-style="summer"] body.dark #image-area,
:root[data-style="summer"] body.dark #imageup-area,
:root[data-style="summer"] body.dark #imageattach-area,
:root[data-style="summer"] body.dark #video-area,
:root[data-style="summer"] body.dark #keyboard-area,
:root[data-style="summer"] body.dark #addition-area,
:root[data-style="summer"] body.dark #spoiler-area,
:root[data-style="summer"] body.dark #float-toolbar,
:root[data-style="summer"] body.dark #tags .container {
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.42),
    var(--summer-topic-glow);
}

:root[data-style="summer"] #pun-viewtopic .post-rating p.container,
:root[data-style="summer"] #pun-viewtopic .post-vote p.container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  padding: 0;
}

:root[data-style="summer"] #pun-viewtopic .post-vote p.container {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-style="summer"] #pun-viewtopic .post-rating p.container {
  min-width: 42px;
  padding: 0 10px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] #pun-viewtopic .post-rating a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
  color: var(--accent);
  font: 700 12px/1 var(--main-font);
}

:root[data-style="summer"] #pun-viewtopic .post-vote a.positive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  background: var(--summer-topic-panel);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  font: 800 15px/1 var(--main-font);
}

:root[data-style="summer"] #pun-viewtopic .post-vote a.positive:hover,
:root[data-style="summer"] #pun-viewtopic .post-rating a:hover {
  border-color: var(--accent2);
  background: var(--accent);
  color: var(--tab-text);
}

:root[data-style="summer"] #pun-viewtopic .post-links li.email {
  margin-right: auto;
}

:root[data-style="summer"] #pun-viewtopic .post h3 .font-resizer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-right: auto;
  padding: 4px 9px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--summer-topic-panel) 82%, transparent);
  box-shadow: var(--summer-card-shadow), var(--summer-topic-glow);
}

:root[data-style="summer"] #pun-viewtopic .post h3 .font-resizer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font: 700 12px/1 var(--main-font);
}

:root[data-style="summer"] #pun-viewtopic .post h3 .font-resizer button:hover {
  border-color: var(--summer-topic-border-soft);
  background: var(--accent);
  color: var(--tab-text);
}

:root[data-style="summer"] #pun-viewtopic .post h3 .font-resizer input.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 118px;
  height: 18px;
  margin: 0 1px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  accent-color: var(--accent);
}

:root[data-style="summer"]
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border: 1px solid color-mix(in srgb, var(--accent2) 74%, var(--tab-text));
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 7px rgba(139, 86, 50, 0.26);
}

:root[data-style="summer"]
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--accent2) 74%, var(--tab-text));
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 7px rgba(139, 86, 50, 0.26);
}

:root[data-style="summer"]
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

:root[data-style="summer"] body.dark #pun-viewtopic .post h3 .font-resizer {
  background: color-mix(in srgb, var(--summer-topic-panel) 92%, transparent);
}

:root[data-style="summer"]
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--summer-topic-border-soft) 78%,
    transparent
  );
}

:root[data-style="summer"]
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--summer-topic-border-soft) 78%,
    transparent
  );
}

:root[data-style="summer"]
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

@supports not selector(:has(*)) {
  :root[data-style="summer"] body.dark {
    background:
      var(--summer-body-tint),
      var(--base-bg) center center / cover fixed no-repeat;
  }
}

/* Летняя тема: фоновые декоративные слои */

:root[data-style="summer"] #pun::before,
:root[data-style="summer"] #pun::after {
  z-index: 1;
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  border: 0;
  backdrop-filter: none;
}

:root[data-style="summer"] body.dark #pun {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 58%, transparent) 0,
      transparent 92px,
      transparent calc(100% - 92px),
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 58%, transparent) 100%
    ),
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat,
    var(--base-bg2) top center / 1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 32%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat;
}

:root[data-style="summer"] #pun::before {
  left: calc(var(--summer-edge-fade-width) * -1);
  z-index: 0;
  background:
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat,
    var(--base-bg2) top center / 1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 32%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat;
  -webkit-mask-image: var(--summer-pun-mask-x);
  mask-image: var(--summer-pun-mask-x);
}

:root[data-style="summer"] #pun::after {
  right: calc(var(--summer-edge-fade-width) * -1);
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 28%, transparent) 6%,
    transparent 15%,
    transparent 85%,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 28%, transparent) 94%,
    transparent 100%
  );
  -webkit-mask-image: var(--summer-pun-mask-x);
  mask-image: var(--summer-pun-mask-x);
}

:root[data-style="summer"] #pun-viewtopic .main .post::before,
:root[data-style="summer"] #pun-viewtopic .main .post::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 92px;
  z-index: 0;
  pointer-events: none;
}

:root[data-style="summer"] #pun-viewtopic .main .post::before {
  left: -1px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(
    90deg,
    var(--summer-post-edge-mask) 0%,
    var(--summer-post-edge-mask-soft) 42%,
    transparent 100%
  );
}

:root[data-style="summer"] #pun-viewtopic .main .post::after {
  right: -1px;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(
    270deg,
    var(--summer-post-edge-mask) 0%,
    var(--summer-post-edge-mask-soft) 42%,
    transparent 100%
  );
}

:root[data-style="summer"] #pun-viewtopic .main .post h3,
:root[data-style="summer"] #pun-viewtopic .main .post > .container {
  position: relative;
  z-index: 1;
}

:root[data-style="summer"] #pun {
  isolation: isolate;
  position: relative;
  z-index: 1;
  overflow: visible;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-pun-overlay-top) 58%, transparent) 0,
      color-mix(in srgb, var(--summer-pun-overlay-mid) 48%, transparent) 430px,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 50%, transparent) 100%
    )
    top center / 100% 100% no-repeat;
  box-shadow: var(--summer-pun-shadow);
}

:root[data-style="summer"] #pun > * {
  position: relative;
  z-index: 2;
}

:root[data-style="summer"] #pun-about p.container::before,
:root[data-style="summer"] #pun-about p.container::after {
  position: absolute;
  inset: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-mask-image: var(--summer-pun-mask-x);
  mask-image: var(--summer-pun-mask-x);
  content: none;
  display: none;
}

:root[data-style="summer"] #pun-about p.container .item1,
:root[data-style="summer"] #pun-about p.container a,
:root[data-style="summer"] #pun-about p.container > * {
  position: relative;
  z-index: 2;
}

:root[data-style="summer"] body.dark #pun::before {
  background:
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat,
    var(--base-bg2) top center / 1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 32%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat;
}

:root[data-style="summer"]:has(body.dark) {
  background-color: #160b08;
  background-image:
    var(--summer-body-tint),
    url("https://forumstatic.ru/files/001c/b8/c1/83863.webp?v=1");
}

:root[data-style="summer"] body {
  min-height: 100vh;
  isolation: isolate;
  background: transparent;
}

:root[data-style="summer"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat,
    var(--base-bg2) top center / 1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 34%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.08) calc(50% - 720px),
    rgba(0, 0, 0, 0.42) calc(50% - 660px),
    #000 calc(50% - 560px),
    #000 calc(50% + 560px),
    rgba(0, 0, 0, 0.42) calc(50% + 660px),
    rgba(0, 0, 0, 0.08) calc(50% + 720px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.08) calc(50% - 720px),
    rgba(0, 0, 0, 0.42) calc(50% - 660px),
    #000 calc(50% - 560px),
    #000 calc(50% + 560px),
    rgba(0, 0, 0, 0.42) calc(50% + 660px),
    rgba(0, 0, 0, 0.08) calc(50% + 720px),
    transparent 100%
  );
}

:root[data-style="summer"] #pun::before,
:root[data-style="summer"] #pun::after,
:root[data-style="summer"] #pun-viewtopic .main .post::before,
:root[data-style="summer"] #pun-viewtopic .main .post::after {
  content: none;
  display: none;
}

:root[data-style="summer"] body.dark #pun-about p.container {
  box-shadow:
    inset 0 42px 54px rgba(10, 4, 2, 0.58),
    inset 0 -40px 54px rgba(5, 2, 1, 0.68);
}

:root[data-style="summer"] #pun-index .category h2::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(620px, 76%);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--text-tab-accent) 30%, transparent),
    transparent
  );
  pointer-events: none;
}

:root[data-style="summer"] #pun-index .category h2 span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--text-tab-accent);
  opacity: 0.52;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 62%, transparent) 0%,
    transparent 72%
  );
}

:root[data-style="summer"] body.dark #pun-index .category h2::before {
  opacity: 0.2;
  mix-blend-mode: screen;
  filter: saturate(0.9) contrast(0.96);
}

:root[data-style="summer"] body.dark #pun-index .category h2::after {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--text-tab-accent) 26%, transparent),
    transparent
  );
}

:root[data-style="summer"] body.dark #pun-index .category h2 span {
  opacity: 0.42;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 46%, transparent) 0%,
    transparent 72%
  );
}

:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0;
}

:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  .post-author {
  display: none;
}

:root[data-style="summer"] #pun-viewtopic .post:has(.html-post-box) .post-body {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding: 0;
  border: 0;
}

:root[data-style="summer"] #pun-viewtopic .post:has(.html-post-box) .post-box {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  .post-box::before {
  display: none;
}

:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  .post-content,
:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  .html-post-box,
:root[data-style="summer"] #pun-viewtopic .post:has(.html-post-box) .html-inner,
:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  .html-content,
:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  iframe.html_frame {
  display: block;
  width: 100%;
  max-width: none;
}

:root[data-style="summer"]
  #pun-viewtopic
  .post:has(.html-post-box)
  .post-links {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  margin-left: 0;
}

:root[data-style="summer"] .custom_tag.kindredaca {
  position: relative;
  overflow: hidden;
  max-width: 690px;
  margin: 18px auto;
  border: 1px solid var(--summer-location-text-border);
  border-radius: 6px;
  background: var(--summer-location-bg);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style="summer"] .custom_tag.kindredaca *,
:root[data-style="summer"] .custom_tag.kindredaca *::before,
:root[data-style="summer"] .custom_tag.kindredaca *::after {
  box-sizing: border-box;
}

:root[data-style="summer"] .custom_tag.kindredaca p {
  margin: 0;
  padding: 0;
}

:root[data-style="summer"] .custom_tag.kahead {
  position: relative;
  isolation: isolate;
  min-height: 138px;
  padding: 34px 24px 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--head) center top / cover no-repeat;
  border-radius: 5px 5px 0 0;
}

:root[data-style="summer"] .custom_tag.kahead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-head-fade) 24%, transparent) 0%,
    transparent 46%,
    color-mix(in srgb, var(--summer-head-edge) 42%, transparent) 100%
  );
  pointer-events: none;
}

:root[data-style="summer"] .custom_tag.kahead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  height: 66px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--summer-location-head-fade) 52%, transparent) 54%,
    var(--summer-location-head-fade) 100%
  );
  pointer-events: none;
}

:root[data-style="summer"] .custom_tag.kahead > p {
  position: relative;
  z-index: 2;
  color: var(--summer-location-head-title);
  font-family: "Asther", "auge", serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-shadow: var(--summer-location-head-shadow);
}

/* Летняя тема: HTML-блоки и BB-коды */

:root[data-style="summer"] .custom_tag.kaheadtitle {
  position: relative;
  z-index: 2;
}

:root[data-style="summer"] .custom_tag.kaheadtitle p {
  color: var(--summer-location-head-subtitle);
  font-family: var(--main-font);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: var(--summer-location-head-shadow);
}

:root[data-style="summer"] .custom_tag.katext {
  position: relative;
  z-index: 3;
  margin-top: -22px;
  padding: 20px 30px 22px;
  background: var(--summer-location-bg);
}

:root[data-style="summer"] .custom_tag.katexttext {
  padding: 17px 20px;
  border: 1px solid var(--summer-location-text-border);
  border-radius: 5px;
  background: var(--summer-location-text-bg);
  color: var(--text);
  line-height: 1.45;
  text-align: left;
}

:root[data-style="summer"] .custom_tag.katexttext + .custom_tag.katexttext {
  margin-top: 10px;
}

:root[data-style="summer"] .custom_tag.chrono-episode .custom_tag.chrono-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "images images"
    "date location"
    "members members";
  gap: 12px;
  margin: 0;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images {
  grid-area: images;
  min-height: 0;
  margin: 0;
}

:root[data-style="summer"] .custom_tag.chrono-episode .custom_tag.chrono-date {
  grid-area: date;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-location {
  grid-area: location;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-members {
  grid-area: members;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 8px;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      var(--summer-chrono-image-panel),
      var(--summer-chrono-image-panel-soft)
    );
  box-shadow: var(--summer-topic-glow);
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p:empty {
  display: none;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p
  > a {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  img.postimg,
:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  img {
  display: block;
  width: var(--summer-chrono-thumb-w);
  height: var(--summer-chrono-thumb-h);
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  margin: 0;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center center;
  border: 1px solid var(--summer-chrono-image-frame);
  border-radius: 7px;
  background: color-mix(in srgb, var(--quote) 58%, transparent);
  box-shadow: var(--summer-topic-thumb-shadow);
  filter: saturate(0.95) contrast(0.98);
  transition:
    transform 0.5s ease,
    filter 0.5s ease,
    box-shadow 0.5s ease;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  img:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) contrast(1.02);
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p:has(> img:only-child),
:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p:has(> a:only-child) {
  min-height: 132px;
  padding: 12px;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p:has(> img:only-child)
  > img,
:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p:has(> a:only-child)
  > a
  > img {
  width: auto;
  height: auto;
  max-width: min(var(--summer-chrono-single-max-w), 100%);
  max-height: var(--summer-chrono-single-max-h);
  object-fit: contain;
}

:root[data-style="summer"] .custom_tag.chrono-episode .custom_tag.chrono-date,
:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-location,
:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-members {
  margin: 0;
}

:root[data-style="summer"]
  .custom_tag.chrono-episode
  .custom_tag.chrono-announce {
  margin-top: 12px;
}

:root[data-style="summer"] body:not(.dark) {
  --summer-chrono-unified-card: rgba(250, 240, 228, 0.78);
  --summer-chrono-unified-card-strong: rgba(255, 250, 244, 0.72);
  --summer-chrono-unified-card-edge: rgba(239, 218, 197, 0.82);
  --summer-chrono-unified-border: rgba(212, 172, 137, 0.68);
}

:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-display
  p,
:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  p,
:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-date,
:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-location,
:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-members,
:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-announce {
  border-color: var(--summer-chrono-unified-border);
  background:
    radial-gradient(
      ellipse at 50% 0%,
      var(--summer-chrono-unified-card-strong) 0%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      var(--summer-chrono-unified-card-strong) 0%,
      var(--summer-chrono-unified-card) 52%,
      var(--summer-chrono-unified-card-edge) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 5px 14px rgba(154, 102, 65, 0.08);
}

:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-display
  p {
  color: var(--summer-chrono-title);
  text-shadow:
    0 1px 0 rgba(255, 250, 243, 0.9),
    0 3px 12px rgba(151, 92, 57, 0.18);
}

:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  img.postimg,
:root[data-style="summer"]
  body:not(.dark)
  .custom_tag.chrono-episode
  .custom_tag.chrono-images
  img {
  background: rgba(255, 248, 240, 0.72);
  border-color: rgba(192, 143, 105, 0.72);
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 10px;
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .post-author,
:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .pl-email,
:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .pl-website {
  display: none;
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .post-body {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .post-box {
  min-height: 0;
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .post-links {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) .post-links ul {
  margin-left: 0;
  justify-content: flex-end;
}

:root[data-style="summer"] #pun-viewtopic .post:is(.hide-profile, .hideprofile) h3 > span {
  margin-left: 0;
}

:root[data-style="summer"] {
  --summer-mobile-page-gap: 20px;
  --summer-mobile-nav-h: 45px;
  --summer-mobile-menu-w: 280px;
}
/* Летняя тема: мобильный режим */
@media screen and (max-width: 540px) and (hover: none) and (pointer: coarse) {
  :is(.summer.force-mobile, .summer body.force-mobile) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f6eadc;
    background-image: var(--summer-body-tint), var(--base-bg);
    background-position:
      center top,
      center top;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
    --summer-mobile-nav-height: 56px;
    --summer-mobile-nav-button: 56px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .punbb {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title .container {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin-left: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 268px;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: var(--mob-head, var(--head)) center top / cover no-repeat;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title::before {
    top: 92px;
    max-width: calc(100vw - 24px);
    font-size: clamp(42px, 12vw, 68px);
    white-space: nowrap;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title::after {
    top: 76px;
    width: min(600px, 100vw);
    max-width: 100vw;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #stylelist {
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  :root[data-style="summer"] .minimal-toggle {
    display: flex;
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: calc(100vw - 32px);
    margin: 18px auto max(18px, env(safe-area-inset-bottom));
    padding: 4px 8px;
    color: var(--tab-text);
    font-family: var(--main-font);
    line-height: 1;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent2) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--tab-text) 34%, transparent);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  }

  :root[data-style="summer"] #html-footer .minimal-toggle,
  :root[data-style="summer"] #pun-about .minimal-toggle {
    order: 999;
    align-self: center;
  }

  :root[data-style="summer"] .minimal-toggle input {
    display: none;
  }

  :root[data-style="summer"] .minimal-toggle i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--tab-text);
    font-size: 13px;
    line-height: 1;
  }

  :root[data-style="summer"] .minimal-switch {
    display: block;
    position: relative;
    width: 42px;
    height: 22px;
    flex: 0 0 42px;
    border-radius: 999px;
    background: color-mix(
      in srgb,
      var(--dark-bord) 86%,
      transparent
    );
    border: 1px solid color-mix(in srgb, var(--tab-text) 26%, transparent);
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }

  :root[data-style="summer"] .minimal-knob {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tab-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease;
  }

  :root[data-style="summer"] .minimal-toggle input:checked + .minimal-switch {
    background: var(--accent2);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .minimal-toggle input:checked + .minimal-switch .minimal-knob {
    transform: translateX(20px);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .knews {
    left: 16px;
    right: 16px;
    top: 166px;
    width: auto;
    max-width: calc(100vw - 32px);
    height: 84px;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) .knews {
    left: 16px;
    right: 16px;
    top: 166px;
    width: auto;
    max-width: calc(100vw - 32px);
    min-height: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .knews text,
  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) .knews text {
    height: 62px;
    margin: 10px 0;
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    touch-action: pan-y;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .knews text p,
  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) .knews text p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about p.container {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin-left: 0;
    left: 0;
    right: auto;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .bnrs,
  :is(.summer.force-mobile, .summer body.force-mobile) .banners_bottom {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    left: 0;
    right: auto;
    margin-left: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) img,
  :is(.summer.force-mobile, .summer body.force-mobile) iframe,
  :is(.summer.force-mobile, .summer body.force-mobile) video,
  :is(.summer.force-mobile, .summer body.force-mobile) embed,
  :is(.summer.force-mobile, .summer body.force-mobile) object {
    max-width: 100%;
  }
  :is(.summer.force-mobile, .summer body.force-mobile),
  :root[data-style="summer"].force-mobile {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    touch-action: auto;
    -webkit-overflow-scrolling: auto;
  }

  :is(.summer.force-mobile body, .summer body.force-mobile) {
    background-position: top center;
    background-size: cover;
    -webkit-text-size-adjust: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    position: relative;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun,
  :is(.summer.force-mobile, .summer body.force-mobile) .punbb {
    height: auto;
    min-height: 0;
    overflow-y: visible;
    touch-action: auto;
    -webkit-overflow-scrolling: auto;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-title table,
  :is(.summer.force-mobile, .summer body.force-mobile) .knews,
  :is(.summer.force-mobile, .summer body.force-mobile) .knews *,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about *,
  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer,
  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer * {
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .knews,
  :is(.summer.force-mobile, .summer body.force-mobile) .knews text,
  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) .knews,
  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) .knews text {
    overflow: hidden;
    pointer-events: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .knews a,
  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) .knews a {
    pointer-events: auto;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-status {
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-status p.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 10px 16px 12px;
    text-align: left;
    box-sizing: border-box;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-status span {
    width: auto;
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-status .item3.status-right,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-status .item4.status-right {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about {
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about p.container::before,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about p.container::after {
    content: none;
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer,
  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer .container {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    background: var(--summer-footer-fade, var(--bt-bg));
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .banners_bottom {
    order: 10;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100vw;
    height: 42px;
    margin: 0 auto 18px;
    overflow: hidden;
    box-sizing: border-box;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) .banners_bottom-inner {
    height: 42px;
    align-items: center;
  }

  :root[data-style="summer"] #html-footer .minimal-toggle {
    order: 1000;
    align-self: center;
    margin: 10px auto 0;
    position: relative;
    inset: auto;
    transform: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.scroll_navi,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.nav-scrolled,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.scroll_navi,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.user-scrolled {
    touch-action: auto;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    background: linear-gradient(
      180deg,
      rgba(255, 246, 234, 0.34) 0%,
      rgba(250, 232, 211, 0.42) 46%,
      rgba(255, 239, 219, 0.36) 100%
    );
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer,
  :is(.summer.force-mobile, .summer body.force-mobile) #html-footer .container,
  :is(.summer.force-mobile, .summer body.force-mobile) .banners_bottom {
    background: transparent;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li a {
    font-size: 0;
  }
  :is(.summer.force-mobile, .summer body.force-mobile) .kindred-info,
  :is(.summer.force-mobile, .summer body.force-mobile) .kindred-info .ki-ash {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks {
    position: relative;
    inset: auto;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: var(--summer-mobile-nav-height);
    min-height: var(--summer-mobile-nav-height);
    margin: 0 calc(50% - 50vw);
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    transform: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    border-width: 1px 0;
    border-radius: 0;
    background: var(--navi-bg);
    box-shadow: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.scroll_navi,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.nav-scrolled {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 3000;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.scroll_navi .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.nav-scrolled .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 8px 0 var(--summer-mobile-nav-button);
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    border: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks #navawards {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container > li,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.scroll_navi .container > li,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.nav-scrolled .container > li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    opacity: 1;
    visibility: visible;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container > li > a,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.scroll_navi .container > li > a,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.nav-scrolled .container > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: var(--summer-mobile-nav-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Font Awesome 6 Pro", "FontAwesome";
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    color: var(--accent);
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container > li > a:hover,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container > li > a:focus,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container > li > a:active {
    color: var(--accent2);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .container > li > a::before,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.scroll_navi .container > li > a::before,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks.nav-scrolled .container > li > a::before {
    display: block;
    font-family: "Font Awesome 6 Pro", "FontAwesome";
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 700;
    line-height: 1;
    color: inherit;
    opacity: 1;
    visibility: visible;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navindex > a::before {
    content: "\f015";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navuserlist > a::before {
    content: "\f0c0";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navsearch > a::before {
    content: "\f002";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navprofile > a::before {
    content: "\f2bd";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navpm > a::before {
    content: "\f0e0";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navadmin > a::before {
    content: "\f013";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navprofiles > a::before {
    content: "\f02d";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navlogout > a::before {
    content: "\f08b";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navregister > a::before {
    content: "\f234";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navlogin > a::before {
    content: "\f02e";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navpr_1 > a::before {
    content: "\f1d8";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navpr_2 > a::before {
    content: "\f02d";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navextra1 > a::before {
    content: "\f02e";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li#navextraBL > a::before {
    content: "\f05e";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks li a span,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-navlinks .multiacc-profilemenu {
    display: none;
    font-size: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks {
    font-size: 0;
    color: var(--accent);
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--summer-mobile-nav-button);
    height: var(--summer-mobile-nav-height);
    min-width: var(--summer-mobile-nav-button);
    min-height: var(--summer-mobile-nav-height);
    margin: calc(var(--summer-mobile-nav-height) * -1) 0 0 calc(50% - 50vw);
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    transform: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    touch-action: manipulation;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.scroll_navi,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.user-scrolled,
  :is(.summer.force-mobile, .summer body.force-mobile):has(#pun-navlinks.scroll_navi) #pun-ulinks,
  :is(.summer.force-mobile, .summer body.force-mobile):has(#pun-navlinks.nav-scrolled) #pun-ulinks {
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 3100;
    width: var(--summer-mobile-nav-button);
    height: var(--summer-mobile-nav-height);
    margin: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks::before {
    content: "\f0c9";
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--summer-mobile-nav-button);
    height: var(--summer-mobile-nav-height);
    margin: 0;
    padding: 0;
    font-family: "Font Awesome 6 Pro", "FontAwesome";
    font-size: 29px;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
    text-align: center;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks:hover::before,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks:focus-within::before {
    color: var(--accent2);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks h2 {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.scroll_navi .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.user-scrolled .container {
    position: absolute;
    top: calc(var(--summer-mobile-nav-height) + 6px);
    left: 8px;
    right: auto;
    z-index: 3101;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: auto;
    max-height: calc(100vh - var(--summer-mobile-nav-height) - 18px);
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid
      color-mix(in srgb, var(--summer-card-border) 72%, transparent);
    border-radius: 12px;
    background: color-mix(
      in srgb,
      var(--summer-card-bg-soft) 94%,
      transparent
    );
    box-shadow: 0 10px 26px rgba(100, 54, 32, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0.16s ease;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.scroll_navi .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.user-scrolled .container,
  :is(.summer.force-mobile, .summer body.force-mobile):has(#pun-navlinks.scroll_navi) #pun-ulinks .container,
  :is(.summer.force-mobile, .summer body.force-mobile):has(#pun-navlinks.nav-scrolled) #pun-ulinks .container {
    position: fixed;
    top: calc(var(--summer-mobile-nav-height) + 6px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: calc(100vw - 16px);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks:hover .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks:active .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks:focus-within .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.is-open .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks.open .container {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    line-height: 1.2;
    text-align: center;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li a {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 11px 12px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--accent);
    color: var(--tab-text);
    font-family: var(--main-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: lowercase;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li a:hover,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li a:focus,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-ulinks li a:active {
    background: var(--accent2);
    color: var(--tab-text);
  }
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .topic,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .main,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post > .container,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-body,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-box,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author ul,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author li,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .author-wrap,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .wrap-resp,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links ul {
    box-sizing: border-box;
    max-width: 100%;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .main .post {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    margin: 14px auto 22px;
    padding: 0;
    overflow: visible;
    border-radius: 14px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .main .post::before,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .main .post::after {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post > .container {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px;
    overflow: visible;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post .post-author::before {
    top: -18px;
    left: 50%;
    width: 36px;
    height: 36px;
    font-size: 15px;
    z-index: 4;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld2 {
    top: -18px;
    left: 50%;
    width: 36px;
    height: 36px;
    z-index: 5;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld2 > div,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld2 > span,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld2 > a,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld2 > img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 50%;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author li {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: initial;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld6 {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    background: var(--profile-bg) center top / cover no-repeat;
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 42%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 42%,
      transparent 100%
    );
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld6 img,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld6 > div {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    filter: grayscale(0.12) sepia(0.12);
    opacity: 0.66;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-avatar img {
    display: block;
    width: 78px;
    height: 78px;
    max-width: 78px;
    max-height: 78px;
    margin: 0;
    object-fit: cover;
    border-radius: 9px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld1 .lz-text {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .wrap-resp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px 12px;
    width: 100%;
    margin: 10px 0 10px;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .wrap-resp li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    width: auto;
    white-space: nowrap;
    color: var(--prof-text);
    font: 600 12px/1 var(--main-font);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .wrap-resp .fld-name::before {
    margin-right: 3px;
    color: var(--accent);
    font-size: 13px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld3 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld3 > pers-plah,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld3 .pers-plah {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld3 img {
    display: block;
    width: 100%;
    max-height: 52px;
    object-fit: cover;
    border-radius: 10px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-online,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-last-visit,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-awards {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-body {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-box::before {
    border-radius: inherit;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: left;
    font-size: 14px;
    line-height: 1.62;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-content > p {
    margin: 0 0 1em;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-content img,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-content iframe,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-content video {
    max-width: 100%;
    height: auto;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-sig {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid
      color-mix(in srgb, var(--summer-topic-border-soft) 62%, transparent);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-sig dt {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-sig dd,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-sig p {
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid
      color-mix(in srgb, var(--summer-topic-border-soft) 58%, transparent);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links li {
    display: inline-flex;
    width: auto;
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links a {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links .profile,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links .pm,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-links .email {
    margin-right: 0;
  }
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post .post-author {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 16px 0 12px;
    padding: 22px 10px 10px;
    overflow: visible;
    border-radius: 12px;
    color: var(--prof-text);
    position: relative;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-author {
    position: absolute;
    top: 42px;
    left: 114px;
    right: 24px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    gap: 6px;
    text-align: left;
    pointer-events: auto;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-author a {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 5px 11px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.12;
    text-align: left;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-author .indOnline {
    flex: 0 0 auto;
    margin: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .author-wrap {
    display: grid;
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: 30px auto auto;
    grid-template-areas:
      "avatar empty"
      "avatar title"
      "avatar info";
    align-items: start;
    gap: 4px 12px;
    min-height: 126px;
    padding: 18px 14px 16px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-avatar {
    grid-area: avatar;
    position: relative;
    z-index: 2;
    display: block;
    width: 78px;
    height: 78px;
    padding: 0;
    margin: 0;
    align-self: start;
    justify-self: center;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-title {
    position: relative;
    z-index: 2;
    border-radius: 8px;
    text-transform: none;
    grid-area: title;
    align-self: start;
    justify-self: start;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    color: var(--prof-text);
    font: 500 13px/1.25 var(--main-font);
    text-align: left;
    text-shadow: 0 1px 7px rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld1 {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--prof-text);
    text-align: left;
    grid-area: info;
    align-self: start;
    justify-self: start;
    max-width: 100%;
    margin: 2px 0 0;
    opacity: 0.9;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .pa-fld1 .lz-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--prof-text);
    font-size: 11px;
    line-height: 1.25;
    text-shadow: 0 1px 7px rgba(255, 255, 255, 0.4);
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld3:has(.lz-name),
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld3:has(.lz-text) {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld3 .lz-name,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-author .pa-fld3 .lz-text {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post-box {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px 15px 16px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    padding-bottom: 52px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .rsp_wrap {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .rsp_wrap .post-rating,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .rsp_wrap .post-vote,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .rsp_wrap p.container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .rsp_wrap .post-rating p.container {
    min-width: 36px;
    padding: 0 8px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .rsp_wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
  }
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linkst,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linksb {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    min-height: 0;
    margin: 12px auto;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linkst .pagelink,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linksb .pagelink {
    flex: 0 1 auto;
    max-width: calc(100% - 120px);
    margin: 0;
    padding: 8px 12px;
    white-space: nowrap;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linkst .postlink,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linksb .postlink {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    text-align: right;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linkst .postlink span,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linksb .postlink span {
    display: inline-flex;
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linkst .postlink a,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .linksb .postlink a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    white-space: nowrap;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .main .post h3 {
    box-sizing: border-box;
    min-height: 0;
    margin: 0;
    padding: 11px 12px;
    overflow: visible;
    border-radius: 14px 14px 0 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 span {
    flex-wrap: wrap;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    align-items: center;
    justify-content: stretch;
    gap: 9px 12px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 a.sharelink,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 em.reportview,
  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 .copy-post-btn {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 a.permalink {
    order: 1;
    flex: 1 1 auto;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 7px 13px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 10px;
    line-height: 1.15;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 strong {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    line-height: 1;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 38px;
    max-width: 58px;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: var(--text);
    font: 400 19px/1 var(--sec-font);
    text-align: right;
    white-space: nowrap;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 strong::before {
    position: static;
    display: inline;
    margin: 0;
    content: "#";
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 .font-resizer {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    margin-top: 6px;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto auto minmax(92px, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 .font-resizer button {
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    font-size: 13px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-viewtopic .post h3 .font-resizer input.slider {
    flex: 1 1 auto;
    width: 100%;
    min-width: 92px;
    max-width: none;
    margin: 0;
  }
  .summer.force-mobile:has(body.dark),
  .summer body.force-mobile.dark {
    background-color: #160b08;
    background-image:
      linear-gradient(180deg, rgba(5, 2, 1, 0.18), rgba(8, 3, 2, 0.3)),
      url("https://forumstatic.ru/files/001c/b8/c1/83863.webp?v=1");
    background-position:
      center top,
      center top;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }

  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) {
    background-color: #160b08;
    background-image: var(--summer-body-tint), var(--base-bg);
    background-position:
      center top,
      center top;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }

  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) #pun {
    background: linear-gradient(
      180deg,
      rgba(28, 13, 9, 0.36) 0%,
      rgba(17, 8, 6, 0.52) 44%,
      rgba(10, 4, 3, 0.64) 100%
    );
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about,
  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) #pun-about {
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #pun-about p.container {
    margin-top: 12px;
    margin-bottom: -28px;
    display: block;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 170px;
    height: auto;
    margin: -1px 0 0;
    padding: 38px 16px 38px;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--summer-pun-overlay-bottom) 96%, transparent) 0,
        color-mix(in srgb, var(--summer-pun-overlay-bottom) 72%, transparent)
          28px,
        color-mix(in srgb, var(--summer-pun-overlay-bottom) 26%, transparent)
          72px,
        transparent 110px
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--summer-footer-fade) 36%, transparent) 38%,
        var(--summer-footer-fade) 100%
      ),
      var(--ftr-im) center top / cover no-repeat;
    box-shadow:
      inset 0 42px 58px
        color-mix(in srgb, var(--summer-pun-overlay-bottom) 44%, transparent),
      inset 0 -34px 50px
        color-mix(in srgb, var(--summer-pun-overlay-bottom) 66%, transparent);
    -webkit-mask-image: none;
    mask-image: none;
  }

  :is(.summer.force-mobile body.dark, .summer body.force-mobile.dark) #pun-about p.container {
    background:
      linear-gradient(
        180deg,
        rgba(10, 4, 3, 0.98) 0,
        rgba(10, 4, 3, 0.76) 30px,
        rgba(10, 4, 3, 0.28) 76px,
        transparent 112px
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--summer-footer-fade) 48%, transparent) 42%,
        var(--summer-footer-fade) 100%
      ),
      var(--ftr-im) center top / cover no-repeat;
    box-shadow:
      inset 0 46px 60px rgba(8, 3, 2, 0.72),
      inset 0 -42px 56px rgba(5, 2, 1, 0.78);
  }
  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(3, 38px);
    gap: 10px 8px;
    align-items: stretch;
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .hotkeys-trigger {
    display: none;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .button,
  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit button {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 38px;
    min-height: 38px;
    margin: 0;
    justify-content: center;
    white-space: nowrap;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .submit {
    grid-column: 1;
    grid-row: 1;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .preview {
    grid-column: 2;
    grid-row: 1;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .ks-btn-fill-profile,
  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .ks-btn-create-page,
  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .ks-btn-change-group {
    grid-row: 1;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    text-indent: -999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .ks-btn-fill-profile {
    grid-column: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f9efe4' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256Zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H287.8c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l58.8-58.8C345.6 315.7 308.2 304 267.7 304H178.3ZM445.5 287.6c-7.7-7.7-20.2-7.7-27.9 0l-94.3 94.3c-2.5 2.5-4.3 5.7-5.2 9.2l-15 60.1c-1.7 6.8 4.4 12.9 11.2 11.2l60.1-15c3.5-.9 6.7-2.7 9.2-5.2l94.3-94.3c7.7-7.7 7.7-20.2 0-27.9l-32.4-32.4Z'/%3E%3C/svg%3E");
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .ks-btn-create-page {
    grid-column: 4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23f9efe4' d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64ZM256 0V128H384L256 0ZM192 240c13.3 0 24 10.7 24 24v48h48c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V360H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h48V264c0-13.3 10.7-24 24-24Z'/%3E%3C/svg%3E");
  }

  :is(.summer.force-mobile, .summer body.force-mobile) #post-form .formsubmit .ks-btn-change-group {
    grid-column: 5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23f9efe4' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128ZM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3ZM504 312V264H456c-13.3 0-24-10.7-24-24s10.7-24 24-24h48V168c0-13.3 10.7-24 24-24s24 10.7 24 24v48h48c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v48c0 13.3-10.7 24-24 24s-24-10.7-24-24Z'/%3E%3C/svg%3E");
  }
}