/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
@import url(style_cs.1781289884.css);

/* A1.2 Early component layer moved from style_cs_new.css
-------------------------------------------------------------*/

body {
  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 !important;
  transition: all 0.7s ease-in-out;
}

.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 !important;
}
.punbb a:hover {
  color: var(--accent2);
  text-decoration: none !important;
}
#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 !important;
  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;
}
#pun-main .post-author ul {
  text-align: center;
}
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-announcement .container {
  font-size: 101%;
  font-family: 'Arial';
}
#pun-stats h2 span {
  display: none;
}
#pun td .modlist {
  display: none;
}
.lastedit {
  display: none;
}
#pun-announcement h2 {
  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 !important;
  width: 31px !important;
  height: 31px !important;
  mix-blend-mode: luminosity;
  border-radius: 4px !important;
}
.punbb .user-avatar {
  margin: 1px 10px 2px 0 !important;
  height: 30px !important;
  float: left;
  position: relative;
  width: 36px;
  grid-area: avatar;
  justify-self: end;
  align-self: start;
}

.punbb .user-avatar .isonline {
  background: #6a6a6a !important;
  animation: none !important;
  width: 7px !important;
  height: 7px !important;
  z-index: 2 !important;
}
#pun-index .tclcon a {
  display: inline-block;
  position: relative;
}
.category .container thead {
  display: none;
}
.punbb .pa-avatar img {
  max-width: 200px !important;
  margin-bottom: 0;
  margin-top: 5px;
  box-sizing: initial;
  border-radius: 4px;
}
#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(--quote);
  border: 1px solid var(--bord);
}
.button {
  font-family: var(--main-font) !important;
  background-color: #4c4c4c !important;
  font-size: 10px !important;
  margin-top: 5px !important;
  transition: all 0.5s ease-in-out 0s;
  text-transform: uppercase;
  color: #dddddd !important;
  padding: 4px 20px 5px !important;
  cursor: pointer;
  letter-spacing: 0;
  border: 1px solid #464646 !important;
}
.button:hover {
  background-color: #282828 !important;
  color: #cfccbb !important;
}
#MyBookmarks {
  width: 240px;
  background: var(--quote);
  border: 1px solid var(--bord);
}
#BookmCntToggle.default-style {
  color: #345f6b !important;
}
#MyBookmarks h2 {
  margin: 10px 0 10px 0 !important;
}
: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;
}
.punbb .post .post-author a {
  color: var(--prof-link);
  font-weight: 600;
}
.punbb .post .post-author a:hover {
  color: var(--prof-text);
}
#tags .container {
  position: absolute;
  right: 6px;
  top: 57px !important;
  background: var(--quote);
  border: 1px solid var(--bord);
  max-height: 255px;
  border-radius: 10px;
  overflow-y: auto;
  padding: 10px !important;
}
#imageupload-left input[type='button'] {
  width: auto !important;
  text-align: center;
}
#MyBookmarks h1,
#MyBookmarks h2,
.editBookmark h2 {
  position: relative;
  width: auto;
  z-index: 9999999;
  margin-left: 0 !important;
}
.punbb .post-content a {
  font-weight: bold;
  color: var(--accent);
}
.punbb .post-content a:hover {
  font-weight: bold;
  color: var(--text);
}
#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 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  flex-direction: row;
}
#form-buttons table {
  width: 100% !important;
}
#form-buttons table tr {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  padding: 0;
  justify-content: space-between;
}
#form-buttons td {
  position: relative;
  background: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  padding: 10px;
}
#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: 1s ease;
  background: var(--podform);
  border-radius: 4px;
}
#form-buttons td:hover::before {
  color: #2f3040;
}
#button-keyboard {
  display: none !important;
}

#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) !important;
  transform: none;
  transition: none;
}
.pa-online::before {
  content: 'колдует';
}
.icons-vkladka:hover::before {
  margin-top: 0 !important;
}
#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 !important;
}
.gpc-open-btn::before {
  content: '\f70e';
  font-family: 'Font Awesome 6 Pro' !important;
  font-size: 11px;
  color: var(--text);
}

td#button-smile {
  display: none;
}
.indOnline {
  width: 17px;
  height: 16px;
  display: flex;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  z-index: 0;
}
.indOnline::before {
  color: var(--tab-text);
}
.indOnline {
  background: var(--accent2);
}
.indOnline::before {
  width: 9px;
  height: 9px;
  display: block;
  font-family: var(--sec-font);
  margin-top: 3px;
  content: '*';
  position: relative;
  font-style: normal;
  font-size: 20px;
}
.indOffline {
  display: none;
}
.pa-online,
.pa-last-visit {
  display: none;
}
.banners_bottom {
  position: absolute;
  margin-top: 25px !important;
  left: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.18) 18%,
    rgba(0, 0, 0, 0.72) 52%,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.18) 18%,
    rgba(0, 0, 0, 0.72) 52%,
    #000 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.banners_bottom::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 24px;
  pointer-events: none;
}
.banners_bottom-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  will-change: transform;
  opacity: 0.7;
}

:root[data-style='summer'] body {
  background:
    var(--summer-body-tint),
    var(--base-bg) fixed top center / cover,
    #f6eadc;
}

:root[data-style='summer'][data-scheme='dark'] body,
:root[data-style='summer'] body.dark {
  background:
    var(--summer-body-tint),
    var(--base-bg) fixed top center / cover,
    #160b08 !important;
}

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* A2.2 */
.punbb * {
  margin: 0;
}

/* A2.3 */
.punbb ul,
.punbb dl,
.punbb li,
.punbb dd,
.punbb dt {
  list-style: none;
}

/* A2.4 */
.punbb img {
  border: none;
}

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
}

/* A2.6 */
.checkfield input[type='checkbox'],
.radiofield input[type='radio'] {
  margin: 0 0.3em;
}

/* A2.7 */
p[class='checkfield'] *,
div[class='checkfield'] *,
fieldset[class='radiofield'] * {
  height: 1.8em;
  vertical-align: middle;
}

/* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  position: initial !important;
}

/* A3.2 */
.punbb {
  font: normal 70% Verdana;
}

/* 3.3 */
.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);
}

/* A3.4 */
.punbb h1,
.punbb h2,
.punbb h3,
.punbb h4,
.punbb table,
.punbb th {
  font-size: 1em;
  font-weight: normal;
}

/* A3.5 */
.punbb h1 span,
.punbb legend span {
  font-size: 11px;
}

/* A3.6 */
.punbb pre {
  font:
    1.1em/140% monaco,
    'bitstream vera sans mono',
    'courier new',
    courier,
    monospace;
}

/* A3.7 */
.punbb address,
.punbb em {
  font-style: normal;
}

/* A3.8 */
.punbb .post-content em {
  font-style: italic;
}

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}

/* A3.10 */
.punbb a {
  text-decoration: underline;
}

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
}

/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#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;
}

/* A4.2 */
.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;
}

.post-content hr {
  opacity: 0.5;
  margin: 0.8em 0;
}

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 100px auto;
  width: 1100px;
  background: var(--base-bg2) repeat-y;
  position: relative;
}

/* A5.2 */
.punbb {
  float: none;
  width: auto;
  height: auto;
  margin: 0px 30px;
}

/* A5.3 */
#pun-redirect,
#pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  min-height: 100px;
}

#pun-redirect {
  border: 0 none !important;
  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-weight: 400;
  font-family: var(--main-font);
  padding: 30px 0px;
  height: auto;
  border: 0 !important;
  text-transform: lowercase;
  width: 900px;
  font-weight: 500;
  margin-top: 120px;
  color: var(--text);
}

/* A5.4 */
.punbb .section,
.punbb .main {
  margin-bottom: 1em;
}

/* A5.5 */
.punbb .category,
.punbb .post {
  margin-top: 0.4em;
}

/* A5.6 */
.punbb #pun-category1,
.punbb .toppost,
.punbb .topicpost {
  margin-top: 0;
}

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;
}

/* A5.8 */
.punbb .section,
.punbb .forum,
.punbb .formal,
.punbb .modmenu,
.punbb .info,
.punbb .category,
.punbb .post {
  border-style: none none none none;
  border-width: 0px 0px 0px 0px;
}

/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 0px;
}

/* A5.10 */
.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 0px 20px 0px;
}

#pun-main h1 {
  display: none;
}

/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

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

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  text-align: center;
  border-top: 1px dotted #707070;
  width: auto;
  margin: 20px 50px;
}

/* B1.3 */
.punbb .post-content p {
  margin: 0 0 0 0px;
  padding: 0 0 1em 0;
  line-height: 150%;
  overflow-wrap: break-word;
}

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom;
}

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
}

/* B1.6 */
.punbb .post-content .blockcode,
.punbb .post-content blockquote {
  width: 100%;
}

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
}

/* B1.8 */
.punbb .post-content .quote-box,
.punbb .post-content .code-box {
  margin: 1em 0px 1em 0px;
  padding: 0;
}

#pun.punbb .post-content .html-post-box,
.punbb .post-content .html-post-box {
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

#pun.punbb .post-content .html-content,
#pun.punbb .post-content .html-inner,
#pun.punbb .post-content iframe.html_frame,
#pun.punbb .post-content iframe[id^='html_frame'],
#pun.punbb .post-content iframe[name^='html_frame'],
.punbb .post-content .html-content,
.punbb .post-content .html-inner,
.punbb .post-content iframe.html_frame,
.punbb .post-content iframe[id^='html_frame'],
.punbb .post-content iframe[name^='html_frame'] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0;
  box-shadow: none !important;
}

#pun.punbb .post-content iframe.html_frame,
#pun.punbb .post-content iframe[id^='html_frame'],
#pun.punbb .post-content iframe[name^='html_frame'],
.punbb .post-content iframe.html_frame,
.punbb .post-content iframe[id^='html_frame'],
.punbb .post-content iframe[name^='html_frame'] {
  display: block;
  border: 0;
  color-scheme: normal;
}

body.post-content,
html.punbb,
html.punbb:root,
html.punbb > body.post-content {
  min-height: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.punbb > body.post-content {
  display: block !important;
}

body.post-content:before,
body.post-content:after,
html.punbb > body.post-content:before,
html.punbb > body.post-content:after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

body.post-content > iframe[name='iframe_test_height'],
html.punbb iframe[name='iframe_test_height'] {
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  pointer-events: none !important;
}

.post-content td {
  border-width: 1px !important;
  border-style: solid !important;
  padding: 0.4em 0.5em !important;
  overflow: hidden;
  text-align: left;
  font-size: 0.8em;
}

/* B1.9 */
.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);
}

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
}

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
}

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
}

/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.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: 0px 0px 5px !important;
  position: relative;
  padding: 0 0px;
}

/* B3.2 */
.multipage {
  margin-top: 1em;
}

/* B3.4 */
.linkst .postlink {
  text-align: right;
}

/* B3.5 */
.punbb .linksb {
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: none;
  margin-top: 10px;
}

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: auto;
  text-align: left;
}

.pagelink a {
  padding: 0 3px;
}

/* B3.7 */
.linksb .postlink {
  float: right;
  width: auto;
}

/* B3.8 */
.subscribelink {
  clear: both;
  display: flex;
  float: right;
  background: var(--quote);
  padding: 5px 15px 6px;
  border-radius: 4px;
}

/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 0em 2.3em 1.1em 2.3em;
}

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
}

/* C1.3 */
.punbb .formsubmit input,
.punbb .formsubmit a,
.punbb .formsubmit span {
  margin: 0 0.6em 0 0;
}

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0;
}

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0;
  font-size: 0;
}

/* C1.6 */
.punbb fieldset legend span {
  padding: 0;
  margin: 0;
  font-size: 0;
  font-family: var(--main-font);
  text-transform: uppercase;
}

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0;
}

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
}

/* C1.9 */
.punbb .fs-box p,
.punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;
}

/* C1.10 */
.punbb .inline .inputfield,
.punbb .inline .selectfield,
.punbb .inline .passfield {
  float: left;
  margin-right: 1em;
}

/* C1.11 */
.punbb .inline .infofield {
  clear: both;
}

/* C1.12 */
.punbb .datafield br {
  display: none;
}

/* C1.13 */
.punbb .required label,
.punbb .datafield span.input {
  font-weight: bold;
  font-family: var(--main-font);
  margin-bottom: 0;
  display: inline-flex;
  text-transform: uppercase;
}

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
}

/* C1.15 */
.punbb .areafield span.input,
.punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
}

/* C1.16 */
.punbb textarea,
.punbb .longinput input {
  width: 64%;
  margin: 0;
}

/* C1.17 */
.punbb .hashelp {
  position: relative;
}

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
}

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
}

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
}

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
}

/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  text-align: left;
  width: 45%;
}

/* C2.2 */
#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%;
}

/* C2.3 */
.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% !important;
}

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  background-color: transparent;
  width: 40%;
  text-transform: lowercase;
}

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  background-color: transparent;
  text-align: center;
  width: 30%;
}

/* C2.6 */
#pun-debug table .tcl {
  background-color: transparent;
  width: 15%;
  white-space: normal;
}

/* C2.7 */
#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: 0px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 21px;
}

#pun-index .tcl {
  width: 70%;
  position: relative;
  overflow: visible;
}

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
}

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em;
}

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 10px 0;
}

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1.5em;
}

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0;
}

* html .tclcon {
  height: 1px;
}

/* C2.14 */
#pun-index td div.tclcon {
  text-align: justify;
  position: relative;
  font-family: var(--main-font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

/* C2.15 */
.punbb div.icon {
  float: left;
  display: block;
}

#pun-messages .main .tc2 {
  text-align: center;
}

/* C3 Topics

-------------------------------------------------------------*/
#pun-title,
#pun-navlinks {
  border-color: #202021;
}

/* CS2.1 */
.punbb .container,
.punbb .post-body {
  border-color: transparent;
}

/* CS2.2 */
.punbb .section,
.punbb .forum,
.punbb .formal,
.punbb .modmenu,
.punbb .info,
.punbb .category,
.punbb .post {
  border-style: none;
  border-width: 0;
}

/* CS2.3 */
.punbb .main h1,
.punbb .main h2,
#pun-debug h2,
.punbb-admin #pun-admain h2 {
  border-color: transparent;
}

/* CS2.4 */
.punbb td,
.punbb fieldset,
#viewprofile ul,
#profilenav ul,
.punbb .post .post-body,
.post-links ul,
.post-links,
.usertable table {
  border-color: transparent;
}

/* CS2.5 */
.punbb th {
  border-color: transparent;
}

/* CS2.6 */

#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;
}

/* C3.1 */
/* C3.2 */
#pun-viewtopic .post h3 {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}

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

/* C3.3 */
.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;
}

/* C3.4 */
.punbb .post h3 strong {
  width: auto;
  order: 2;
  font-size: 14px;
  font-family: var(--sec-font);
  color: var(--text);
  font-weight: 400;
}

.punbb .post .post-author {
  --race-frame-color: transparent;
  --race-frame-w: 1px;
  --race-frame-radius: var(--radius);
  float: left;
  width: 240px;
  margin: 10px 0px 0px;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 11px;
  padding-top: 0px;
  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;
}

/* C3.6 */
.punbb .post .post-author ul,
.punbb .post .post-author p {
  padding: 0 0 10px 0;
  line-height: 160%;
}

/* C3.7 */
.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;
}

/* C3.8 */
.pa-author a {
  font-weight: 400 !important;
  letter-spacing: 0;
  background: var(--accent2);
  color: var(--tab-text) !important;
  padding: 4px 10px;
  font-size: 15px;
  border-radius: 5px 5px 0 0;
}

.pa-author a:hover {
  background: var(--dark-bord);
}

/* C3.9 */
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;
}

/* C3.11 */
.punbb .post-body {
  margin-left: 250px;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
}

/* C3.12 */
.punbb .post-box {
  padding: 10px 10px 15px 10px;
}

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em;
}

/* C3.15 */
.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;
}

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
}

/* C3.17 */
.pl-email,
.pl-website {
  float: left;
}

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
}

/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 5px 0 0;
  text-align: right;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: lowercase;
}

/* C4.2 */
.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: '';
}

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
}

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
}

div#topic-modmenu span {
  display: none;
}

/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em;
}

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
}

/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
}

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
}

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
}

/* C6.4 */
#viewprofile ul,
#profilenav ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* C6.5 */
#viewprofile h2,
#profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px 0em 14px;
}

/* C6.6 */
#viewprofile h2 span,
#profilenav h2 span {
  padding: 0 5px;
  position: relative;
}

/* C6.7 */
#viewprofile li,
#setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
}

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
}

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
}

/* C6.10 */
#viewprofile li strong,
#viewprofile li div,
#setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
}

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em;
}

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

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

#viewprofile #profile-signature p {
  padding: 1em;
}

/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal,
#pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
}

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
}

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
}

/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  border-style: none none none none;
  border-width: 0px 0px 0 0px;
}

/* D1.2 */
#pun-title h1 {
  display: block;
}

/* D1.3 */
#pun-title .container {
  border-style: none none none none;
}

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title h1 span {
  font-size: 1.5em;
}

/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: 55px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
}

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0;
}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline;
}

/* D2.4 */
#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%;
}

/* D2.5 */
#pun-pagelinks a:active,
#pun-pagelinks a:focus {
  position: relative;
  margin: 0;
}

#pun-pagelinks li a span {
  display: block;
  margin: 0 1em;
}

/* D3 Forum navigation
-------------------------------------------------------------*/
/* D3.1 */
#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: 0px;
}

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

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks {
  margin: 0;
}

/* D4.2 */
#pun-ulinks .container {
  padding: 0px;
  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;
}

/* D4.3 */
#pun-ulinks li,
#pun-ulinks li a {
  display: inline-block;
}

/* D4.4 */
#pun-ulinks li a {
  padding: 0px 6px;
}

/* D4.5 */
#pun-ulinks li.item1,
#pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0;
}

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status,
#pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
}

/* D5.2 */
#pun-status .container {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 30px;
  padding: 6px 18px;
  font-size: 11px;
  font-family: var(--main-font);
  font-weight: 400;
  letter-spacing: 0;
  height: auto;
  text-transform: none;
  margin-top: 22px;
  color: var(--sec-text);
  background: rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--quote) 68%, transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: color-mix(in srgb, var(--bord) 72%, transparent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom-color: color-mix(in srgb, var(--dark-bord) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.06);
}

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
}

#pun-status .item3.status-right {
  margin-left: auto;
}

#pun-status a {
  color: var(--accent);
  font-weight: 600;
}

#pun-status a:hover {
  color: var(--accent2);
}

#pun-status strong {
  color: var(--accent2);
}

/* D5.4 */
#pun-crumbs1 {
  font-weight: 400;
}

/* D5.5 */
#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;
}

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: 0px 0 0 0 !important;
  position: relative;
}

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  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;
}

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

/* D6.3 */
#pun-announcement .container {
  padding: 0;
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
}

/* D7 Statistics
-------------------------------------------------------------*/
#pun-stats .container {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  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;
}

/* D7.2 */
#pun-stats li.item1,
#pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
}

/* D7.3 */
#pun-stats li.item3,
#pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
}

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  text-align: justify;
}

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
}

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
}

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
}

/* D8.3 */
#pun-about {
  margin-top: 0;
  margin-bottom: 0;
}

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: center;
  line-height: 150%;
}

/* D8.5 */
#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;
}

/* D8.6 */
#pun-crumbs2 {
  font-weight: 400;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
}

/* D8.7 */
#pun-crumbs2 .container {
  font-family: var(--main-font);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  height: auto;
}

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style: none;
  border-width: 0px 0;
  position: relative;
  height: 0;
}

/* D9 Help file
-------------------------------------------------------------*/

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

/* D9.2 */

#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: none;
  border-bottom-width: 0px;
  font-size: 1.1em;
}

/* D9.3 */
#pun-help .formal p,
#pun-help .formal dd {
  margin-bottom: 1em;
}

/* D9.4 */
#pun-help .formal ul,
#pun-help .formal dl {
  padding: 0 0 0 1em;
}

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%;
}

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top;
}

/* D9.7 */
#pun-help .formal dt span {
  font:
    1.4em/120% monaco,
    'bitstream vera sans mono',
    'courier new',
    courier,
    monospace;
}

/* D9.8 */
#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;
}

.punbb th {
  font-size: 0 !important;
}

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

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

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

.pa-ip {
  font-size: 9px;
  margin-top: 5px;
}
#pun-index .category h2,
#pun-stats h2 {
  width: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 -10px 0px;
  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 !important;
}

.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: 0px;
}

#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) !important;
  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 0px 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;
  z-index: 10;
}

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

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

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

#plng {
  font-size: 10px !important;
  font-weight: 400 !important;
  margin-top: 0px !important;
  display: flex;
  align-items: center;
  transition: all 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 !important;
  position: relative;
  padding: 10px;
  font-family: var(--main-font);
}

.spoiler-box {
  padding: 0 !important;
}

#form-buttons td {
  background-image: none !important;
  position: relative;
  width: 24px;
  height: 22px;
  margin: 4px 0px 5px 0px;
  background-color: var(--podform) !important;
  border-radius: 4px;
  border: 1px solid var(--bord) !important;
}

#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: all 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);
  border: 1px solid var(--bord);
  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 !important;
  color: #383636 !important;
  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 !important;
  border-radius: 0;
  padding: 20px !important;
  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 !important;
  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 !important;
  margin: 0 !important;
}

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

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

#profile-right li strong {
  padding: 0 !important;
  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) !important;
  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: 0px;
}

.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: 0px;
  margin-left: -16px;
  /* border: 1px solid red; */
}

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

.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: all 0.7s ease-in-out 0s;
}

.bnrs div img:hover {
  opacity: 1;
  transition: all 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;
  overflow: hidden;
  border: 1px solid var(--activees-border);
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
  opacity: 0.7;
}

.activees img,
.activees2 img {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  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: 50%;
  transition: all 0.6s ease-in-out 0s;
  background: var(--activees-overlay);
  opacity: 0.72;
  mix-blend-mode: multiply;
}

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

.activees div:hover:after,
.activees2 div:hover:after {
  opacity: 0.88;
  background: var(--activees-overlay-hover);
}

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

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

.punbb .post-rating a {
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  color: var(--text) !important;
  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: all 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 !important;
  background: var(--bord);
  align-self: stretch;
  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;
}

.kindred-info {
  position: absolute;
  /* border: 1px solid red; */
  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: 100%;
  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: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  margin: 0 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) !important;
  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: 0px;
  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;
  /padding: 4px !important;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 22px !important;
  height: 22px !important;
}

#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;
}

.author-wrap {
  margin: 0px 10px 0px;
  border-radius: var(--radius);
  padding: 5px;
  background: var(--kndr-img) center/cover;
  border: 1px solid var(--dark-bord);
}

.pa-fld1 {
  border-top: 1px solid var(--dark-bord);
  margin: 10px -5px 0;
  padding: 10px;
  background: linear-gradient(180deg, #0000004d, transparent);
}

.pa-fld2 race {
  background: var(--accent2);
  padding: 2px 10px 5px;
  border-radius: 0 0 5px 5px;
}

.pa-fld1 .lz-name {
  font-family: var(--sec-font);
  font-size: 13px;
  text-transform: uppercase;
}

.pa-fld1 .lz-name a {
  font-weight: 400 !important;
}

.pa-fld1 .lz-text {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  margin: 5px 5px 0;
}

.pers-plah {
  display: grid;
  width: 220px;
  height: 32px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  color: var(--accent);
  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 !important;
}

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;
}

.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 !important;
  top: 42px;
  left: auto;
  margin-left: -30px;
  width: 1100px;
}

#pun-ulinks.scroll_navi .container {
  padding: 0px;
  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;
  margin: 0;
  width: calc(100% + 60px);
  z-index: 9;
  background: var(--profile-bg);
  border: 0;
  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 {
  padding: 0px;
  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 {
  margin: 0;
  margin: 0;
  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;
}

/*** МОБИЛЬНЫЙ ***/
@media screen and (max-width: 540px) {
  html.force-mobile,
  body.force-mobile,
  .force-mobile #pun,
  .force-mobile .punbb {
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    -webkit-text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
    margin: auto;
  }

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

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

  .force-mobile #pun {
    max-width: 540px;
    padding: 0 !important;
    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' !important;
    font-size: 25px !important;
    color: var(--accent);
  }

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

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

  .force-mobile #pun-ulinks li a {
    display: block !important;
    margin: 0 !important;
    color: var(--navi-link);
    font-family: var(--main-font) !important;
    font-size: 12px !important;
    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 !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
  }

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

  .force-mobile #pun-ulinks ul {
    display: none;
    z-index: 1140;
    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 !important;
  }

  .force-mobile #pun-navlinks .container li {
    padding: 0 1px !important;
    margin: 0 !important;
    line-height: 19px !important;
  }
  #navrules,
  #navextra2,
  #navextra3,
  #navextra4,
  #navextra5,
  #navextra6,
  #navextra7,
  #navextra8,
  #navextra9,
  #navextra10 {
    display: none !important;
  }
  #pun-navlinks .container li a {
    display: inline-block !important;
    padding: 0 !important;
    font-size: 16px;
  }
  .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-status span {
    white-space: break-spaces;
    margin-right: 0.5em;
  }

  .force-mobile #pun-status .item3.status-right {
    display: none !important;
  }

  .force-mobile #pun-status {
    margin-top: 8px;
  }

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

  .force-mobile .kindred-quote {
    position: absolute;
    /* border: 1px solid red; */
    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: 50%;
    top: 152px;
    box-sizing: border-box;
    width: calc(100% - 40px);
    height: 90px;
    padding: 8px 10px;
    text-align: left;
    border-radius: 10px;
    overflow: hidden;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--quote) 58%, transparent);
    border: 1px solid color-mix(in srgb, var(--bord) 50%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: none;
  }

  .force-mobile .knews text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    margin: 0;
    padding-right: 6px;
    overflow: hidden;
    font-family: var(--main-font);
    pointer-events: none;
  }

  .force-mobile .knews text p {
    margin: 0;
    padding: 0;
    line-height: 1.35;
  }

  .force-mobile .knews text p date {
    display: inline-block;
    margin-right: 4px;
    white-space: nowrap;
  }

  .force-mobile .knews text p a {
    overflow-wrap: anywhere;
    pointer-events: auto;
  }

  .force-mobile #pun-status .container {
    text-align: left !important;
    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;
    font-family: var(--main-font) !important;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
    border: 1px solid var(--bord);
    border-width: 1px 0;
    border-radius: 0;
  }

  .force-mobile #pun-status .container * {
    font-family: var(--main-font) !important;
  }

  .force-mobile #pun-crumbs1 p.container,
  .force-mobile #pun-crumbs2 p.container {
    text-align: left !important;
    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 !important;
  }

  .force-mobile #pun-viewtopic .linkst {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 0 10px 10px !important;
  }

  .force-mobile .punbb .linksb {
    margin: 0 10px;
  }

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

  .force-mobile .forum td.tcr {
    margin-bottom: 0;
    display: block;
    text-align: right !important;
    width: 100% !important;
    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 !important;
    margin: 0;
    border-width: 1px 0;
    border-radius: 0;
  }
  .force-mobile #pun-stats li.item1,
  .force-mobile #pun-stats li.item2 {
    float: none !important;
    margin-bottom: 0px;
  }
  .force-mobile #pun-stats li.item3,
  .force-mobile #pun-stats li.item4 {
    text-align: left !important;
    margin-bottom: 0px;
  }

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

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

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

  .force-mobile #pun-viewtopic .post > .container {
    margin-top: 18px;
  }

  .force-mobile #pun-viewtopic .post-body {
    clear: both;
    margin-top: 14px;
  }

  .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 .linksb {
    gap: 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 12px !important;
  }

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

  .force-mobile .pa-avatar img {
    object-fit: cover;
    width: 60px !important;
    height: 60px !important;
  }
  .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 !important;
  }
  .force-mobile .punbb .post-body {
    margin-left: 0px;
  }

  .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,
  #pun-viewforum .main .tcl {
    width: 100% !important;
    padding: 0px;
  }
  .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 !important;
    width: 0 !important;
  }

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

  .force-mobile #post-form .formsubmit {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 0;
  }

  .force-mobile #pun-viewtopic #post-form .formsubmit {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 14px 10px 0;
  }

  .force-mobile #post-form .formsubmit .submit,
  .force-mobile #post-form .formsubmit .preview {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .force-mobile #post-form .formsubmit .button,
  .force-mobile #post-form .formsubmit button {
    height: 38px;
    min-height: 38px;
    margin: 0 !important;
    justify-content: center;
    white-space: nowrap;
  }

  .force-mobile #post-form .formsubmit .ks-btn-fill-profile,
  .force-mobile #post-form .formsubmit .ks-btn-create-page,
  .force-mobile #post-form .formsubmit .ks-btn-change-group {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    font-size: 0 !important;
    text-indent: -999px;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: 16px 16px !important;
  }

  .force-mobile #post-form .formsubmit .ks-btn-fill-profile {
    margin-left: 0 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff6ec' d='M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256m-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h258.1c-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.8c-31.4-19.9-68.8-31.6-109.3-31.6zm267.2-16.4c-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.9z'/%3E%3C/svg%3E") !important;
  }

  .force-mobile #post-form .formsubmit .ks-btn-create-page {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff6ec' d='M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0zm192 0v128h128zm-64 240c13.3 0 24 10.7 24 24v48h48c13.3 0 24 10.7 24 24s-10.7 24-24 24h-48v48c0 13.3-10.7 24-24 24s-24-10.7-24-24v-48h-48c-13.3 0-24-10.7-24-24s10.7-24 24-24h48v-48c0-13.3 10.7-24 24-24'/%3E%3C/svg%3E") !important;
  }

  .force-mobile #post-form .formsubmit .ks-btn-change-group {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23fff6ec' d='M96 128a128 128 0 1 1 256 0 128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M504 312v-48h-48c-13.3 0-24-10.7-24-24s10.7-24 24-24h48v-48c0-13.3 10.7-24 24-24s24 10.7 24 24v48h48c13.3 0 24 10.7 24 24s-10.7 24-24 24h-48v48c0 13.3-10.7 24-24 24s-24-10.7-24-24'/%3E%3C/svg%3E") !important;
  }

  .force-mobile #form-buttons td {
    padding: 0 5px !important;
    display: inline-block;
    width: 31px;
  }

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

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

  .force-mobile #form-buttons td {
    background-image: none !important;
    display: inline-block;
    position: relative;
    width: 27px;
    height: 27px;
    margin: 0px 0px 0px 0px !important;
  }
  .force-mobile #profilenav li {
    padding: 7px 15px !important;
    display: inline-block;
  }
  .force-mobile #profilenav {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

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

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

  .force-mobile #viewprofile h2,
  .force-mobile #profilenav h2 {
    margin: 0 0 10px 0 !important;
  }
  .force-mobile #viewprofile ul,
  .force-mobile #profilenav ul {
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    border: none !important;
    background-color: transparent !important;
  }
  .force-mobile .punbb tbody.hasicon td.tcl {
    padding: 0 !important;
    display: block;
    width: 100% !important;
  }
  .force-mobile #pun-messages .tclcon {
    padding: 10px 0 10px 17px !important;
  }

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

  .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 !important;
  }
  .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,
  #pun-searchtopics .main .tc2 {
    width: 15%;
  }

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

  .force-mobile #tags .container {
    position: absolute;
    right: 0px;
    top: 83px !important;
    left: 0px;
    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: 0px 0px 10px 0px;
    display: none;
  }
  .force-mobile .post-img-Sp {
    width: 140px;
    margin: 10px 6px 0 !important;
    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 !important;
    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 !important;
    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: 0px;
    letter-spacing: 0.5px;
    font-weight: 400;
  }

  .force-mobile .punbb .user-avatar {
    margin: 1px 0px 2px 20px !important;
    float: right !important;
    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: 0px;
  }

  .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: 0px;
    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-viewtopic .post h3,
  .force-mobile #pun-viewtopic .post h3 span {
    box-sizing: border-box;
    max-width: 100%;
  }

  .force-mobile #pun-viewtopic .post h3 span {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    padding: 0 10px;
    overflow: visible;
  }

  .force-mobile #pun-viewtopic .post h3 .font-resizer {
    order: 4;
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100% - 20px);
    min-width: 0;
    margin: 4px 0 0;
    padding: 4px 6px;
    gap: 5px;
    overflow: hidden;
    border: 1px solid var(--bord);
    border-radius: 9px;
    background: color-mix(in srgb, var(--quote) 62%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .force-mobile #pun-viewtopic .post h3 .font-resizer button {
    flex: 0 0 auto;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border-radius: 6px;
  }

  .force-mobile #pun-viewtopic .post h3 .font-resizer .slider {
    flex: 0 0 78px;
    width: 78px;
    min-width: 0;
    max-width: 26vw;
  }

  .force-mobile #pun-viewtopic .post h3 a.permalink {
    order: 1;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .force-mobile #pun-viewtopic .post h3 strong {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 4px;
    color: var(--text);
  }

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

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

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

  .force-mobile #pun-navlinks .container li a {
    /*display: inline-block !important;*/
    padding: 0 !important;
    font-family: var(--sec-font);
    font-size: 20px;
  }

  .force-mobile #pun-navlinks .container li a:before {
    font-family: 'Font Awesome 6 Pro', FontAwesome, sans-serif;
    font-style: normal;
  }
  .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-navlinks .container li a span {
    font-size: 0 !important;
  }
  .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 !important;
    padding: 4px 10px;
  }

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

  .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 !important;
    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 !important;
    flex-wrap: wrap !important;
  }

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

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

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

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

  .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 !important;
    padding: 0 !important;
  }

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

  .force-mobile #pun-admain fieldset {
    border-color: transparent;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
  }

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

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

  .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;
  }
  .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: 1120;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--profile-bg) center/cover;
    height: 57px;
    border-radius: 0;
    margin: 0 !important;
  }

  .force-mobile #pun-navlinks.nav-scrolled {
    z-index: 1120;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 !important;
  }

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

  .force-mobile .activees,
  .force-mobile .activees2 {
    height: 45px;
    width: auto;
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0 16px;
    /* border: 1px solid red; */
    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;
    margin: 0 !important;
    width: 100%;
    z-index: 1120;
    background: var(--navi-bg);
    border: 0;
    height: 50px;
    border-radius: 0;
    backdrop-filter: none;
    left: 0;
    right: 0;
    position: fixed !important;
    top: 0;
    border: 1px solid var(--dark-bord);
    border-width: 1px;
  }

  .force-mobile #pun-title table::before {
    content: 'kindred spirits';
  }

  .force-mobile .forum-name span {
    text-shadow: 0px 0px 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%;
  }
  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;
  }

  .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 .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 .activees::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;
    border: none;
    display: flex;
    gap: 10px;
    padding: 5px 10px !important;
    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 !important;
    margin: 33px 0 0 0 !important;
  }

  .force-mobile .pa-author {
    margin: 21px 0 0 103px;
    font-size: 20px;
    display: flex;
    gap: 20px;
    position: absolute;
    /* border: red 1px solid; */
  }

  .force-mobile .pa-author a {
    border-radius: var(--radius);
  }

  .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: 1;
  }

  .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 {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--dark-bord);
  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__close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--dark-bord);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  z-index: 1600;
  backdrop-filter: blur(18px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

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

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

.settings-menu__close i {
  color: #fff;
  font-size: 20px;
}

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

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

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

.settings-menu__toggle i {
  color: var(--tab-text);
  font-size: 20px;
}

.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 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.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 {
  background: var(--accent2);
}

.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 {
  background: var(--sec-text);
  border: 1px solid var(--dark-bord);
}

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

.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 {
  list-style: none;
  padding-left: 14px;
  margin: 6px 0 0;
  display: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

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

@media (max-width: 992px) {
  .settings-menu {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .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, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .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 !important;
  }
}

/*** Уведомления ***/
#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) !important;
  color: var(--tab-text) !important;
  left: -22px;
}

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

/*** Уведомления ***/

.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);
}

/* Карточки персонажей */

h2.chars_title {
  font-family: var(--sec-font);
  font-size: 16px !important;
  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) !important;
  background: var(--quote) !important;
  border-radius: 5px !important;
  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) !important;
  box-shadow: none !important;
}

.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) !important;
  border: 1px solid var(--bord) !important;
}

.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);
}

/* Матчасть */
.custom_tag.kindredaca,
.kindred-aca {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  margin: 18px 0;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: 6px;
  font-family: var(--main-font);
  font-size: 14px;
  line-height: 1.65;
}

.custom_tag.kindredaca p,
.kindred-aca p {
  margin: 0;
  padding: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
}

.custom_tag.kahead,
.ka-head {
  box-sizing: border-box;
  min-height: 128px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--tab-text);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.14)),
    var(--kahead) center/cover no-repeat;
  border-radius: 5px 5px 0 0;
}

.custom_tag.kahead > p,
.ka-head > p {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--sec-font) !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.custom_tag.kaheadtitle,
.ka-head span {
  box-sizing: border-box;
  max-width: 100%;
  padding: 3px 12px;
  color: var(--tab-text);
  background: var(--accent2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font: 700 11px/1.35 var(--main-font);
  text-align: center;
  text-transform: uppercase;
}

.custom_tag.kaheadtitle p {
  font: inherit !important;
}

.custom_tag.katext,
.ka-text {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
  background: var(--quote);
  font-family: var(--main-font);
}

.custom_tag.katexttext,
.ka-text text {
  box-sizing: border-box;
  padding: 14px 18px;
  color: var(--text);
  background: var(--htm-clr);
  border: 1px solid var(--bord);
  border-radius: 5px;
  font-size: 14px !important;
  line-height: 1.7;
}

.custom_tag.katexttext p + p,
.ka-text text p + p {
  margin-top: 0.85em;
}

.force-mobile .custom_tag.kindredaca,
.force-mobile .kindred-aca {
  margin: 14px 0;
  border-radius: 5px;
}

.force-mobile .custom_tag.kahead,
.force-mobile .ka-head {
  min-height: 96px;
  padding: 18px 14px;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.16)),
    var(--mob-head) center/cover no-repeat;
}

.force-mobile .custom_tag.kahead > p,
.force-mobile .ka-head > p {
  font-size: 28px !important;
}

.force-mobile .custom_tag.kaheadtitle,
.force-mobile .ka-head span {
  padding: 2px 9px;
  font-size: 10px;
}

.force-mobile .custom_tag.katext,
.force-mobile .ka-text {
  gap: 8px;
  padding: 12px;
}

.force-mobile .custom_tag.katexttext,
.force-mobile .ka-text text {
  padding: 12px 13px;
  font-size: 13px !important;
  line-height: 1.62;
}

/* Заявка на персонажа */
.custom_tag.offer {
  box-sizing: border-box;
  max-width: 920px;
  margin: 18px auto;
  padding: 18px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: 6px;
  font-family: var(--main-font);
  font-size: 14px;
  line-height: 1.66;
}

.custom_tag.offer *,
.custom_tag.offer *::before,
.custom_tag.offer *::after {
  box-sizing: border-box;
}

.custom_tag.offer p {
  margin: 0;
  padding: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
}

.custom_tag.offer .offertitle {
  min-height: 112px;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tab-text);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.12)),
    var(--head) center/cover no-repeat;
  border-radius: 5px;
}

.custom_tag.offer .offertitle p {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--sec-font) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.custom_tag.offer .offergallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.custom_tag.offer .offerimg {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.custom_tag.offer .offerimg p,
.custom_tag.offer .offerimg a {
  display: block;
  width: 100%;
  height: 100%;
}

.custom_tag.offer .offerimg img,
.custom_tag.offer .offerimg .postimg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
  border: 0 !important;
  border-radius: 0 !important;
}

.custom_tag.offer .offeridentity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.custom_tag.offer .offerface,
.custom_tag.offer .offername,
.custom_tag.offer .offerrace,
.custom_tag.offer .offergift,
.custom_tag.offer .offerabout,
.custom_tag.offer .offerextra {
  min-width: 0;
  color: var(--text);
  background: var(--htm-clr);
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.custom_tag.offer .offerface,
.custom_tag.offer .offername,
.custom_tag.offer .offerrace {
  padding: 12px 14px;
}

.custom_tag.offer .offergift,
.custom_tag.offer .offerabout,
.custom_tag.offer .offerextra {
  padding: 16px 18px;
}

.custom_tag.offer .offerface::before,
.custom_tag.offer .offername::before,
.custom_tag.offer .offerrace::before,
.custom_tag.offer .offergift::before,
.custom_tag.offer .offerabout::before,
.custom_tag.offer .offerextra::before {
  display: block;
  width: fit-content;
  margin: 0 0 8px;
  padding: 2px 9px;
  color: var(--tab-text);
  background: var(--accent2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font: 700 10px/1.35 var(--main-font);
  text-transform: uppercase;
}

.custom_tag.offer .offerface::before {
  content: 'внешность';
}

.custom_tag.offer .offername::before {
  content: 'имя и возраст';
}

.custom_tag.offer .offerrace::before {
  content: 'раса';
}

.custom_tag.offer .offergift::before {
  content: 'дар';
}

.custom_tag.offer .offerabout::before {
  content: 'о персонаже';
}

.custom_tag.offer .offerextra::before {
  content: 'дополнительно';
}

.custom_tag.offer .offerface p,
.custom_tag.offer .offername p,
.custom_tag.offer .offerrace p {
  color: var(--sec-text);
}

.custom_tag.offer .offergift p,
.custom_tag.offer .offerabout p,
.custom_tag.offer .offerextra p {
  overflow-wrap: anywhere;
}

.custom_tag.offer .offergift a,
.custom_tag.offer .offerabout a,
.custom_tag.offer .offerextra a {
  color: var(--accent);
  font-weight: 700;
}

.custom_tag.offer .offergift a:hover,
.custom_tag.offer .offerabout a:hover,
.custom_tag.offer .offerextra a:hover {
  color: var(--accent2);
}

.force-mobile .custom_tag.offer {
  width: 100%;
  margin: 14px 0;
  padding: 12px;
  gap: 9px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.6;
}

.force-mobile .custom_tag.offer .offertitle {
  min-height: 92px;
  padding: 18px 12px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.14)),
    var(--mob-head) center/cover no-repeat;
}

.force-mobile .custom_tag.offer .offertitle p {
  font-size: 28px !important;
}

.force-mobile .custom_tag.offer .offergallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.force-mobile .custom_tag.offer .offeridentity {
  grid-template-columns: 1fr;
  gap: 7px;
}

.force-mobile .custom_tag.offer .offerface,
.force-mobile .custom_tag.offer .offername,
.force-mobile .custom_tag.offer .offerrace,
.force-mobile .custom_tag.offer .offergift,
.force-mobile .custom_tag.offer .offerabout,
.force-mobile .custom_tag.offer .offerextra {
  padding: 12px 13px;
}

.force-mobile .custom_tag.offer .offerface::before,
.force-mobile .custom_tag.offer .offername::before,
.force-mobile .custom_tag.offer .offerrace::before,
.force-mobile .custom_tag.offer .offergift::before,
.force-mobile .custom_tag.offer .offerabout::before,
.force-mobile .custom_tag.offer .offerextra::before {
  margin-bottom: 6px;
  padding: 2px 8px;
  font-size: 9px;
}

/* Эпизод хронологии */
.custom_tag.chrono-episode {
  box-sizing: border-box;
  max-width: 920px;
  margin: 18px auto;
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: 6px;
  font-family: var(--main-font);
  font-size: 14px;
  line-height: 1.64;
}

.custom_tag.chrono-episode *,
.custom_tag.chrono-episode *::before,
.custom_tag.chrono-episode *::after {
  box-sizing: border-box;
}

.custom_tag.chrono-episode p {
  margin: 0;
  padding: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
}

.custom_tag.chrono-episode .chrono-display {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    text-align: center;
    border-radius: 5px;
}

.custom_tag.chrono-episode .chrono-display p {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--sec-font) !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.46);
}

.custom_tag.chrono-episode .chrono-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    'image image'
    'date location'
    'members members';
  gap: 10px;
  align-items: stretch;
}

.custom_tag.chrono-episode .chrono-images {
  grid-area: image;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.custom_tag.chrono-episode .chrono-images p,
.custom_tag.chrono-episode .chrono-images a {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
}

.custom_tag.chrono-episode .chrono-images img,
.custom_tag.chrono-episode .chrono-images .postimg {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center;
  background: var(--podform);
  border: 0 !important;
  border-radius: 3px !important;
}

.custom_tag.chrono-episode .chrono-date {
  grid-area: date;
}

.custom_tag.chrono-episode .chrono-location {
  grid-area: location;
}

.custom_tag.chrono-episode .chrono-members {
  grid-area: members;
}

.custom_tag.chrono-episode .chrono-date,
.custom_tag.chrono-episode .chrono-location,
.custom_tag.chrono-episode .chrono-members,
.custom_tag.chrono-episode .chrono-announce {
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  color: var(--text);
  background: var(--htm-clr);
  border: 1px solid var(--bord);
  border-radius: 5px;
}

.custom_tag.chrono-episode .chrono-date::before,
.custom_tag.chrono-episode .chrono-location::before,
.custom_tag.chrono-episode .chrono-members::before,
.custom_tag.chrono-episode .chrono-announce::before {
  display: block;
  width: fit-content;
  padding: 2px 9px;
  color: var(--tab-text);
  background: var(--accent2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font: 700 10px/1.35 var(--main-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.custom_tag.chrono-episode .chrono-date::before {
  content: 'дата';
}

.custom_tag.chrono-episode .chrono-location::before {
  content: 'локация';
}

.custom_tag.chrono-episode .chrono-members::before {
  content: 'участники';
}

.custom_tag.chrono-episode .chrono-announce::before {
  content: 'сюжет';
}

.custom_tag.chrono-episode .chrono-date p,
.custom_tag.chrono-episode .chrono-location p,
.custom_tag.chrono-episode .chrono-member p {
  color: var(--sec-text);
}

.custom_tag.chrono-episode .chrono-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.custom_tag.chrono-episode .chrono-members::before {
  grid-column: 1 / -1;
}

.custom_tag.chrono-episode .chrono-member {
  min-width: 0;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--quote) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--bord) 72%, transparent);
  border-radius: 4px;
}

.custom_tag.chrono-episode .chrono-announce {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--quote) 84%, var(--htm-clr));
}

.custom_tag.chrono-episode .chrono-announce p {
  overflow-wrap: anywhere;
}

.custom_tag.chrono-episode a {
  color: var(--accent);
  font-weight: 700;
}

.custom_tag.chrono-episode a:hover {
  color: var(--accent2);
}

.custom_tag.chrono-episode .chrono-serial {
  display: none;
}

@media (max-width: 760px) {
  .custom_tag.chrono-episode {
    margin: 14px 0;
    padding: 12px;
    gap: 9px;
    font-size: 13px;
    line-height: 1.6;
  }

  .custom_tag.chrono-episode .chrono-display {
    min-height: 92px;
    padding: 18px 12px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.14)),
      var(--mob-head) center/cover no-repeat;
  }

  .custom_tag.chrono-episode .chrono-display p {
    font-size: 28px !important;
  }

  .custom_tag.chrono-episode .chrono-data {
    grid-template-columns: 1fr;
    grid-template-areas:
      'image'
      'date'
      'location'
      'members';
    gap: 8px;
  }

  .custom_tag.chrono-episode .chrono-images {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 6px;
    gap: 6px;
  }

  .custom_tag.chrono-episode .chrono-date,
  .custom_tag.chrono-episode .chrono-location,
  .custom_tag.chrono-episode .chrono-members,
  .custom_tag.chrono-episode .chrono-announce {
    padding: 12px 13px;
  }

  .custom_tag.chrono-episode .chrono-members {
    grid-template-columns: 1fr;
  }

  .custom_tag.chrono-episode .chrono-date::before,
  .custom_tag.chrono-episode .chrono-location::before,
  .custom_tag.chrono-episode .chrono-members::before,
  .custom_tag.chrono-episode .chrono-announce::before {
    padding: 2px 8px;
    font-size: 9px;
  }
}

.force-mobile .custom_tag.chrono-episode {
  width: 100%;
  margin: 14px 0;
  padding: 12px;
  gap: 9px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.6;
}

.force-mobile .custom_tag.chrono-episode .chrono-display {
  min-height: 92px;
  padding: 18px 12px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.14)),
    var(--mob-head) center/cover no-repeat;
}

.force-mobile .custom_tag.chrono-episode .chrono-display p {
  font-size: 28px !important;
}

.force-mobile .custom_tag.chrono-episode .chrono-data {
  grid-template-columns: 1fr;
  grid-template-areas:
    'image'
    'date'
    'location'
    'members';
  gap: 8px;
}

.force-mobile .custom_tag.chrono-episode .chrono-images {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 6px;
  gap: 6px;
}

.force-mobile .custom_tag.chrono-episode .chrono-date,
.force-mobile .custom_tag.chrono-episode .chrono-location,
.force-mobile .custom_tag.chrono-episode .chrono-members,
.force-mobile .custom_tag.chrono-episode .chrono-announce {
  padding: 12px 13px;
}

.force-mobile .custom_tag.chrono-episode .chrono-members {
  grid-template-columns: 1fr;
}

.force-mobile .custom_tag.chrono-episode .chrono-date::before,
.force-mobile .custom_tag.chrono-episode .chrono-location::before,
.force-mobile .custom_tag.chrono-episode .chrono-members::before,
.force-mobile .custom_tag.chrono-episode .chrono-announce::before {
  padding: 2px 8px;
  font-size: 9px;
}

/* Анкетное */
.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 !important;
  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 {
  flex: 1;
}
.custom_tag.char-card .char-age {
  flex: 1;
}
.custom_tag.char-card .char-gender {
  flex: 1;
}
.custom_tag.char-card .char-race {
  flex: 1;
}
.custom_tag.char-card .char-pair {
  flex: 1;
}
.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 {
  font-weight: 400;
  flex: 1;
}
.custom_tag.char-card .char-gift-desc {
  font-weight: 400;
  flex: 1;
}

/* Крупные блоки */
.custom_tag.char-card .char-appearance {
  grid-column: 1 / 3;
  grid-row: 9;
}
.custom_tag.char-card .char-bio {
  grid-column: 1 / 3;
  grid-row: 10;
}
.custom_tag.char-card .char-misc {
  grid-column: 1 / 3;
  grid-row: 11;
}

/* Заголовки полей через ::before */
.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(--accent);
  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 !important;
}
.custom_tag.char-card .char-gift-desc br {
  content: '';
}

.custom_tag.custom_tag_charpt.char-field.personal-text {
  display: none;
}

/* Адаптив */
@media (max-width: 860px) {
  .custom_tag.char-card {
    --photo-w: 160px;
    grid-template-columns: var(--photo-w) 1fr;
  }
  .custom_tag.char-card .char-image {
    grid-row: 1 / span 6;
  }
  .custom_tag.char-card .char-name-ru,
  .custom_tag.char-card .char-name-en {
    grid-column: 2;
  }
  .custom_tag.char-card .char-face-proto {
    grid-column: 2;
    grid-row: auto;
  }
  .custom_tag.char-card .char-birthdate {
    grid-column: 2;
  }
  .custom_tag.char-card .char-age {
    grid-column: 2;
  }
  .custom_tag.char-card .char-gender {
    grid-column: 2;
  }
  .custom_tag.char-card .char-race {
    grid-column: 2;
  }
  .custom_tag.char-card .char-pair {
    grid-column: 2;
  }
  .custom_tag.char-card .char-bondlevel {
    grid-column: 2;
  }
  .custom_tag.char-card .char-occupation {
    grid-column: 1 / 3;
  }
  .custom_tag.char-card .char-gift {
    grid-column: 1 / 3;
  }
  .custom_tag.char-card .char-gift-desc {
    grid-column: 1 / 3;
  }
  .custom_tag.char-card .char-appearance,
  .custom_tag.char-card .char-bio,
  .custom_tag.char-card .char-misc {
    grid-column: 1 / 3;
  }
}

/* Î÷åíü óçêî — âñ¸ â îäíó êîëîíêó */
@media (max-width: 540px) {
  .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(--tab-text);
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
}

/*Горячие клавиши*/
.hotkeys-trigger {
  display: inline-flex;
  margin: 0 5px;
  font-size: 10px;
  background: #ececec;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  background-color: #4c4c4c !important;
  border: 1px solid #464646 !important;
  text-transform: uppercase;
  color: #ddddde !important;
  padding: 6px 20px 6px !important;
}

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

#post-form .formsubmit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#post-form .formsubmit > input,
#post-form .formsubmit > button,
#post-form .formsubmit > a,
#post-form .formsubmit > span {
  margin: 0 !important;
}

#post-form .formsubmit .ks-btn-fill-profile {
  margin-left: auto !important;
}

#post-form .formsubmit .ks-btn-fill-profile,
#post-form .formsubmit .ks-btn-create-page,
#post-form .formsubmit .ks-btn-change-group {
  flex: 0 0 auto;
}

.force-mobile .hotkeys-trigger {
  display: none !important;
}

.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) {
  .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: all 0.2s ease;
  }

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

  input:checked + .minimal-switch {
    background: var(--dark-bord);
  }
  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;
}

/* Modal windows */
body.mask-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

.dice-modal,
#mask-overlay,
#mask-overlay *,
.character-modal,
.character,
.character * {
  box-sizing: border-box;
}

@keyframes ks-modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ks-modal-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dice-modal {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  padding: 22px;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 22px 58px rgb(0 0 0 / 28%);
  font: 400 13px/1.45 var(--main-font);
  animation: ks-modal-rise-in 0.18s ease both;
}

.dice-modal h3 {
  margin: 0 36px 18px 0;
  color: var(--accent2);
  font: 400 24px/1 var(--sec-font);
}

.dice-modal label {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--sec-text);
  font-weight: 700;
}

.dice-modal input[type='number'],
.dice-modal input[type='text'] {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  font: 700 14px/1 var(--main-font);
  outline: none;
}

.dice-modal input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.dice-modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.dice-modal button,
.mask-action-btn,
.mask-close-btn,
.character button,
.character .cm-link {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.dice-modal button {
  min-height: 36px;
  padding: 0 14px;
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  cursor: pointer;
  font: 800 11px/1.2 var(--main-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dice-modal button:hover {
  transform: translateY(-1px);
}

.dice-modal button:active {
  transform: translateY(0);
}

#dice-ok,
.mask-action-btn:not([data-action='cancel']) {
  color: var(--tab-text);
  background: var(--accent);
  border-color: var(--accent);
}

#dice-cancel,
.mask-action-btn[data-action='cancel'] {
  color: var(--text);
  background: var(--podform);
}

#dice-cancel:hover,
.mask-action-btn[data-action='cancel']:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}

#dice-ok:hover,
.dice-modal .modal-close:hover,
.mask-action-btn:not([data-action='cancel']):hover,
.mask-close-btn:hover,
.mask-close-btn:focus-visible {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.dice-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  color: var(--sec-text);
  background: var(--podform);
  border-radius: 50%;
  font: 700 18px/1 var(--main-font);
  letter-spacing: 0;
  text-transform: none;
}

.dice-modal .modal-close:focus-visible,
.dice-modal button:focus-visible,
.mask-action-btn:focus-visible,
.mask-template-btn:focus-visible,
.mask-delete-btn:focus-visible,
.mask-move-up:focus-visible,
.mask-move-down:focus-visible,
#mask-dialog :where(input, select, textarea, button):focus-visible,
.character :where(button, input, select, textarea, summary, a):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

#mask-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 26px);
  overflow: hidden auto;
  color: var(--text);
  background: rgb(0 0 0 / 58%);
  -webkit-backdrop-filter: blur(7px) saturate(1.02);
  backdrop-filter: blur(7px) saturate(1.02);
  overscroll-behavior: contain;
  animation: ks-modal-fade-in 0.18s ease both;
}

#mask-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 32px));
  max-height: min(88dvh, 860px);
  overflow: hidden;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: calc(var(--radius) + 14px);
  box-shadow: 0 24px 72px rgb(0 0 0 / 34%);
  font: 400 12px/1.45 var(--main-font);
  animation: ks-modal-rise-in 0.2s ease both;
}

.mask-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 16px;
  background: color-mix(in srgb, var(--podform) 72%, var(--quote));
  border-bottom: 1px solid var(--bord);
}

.mask-header h3 {
  margin: 0;
  color: var(--accent2);
  font: 400 clamp(22px, 3vw, 34px)/1 var(--sec-font);
}

.mask-header p {
  max-width: 700px;
  margin: 7px 0 0;
  color: var(--sec-text);
  font: 500 12px/1.45 var(--main-font);
}

.mask-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font: 800 9px/1 var(--main-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mask-close-btn {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--sec-text);
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: 50%;
  cursor: pointer;
  font: 400 24px/1 var(--main-font);
}

.mask-content {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(340px, 1.25fr) minmax(220px, 0.85fr);
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--quote) 86%, var(--podform));
}

.mask-preview-panel,
.mask-form-panel,
.mask-storage-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: calc(var(--radius) + 6px);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.mask-preview-panel,
.mask-form-panel {
  padding: 14px;
}

.mask-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mask-preview-panel:before,
.mask-storage-title {
  display: block;
  margin: 0 0 3px;
  color: var(--accent2);
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mask-preview-panel:before {
  content: 'Preview';
}

#mask-dialog .mask-profile-preview.punbb {
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 400 12px/1.45 var(--main-font);
}

#mask-dialog .mask-profile-preview .post {
  float: none;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

#mask-dialog .mask-profile-preview .post-author {
  float: none;
  width: min(240px, 100%);
  min-height: 0;
  margin: 24px auto 0;
  overflow: visible;
}

#mask-dialog .mask-profile-preview .post-author ul {
  width: 100%;
  margin: 0;
  padding: 0 0 10px;
  line-height: 160%;
  text-align: center;
}

#mask-dialog .mask-profile-preview .post-author .author-wrap,
#mask-dialog .mask-profile-preview .post-author .wrap-resp,
#mask-dialog .mask-profile-preview .post-author li,
#mask-dialog .mask-profile-preview .post-author ul {
  box-sizing: border-box;
}

#mask-dialog .mask-profile-preview .post-author li {
  list-style: none;
}

#mask-dialog .mask-profile-preview .pa-fld2 {
  z-index: 5;
}

#mask-dialog .mask-profile-preview .pa-author {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 31px;
  padding: 0;
  text-align: center;
}

#mask-dialog .mask-profile-preview .author-wrap {
  position: relative;
  overflow: visible;
}

#mask-dialog .mask-profile-preview .pa-fld6 {
  width: 100%;
  max-width: none;
}

#mask-dialog .mask-profile-preview .pa-fld6 img,
#mask-dialog .mask-profile-preview .pa-fld6 > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mask-dialog .mask-profile-preview .pa-avatar img,
.mask-preview-avatar {
  display: block;
  max-width: min(200px, 100%);
  max-height: 250px;
  margin-inline: auto;
  border-radius: var(--radius);
  object-fit: contain;
}

#mask-dialog .mask-profile-preview .pa-fld1 p {
  padding: 0;
}

#mask-dialog .mask-profile-preview .pa-fld3 {
  overflow: visible;
}

#mask-dialog .mask-profile-preview .pa-fld3 img {
  max-width: 100%;
}

.mask-preview-bbcode,
.mask-preview-html,
.mask-preview-link,
.mask-preview-text {
  margin: 0 0 7px;
  color: var(--text);
  font: 500 13px/1.35 var(--main-font);
  overflow-wrap: anywhere;
}

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

.mask-preview-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.mask-preview-code {
  max-height: 150px;
  margin-top: 6px;
  padding: 10px;
  overflow: auto;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  font: 500 12px/1.45 Consolas, Monaco, monospace;
  white-space: pre-wrap;
}

#mask-dialog .mask-preview-signature {
  margin-top: 12px;
  padding: 10px;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
}

#mask-dialog .mask-preview-signature .post-sig {
  margin: 0;
}

#mask-dialog .mask-preview-signature .post-sig dt {
  display: block;
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  color: var(--accent2);
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
  border: 0;
}

#mask-dialog .mask-preview-signature .post-sig dd {
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 500 12px/1.5 var(--main-font);
  overflow-wrap: anywhere;
}

#mask-dialog .mask-preview-signature-empty {
  color: var(--sec-text);
  font: 600 11px/1.45 var(--main-font);
}

.mask-templates-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mask-templates-container label,
.mask-field-label {
  color: var(--sec-text);
  font-weight: 800;
}

.mask-templates-container select,
.mask-field-input,
.mask-form-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  font: 500 13px/1.35 var(--main-font);
  outline: none;
}

.mask-form {
  display: grid;
  gap: 12px;
}

.mask-form-field {
  display: grid;
  gap: 6px;
}

.mask-form-field textarea {
  min-height: 82px;
  resize: vertical;
}

.mask-templates-container select:focus,
.mask-field-input:focus,
.mask-form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.mask-template-btn,
.mask-move-up,
.mask-move-down {
  width: fit-content;
  padding: 0;
  color: var(--accent2);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font: 800 12px/1.2 var(--main-font);
}

.mask-template-btn:hover,
.mask-move-up:hover,
.mask-move-down:hover {
  color: var(--accent);
}

.mask-storage-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.mask-storage-panel.drag-over {
  background: color-mix(in srgb, var(--accent) 10%, var(--podform));
}

.mask-storage-item {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 9px 32px 9px 10px;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  cursor: grab;
}

.mask-storage-item:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
  transform: translateY(-1px);
}

.mask-storage-item:active,
#mask-dialog .drag-handle:active {
  cursor: grabbing;
}

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

.mask-storage-item.drop-target,
.mask-placeholder {
  border: 2px dashed var(--accent);
}

.mask-placeholder {
  min-height: 48px;
  background: color-mix(in srgb, var(--accent) 10%, var(--quote));
  border-radius: var(--radius);
}

.mask-storage-load {
  display: grid;
  grid-column: 4;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.mask-storage-load:hover .mask-storage-name,
.mask-storage-load:focus-visible .mask-storage-name {
  color: var(--accent2);
}

.mask-storage-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: 50%;
}

.mask-storage-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.mask-storage-name,
.mask-storage-status {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.mask-storage-name {
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}

.mask-storage-status {
  color: var(--sec-text);
  font-size: 10px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mask-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  color: var(--tab-text);
  background: var(--accent2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font: 900 14px/1 var(--main-font);
}

#mask-dialog .drag-handle {
  color: var(--accent);
  cursor: grab;
  font-size: 1.25em;
  line-height: 1;
  user-select: none;
}

.mask-storage-empty {
  padding: 26px 8px;
  color: var(--sec-text);
  text-align: center;
  opacity: 0.82;
}

.mask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--podform) 70%, var(--quote));
  border-top: 1px solid var(--bord);
}

.mask-action-btn {
  min-width: 118px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  cursor: pointer;
  font: 800 11px/1.2 var(--main-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mask-errors,
.mask-field-error {
  color: var(--accent2);
  font-size: 12px;
  line-height: 1.35;
}

.mask-errors {
  margin-top: 8px;
}

.mask-tooltip {
  position: fixed;
  z-index: 1000001;
  max-width: 260px;
  padding: 8px 10px;
  color: var(--tab-text);
  background: color-mix(in srgb, var(--accent2) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--tab-text) 16%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgb(0 0 0 / 24%);
  font: 500 12px/1.35 var(--main-font);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  overflow-wrap: anywhere;
}

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

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

.mask-tooltip-field + .mask-tooltip-field {
  margin-top: 4px;
}

#mask-dialog ::-webkit-scrollbar,
.character ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#mask-dialog ::-webkit-scrollbar-thumb,
.character ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: 999px;
}

.cm-no-backdrop {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgb(0 0 0 / 60%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(0.95);
  backdrop-filter: blur(7px) saturate(0.95);
}

.character-modal {
  position: relative;
  width: max-content;
  max-width: calc(100vw - 36px);
  color: var(--text);
  background: transparent;
}

.character {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font: 400 13px/1.45 var(--main-font);
}

.character :where(button, input, select, textarea) {
  font: inherit;
}

.character :where(button) {
  appearance: none;
}

.character .modal__content,
.character .modal__content.active {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.character .modal__content[hidden] {
  display: none;
}

.cm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.cm-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 48px));
  min-width: min(760px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  min-height: 560px;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
    var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 14px);
  box-shadow: 0 26px 82px rgb(0 0 0 / 44%);
  isolation: isolate;
}

.cm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--sec-text);
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
  cursor: pointer;
}

.cm-close:hover,
.cm-close:focus-visible {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.cm-header {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(250px, 1fr) 210px;
  gap: 18px;
  align-items: stretch;
  min-height: 260px;
  padding: 22px 66px 18px 22px;
  border-bottom: 1px solid var(--dark-bord);
}

.cm-side {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-content: start;
  min-width: 0;
  gap: 10px;
}

.cm-avatar {
  position: relative;
  width: 150px;
  height: 188px;
  overflow: hidden;
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 12px 34px rgb(0 0 0 / 18%);
}

.cm-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
}

.cm-side__meta {
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.cm-side__meta--right {
  justify-items: center;
}

.cm-name {
  max-width: 100%;
  color: var(--text);
  font: 400 22px/1.12 var(--sec-font);
  overflow-wrap: anywhere;
}

.cm-link {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}

.cm-link:hover {
  color: var(--accent);
}

.cm-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 28px;
  margin-top: 8px;
  padding: 5px 12px;
  color: var(--sec-text);
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: 999px;
  font: 800 10px/1.25 var(--main-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cm-center {
  display: grid;
  place-items: center;
  min-width: 0;
}

.cm-bars {
  display: grid;
  width: min(430px, 100%);
  gap: 12px;
  padding: 28px 24px;
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 10px);
}

.cm-barrow {
  display: grid;
  gap: 7px;
}

.cm-barrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--sec-text);
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cm-barrow__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-barrow__value {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 900;
}

.cm-bar {
  position: relative;
  height: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dark-bord) 70%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 16%);
}

.cm-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 18px currentcolor;
}

.character .modal__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 0 0 auto;
  padding: 0 22px;
  background: color-mix(in srgb, var(--podform) 82%, var(--quote));
  border-bottom: 1px solid var(--dark-bord);
}

.character .modal__tab {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 56px;
  padding: 0;
  color: var(--sec-text);
  background: transparent;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--dark-bord) 56%, transparent);
  cursor: pointer;
  font-size: 18px;
}

.character .modal__tab:last-child {
  border-right: 1px solid color-mix(in srgb, var(--dark-bord) 56%, transparent);
}

.character .modal__tab:after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.36);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.character .modal__tab:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.character .modal__tab.active,
.character .modal__tab[aria-selected='true'] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.character .modal__tab.active:after,
.character .modal__tab[aria-selected='true']:after {
  opacity: 1;
  transform: scaleX(1);
}

.cm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.cm-pane {
  width: 100%;
  min-width: 0;
  padding: 18px;
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 8px);
}

.cm-h3 {
  margin: 0 0 10px;
  color: var(--text);
  font: 700 18px/1.2 var(--sec-font);
}

.cm-p {
  margin: 0 0 10px;
  color: var(--text);
}

.cm-list,
.cm-muted {
  color: var(--sec-text);
}

.cm-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.cm-mt {
  margin-top: 18px;
}

.cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.cm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: 999px;
  font-size: 12px;
}

.cm-gift {
  display: grid;
  grid-template-columns: minmax(220px, 0.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cm-gift__media {
  overflow: hidden;
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 8px);
}

.cm-gift__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.cm-gift__text {
  min-width: 0;
}

.cm-details {
  margin-top: 10px;
  overflow: hidden;
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
}

.cm-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 11px 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.cm-details > summary:after {
  content: '+';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--sec-text);
  border: 1px solid var(--dark-bord);
  border-radius: 50%;
}

.cm-details[open] > summary:after {
  content: '-';
  color: var(--accent);
}

.cm-details > summary::-webkit-details-marker {
  display: none;
}

.cm-details__body {
  padding: 0 14px 14px;
  color: var(--sec-text);
}

.cm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cm-input {
  flex: 1 1 auto;
  min-width: 160px;
  height: 42px;
  padding: 0 14px;
  color: var(--text);
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
  outline: none;
}

.cm-input::placeholder {
  color: color-mix(in srgb, var(--sec-text) 76%, transparent);
}

.cm-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.cm-toolbar__right {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  color: var(--tab-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 800;
}

.cm-btn:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-1px);
}

.cm-btn--ghost {
  color: var(--text);
  background: var(--quote);
  border-color: var(--dark-bord);
}

.cm-btn--ghost:hover {
  color: var(--accent);
  background: var(--quote);
  border-color: var(--accent);
  box-shadow: none;
}

.cm-btn--icon {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.cm-filters {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9;
  width: 238px;
  padding: 14px;
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
  box-shadow: 0 18px 38px rgb(0 0 0 / 22%);
}

.cm-filters[hidden] {
  display: none;
}

.cm-filters__title {
  margin-bottom: 8px;
  font-weight: 800;
}

.cm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.cm-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.cm-filters__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.cm-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
  gap: 18px;
  align-items: start;
}

.cm-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  grid-auto-rows: 58px;
  gap: 10px;
  align-content: start;
  min-width: 0;
  max-height: 272px;
  overflow: auto;
  padding: 2px 8px 2px 2px;
  scrollbar-gutter: stable;
}

.cm-slots[data-slots='char-ach'],
.cm-slots[data-slots='player-ach'] {
  max-height: 126px;
}

.cm-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
}

.cm-slot--empty {
  border-style: dashed;
  opacity: 0.78;
}

.cm-slot--empty:before {
  content: '';
  width: 30%;
  height: 30%;
  border: 1px solid color-mix(in srgb, var(--sec-text) 40%, transparent);
  border-radius: 50%;
}

.cm-slot--item {
  padding: 0;
  cursor: pointer;
}

.cm-slot--item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgb(0 0 0 / 16%);
}

.cm-slot--item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-slot--skeleton {
  overflow: hidden;
}

.cm-slot--skeleton:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 18%, transparent), transparent);
  transform: translateX(-110%);
  animation: cm-shimmer 1.2s linear infinite;
}

@keyframes cm-shimmer {
  to {
    transform: translateX(110%);
  }
}

.cm-qty {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  color: var(--tab-text);
  background: var(--accent2);
  border-radius: 999px;
  font: 800 11px/18px var(--main-font);
  text-align: center;
}

.character .is-selected,
.character [aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cm-infobox {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 14px;
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 8px);
}

.cm-infobox.is-updating {
  opacity: 0.72;
  transform: translateY(2px);
}

.cm-infobox__title {
  margin-bottom: 12px;
  color: var(--text);
  font: 800 14px/1.2 var(--main-font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cm-infobox__body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.cm-infobox__img {
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
}

.cm-infobox__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-infobox__text {
  min-width: 0;
}

.cm-infobox__name {
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.cm-infobox__meta {
  margin-bottom: 8px;
  color: var(--sec-text);
  font-size: 12px;
}

.cm-infobox__desc {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.cm-infobox--gift .cm-infobox__desc,
.cm-infobox--gift .cm-infobox__meta,
.cm-infobox.is-empty .cm-infobox__body,
.cm-infobox[data-kind='gift'] .cm-infobox__desc,
.cm-infobox[data-kind='gift'] .cm-infobox__meta {
  display: none;
}

.cm-appearance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cm-frame {
  min-width: 0;
  overflow: hidden;
  background: var(--quote);
  border: 1px solid var(--dark-bord);
  border-radius: calc(var(--radius) + 8px);
}

.cm-frame__head {
  padding: 13px 14px 11px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom: 1px solid var(--dark-bord);
}

.cm-frame__head .cm-h3 {
  margin: 0;
  font-size: 16px;
}

.cm-frame__body {
  padding: 14px;
}

.cm-backgrounds,
.cm-bg-list,
.cm-bgs,
.cm-icons,
.cm-plates {
  display: grid;
  align-content: start;
  height: 168px;
  max-height: 168px;
  overflow: hidden auto;
  padding: 2px 8px 2px 2px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.cm-icons {
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  grid-auto-rows: 42px;
  gap: 10px;
}

.cm-backgrounds,
.cm-bg-list,
.cm-bgs,
.cm-plates {
  grid-template-columns: 1fr;
  grid-auto-rows: 48px;
  gap: 9px;
}

.cm-bg,
.cm-icon,
.cm-plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--sec-text);
  background: var(--podform);
  border: 1px solid var(--dark-bord);
  border-radius: var(--radius);
  cursor: copy;
}

.cm-icon {
  height: 100%;
  font-size: 16px;
}

.cm-icon i,
.cm-icon img {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cm-bg,
.cm-plate {
  height: 48px;
}

.cm-bg__thumb,
.cm-plate__thumb {
  display: block;
  width: 100%;
  height: 100%;
  background-position: 50%;
  background-size: cover;
  pointer-events: none;
}

.cm-bg.is-copied,
.cm-bg:hover,
.cm-icon.is-copied,
.cm-icon:hover,
.cm-plate.is-copied,
.cm-plate:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (max-width: 940px) {
  #mask-dialog {
    max-height: calc(100dvh - 24px);
  }

  .mask-content {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .mask-preview-panel,
  .mask-storage-panel {
    max-height: 260px;
  }

  .cm-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 54px 12px 12px;
  }

  .cm-center {
    grid-column: 1 / -1;
    order: 3;
  }

  .cm-two,
  .cm-appearance,
  .cm-gift {
    grid-template-columns: 1fr;
  }

  .cm-infobox {
    position: static;
  }
}

@media (max-width: 640px) {
  .dice-modal {
    width: min(100%, 340px);
    padding: 18px;
  }

  .dice-modal h3 {
    font-size: 22px;
  }

  .dice-modal .actions,
  .mask-actions {
    flex-direction: column-reverse;
  }

  .dice-modal button,
  .mask-action-btn {
    width: 100%;
  }

  #mask-overlay,
  #mask-overlay[data-force-mobile='true'],
  .force-mobile #mask-overlay {
    place-items: start stretch;
    padding: 0;
    overflow-y: auto;
  }

  #mask-dialog,
  #mask-overlay[data-force-mobile='true'] #mask-dialog,
  .force-mobile #mask-dialog {
    grid-template-rows: auto auto auto;
    width: 100vw;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
    border-radius: 0;
  }

  .mask-header {
    padding: 16px 14px;
  }

  .mask-header p {
    display: none;
  }

  .mask-content {
    gap: 10px;
    min-height: 0;
    padding: 10px;
    overflow: visible;
  }

  .mask-preview-panel,
  .mask-form-panel,
  .mask-storage-panel {
    max-height: none;
    overflow: visible;
    padding: 12px;
  }

  #mask-overlay[data-force-mobile='true'] .mask-profile-preview .post-author,
  .force-mobile #mask-dialog .mask-profile-preview .post-author {
    float: none !important;
    width: min(100%, 390px) !important;
    max-width: 390px;
    min-height: 0;
    margin: 16px auto 0 !important;
    overflow: visible;
    border-width: 1px;
    border-radius: var(--radius) !important;
  }

  #mask-overlay[data-force-mobile='true'] .mask-profile-preview .post-author ul,
  .force-mobile #mask-dialog .mask-profile-preview .post-author ul {
    padding: 0 0 10px;
  }

  #mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-author,
  .force-mobile #mask-dialog .mask-profile-preview .pa-author {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    margin: 31px 0 0 !important;
    padding: 0;
    gap: 10px;
    font-size: inherit;
  }

  .mask-actions {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .cm-no-backdrop,
  .force-mobile .cm-no-backdrop {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .character-modal,
  .force-mobile .character-modal {
    width: 100%;
    max-width: 100%;
  }

  .cm-shell,
  .force-mobile .cm-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .cm-close,
  .force-mobile .cm-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .cm-header,
  .force-mobile .cm-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    gap: 10px;
    padding: 54px 12px 12px;
  }

  .cm-side,
  .force-mobile .cm-side {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    place-items: center start;
    gap: 10px;
    padding: 8px;
    background: var(--podform);
    border: 1px solid var(--dark-bord);
    border-radius: calc(var(--radius) + 8px);
  }

  .cm-side__meta,
  .cm-side__meta--right,
  .force-mobile .cm-side__meta,
  .force-mobile .cm-side__meta--right {
    justify-items: start;
    text-align: left;
  }

  .cm-avatar,
  .force-mobile .cm-avatar {
    width: 72px;
    height: 92px;
    border-radius: var(--radius);
  }

  .cm-name,
  .force-mobile .cm-name {
    font-size: 16px;
    line-height: 1.15;
  }

  .cm-role,
  .force-mobile .cm-role {
    min-height: 24px;
    margin-top: 5px;
    padding: 4px 8px;
    font-size: 8px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cm-center,
  .force-mobile .cm-center {
    grid-column: 1 / -1;
    order: 3;
  }

  .cm-bars,
  .force-mobile .cm-bars {
    width: 100%;
    gap: 10px;
    padding: 14px 12px;
    border-radius: calc(var(--radius) + 8px);
  }

  .character .modal__tabs,
  .force-mobile .character .modal__tabs {
    order: 3;
    padding: 0;
    border-top: 1px solid var(--dark-bord);
    border-bottom: 0;
  }

  .character .modal__tab,
  .force-mobile .character .modal__tab {
    height: calc(54px + env(safe-area-inset-bottom) / 2);
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 17px;
  }

  .cm-scroll,
  .force-mobile .cm-scroll {
    order: 2;
    padding: 12px;
  }

  .cm-pane,
  .force-mobile .cm-pane {
    padding: 12px;
    border-radius: calc(var(--radius) + 8px);
  }

  .cm-toolbar,
  .force-mobile .cm-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cm-toolbar__right,
  .force-mobile .cm-toolbar__right {
    justify-content: space-between;
  }

  .cm-filters,
  .force-mobile .cm-filters {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: auto;
  }

  .cm-slots,
  .force-mobile .cm-slots {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    grid-auto-rows: 46px;
    gap: 8px;
    max-height: 208px;
  }

  .cm-slots[data-slots='char-ach'],
  .cm-slots[data-slots='player-ach'] {
    max-height: 100px;
  }

  .cm-infobox__body,
  .force-mobile .cm-infobox__body {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .cm-infobox__img,
  .force-mobile .cm-infobox__img {
    width: 72px;
    height: 72px;
  }

  .cm-backgrounds,
  .cm-bg-list,
  .cm-bgs,
  .cm-icons,
  .cm-plates,
  .force-mobile .cm-backgrounds,
  .force-mobile .cm-bg-list,
  .force-mobile .cm-bgs,
  .force-mobile .cm-icons,
  .force-mobile .cm-plates {
    height: 168px;
    max-height: 168px;
  }
}

/*Мультиаккаунт*/
#navprofiles,
#pun-navlinks,
#pun-navlinks .container {
  overflow: visible;
}

#navprofiles {
  position: relative;
  z-index: 1300;
}

#pun-navlinks.section:has(.multiacc-profilemenu[style*='block']) {
  z-index: 1300;
}

#navprofiles > a {
  position: relative;
  z-index: 2;
}

#navprofiles .multiacc-profilemenu,
#pun-navlinks.section #navprofiles .multiacc-profilemenu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 1301;
  box-sizing: border-box;
  width: max-content;
  min-width: 210px;
  max-width: min(300px, calc(100vw - 24px));
  max-height: min(70vh, 420px);
  margin: 0;
  padding: 7px;
  overflow: auto;
  color: var(--text);
  font: 500 12px/1.35 var(--main-font);
  text-align: left;
  text-transform: none;
  list-style: none;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--accent) 13%, transparent) 0 32%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--quote) 94%, var(--podform)),
      color-mix(in srgb, var(--podform) 78%, var(--quote))
    );
  border: 1px solid color-mix(in srgb, var(--dark-bord) 72%, var(--bord));
  border-radius: var(--radius);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, var(--tab-text) 16%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

#navprofiles .multiacc-profilemenu,
#navprofiles .multiacc-profilemenu * {
  box-sizing: border-box;
}

#navprofiles .multiacc-profilemenu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#navprofiles .multiacc-profilemenu::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

#navprofiles .multiacc-profilemenu a:after,
#navprofiles .multiacc-profilemenu a:before {
  content: none !important;
  display: none !important;
}

#navprofiles .multiacc-profilemenu li {
  position: relative;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 8px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--quote) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--bord) 82%, transparent);
  border-radius: calc(var(--radius) - 1px);
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

#navprofiles .multiacc-profilemenu li + li {
  margin-top: 5px;
}

#navprofiles .multiacc-profilemenu li:first-child {
  color: var(--tab-text);
  font-weight: 700;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-color: color-mix(in srgb, var(--accent2) 78%, transparent);
}

#navprofiles .multiacc-profilemenu li:has(a.multiacc-active) {
  background: color-mix(in srgb, var(--accent) 16%, var(--quote));
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}

#navprofiles .multiacc-profilemenu li:focus-within,
#navprofiles .multiacc-profilemenu li:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--quote));
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

#navprofiles .multiacc-profilemenu li:first-child:focus-within,
#navprofiles .multiacc-profilemenu li:first-child:hover {
  color: var(--tab-text);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 88%, var(--tab-text)),
    var(--accent2)
  );
}

#navprofiles .multiacc-profilemenu a {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: inherit !important;
  font: 600 12px/1.3 var(--main-font) !important;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

#navprofiles .multiacc-profilemenu a:focus,
#navprofiles .multiacc-profilemenu a:hover {
  color: inherit !important;
}

#navprofiles .multiacc-profilemenu a:focus-visible,
#navprofiles .multiacc-delete-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
}

#navprofiles .multiacc-profilemenu a.multiacc-active {
  color: var(--accent) !important;
}

#navprofiles .multiacc-profilemenu li:first-child a.multiacc-active {
  color: inherit !important;
}

#navprofiles .multiacc-delete-btn {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 0 0 8px !important;
  padding: 0;
  color: color-mix(in srgb, var(--sec-text) 84%, transparent);
  font-size: 0;
  line-height: 1;
  background: color-mix(in srgb, var(--podform) 82%, var(--quote));
  border: 1px solid color-mix(in srgb, var(--bord) 82%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

#navprofiles .multiacc-delete-btn:before {
  content: '\f00d';
  font-family: 'Font Awesome 6 Pro', FontAwesome, sans-serif;
  font-size: 10px;
  font-weight: 600;
}

#navprofiles .multiacc-delete-btn:focus-visible,
#navprofiles .multiacc-delete-btn:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
  transform: scale(1.06);
}

body > div:has(> .multiacc-dialog),
.multiacc-overlay {
  box-sizing: border-box;
  z-index: 1500 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px;
  overflow: auto;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--accent) 22%, transparent),
      transparent 44%
    ),
    rgba(0, 0, 0, 0.5) !important;
}

.multiacc-dialog {
  position: relative;
  z-index: 1501;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 24px)) !important;
  margin: 0 auto;
  padding: 12px !important;
  color: var(--text);
  font: 400 16px/1.35 var(--sec-font);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--quote) 94%, var(--podform)),
    color-mix(in srgb, var(--podform) 78%, var(--quote))
  ) !important;
  border: 1px solid color-mix(in srgb, var(--dark-bord) 72%, var(--bord));
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.multiacc-dialog,
.multiacc-dialog * {
  box-sizing: border-box;
}

.multiacc-dialog > form {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.multiacc-dialog br {
  display: none;
}

.multiacc-dialog form > div {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-weight: 400;
  font-family: inherit;
}

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

.multiacc-dialog form > div:last-child {
  margin-top: 2px !important;
}

.multiacc-dialog label {
  color: var(--sec-text);
  font: 400 15px/1.2 var(--sec-font);
  text-transform: none;
}

.multiacc-dialog input {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  color: var(--text);
  font: 400 16px/1.3 var(--sec-font);
  background: color-mix(in srgb, var(--quote) 88%, var(--podform)) !important;
  border: 1px solid var(--bord);
  border-radius: calc(var(--radius) - 1px);
  outline: none;
}

.multiacc-dialog input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.multiacc-dialog button {
  min-height: 32px;
  margin: 0 !important;
  padding: 6px 12px;
  color: var(--tab-text) !important;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
  font: 400 16px/1.2 var(--sec-font);
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

.multiacc-dialog button:focus-visible,
.multiacc-dialog button:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-1px);
}

.multiacc-dialog button:disabled {
  cursor: default;
  opacity: 0.55;
  transform: none;
}

.multiacc-dialog button[type='button'] {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--podform) 82%, var(--quote));
  border-color: color-mix(in srgb, var(--bord) 82%, transparent);
}

.multiacc-dialog button[type='button']:focus-visible,
.multiacc-dialog button[type='button']:hover {
  color: var(--tab-text) !important;
  background: var(--accent2);
  border-color: var(--accent2);
}

.force-mobile #navprofiles {
  position: relative;
  z-index: 1300;
}

.force-mobile #navprofiles .multiacc-profilemenu,
.force-mobile #pun-navlinks.section #navprofiles .multiacc-profilemenu {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 1301;
  width: min(268px, calc(100vw - 18px));
  min-width: min(220px, calc(100vw - 18px));
  max-width: calc(100vw - 18px);
  max-height: min(54vh, 360px);
  padding: 6px;
  font-size: 12px;
}

.force-mobile #pun-navlinks.section #navprofiles > .multiacc-profilemenu > li {
  min-height: 34px;
  margin: 0 !important;
  padding: 10px 12px !important;
  gap: 8px;
  line-height: 1.25 !important;
}

.force-mobile
  #pun-navlinks.section
  #navprofiles
  > .multiacc-profilemenu
  > li
  + li {
  margin-top: 9px !important;
}

.force-mobile
  #pun-navlinks.section
  #navprofiles
  > .multiacc-profilemenu
  > li
  > a {
  margin: 0 !important;
  padding: 0 0 0 12px !important;
  font: 600 12px/1.25 var(--main-font) !important;
  letter-spacing: 0;
  text-transform: none;
}

.force-mobile
  #pun-navlinks.section
  #navprofiles
  > .multiacc-profilemenu
  > li
  > .multiacc-delete-btn {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

body.force-mobile > div:has(> .multiacc-dialog),
.force-mobile body > div:has(> .multiacc-dialog),
.force-mobile .multiacc-overlay {
  align-items: flex-start !important;
  padding: calc(72px + env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

.force-mobile .multiacc-dialog {
  width: 100% !important;
  max-height: calc(100svh - 96px);
  overflow: auto;
}

.force-mobile .multiacc-dialog form > div:last-child {
  flex-direction: column-reverse;
}

.force-mobile .multiacc-dialog button {
  width: 100%;
}

/*Счетчик символов в постах*/
.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 {
  position: absolute !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--tab-text) !important;
  font: 600 11px/1.2 var(--main-font) !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent2) !important;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  opacity: 0 !important;
  transform: translateY(-2px) !important;
  transition:
    opacity 0.16s,
    transform 0.16s;
}

#quote-bubble.show {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
}

#quote-bubble:hover {
  background: var(--accent2) !important;
}

#quote-bubble img {
  width: 14px;
  height: 14px;
  display: block;
  filter: brightness(0) invert(1);
}

#quote-bubble img:not([src]),
#quote-bubble img[src=''] {
  display: none;
}

.force-mobile #quote-bubble {
  padding: 8px 12px;
  font-size: 12px !important;
}

/*Кнопки переключения тем*/
.ts-style-btn.ts-style-classic,
.ts-style-btn.ts-style-winter,
.ts-style-btn.ts-style-spring,
.ts-style-btn.ts-style-summer {
  width: 30px;
  font-size: 0;
  background: var(--sec-text);
  border: 1px solid var(--dark-bord);
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.ts-style-btn.ts-style-classic:before,
.ts-style-btn.ts-style-winter:before,
.ts-style-btn.ts-style-spring:before,
.ts-style-btn.ts-style-summer:before {
  content: '\f56b';
  width: 17px;
  height: 17px;
  display: block;
  font-family: 'FontAwesome';
  color: var(--tab-text);
  font-size: 17px;
}

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

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

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

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

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

/*Уведомления отступы*/
.unread-notifications #notifications-wrap table {
  padding: 10px 15px;
}

/*Бегунок шрифта*/
.font-resizer .slider {
  accent-color: var(--accent);
}

/*Стрелки вверх-вниз*/
.scroll-rail {
  position: fixed;
  right: auto !important;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 5px 0;
  background: var(--plash) !important;
  color: var(--tab-text) !important;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--dark-bord) !important;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
  margin-left: 1100px !important;
}

.scroll-rail.rail-up {
  bottom: 170px !important;
}
.scroll-rail.rail-down {
  bottom: 110px !important;
}

/*При экспорте*/
.modal-dialog {
  background: var(--quote) !important;
  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) !important;
}

/*Обтекание*/
.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;
}

/*Награды*/
.post-content .highlight-text {
  background-color: var(--accent) !important;
  color: var(--bt-bg) !important;
}

.post-content abbr {
  cursor: help !important;
  border-bottom: 1px dotted #000;
}

.pa-fld2 div {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Asther;
  font-size: 13px;
  text-transform: lowercase;
  color: var(--accent2);
}

/* event */
.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 (max-width: 520px) {
  .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;
  }
}

/*Новое*/
@media (max-width: 860px) {
  .custom_tag.char-card .char-image {
    grid-row: 2;
  }

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

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

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

  .custom_tag.char-card .char-birthdate {
    grid-column: 1;
  }

  .custom_tag.char-card .char-race {
    grid-column: 1;
  }

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

  .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 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .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;
  }
}

/* === Стикеры: модалка стикерпака === */
#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 !important;
  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) !important;
  box-shadow: none;
  color: var(--bt-bg, #f3f1f2) !important;
  border-color: var(--accent2) !important;
  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% !important;
  height: 100% !important;
  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 {
  flex: 0 0 auto;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--accent2);
  background: var(--accent);
  color: var(--bt-bg, #f3f1f2);
  cursor: pointer;
  font: inherit;
  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 {
  filter: brightness(1.05);
}

.sticker-pack-modal-add-btn: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;
  border-radius: 4px;
  border: 1px solid var(--accent2);
  background: var(--accent);
  color: var(--bt-bg, #f3f1f2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sticker-pack-modal__close:hover {
  filter: brightness(1.05);
}

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

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

@media (max-width: 600px) {
  #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 !important;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* текст прячем, только title */
    line-height: 1;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
  }

  .sticker-pack-modal .modal__tab.active {
    background: var(--accent) !important;
    color: var(--bt-bg, #f3f1f2) !important;
    border-color: var(--accent2) !important;
    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;
  }
}

a.reportlink {
  font-size: 0;
}

/* Репутация */
.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 !important;
  margin-right: 0 !important;
}

.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%;
}

#pun-reputation .post_reputation textarea {
  font-size: 16px;
}

/* Текущее сообщение в ЛС */
#messages strong a {
  font-weight: 900 !important;
  font-size: 0.8rem !important;
}

/* Overlay / Dialog — èñïîëüçóåò root ïåðåìåííûå ôîðóìà */
#ks-closed-topic-recovery {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgb(0 0 0 / 56%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#ks-closed-topic-recovery .ks-ctr__panel {
  width: min(920px, 100%);
  background: var(--quote);
  color: var(--text);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  padding: 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: 8px;
  margin-bottom: 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));
}

#ks-closed-topic-recovery .ks-ctr__iconbtn {
  appearance: none;
  border: 1px solid var(--bord);
  background: var(--podform);
  color: var(--text);
  border-radius: calc(var(--radius) + 2px);
  padding: 6px 10px;
  cursor: pointer;
}

#ks-closed-topic-recovery .ks-ctr__iconbtn:hover {
  background: var(--podform);
}

#ks-closed-topic-recovery .ks-ctr__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--sec-text);
  margin-bottom: 8px;
}

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

#ks-closed-topic-recovery code {
  background: var(--podform);
  border: 1px solid var(--bord);
  padding: 1px 6px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text);
}

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

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

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

#ks-closed-topic-recovery .ks-ctr__btn {
  appearance: none;
  border: 1px solid var(--bord);
  background: var(--accent);
  color: var(--tab-text);
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

#ks-closed-topic-recovery .ks-ctr__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--sec-text);
  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: var(--activees-overlay);
}

.winter .activees div:hover:after,
.winter .activees2 div:hover:after {
  opacity: 0.88;
  background: var(--activees-overlay-hover);
}

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

/* Ограничение ширины iframe */
.punbb .post-video {
  width: 100%;
  max-width: 100%;
}

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

.punbb .post-video__inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  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 .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);
}

/*Summer*/

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

:root[data-style='summer'] #pun,
.summer #pun {
  box-sizing: content-box;
  border-radius: 12px;
  outline: 0;
  box-shadow: 0 16px 34px var(--summer-shell-shadow);
}

:root[data-style='summer'] #pun:before,
.summer #pun:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  border-top: 1px solid
    color-mix(in srgb, var(--summer-shell-outline) 72%, transparent);
  border-left: 1px solid
    color-mix(in srgb, var(--summer-shell-outline) 72%, transparent);
  border-right: 1px solid
    color-mix(in srgb, var(--summer-shell-outline) 72%, transparent);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--summer-shell-outline-soft);
}

:root[data-style='summer'] #pun-title table,
.summer #pun-title table {
  background:
    linear-gradient(
      180deg,
      transparent 0 44%,
      color-mix(in srgb, var(--summer-shell-surface) 7%, transparent) 58%,
      color-mix(in srgb, var(--summer-shell-surface) 24%, transparent) 72%,
      color-mix(in srgb, var(--summer-shell-surface) 54%, transparent) 88%,
      color-mix(in srgb, var(--summer-shell-surface) 74%, transparent) 100%
    ),
    var(--head) center/cover no-repeat;
  border-radius: 12px 12px 0 0;
  box-shadow:
    inset 0 -136px 122px
      color-mix(in srgb, var(--summer-head-edge) 44%, transparent),
    inset 0 -36px 68px
      color-mix(in srgb, var(--summer-shell-surface) 62%, transparent),
    inset 0 32px 42px var(--summer-head-fade);
}

:root[data-style='summer'] #pun-title:after,
.summer #pun-title:after {
  content: '';
  position: absolute;
  top: 172px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 330px;
  pointer-events: none;
  background: var(--base-bg2) top center repeat-y;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.06) 10%,
    rgba(0, 0, 0, 0.24) 24%,
    rgba(0, 0, 0, 0.58) 42%,
    rgba(0, 0, 0, 0.9) 58%,
    #000 72% 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.06) 10%,
    rgba(0, 0, 0, 0.24) 24%,
    rgba(0, 0, 0, 0.58) 42%,
    rgba(0, 0, 0, 0.9) 58%,
    #000 72% 100%
  );
}

:root[data-style='summer'] #pun-navlinks,
:root[data-style='summer'] #pun-ulinks,
:root[data-style='summer'] #pun-status,
:root[data-style='summer'] #pun-crumbs1,
:root[data-style='summer'] #pun-main,
:root[data-style='summer'] .knews,
:root[data-style='summer'] .activees,
:root[data-style='summer'] .activees2,
:root[data-style='summer'] .kindred-info,
:root[data-style='summer'] .forum-name,
:root[data-style='summer'] .spirit-clock-link,
.summer #pun-navlinks,
.summer #pun-ulinks,
.summer #pun-status,
.summer #pun-crumbs1,
.summer #pun-main,
.summer .knews,
.summer .activees,
.summer .activees2,
.summer .kindred-info,
.summer .forum-name,
.summer .spirit-clock-link {
  z-index: 2;
}

:root[data-style='summer'] #pun-ulinks,
:root[data-style='summer'] #pun-status,
:root[data-style='summer'] #pun-crumbs1,
:root[data-style='summer'] #pun-main,
.summer #pun-ulinks,
.summer #pun-status,
.summer #pun-crumbs1,
.summer #pun-main {
  position: relative;
}

:root[data-style='summer'] #pun-navlinks.nav-scrolled,
:root[data-style='summer'] #pun-navlinks.scroll_navi,
.summer #pun-navlinks.nav-scrolled,
.summer #pun-navlinks.scroll_navi {
  z-index: 1100;
}

:root[data-style='summer'] #pun-navlinks.nav-scrolled,
.summer #pun-navlinks.nav-scrolled {
  position: sticky;
  top: 0;
}

:root[data-style='summer'] #pun-navlinks.scroll_navi,
.summer #pun-navlinks.scroll_navi {
  position: fixed;
  top: 0;
}

:root[data-style='summer'] #pun-ulinks.user-scrolled,
:root[data-style='summer'] #pun-ulinks.scroll_navi,
.summer #pun-ulinks.user-scrolled,
.summer #pun-ulinks.scroll_navi {
  z-index: 1090;
}

:root[data-style='summer'] #pun-ulinks.user-scrolled,
.summer #pun-ulinks.user-scrolled {
  position: sticky;
  top: 50px;
}

:root[data-style='summer'] #pun-ulinks.scroll_navi,
.summer #pun-ulinks.scroll_navi {
  position: fixed !important;
  top: 42px;
}

:root[data-style='summer'] #stylelist,
.summer #stylelist {
  width: auto;
  height: auto;
  min-width: 58px;
  padding: 3px;
  gap: 4px;
  overflow: visible;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--dark-bord) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--summer-status-bg) 76%, transparent);
  box-shadow:
    0 5px 14px rgba(128, 80, 48, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  z-index: 3;
}

:root[data-style='summer'] #html-header #stylelist,
.summer #html-header #stylelist,
:root[data-style='summer'] .kindred-info,
.summer .kindred-info,
:root[data-style='summer'] .forum-name,
.summer .forum-name,
:root[data-style='summer'] .knews,
.summer .knews {
  left: 50%;
  transform: translateX(-50%);
}

:root[data-style='summer'] .kindred-info,
.summer .kindred-info {
  top: 136px;
}

:root[data-style='summer'] .forum-name,
.summer .forum-name {
  display: flex;
  position: absolute;
  top: 64px;
  width: auto;
  min-width: 420px;
  justify-content: center;
  align-items: center;
  padding: 0 28px;
  color: var(--summer-forum-name-color);
  font-family: 'Asther';
  font-synthesis: none;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.94;
  text-transform: none;
  text-align: center;
  pointer-events: none;
  text-shadow:
    0 1px 0 var(--summer-forum-name-glow),
    0 3px 12px color-mix(in srgb, var(--summer-head-edge) 42%, transparent),
    0 12px 30px color-mix(in srgb, var(--summer-head-edge) 48%, transparent);
}

:root[data-style='summer'] .forum-name span,
.summer .forum-name span {
  position: relative;
  display: inline-block;
  padding: 0 20px 6px;
  background: radial-gradient(
      ellipse at center,
      var(--summer-forum-name-bg) 0,
      transparent 72%
    )
    center/100% 100% no-repeat;
}

:root[data-style='summer'] .forum-name span:before,
:root[data-style='summer'] .forum-name span:after,
.summer .forum-name span:before,
.summer .forum-name span:after {
  content: '';
  position: absolute;
  top: 55%;
  width: 84px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--summer-forum-name-color) 44%, transparent)
  );
}

:root[data-style='summer'] .forum-name span:before,
.summer .forum-name span:before {
  right: 100%;
}

:root[data-style='summer'] .forum-name span:after,
.summer .forum-name span:after {
  left: 100%;
  transform: scaleX(-1);
}

:root[data-style='summer'] #stylelist li[data='light'] a,
:root[data-style='summer'] #stylelist li[data='dark'] a,
.summer #stylelist li[data='light'] a,
.summer #stylelist li[data='dark'] a {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--summer-status-bg) 38%, transparent);
  color: var(--summer-status-link-hover) !important;
  -webkit-text-fill-color: currentColor;
  font-size: 0 !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

:root[data-style='summer'] #stylelist li[data='light'] a::before,
.summer #stylelist li[data='light'] a::before {
  background: currentColor;
}

:root[data-style='summer'] #stylelist li[data='dark'] a::before,
.summer #stylelist li[data='dark'] a::before {
  background: currentColor;
}

:root[data-style='summer'] #stylelist li.active,
.summer #stylelist li.active {
  background: transparent;
}

:root[data-style='summer'] #stylelist li.active a,
.summer #stylelist li.active a {
  border-color: color-mix(
    in srgb,
    var(--summer-status-link) 62%,
    transparent
  ) !important;
  background: color-mix(
    in srgb,
    var(--summer-status-link) 42%,
    var(--summer-status-bg)
  );
  color: var(--tab-text) !important;
  box-shadow: 0 3px 9px rgba(128, 80, 48, 0.2);
}

:root[data-style='summer'] #stylelist li.active a::before,
.summer #stylelist li.active a::before {
  background: currentColor;
}

:root[data-style='summer'] #stylelist li a:hover,
:root[data-style='summer'] #stylelist li a:focus-visible,
.summer #stylelist li a:hover,
.summer #stylelist li a:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--summer-status-link-hover) 58%,
    transparent
  );
  background: color-mix(in srgb, var(--summer-status-bg) 70%, transparent);
  box-shadow: 0 3px 10px rgba(128, 80, 48, 0.18);
  outline: none;
}

:root[data-style='summer'] #stylelist li.active a:hover,
:root[data-style='summer'] #stylelist li.active a:focus-visible,
.summer #stylelist li.active a:hover,
.summer #stylelist li.active a:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--summer-status-link-hover) 74%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--summer-status-link-hover) 38%,
    var(--summer-status-bg)
  );
}

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

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

:root[data-style='summer'] #pun-status .container,
.summer #pun-status .container {
  width: calc(100% - 60px);
  margin: 16px auto 0;
  padding: 7px 18px;
  color: var(--summer-status-text);
  background:
    radial-gradient(
        ellipse at center,
        var(--summer-status-bg) 0,
        color-mix(in srgb, var(--summer-status-bg) 58%, transparent) 42%,
        color-mix(in srgb, var(--summer-status-bg) 22%, transparent) 66%,
        transparent 86%
      )
      center/100% 100% no-repeat,
    linear-gradient(
        90deg,
        transparent 0 12%,
        color-mix(in srgb, var(--summer-status-line) 16%, transparent) 22%,
        color-mix(in srgb, var(--summer-status-line) 74%, transparent) 38%,
        color-mix(in srgb, var(--summer-status-line) 74%, transparent) 62%,
        color-mix(in srgb, var(--summer-status-line) 16%, transparent) 78%,
        transparent 88% 100%
      )
      top/100% 1px no-repeat,
    linear-gradient(
        90deg,
        transparent 0 14%,
        color-mix(in srgb, var(--summer-status-line) 12%, transparent) 24%,
        color-mix(in srgb, var(--summer-status-line) 58%, transparent) 40%,
        color-mix(in srgb, var(--summer-status-line) 58%, transparent) 60%,
        color-mix(in srgb, var(--summer-status-line) 12%, transparent) 76%,
        transparent 86% 100%
      )
      bottom/100% 1px no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(2px);
}

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

:root[data-style='summer'] #pun-status strong,
.summer #pun-status strong {
  color: var(--summer-status-strong);
}

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

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

.knews {
  box-sizing: border-box;
  background:
    linear-gradient(
      90deg,
      transparent 0,
      var(--summer-knews-bg) 8%,
      var(--summer-knews-bg) 92%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-knews-bg) 72%, #fff 8%),
      color-mix(in srgb, var(--summer-knews-bg) 62%, transparent)
    );
  border: 1px solid
    color-mix(in srgb, var(--summer-knews-border) 72%, transparent);
  border-left-color: color-mix(
    in srgb,
    var(--summer-knews-border) 28%,
    transparent
  );
  border-right-color: color-mix(
    in srgb,
    var(--summer-knews-border) 28%,
    transparent
  );
  box-shadow:
    0 8px 20px rgba(128, 80, 48, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(2px);
  overflow: hidden;
}

:root[data-style='summer'] .knews text,
.summer .knews text {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--summer-status-link) transparent;
}

:root[data-style='summer'] .knews text p,
.summer .knews text p {
  margin: 0;
}

:root[data-style='summer'] .knews text p date,
.summer .knews text p date {
  color: var(--tab-text);
  background: color-mix(in srgb, var(--summer-status-link) 74%, transparent);
}

:root[data-style='summer'] .knews text p a,
.summer .knews text p a {
  color: var(--summer-status-link);
}

:root[data-style='summer'] .knews text p a:hover,
.summer .knews text p a:hover {
  color: var(--summer-status-link-hover);
}

:root[data-style='summer'] #pun-index .category h2,
:root[data-style='summer'] #pun-stats h2,
.summer #pun-index .category h2,
.summer #pun-stats h2 {
  color: var(--summer-category-title);
  opacity: 1;
}

:root[data-style='summer'] #pun-index .category h2,
.summer #pun-index .category h2 {
  background: none;
  overflow: hidden;
}

:root[data-style='summer'] #pun-index .category h2:before,
.summer #pun-index .category h2:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cat-branch) center no-repeat;
  opacity: var(--summer-category-branch-opacity);
  pointer-events: none;
}

:root[data-style='summer'] #pun-index .category h2 span,
:root[data-style='summer'] #pun-stats h2 span,
.summer #pun-index .category h2 span,
.summer #pun-stats h2 span {
  z-index: 1;
  color: var(--summer-category-title);
  text-shadow: 0 1px 0
    color-mix(in srgb, var(--summer-shell-surface) 46%, transparent);
}

:root[data-style='summer'] #pun-ulinks .container,
.summer #pun-ulinks .container {
  background: var(--transp-bg);
  border-color: var(--summer-card-border);
  box-shadow: var(--shadow);
}

:root[data-style='summer'] #pun-about,
.summer #pun-about {
  margin-top: 50px;
}

:root[data-style='summer'] #pun-about p.container,
.summer #pun-about p.container {
  box-sizing: border-box;
  position: relative;
  width: calc(100% + 60px);
  max-width: calc(100% + 60px);
  margin-right: 0;
  background: var(--ftr-im) center bottom/cover no-repeat;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow: none;
}

:root[data-style='summer'] #pun-about p.container:before,
.summer #pun-about p.container:before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  height: 78px;
  pointer-events: none;
  background: var(--base-bg2) top center repeat-y;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    rgba(0, 0, 0, 0.58) 42%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    rgba(0, 0, 0, 0.58) 42%,
    transparent 100%
  );
}

:root[data-style='summer'] #pun-about p.container:after,
.summer #pun-about p.container:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid
    color-mix(in srgb, var(--summer-shell-outline) 76%, transparent);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow:
    inset 1px 0 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 56%, transparent),
    inset -1px 0 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 38%, transparent),
    inset 0 -1px 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 34%, transparent),
    0 10px 20px color-mix(in srgb, var(--summer-shell-shadow) 72%, transparent);
}

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

@media screen and (max-width: 540px) {
  :root[data-style='summer'] body.force-mobile #pun,
  :root[data-style='summer'].force-mobile #pun {
    box-sizing: border-box;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
  }

  :root[data-style='summer'] body.force-mobile #pun:before,
  :root[data-style='summer'].force-mobile #pun:before {
    display: none;
  }

  :root[data-style='summer'] body.force-mobile #pun-title table,
  :root[data-style='summer'].force-mobile #pun-title table {
    background: var(--mob-head) center/cover no-repeat;
    border-radius: 0;
  }

  :root[data-style='summer'] body.force-mobile #pun-title table:before,
  :root[data-style='summer'].force-mobile #pun-title table:before {
    display: none;
  }

  :root[data-style='summer'] body.force-mobile #pun-title:after,
  :root[data-style='summer'].force-mobile #pun-title:after {
    display: none;
  }

  :root[data-style='summer'] body.force-mobile #html-header #stylelist,
  :root[data-style='summer'].force-mobile #html-header #stylelist {
    left: 50%;
    width: auto;
    min-width: 0;
    transform: translateX(-50%);
    padding: 3px;
    border-radius: 999px;
  }

  :root[data-style='summer'] body.force-mobile #pun-navlinks.nav-scrolled,
  :root[data-style='summer'] body.force-mobile #pun-navlinks.scroll_navi,
  :root[data-style='summer'].force-mobile #pun-navlinks.nav-scrolled,
  :root[data-style='summer'].force-mobile #pun-navlinks.scroll_navi {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1120;
    width: 100%;
    margin: 0 !important;
  }

  :root[data-style='summer'] body.force-mobile .knews,
  :root[data-style='summer'].force-mobile .knews {
    left: 50%;
    width: calc(100% - 40px);
    transform: translateX(-50%);
  }

  :root[data-style='summer'] body.force-mobile #pun-ulinks,
  :root[data-style='summer'].force-mobile #pun-ulinks,
  .summer.force-mobile #pun-ulinks {
    position: sticky;
    top: 9px;
    left: 0;
    z-index: 1130;
    width: 30px;
    height: 32px;
    margin: -40px 0 0 21px !important;
    line-height: 32px !important;
    transform: none;
  }

  :root[data-style='summer'] body.force-mobile #pun-ulinks.scroll_navi,
  :root[data-style='summer'] body.force-mobile #pun-ulinks.user-scrolled,
  :root[data-style='summer'].force-mobile #pun-ulinks.scroll_navi,
  :root[data-style='summer'].force-mobile #pun-ulinks.user-scrolled,
  .summer.force-mobile #pun-ulinks.scroll_navi,
  .summer.force-mobile #pun-ulinks.user-scrolled,
  :root[data-style='summer']
    body.force-mobile
    #pun-navlinks.nav-scrolled
    + #pun-ulinks,
  :root[data-style='summer']
    body.force-mobile
    #pun-navlinks.scroll_navi
    + #pun-ulinks,
  :root[data-style='summer'].force-mobile
    #pun-navlinks.nav-scrolled
    + #pun-ulinks,
  :root[data-style='summer'].force-mobile #pun-navlinks.scroll_navi + #pun-ulinks,
  .summer.force-mobile #pun-navlinks.nav-scrolled + #pun-ulinks,
  .summer.force-mobile #pun-navlinks.scroll_navi + #pun-ulinks {
    position: fixed !important;
    top: 9px;
    left: 21px;
    z-index: 1130;
    margin: 0 !important;
  }

  :root[data-style='summer'] body.force-mobile #pun-ulinks ul,
  :root[data-style='summer'].force-mobile #pun-ulinks ul,
  .summer.force-mobile #pun-ulinks ul {
    z-index: 1140;
    top: 42px;
    left: 0;
    right: auto;
  }

  :root[data-style='summer'] body.force-mobile .forum-name,
  :root[data-style='summer'].force-mobile .forum-name {
    display: flex;
    top: 76px;
    left: 50%;
    width: 100%;
    min-width: 0;
    padding: 0 20px;
    transform: translateX(-50%);
    color: var(--summer-forum-name-color);
    font-family: 'Asther';
    font-synthesis: none;
    font-size: 42px;
    font-weight: 400;
    line-height: 0.95;
    text-shadow:
      0 1px 0 var(--summer-forum-name-glow),
      0 6px 20px color-mix(in srgb, var(--summer-head-edge) 62%, transparent);
  }

  :root[data-style='summer'] body.force-mobile .forum-name span,
  :root[data-style='summer'].force-mobile .forum-name span {
    padding: 0 14px 4px;
    font-size: inherit;
    background: radial-gradient(
        ellipse at center,
        var(--summer-forum-name-bg) 0,
        transparent 74%
      )
      center/100% 100% no-repeat;
  }

  :root[data-style='summer'] body.force-mobile .forum-name span:before,
  :root[data-style='summer'] body.force-mobile .forum-name span:after,
  :root[data-style='summer'].force-mobile .forum-name span:before,
  :root[data-style='summer'].force-mobile .forum-name span:after {
    width: 28px;
  }

  :root[data-style='summer'] body.force-mobile #pun-status .container,
  :root[data-style='summer'].force-mobile #pun-status .container {
    width: 100%;
    margin: 0;
    padding: 5px 10px;
    border-width: 1px 0;
    border-radius: 0;
  }

  :root[data-style='summer'] body.force-mobile #pun-about,
  :root[data-style='summer'].force-mobile #pun-about,
  .summer.force-mobile #pun-about {
    margin-top: 0;
  }

  :root[data-style='summer'] body.force-mobile #pun-about p.container,
  :root[data-style='summer'].force-mobile #pun-about p.container,
  .summer.force-mobile #pun-about p.container {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: auto;
    min-height: 92px;
    margin: 16px 10px 0 !important;
    padding: 16px 10px 46px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
  }

  :root[data-style='summer'] body.force-mobile #pun-about p.container:before,
  :root[data-style='summer'].force-mobile #pun-about p.container:before,
  .summer.force-mobile #pun-about p.container:before,
  :root[data-style='summer'] body.force-mobile #pun-about p.container:after,
  :root[data-style='summer'].force-mobile #pun-about p.container:after,
  .summer.force-mobile #pun-about p.container:after {
    display: none;
  }

  :root[data-style='summer'] body.force-mobile .banners_bottom,
  :root[data-style='summer'].force-mobile .banners_bottom,
  .summer.force-mobile .banners_bottom {
    position: relative;
    left: auto;
    width: 100%;
    margin: 10px 0 0 !important;
  }

  :root[data-style='summer'] body.force-mobile .punbb .post-content,
  :root[data-style='summer'].force-mobile .punbb .post-content {
    padding: 12px;
    font-size: 14px;
    line-height: 1.62;
  }

  :root[data-style='summer'] body.force-mobile .punbb .post-content p,
  :root[data-style='summer'] body.force-mobile .punbb .post-content li,
  :root[data-style='summer'].force-mobile .punbb .post-content p,
  :root[data-style='summer'].force-mobile .punbb .post-content li {
    font-size: 14px;
    line-height: 1.62;
  }

  :root[data-style='summer'] body.force-mobile #pun-viewtopic .pa-fld6,
  :root[data-style='summer'].force-mobile #pun-viewtopic .pa-fld6,
  .summer.force-mobile #pun-viewtopic .pa-fld6 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 230px;
    background: transparent;
    pointer-events: none;
  }

  :root[data-style='summer'] body.force-mobile #pun-viewtopic .pa-fld6 img,
  :root[data-style='summer'].force-mobile #pun-viewtopic .pa-fld6 img,
  .summer.force-mobile #pun-viewtopic .pa-fld6 img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center top;
    opacity: 0.38;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0 34%,
      rgba(0, 0, 0, 0.72) 56%,
      rgba(0, 0, 0, 0.24) 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0 34%,
      rgba(0, 0, 0, 0.72) 56%,
      rgba(0, 0, 0, 0.24) 78%,
      transparent 100%
    );
    filter: saturate(0.92) contrast(0.94);
  }

  :root[data-style='summer'] body.force-mobile #pun-viewtopic .pa-fld6:after,
  :root[data-style='summer'].force-mobile #pun-viewtopic .pa-fld6:after,
  .summer.force-mobile #pun-viewtopic .pa-fld6:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 118px;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      transparent,
      var(--profile) 78%,
      var(--profile)
    );
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic.punbb
    .post
    .post-author,
  :root[data-style='summer'].force-mobile #pun-viewtopic.punbb .post .post-author,
  .summer.force-mobile #pun-viewtopic.punbb .post .post-author {
    position: relative;
    overflow: visible;
    z-index: 2;
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post-author
    .author-wrap,
  :root[data-style='summer'].force-mobile
    #pun-viewtopic
    .post-author
    .author-wrap,
  .summer.force-mobile #pun-viewtopic .post-author .author-wrap {
    position: static;
    z-index: auto;
    margin: 10px 20px 0;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--summer-card-bg-soft) 78%, transparent),
        color-mix(in srgb, var(--summer-card-bg) 64%, transparent)
      ),
      var(--kndr-img) top center/cover;
    border: 1px solid
      color-mix(in srgb, var(--summer-topic-border-soft) 74%, transparent);
    box-shadow:
      inset 0 1px 0
        color-mix(in srgb, var(--summer-shell-outline-soft) 50%, transparent),
      0 6px 16px color-mix(in srgb, var(--summer-shell-shadow) 60%, transparent);
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post-author
    .author-wrap
    > :not(.pa-fld6),
  :root[data-style='summer'].force-mobile
    #pun-viewtopic
    .post-author
    .author-wrap
    > :not(.pa-fld6),
  .summer.force-mobile #pun-viewtopic .post-author .author-wrap > :not(.pa-fld6) {
    position: relative;
    z-index: 2;
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post-author
    .pa-author,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post-author .pa-author,
  .summer.force-mobile #pun-viewtopic .post-author .pa-author {
    position: absolute;
    z-index: 3;
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post-author
    .pa-fld2,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post-author .pa-fld2,
  .summer.force-mobile #pun-viewtopic .post-author .pa-fld2 {
    position: absolute;
    z-index: 10;
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post-author
    .wrap-resp,
  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post-author
    .pa-fld3,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post-author .wrap-resp,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post-author .pa-fld3,
  .summer.force-mobile #pun-viewtopic .post-author .wrap-resp,
  .summer.force-mobile #pun-viewtopic .post-author .pa-fld3 {
    position: relative;
    z-index: 1;
  }

  :root[data-style='summer'] body.force-mobile .punbb .post-links ul,
  :root[data-style='summer'].force-mobile .punbb .post-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    margin: 10px 0;
    padding: 8px;
  }

  :root[data-style='summer'] body.force-mobile .punbb .post-links li,
  :root[data-style='summer'].force-mobile .punbb .post-links li,
  :root[data-style='summer'] body.force-mobile .punbb .post-links .pl-email,
  :root[data-style='summer'] body.force-mobile .punbb .post-links .pl-website,
  :root[data-style='summer'].force-mobile .punbb .post-links .pl-email,
  :root[data-style='summer'].force-mobile .punbb .post-links .pl-website {
    float: none;
    margin: 0;
  }
}

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

:root[data-style='summer'] #pun-index .category tr,
:root[data-style='summer'] #pun-index .category tr.inew,
.summer #pun-index .category tr,
.summer #pun-index .category tr.inew {
  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-index .category tr.inew,
.summer #pun-index .category tr.inew {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-card-bg-soft) 68%, transparent),
      color-mix(in srgb, var(--summer-card-bg) 74%, transparent)
    ),
    var(--pf-bg) center/cover;
}

:root[data-style='summer'] .activees div:after,
:root[data-style='summer'] .activees2 div:after,
.summer .activees div:after,
.summer .activees2 div:after {
  background: var(--activees-overlay);
  opacity: 0.72;
}

:root[data-style='summer'] .activees div:hover:after,
:root[data-style='summer'] .activees2 div:hover:after,
.summer .activees div:hover:after,
.summer .activees2 div:hover:after {
  background: var(--activees-overlay-hover);
  opacity: 0.88;
}

:root[data-style='summer'] .author-wrap,
.summer .author-wrap {
  background: var(--kndr-img) center/cover;
  border: 1px solid
    color-mix(in srgb, var(--summer-topic-border-soft) 86%, transparent);
  color: var(--prof-text);
  box-shadow:
    inset 0 1px 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 52%, transparent),
    var(--shadow);
}

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

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

:root[data-style='summer'] .pa-fld1,
.summer .pa-fld1 {
  border-top: 1px solid
    color-mix(in srgb, var(--summer-topic-border-soft) 78%, transparent);
  background: linear-gradient(180deg, var(--summer-profile-fade), transparent);
}

:root[data-style='summer'] .punbb .post .post-author,
.summer .punbb .post .post-author {
  border-color: color-mix(
    in srgb,
    var(--summer-topic-border-soft) 84%,
    transparent
  );
  box-shadow:
    inset 0 1px 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 46%, transparent),
    var(--summer-card-shadow);
}

:root[data-style='summer'] #pun-viewtopic .post,
.summer #pun-viewtopic .post {
  position: relative;
}

:root[data-style='summer'] #pun-viewtopic .post + .post,
.summer #pun-viewtopic .post + .post {
  margin-top: 20px;
  padding-top: 24px;
}

:root[data-style='summer'] #pun-viewtopic .post + .post:before,
.summer #pun-viewtopic .post + .post:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 34px;
  right: 34px;
  height: 1px;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--summer-status-link) 42%, transparent) 0 2px,
      transparent 3px
    ),
    linear-gradient(
      90deg,
      transparent 0,
      color-mix(in srgb, var(--summer-topic-border-soft) 18%, transparent) 18%,
      color-mix(in srgb, var(--summer-topic-border-soft) 58%, transparent) 50%,
      color-mix(in srgb, var(--summer-topic-border-soft) 18%, transparent) 82%,
      transparent 100%
    );
  box-shadow: 0 1px 0
    color-mix(in srgb, var(--summer-shell-outline-soft) 26%, transparent);
}

:root[data-style='summer'] #pun-viewtopic .post + .post:after,
.summer #pun-viewtopic .post + .post:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  background: color-mix(
    in srgb,
    var(--summer-status-link) 46%,
    var(--summer-shell-surface)
  );
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--summer-shell-surface) 58%, transparent),
    0 0 12px color-mix(in srgb, var(--summer-status-link) 28%, transparent);
}

@media screen and (max-width: 540px) {
  :root[data-style='summer'] body.force-mobile #pun-viewtopic .post + .post,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post + .post {
    margin-top: 14px;
    padding-top: 18px;
  }

  :root[data-style='summer']
    body.force-mobile
    #pun-viewtopic
    .post
    + .post:before,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post + .post:before {
    top: 6px;
    left: 18px;
    right: 18px;
  }

  :root[data-style='summer'] body.force-mobile #pun-viewtopic .post + .post:after,
  :root[data-style='summer'].force-mobile #pun-viewtopic .post + .post:after {
    top: 3px;
  }
}

:root[data-style='summer'] .punbb .post-content,
.summer .punbb .post-content {
  box-sizing: border-box;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--summer-post-font);
  font-size: 15px;
  line-height: 1.68;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-topic-panel) 88%, transparent),
      color-mix(in srgb, var(--summer-card-bg-soft) 72%, transparent)
    ),
    color-mix(in srgb, var(--podform) 52%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--summer-topic-border-soft) 86%, transparent);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 62%, transparent),
    inset 0 0 0 1px
      color-mix(in srgb, var(--summer-shell-outline-soft) 18%, transparent),
    0 5px 16px color-mix(in srgb, var(--summer-shell-shadow) 58%, transparent);
}

:root[data-style='summer'] .punbb .post-content > :last-child,
.summer .punbb .post-content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

:root[data-style='summer'] .punbb .post-content p,
:root[data-style='summer'] .punbb .post-content li,
.summer .punbb .post-content p,
.summer .punbb .post-content li {
  font-family: var(--summer-post-font);
  font-size: 15px;
  line-height: 1.68;
}

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

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

:root[data-style='summer'] .punbb .post-links ul,
.summer .punbb .post-links ul {
  display: block;
  padding: 0;
  margin: 0 20px 0 5px;
  min-height: 0;
  text-align: right;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root[data-style='summer'] .punbb .post-links li,
.summer .punbb .post-links li {
  display: inline;
  padding-left: 1em;
  margin: 0;
}

:root[data-style='summer'] .punbb .post-links .pl-email,
:root[data-style='summer'] .punbb .post-links .pl-website,
.summer .punbb .post-links .pl-email,
.summer .punbb .post-links .pl-website {
  float: left;
  margin: 0;
}

:root[data-style='summer'] .punbb .post-links li a,
.summer .punbb .post-links li a {
  display: inline-block;
  min-height: 0;
  padding: 3px 9px;
  line-height: 16px;
  vertical-align: baseline;
  color: var(--summer-status-link);
  text-decoration: none !important;
  background: color-mix(in srgb, var(--summer-status-bg) 54%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--summer-topic-border-soft) 54%, transparent);
  border-radius: 6px;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--summer-shell-outline-soft) 46%, transparent);
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

:root[data-style='summer'] .punbb .post-links li a:hover,
:root[data-style='summer'] .punbb .post-links li a:focus-visible,
.summer .punbb .post-links li a:hover,
.summer .punbb .post-links li a:focus-visible {
  color: var(--tab-text);
  background: color-mix(in srgb, var(--accent2) 84%, var(--summer-status-bg));
  border-color: color-mix(in srgb, var(--dark-bord) 76%, transparent);
  box-shadow:
    inset 0 1px 0
      color-mix(in srgb, var(--summer-shell-outline-soft) 68%, transparent),
    0 3px 10px color-mix(in srgb, var(--summer-shell-shadow) 58%, transparent);
  outline: none;
}

:root[data-style='summer'] .custom_tag.char-card .char-image,
:root[data-style='summer'] .academy-panel-body,
.summer .custom_tag.char-card .char-image,
.summer .academy-panel-body {
  color: var(--tab-text);
}

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

: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'],
.summer .button,
.summer .punbb .button,
.summer input[type='button'],
.summer input[type='submit'] {
  background-color: var(--accent2) !important;
  border-color: var(--dark-bord) !important;
  color: var(--tab-text) !important;
}

: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,
.summer .button:hover,
.summer .punbb .button:hover,
.summer input[type='button']:hover,
.summer input[type='submit']:hover {
  background-color: var(--dark-bord) !important;
  color: var(--tab-text) !important;
}

/*Фон в профиле*/

.pa-fld6 {
  width: 238px;
  height: 190px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  border-radius: var(--radius) var(--radius) 0 0;
}

.pa-fld6 img {
  vertical-align: top !important;
  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;
}

.hide-profile .post-author,
.hide-profile .pl-email,
.hide-profile .pl-website {
  display: none !important;
}
.hide-profile .post-body,
.hide-profile .post-links,
.hide-profile .post-links ul,
.post.hide-profile h3 > span {
  margin-left: 0 !important;
}