/* import */

@import url(style_cs.1786563715.css);
@import url('https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Onest:wght@100..900&display=swap');

/* структура */
:root {
  --pun-width: 1050px;
  --pun-gap: 30px;
  --pun-padding: 11px;
  --profile-width: 200px;
  --profile-gap: 14px;
  --header-img: url('https://forumstatic.ru/files/001c/c1/ef/44906.png');
  --header-height: 290px;
  --footer-img: url('https://forumstatic.ru/files/001c/c1/ef/43716.png');
  --footer-height: 120px;
  --category-img: url('https://forumstatic.ru/files/001c/c1/ef/74335.png');
  --fa: "Font Awesome 6 Pro";
  --icon-crumb: "\f6fd";
  --icon-online: "\f186";
  --font: 'Onest', sans-serif;
  --font-alt: 'Manrope', sans-serif;
}

/* цвета */
:root, .light {
  --bg: #D9E0E4;
  --bg-image: url('https://forumstatic.ru/files/001c/c1/ef/97336.png');
  --surface: #EEF1F2;
  --surface-raised: rgb(217 224 228 / 92%);
  --surface-quote: var(--surface-raised);
  --text: #485966;
  --text-pale: #5C7083;
  --accent: #7A263D;
  --accent-alt: #71859A;
  --accent-warm: #A8B8C8;
  --on-accent: #F3EFEA;
  --link: #7A263D;
  --link-hover: #C88D9B;
  --border: transparent;
}

.dark {
}

/* скрыть ненужное */
.acchide, #pun-navlinks h2, #pun-pagelinks h2, #pun-status h2, #pun-ulinks h2,
.punbb .forum h2, .punbb .multipage .topic h2, .punbb dl.post-sig dt span, .punbb p.crumbs strong,
.punbb .divider hr, .punbb .required label em, .punbb .formsubmit label, .punbb .submitfield label,
.punbb .modmenu label, #pun-userlist .main h2 { position: absolute; left: -9999px; width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden }

#pun-live-rusff, #pun-main .catleft, #pun-main .catright,
#pun-status .status-right, #pun span:has(> a[href*="export.php"]),
#post-form h2, #post-form fieldset legend, .reactions-root, li.pa-ua,
.punbb .post h3 .sharelink, .punbb .post h3 .translatelink, #pun-main h1 { display: none !important }

/* тело */
html, body { margin: 0; padding: 0; background: var(--bg) var(--bg-image) no-repeat center top / cover fixed }
body { font: 11px var(--font); color: var(--text) }
.punbb * { margin: 0 }
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt { padding: 0; list-style: none }
.punbb .main table { table-layout: fixed; width: 100% }
.punbb textarea, .punbb input, .punbb select, .punbb optgroup { font: 11px var(--font) }
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th { font-size: 11px; font-weight: normal }
.punbb h1 span, .punbb h2 span, .punbb legend span { font-size: 12px }
.punbb pre { font: 12px/140% "courier new", courier, monospace }
.punbb address, .punbb em { font-style: normal }
.punbb optgroup { font-weight: bold }
.punbb a { color: var(--link); text-decoration: none; transition: color .12s ease-in-out }
.punbb a:hover { color: var(--link-hover) }
.checkfield input[type="checkbox"], .radiofield input[type="radio"] { margin: 0 3px }
#pun *:focus, #pun a:active { outline: none; -webkit-tap-highlight-color: transparent }
#pun :is(input, textarea, select, option, optgroup) { text-transform: none }

#pun:after, .punbb .container:after, .punbb .post-links ul:after,
.punbb .main div.inline:after, .punbb .post-box:after, .punbb .linksb:after { content: ""; display: block; clear: both }
.punbb:after { content: ""; order: 98; display: block; height: var(--footer-height); margin: 14px calc(0px - var(--pun-padding) * 2) 0; border-radius: 0 0 16px 16px; background: var(--footer-img) bottom center / 100% auto no-repeat }

#pun { position: relative; width: var(--pun-width); max-width: calc(100% - var(--pun-gap) * 2); margin: var(--pun-gap) auto; border-radius: 16px; background: var(--surface); text-transform: lowercase }
.punbb { display: flex; flex-direction: column; float: left; box-sizing: border-box; width: 100%; height: auto; padding: 10px calc(var(--pun-padding) * 2) 0 }
#pun-redirect, #pun-maint { margin: 50px 20% 12px; width: auto; float: none }
.punbb .section, .punbb .main { margin-bottom: 11px }
.punbb .category { margin-top: 4px }
.punbb .post { margin-top: 22px }
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost { margin-top: 0 }
#pun-post .topic { margin-top: 11px }
.punbb .section h2, #pun-main h2, #pun-stats h2 { padding: 6px 0 }

/* шапка */
#pun-title { height: var(--header-height); margin: 0 calc(0px - var(--pun-padding) * 2) 14px; background: var(--header-img) top center / 100% auto no-repeat }
#pun-title h1, #pun-title table { display: none }
#pun-navlinks { order: -2; margin: -10px calc(0px - var(--pun-padding) * 2) 0; border-radius: 16px 16px 0 0; background: var(--surface-raised) }

/* навигация */
#pun-pagelinks { position: absolute; top: -15px; left: 0; width: 100%; margin: 0; padding: 0 }
#pun-pagelinks .container { padding: 0; background: transparent }
#pun-pagelinks .container li { display: inline }
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover { display: block; float: left; width: 100%; height: 22px; margin-left: -9999px; padding: 0; line-height: 22px; font-size: 13px }
#pun-pagelinks a:active, #pun-pagelinks a:focus { position: relative; margin: 0 }
#pun-pagelinks li a span { display: block; margin: 0 11px }

#pun-navlinks .container { margin: 0; padding: 9px 11px; font-family: var(--font); text-transform: uppercase; font-weight: 600; text-align: center }
#pun-navlinks li { display: inline; padding-right: 11px }
#pun-navlinks li a { font-size: 12px }

/* юзерлинки */
#pun-ulinks { margin-top: 0 }
#pun-ulinks .container { padding: 8px 11px; font-family: var(--font-alt); font-size: 10px; text-align: center }
#pun-ulinks li, #pun-ulinks li a { display: inline; white-space: nowrap; border-left: 1px solid var(--border) }
#pun-ulinks li a { padding: 0 3px 0 7px }
#pun-ulinks li.item1, #pun-ulinks li.item1 a { padding-left: 0; border-left: none }

/* приветствие, крошки */
#pun-status { order: -1; position: relative; z-index: 2; top: 92px; height: 0; margin: 0; text-align: center }
#pun-status .container { display: inline-flex; gap: 4px; padding: 0; font: 400 8px/120.7% var(--font-alt); color: #6E2538 }
#pun-status span { white-space: nowrap }
#pun-status strong { font-weight: 400; color: inherit }
#pun-crumbs1, #pun-crumbs2 { margin: 0; overflow: hidden; text-align: center }
#pun-index :is(#pun-crumbs1, #pun-crumbs2) { display: none }
#pun-crumbs1 .container, #pun-crumbs2 .container { padding: 9px 11px; font-size: 12px; letter-spacing: .3px; color: var(--text-pale) }
#pun-crumbs1 em, #pun-crumbs2 em { display: none }
#pun-crumbs1 a:not(:last-child):after, #pun-crumbs2 a:not(:last-child):after { content: var(--icon-crumb); font-family: var(--fa); font-weight: 300; font-size: 10px; margin: 0 5px 0 8px; color: var(--accent-warm) }

/* объявление */
#pun-announcement h2 { padding: 0 4px 7px; font-size: 13px; font-weight: 500; letter-spacing: .4px; color: var(--text-pale) }
#pun-announcement .container { padding: 12px 14px; border-radius: 14px; background: var(--surface-raised); line-height: 150% }

/* категории */
.punbb .category { display: flex; flex-direction: row-reverse; margin: 0 0 14px; overflow: hidden; border-radius: 14px }
.punbb .category:nth-of-type(even) { flex-direction: row }
.punbb .category h2 { flex: 0 0 100px; height: auto; margin: 0; padding: 0; border-radius: 0; background: var(--category-img) bottom center / cover no-repeat; font-size: 0 }
.punbb .category h2 span { font-size: 0 }
.punbb .category .container { flex: 1 1 auto; min-width: 0; padding: 6px; border-radius: 0; background: var(--surface-raised) }
#pun-index thead { display: none }
#pun-index .category tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 14px; align-items: center; padding: 9px 12px }
#pun-index .category td { padding: 0; border: none }
#pun-index .category tbody tr + tr { border-top: 1px solid rgb(168 184 200 / 35%) }
#pun-index .category td.tc2, #pun-index .category td.tc3 { display: none }
#pun-index .category td.tcr { position: relative; min-height: 36px; padding-right: 46px; text-align: right; font-size: 11px; line-height: 160%; color: var(--text-pale) }
#pun-index tbody.hasicon td.tcl { padding-left: 26px }
#pun-index .tcl h3 { margin: 0 0 2px; font-size: 14px; font-weight: 500 }
#pun-index .tcl h3 a { color: var(--text) }
#pun-index .tcl h3 a:hover { color: var(--link-hover) }
#pun-index .tclcon { line-height: 145%; color: var(--text-pale) }
#pun-index .tclcon h3 { margin: 0 0 2px }
#pun-index .tclcon b { margin-right: 5px; font-weight: 500; color: var(--accent) }
#pun-index .tclcon links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: 10px }
#pun-index .tclcon links a { color: var(--text-pale) }
#pun-index .tclcon links a:hover { color: var(--accent) }
#pun-index .tcr > a:first-of-type { font-size: 12px; font-weight: 500; color: var(--text) }
#pun-index .tcr > a:first-of-type:hover { color: var(--link-hover) }
#pun-index .tcr .byuser, #pun-index .tcr .byuser a { color: var(--text-pale) }
#pun-index .tcr .byuser a:hover { color: var(--link-hover) }
#pun-index .user-avatar, #pun-viewforum .user-avatar { position: absolute; top: 50%; right: 0; width: 36px !important; height: 36px !important; margin: -18px 0 0; border-radius: 50%; background: var(--surface) }
#pun-index .user-avatar a, #pun-index .user-avatar .avatar-image, #pun-viewforum .user-avatar a, #pun-viewforum .user-avatar .avatar-image { display: block; width: 100%; height: 100%; overflow: hidden; background-position: center; background-size: cover; border-radius: 50% }
#pun-index div.icon { width: 7px; height: 7px; margin: 6px 0 0; border: none; border-radius: 50%; background: var(--accent-warm) }
#pun-index div.icon.inew { background: var(--accent) }
#pun-index table div.icon { margin-left: -22px }
#pun-index .user-avatar .isonline, #pun-viewforum .user-avatar .isonline { position: absolute; top: auto; left: auto; right: -2px; bottom: -1px; width: auto; height: auto; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none; font: 900 11px/1 var(--fa); color: var(--accent) }
#pun-index .user-avatar .isonline:before, #pun-viewforum .user-avatar .isonline:before { content: var(--icon-online) }

/* таблицы */
.punbb .main .tcl { width: 50%; text-align: left; overflow: hidden; border-left: none }
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod { width: 10%; text-align: center }
.punbb .main .tcr { text-align: left; overflow: hidden }
#pun-userlist .main .tcl, #pun-searchtopics .main .tcl, #pun-modviewforum .main .tcl { width: 40% }
#pun-userlist .main .tc2, #pun-searchtopics .main .tc2 { width: 20%; text-align: left }
.punbb .main td { padding: 9px 11px; border-top: 1px solid var(--border); border-left: 1px solid var(--border) }
.punbb .main th { padding: 4px 11px; border-left: 1px solid var(--border) }
.punbb td span.youposted { position: absolute; margin-left: -11px; font-weight: bold }
.punbb td .modlist { display: block; padding-top: 3px }
.punbb tbody.hasicon td.tcl { padding-left: 35px }
.punbb div.icon { width: 0; height: 0; margin-top: 1px; line-height: 0; border: 7px solid }
.punbb table div.icon { position: absolute; margin-left: -24px; font-size: 12px }

/* пагинация */
.punbb .linkst, .punbb .linksb { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; float: none; position: static; width: auto; height: auto; padding: 0; font-size: 11px }
.punbb .linkst { margin: 0 0 10px }
.punbb .linksb { margin: 10px 0 0 }
.punbb .linksb:after { display: none }
.multipage { margin-top: 0 }
.punbb .pagelink, .punbb .postlink, .punbb .subscribelink { position: static; float: none; clear: none; width: auto; padding: 0; font-weight: normal; text-align: left }
.punbb .pagelink { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-right: auto; font-size: 0 }
.punbb .pagelink:before { content: "страница"; margin-right: 3px; font: 400 10px var(--font); letter-spacing: .3px; color: var(--accent-warm) }
.punbb .pagelink a, .punbb .pagelink strong, .punbb .pagelink span { display: inline-flex; align-items: center; justify-content: center; font: 400 12px var(--font) }
.punbb .pagelink a { color: var(--text-pale) }
.punbb .pagelink a:hover { color: var(--accent) }
.punbb .pagelink strong { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 500 }
.punbb .pagelink span { color: var(--accent-warm) }
.punbb .pagelink :is(.prev, .next) { color: var(--accent-warm); font-size: 0 }
.punbb .pagelink .prev:before { content: "\f053"; font: 400 8px/1 var(--fa) }
.punbb .pagelink .next:before { content: "\f054"; font: 400 8px/1 var(--fa) }
.punbb .postlink { display: flex; gap: 6px }
.punbb .postlink.long { width: auto }
.punbb .postlink.long .new-topic { padding-right: 0 }
.punbb .linksb .postlink { display: none }
.punbb .postlink a, .punbb .subscribelink a { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 16px; border-radius: 20px; background: var(--accent); color: var(--on-accent) }
.punbb .postlink a:hover, .punbb .subscribelink a:hover { background: var(--link-hover); color: var(--on-accent) }
.punbb .postlink a:before, .punbb .subscribelink a:before { font: 400 11px/1 var(--fa) }
.punbb .postlink a[href*="fid="]:before { content: "\2b" }
.punbb .postlink a[href*="tid="]:before { content: "\f3e5" }
.punbb .postlink a[href*="poll.php"]:before { content: "\3f" }
.punbb .subscribelink a { background: var(--surface-raised); color: var(--text) }
.punbb .subscribelink a:before { content: "\f0f3" }

/* список тем */
#pun-viewforum .forum .container { padding: 6px; border-radius: 14px; background: var(--surface-raised) }
#pun-viewforum thead { display: none }
#pun-viewforum tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 250px; align-items: center; column-gap: 12px; padding: 11px 14px; border-radius: 10px }
#pun-viewforum td { padding: 0; border: none }
#pun-viewforum .intd { position: relative; padding-left: 18px }
#pun-viewforum div.icon { position: absolute; left: 0; top: 6px; width: 7px; height: 7px; margin: 0; border: none; border-radius: 50%; background: var(--accent-warm) }
#pun-viewforum div.icon.inew { background: var(--accent) }
#pun-viewforum .tclcon a { font-size: 13px; font-weight: 500; color: var(--text) }
#pun-viewforum .tclcon a:hover { color: var(--link-hover) }
#pun-viewforum .tclcon .byuser { display: block; font-size: 11px; color: var(--text-pale) }
#pun-viewforum .tc2, #pun-viewforum .tc3 { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--text-pale) }
#pun-viewforum .tc2:before, #pun-viewforum .tc3:before { font: 400 9px/1 var(--fa); color: var(--accent-warm) }
#pun-viewforum .tc2:before { content: "\f086" }
#pun-viewforum .tc3:before { content: "\f06e" }
#pun-viewforum .tcr { position: relative; min-height: 36px; padding-right: 46px; text-align: right; font-size: 11px; line-height: 160%; color: var(--text-pale) }
#pun-viewforum .tcr > a { display: block; color: var(--text-pale) }
#pun-viewforum .tcr > a:hover { color: var(--link-hover) }
#pun-viewforum .modmenu .container { font-size: 11px; color: var(--text-pale) }

/* поиск в теме */
#s-block { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0 }
#s-block #sTheme { box-sizing: border-box; width: 220px; height: 26px; padding: 0 12px; border: none; border-radius: 20px; background: var(--surface-raised); color: var(--text); font: 11px var(--font) }
#s-block #sTheme:focus { border: none; box-shadow: inset 0 0 0 1px var(--accent-warm) }
#s-block #isk { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0; cursor: pointer }
#s-block #isk:before { content: "\f002"; margin: 0; font: 400 11px/1 var(--fa) }
#s-block #isk:hover { background: var(--link-hover) }
.pa-author #tuser { width: 14px; height: 14px; margin: 0 0 0 6px; padding: 0; opacity: .45; vertical-align: middle }
.pa-author:hover #tuser { opacity: 1 }

/* пост */
.punbb .post .container { margin-top: -1px; padding-bottom: 1px }
.punbb .post h3 span { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-left: calc(var(--profile-width) + var(--profile-gap)); padding: 0 2px 8px; border: none; font-size: 11px; color: var(--text-pale) }
.punbb .post h3 .permalink { order: -1; color: var(--text-pale) }
.punbb .post h3 .permalink:hover { color: var(--link-hover) }
.punbb .post h3 strong { order: 1; float: none; width: auto; padding: 3px 9px; border-radius: 20px; background: var(--surface-raised); color: var(--text-pale); font-weight: 500 }
.punbb .post h3 strong:before { content: "#" }
#pun .FNTslider { float: none; align-self: center; height: 4px; margin: 0 0 0 auto; border-radius: 4px; background: var(--surface-raised) }
#pun .FNTslider .before { height: 4px; margin: 0; border-radius: 4px 0 0 4px; background: var(--accent-warm) }
#pun .FNTslider .thumb { width: 10px; height: 10px; margin-top: 1px; border-radius: 50%; background: var(--accent) }
.punbb .post .post-author { float: left; box-sizing: border-box; width: var(--profile-width); margin-top: -16px; overflow: hidden; border-radius: 16px; background: var(--surface-raised); text-align: center }
.punbb .post .post-author ul, .punbb .post .post-author p { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px 6px; padding: 14px; line-height: 140% }
.punbb .post .post-author li { width: 100% }
.pa-avatar { margin: 0 0 2px }
.pa-avatar img { max-width: 100%; border-radius: 12px }
.pa-author { font: 800 15px/20px var(--font-alt); letter-spacing: -.02em }
.pa-author a { color: var(--accent) }
.pa-author a:hover { color: var(--link-hover) }
.pa-author .flag-i { display: none }
li.pa-title { font: 400 10px/13px var(--font); letter-spacing: -.02em; color: var(--text-pale) }
.punbb .post .post-author li:is(.pa-posts, .pa-respect) { flex: 1 1 0; width: auto; box-sizing: border-box; padding: 7px 6px; border-radius: 8px; background: var(--surface); font-size: 10px; line-height: 130%; color: var(--text-pale) }
.post-author .pa-posts .fld-name { display: none }
.post-author .pa-posts:before { content: "сообщений "; display: block }
.post-author .pa-respect .fld-name { display: block }
.post-author .pa-respect .fld-name a { color: var(--text-pale) }
.post-author .pa-respect img { display: none }
li.pa-online { font-size: 10px; color: var(--accent) }
.post-author .pa-ip { font-size: 9px; opacity: .7 }
.punbb .post-body { margin-left: calc(var(--profile-width) + var(--profile-gap)); padding: 0; border: none }
.punbb .post-box { padding: 14px 16px }
.punbb fieldset .post-box { margin-bottom: 9px }
.punbb .post-links { margin-left: 0; padding: 8px 0 0; border: none }
.punbb .post-links ul { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; padding: 0; line-height: 160%; background: transparent }
.punbb .post-links ul:after { display: none }
.punbb .post-links li { padding: 0 }
.punbb .post-links .pl-email { float: none }
.punbb .post-links li.pl-email + li:not(.pl-email) { margin-left: auto }
.punbb .clearer { clear: both; height: 0; font-size: 0 }

/* быстроплюсы */
.post-rating, .post-vote { float: right; display: inline-flex; align-items: center }
.post-rating { margin-right: -16px }
.post-vote { margin-right: 8px }
.post-rating p, .post-vote p { float: none; margin: 0; padding: 0; border: none }
.post-rating p > a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 12px; border-radius: 20px; background: var(--surface-raised); color: var(--accent-alt); font-size: 11px; font-weight: 500 }
.post-rating p > a:before { content: "\f004"; font: 400 10px/1 var(--fa) }
.post-rating p > a:hover { background: var(--accent-warm); color: var(--text) }
.voted .post-rating p > a { cursor: default }
.voted .post-rating p > a:hover { background: var(--surface-raised); color: var(--accent-alt) }
.voted .post-rating p > a:before { font-weight: 900; color: var(--accent) }
.voted .post-vote { display: none }
.post-vote p > a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0; cursor: pointer }
.post-vote p > a:before { content: "\2b"; font: 400 11px/1 var(--fa) }
.post-vote p > a:hover { background: var(--link-hover) }

/* контент поста */
.punbb .post-content { width: 100%; padding: 0; margin: 0; overflow: hidden }
.punbb .post-content p { margin: 0; padding: 0 0 11px; line-height: 150% }
.punbb .post-content em { font-style: italic }
.punbb .post-content em.bbuline { font-style: normal; text-decoration: underline }
.punbb .post-content img { vertical-align: text-bottom }
.punbb .post-content img.postimg { vertical-align: middle }
#pun .post-content table { width: auto; table-layout: auto; border-collapse: collapse }
#pun .post-content td, #pun .post-content th { border-color: transparent; vertical-align: top }
.punbb .post-content .blockcode, .punbb .post-content blockquote { width: 100%; overflow: hidden }
.punbb .post-content .scrollbox { width: 100%; overflow: auto }
#pun .post-content .quote-box { margin: 12px 0; padding: 10px 14px; border: none; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface-quote) }
#pun .post-content .quote-box cite { display: block; margin: 0 0 6px; padding: 0; background: none; color: var(--accent); font: 600 10px var(--font-alt); letter-spacing: .3px }
#pun .post-content .quote-box cite:before { content: "\f10d"; margin-right: 6px; font: 400 9px/1 var(--fa) }
#pun .post-content .quote-box blockquote { padding: 0 }
#pun .post-content .code-box { margin: 12px 0; padding: 0; overflow: hidden; border: none; border-radius: 12px; background: var(--surface-raised) }
#pun .post-content .code-box .legend { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; background: var(--accent-warm); color: var(--text); font: 500 10px var(--font) }
#pun .post-content .code-box .legend:before { content: "\f121"; font: 400 9px/1 var(--fa) }
#pun .post-content .code-box .blockcode { padding: 10px 12px }
#pun .post-content pre { font: 11px/165% "courier new", courier, monospace }
#pun .post-content blockquote p:last-child { padding-bottom: 0 }
#pun .post-content .spoiler-box > div { display: flex; align-items: center; gap: 7px; padding: 6px 11px; background: none; border-radius: 8px; color: var(--accent-alt); font-weight: 500; cursor: pointer }
#pun .post-content .spoiler-box > div:before { content: "\f067"; font: 400 9px/1 var(--fa); color: var(--accent) }
#pun .post-content .spoiler-box > div.visible:before { content: "\f068" }
#pun .post-content .spoiler-box > blockquote { padding: 0 11px 9px }
#pun .post-content .highlight-text { padding: 0 4px; border-radius: 4px; background: var(--accent-warm); color: var(--text) }
#pun .post-content ul, #pun .post-content ol { margin: 0 0 11px; padding-left: 20px }
#pun .post-content ul { list-style: disc }
#pun .post-content ol { list-style: decimal }
#pun .post-content li { margin: 0 0 3px; list-style: inherit; line-height: 150% }
#pun .post-content li::marker { color: var(--accent-warm) }
#pun .post-content del { color: var(--text-pale) }
#pun .post-content hr { height: 1px; margin: 14px 0; border: none; background: var(--accent-warm); opacity: 1 }
#pun .post-content .scrollbox { padding-right: 6px }
.punbb .post-sig dt { display: block; width: 250px; margin: 5px 0; border-top: 1px solid var(--border) }

/* модменю, служебные сообщения */
.punbb .modmenu { margin: 14px 0 0 }
.punbb .modmenu .container { padding: 0; text-align: left }
.punbb .modmenu a { height: 20px; line-height: 20px }
.punbb .modmenu input { margin-left: 11px }
#topic-modmenu { margin: 18px 0 0 }
#topic-users-in { margin: 12px 0 0; color: var(--text-pale) }
#topic-users-in .container span { font-weight: 400 !important }
#post-form { margin: 18px 0 0 }
.punbb .info .container { padding: 9px 11px }
.punbb .info .container .backlink { padding-top: 9px }
.punbb .info-box { margin: 0 0 12px; padding: 12px 19px 11px; border: 1px solid var(--border) }
.punbb .info-box * { padding: 0 0 8px }
.punbb #pun-main .info-box .legend { font-size: 12px; font-weight: bold }

/* формы */
.punbb .formal .container { padding: 19px 25px 12px }
.punbb .formsubmit { margin: 11px 0 0; padding: 0 0 0 19px }
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span { margin: 0 7px 0 0 }
.punbb fieldset { margin: 0 0 11px; padding: 0 18px; border: 1px solid var(--border) }
.punbb fieldset legend { margin: 0 0 0 11px; padding: 0; font-size: 12px }
.punbb fieldset legend span { margin: 0 0 0 -15px; padding: 0 5px }
.punbb fieldset fieldset { margin: 0; padding: 0 0 8px; border: none }
.punbb .fs-box { padding: 11px 0 9px }
.punbb .fs-box p, .punbb .fs-box fieldset { padding: 0 0 9px }
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield { float: left; margin-right: 11px }
.punbb .inline .infofield { clear: both }
.punbb .datafield br { display: none }
.punbb .required label, .punbb .datafield span.input { font-weight: bold }
.punbb .datafield span.input a { font-weight: normal }
.punbb .areafield span.input, .punbb p.longinput span.input { display: block; padding: 0 132px 0 0 }
.punbb textarea, .punbb .longinput input { width: 64%; margin: 0 }
.punbb .hashelp { position: relative }
.punbb .helplinks { display: block; position: absolute; top: 11px; right: 0; width: 36%; font-weight: normal }
.punbb #profile .helplinks { top: 16px }
.punbb .helplinks span { display: block; padding-bottom: 2px }
#pun-post .formal .info-box li { margin: 0; padding-left: 4px; line-height: 1.5; list-style: square inside }
.punbb .formal fieldset { margin: 0 0 16px; padding: 0; border: none; background: none }
.punbb .formal legend { display: block; margin: 0 0 10px; padding: 0; font-size: 11px; letter-spacing: .4px; color: var(--accent-warm) }
.punbb .formal legend span { font-size: 11px }
.punbb .formal .fs-box.inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 0 }
.punbb .formal .inline :is(.inputfield, .selectfield, .passfield) { flex: 1 1 0; min-width: 130px; float: none; margin: 0; padding: 0 }
.punbb .formal .inline :is(.inputfield, .selectfield, .passfield) .input { display: block }
.punbb .formal .inline :is(input, select) { width: 100%; max-width: none; height: 32px }
.punbb .formal .inline .infofield { flex: 1 1 100%; margin: 4px 0 0 }
.punbb .formal .formsubmit { padding: 0 }

.punbb :is(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], select) { box-sizing: border-box; max-width: 100%; padding: 8px 12px; border: none; border-radius: 10px; background: var(--surface-raised); color: var(--text); font: 11px var(--font) }
.punbb :is(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], select, textarea):focus { box-shadow: inset 0 0 0 1px var(--accent-warm) }
.punbb :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent) }
.punbb :is(.inputfield, .selectfield, .passfield) label { display: block; margin: 0 0 5px; font-weight: 500; color: var(--text-pale) }
.punbb .infofield { color: var(--text-pale) }
.punbb select option, .punbb select optgroup { background: var(--surface-raised); color: var(--text) }

/* редактор */
#post-form > form.container { padding: 0 }
#post-form fieldset, #post-form .fs-box { margin: 0; padding: 0; border: none; background: none }
#post-form .areafield span.input { padding: 0 }
#pun #post-form .fs-box { display: flex; flex-direction: column }
#pun #post-form .fs-box > .inputfield.longinput { order: -1; margin-bottom: 10px }
#pun #post-form #tags { position: relative }
#pun #post-form #tags > .container { top: 0 }
.punbb .formal textarea { box-sizing: border-box; width: 100%; min-height: 180px; padding: 12px 14px; border: none; border-radius: 12px; background: var(--surface-raised); color: var(--text); line-height: 160%; resize: vertical }
.punbb .grippie, #box_file_uploader { display: none }
#form-buttons { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 8px; padding: 4px; border-radius: 12px; background: var(--surface-raised) }
#form-buttons table, #form-buttons tbody, #form-buttons tr { display: contents }
#form-buttons td { position: relative; flex: 1 1 0; min-width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px; background-image: none !important; color: var(--text-pale); cursor: pointer; transition: color .12s ease-in-out, background .12s ease-in-out }
#form-buttons td:hover { background: var(--surface); color: var(--accent) }
#form-buttons td:before { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 400 13px/1 var(--fa) }
#form-buttons td img { position: relative; z-index: 2; display: block; width: 100%; height: 26px; opacity: 0 }
#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-center:before { content: "\f037" }
#button-right:before { content: "\f038" }
#button-link:before { content: "\f0c1" }
#button-spoiler:before { content: "\f0fe" }
#button-image:before { content: "\f03e" }
#button-video:before { content: "\f03d" }
#button-hide:before { content: "\f023" }
#button-quote:before { content: "\f10d" }
#button-code:before { content: "\f121" }
#button-color:before { content: "\f53f" }
#button-table:before { content: "\f00a" }
#button-sticker:before { content: "\f249" }
#button-smile, #smilies-area { display: none }
#button-keyboard:before { content: "\f11c" }
#button-addition:before { content: "\2b" }
#button-files_rusff:before { content: "\f0c6" }
#button-graffiti_rusff:before { content: "\f1fc" }
.hvStickerPackModalContainer .hidden { display: none !important }
.hvStickerPackModal { padding: 10px !important; border: none !important; border-radius: 14px !important; background: var(--surface) !important; box-shadow: 0 8px 24px rgb(11 13 13 / 14%) !important }
.hvStickerPackModalContent:not(.hidden) { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; max-height: 250px !important; padding: 0 !important; overflow-y: auto !important; border: none !important; border-radius: 0 !important; background: none !important; scrollbar-width: thin; scrollbar-color: var(--accent-warm) transparent }
.hvStickerPackItem { display: flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 8px !important; cursor: pointer; transition: background .12s ease-in-out }
.hvStickerPackItem:hover { background: var(--surface-raised) !important }
.hvStickerPackItem img { width: 16px !important; height: 16px !important; margin: 0 !important; image-rendering: pixelated }
.hvStickerPackModalTabs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 10px 0 0 !important; padding: 0 !important; border: none !important }
.hvStickerPackModalTab { padding: 5px 14px !important; border: none !important; border-radius: 20px !important; background: var(--surface-raised) !important; font: 400 11px var(--font) !important; color: var(--text-pale) !important; text-transform: lowercase; cursor: pointer }
.hvStickerPackModalTab:hover { color: var(--accent) !important }
.hvStickerPackModalTab.active { background: var(--accent) !important; color: var(--on-accent) !important }
.hvStickerPackModalAdd { gap: 6px !important; margin: 8px 0 0 !important; padding: 0 !important }
.hvStickerPackModalAdd:not(.hidden) { display: flex !important }
.hvStickerPackModalBulk:not(.hidden) { gap: 6px !important }
.hvStickerPackModalInput { flex: 1 1 auto; min-width: 0; padding: 7px 12px !important; border: none !important; border-radius: 10px !important; background: var(--surface-raised) !important; font: 400 11px var(--font) !important; color: var(--text) !important }
.hvStickerPackModalInput::placeholder { color: var(--text-pale) }
.hvStickerPackModalTextarea { flex: 1 1 100%; min-height: 80px; resize: vertical }
.hvStickerPackModalAddButton { flex: 0 0 auto; padding: 7px 14px !important; border: none !important; border-radius: 10px !important; background: var(--accent) !important; font: 400 11px var(--font) !important; color: var(--on-accent) !important; cursor: pointer }
.hvStickerPackModalAddButton:hover { background: var(--link-hover) !important }
.hvStickerPackModalCancelButton { background: var(--surface-raised) !important; color: var(--text-pale) !important }
#font-area, #size-area, #color-area, #table-area, #image-area, #video-area,
#spoiler-area, #keyboard-area, #addition-area, #smilies-area { max-height: 300px; padding: 10px; overflow-y: auto; border: none; border-radius: 12px; background: var(--surface-raised); box-shadow: 0 8px 24px rgb(11 13 13 / 14%); scrollbar-width: thin; scrollbar-color: var(--accent-warm) transparent }
#pun ::-webkit-scrollbar { width: 6px; height: 6px }
#pun ::-webkit-scrollbar-track, #pun ::-webkit-scrollbar-corner { background: transparent }
#pun ::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--accent-warm) }
#font-area div, #size-area div, #addition-area div { padding: 5px 8px; border-radius: 8px; cursor: pointer }
#font-area div:hover, #size-area div:hover, #addition-area div:hover { background: var(--surface); color: var(--accent) }
#color-area td { width: 18px; height: 18px; padding: 0; border: none; border-radius: 6px; cursor: pointer }
#table-area td { width: 14px; height: 14px; padding: 0; border: 1px solid var(--surface); background: var(--surface-raised); cursor: pointer }
#table-area td.selected { background: var(--accent-warm) }
#smilies-area img { margin: 0 6px 6px 0; cursor: pointer }
#keyboard-span input { min-width: 26px; margin: 2px; padding: 4px 6px; border: none; border-radius: 8px; background: var(--surface); color: var(--text); font: 11px var(--font); cursor: pointer }
#keyboard-span input:hover { background: var(--accent-warm) }
#post-form .formsubmit { display: flex; gap: 8px; margin: 10px 0 0; padding: 0 }
.punbb input.button { padding: 8px 20px; border: none; border-radius: 20px; background: var(--surface-raised); color: var(--text); font: 11px var(--font); text-transform: lowercase; cursor: pointer; transition: color .12s ease-in-out, background .12s ease-in-out }
.punbb input.button:hover { background: var(--accent-warm) }
.punbb input.button[type="submit"]:not(.preview) { background: var(--accent); color: var(--on-accent) }
.punbb input.button[type="submit"]:not(.preview):hover { background: var(--link-hover) }
#post-preview .post-box { padding: 12px 14px; border-radius: 12px; background: var(--surface-raised) }

/* профиль */
#profile .container { padding-left: 205px }
#profilenav { float: left; display: inline; width: 154px; margin-left: -179px }
#profilenav li { padding-bottom: 9px; font-weight: bold }
#viewprofile ul, #profilenav ul { margin: 0 0 11px; padding: 17px 18px 9px; border: 1px solid var(--border) }
#viewprofile h2, #profilenav h2 { margin: 0 14px -7px; padding: 0; background: transparent }
#viewprofile h2 span, #profilenav h2 span { position: relative; padding: 0 5px }
#viewprofile li, #setmods dl { margin-bottom: 2px; padding: 0 0 0 176px }
#viewprofile li span { float: left; width: 154px; margin-left: -176px; padding: 6px 11px; font-weight: bold }
#setmods dt { float: left; display: inline; width: 154px; margin-left: -176px; padding: 9px 11px; font-weight: bold }
#viewprofile li strong, #viewprofile li div, #setmods dd { display: block; padding: 6px 11px; font-weight: normal }
.punbb img.avatardemo { float: right; margin: 0 0 9px 20px }

/* участники */
#pun-userlist .formal, #pun-userlist .formal .container { margin-bottom: 0 }
#pun-userlist .formal .container { padding: 0 0 14px }
#pun-userlist .usertable .container { padding: 0; border: none }
#pun-userlist .usertable table { width: 100%; padding: 0 6px; border: none; border-spacing: 0 6px; border-radius: 14px; background: var(--surface-raised) }
#pun-userlist .usertable th { padding: 4px 8px 10px; border: none; border-bottom: 1px solid var(--accent-warm); font-size: 9px; letter-spacing: .5px; text-align: left; color: var(--accent-warm) }
#pun-userlist .usertable td { padding: 9px 8px; border: none; font-size: 11px; color: var(--text-pale) }
#pun-userlist .usertable td:first-child { border-radius: 10px 0 0 10px; padding-left: 12px }
#pun-userlist .usertable td:last-child { border-radius: 0 10px 10px 0; padding-right: 12px }
#pun-userlist .usertable td.username { text-align: left; white-space: nowrap; vertical-align: middle }
#pun-userlist .usertable .user-avatar { display: inline-block; float: none !important; vertical-align: middle; overflow: hidden; width: 32px !important; height: 32px !important; margin: 0 10px 0 0 !important; border-radius: 50% !important; box-shadow: 0 0 0 1px var(--accent-warm) }
#pun-userlist .usertable .user-avatar a, #pun-userlist .usertable .avatar-image { display: block !important; float: none !important; width: 100% !important; height: 100% !important }
#pun-userlist .usertable .avatar-image { background-position: center; background-size: cover }
#pun-userlist .usertable .usersname a { font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--text) }
#pun-userlist .usertable .usersname a:hover { color: var(--link-hover) }
#pun-userlist .usertable td.user_title { font-size: 10px; letter-spacing: .3px }
#pun-userlist .usertable td.relation { font-size: 12px; font-weight: 500; color: var(--accent) }
#pun-userlist .usertable td.num_posts { font-size: 12px; font-weight: 500; color: var(--accent-alt) }
#pun-userlist .usertable td:is(.registered, .last_visit) { font-size: 10px }
#pun-userlist .usertable :is(td, th).username { width: 26% }
#pun-userlist .usertable :is(td, th):is(.title, .user_title) { width: 22% }
#pun-userlist .usertable :is(td, th):is(.registered, .last_visit) { width: 15%; white-space: nowrap }

/* статистика, футер */
#pun-stats .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 9px 0 }
#pun-stats .container:after { display: none }
#pun-stats li.item1, #pun-stats li.item2, #pun-stats li.item3, #pun-stats li.item4 { flex: 1 1 0; padding: 7px 18px; border-radius: 20px; background: var(--surface-raised); text-align: center; line-height: 140%; white-space: nowrap }
#pun-stats li.item1 span, #pun-stats li.item2 span, #pun-stats li.item3 span, #pun-stats li.item4 span { display: none }
#pun-stats li.item1:before, #pun-stats li.item2:before, #pun-stats li.item3:before, #pun-stats li.item4:before { color: var(--text-pale) }
#pun-stats li.item1:before { content: "тем: " }
#pun-stats li.item2:before { content: "сообщений: " }
#pun-stats li.item3:before { content: "участников: " }
#pun-stats li.item4:before { content: "новичок: " }
#pun-stats li span { color: var(--text-pale) }
#pun-stats li strong { font-weight: 500 }
#pun-stats .onlinelist, #pun-stats .users_24h, #pun-stats .statistics { box-sizing: border-box; flex: 0 0 100%; padding: 0 18px; font-size: 11px; line-height: 160%; color: var(--text-pale) }
#pun-stats .onlinelist { margin-top: 7px }
#pun-stats :is(.onlinelist, .users_24h) > div > a:first-child { font-weight: 500 }
#pun-stats :is(.onlinelist, .users_24h) span a { color: var(--text) }
#pun-stats :is(.onlinelist, .users_24h) span a:hover { color: var(--link-hover) }
#pun-stats #statistic-other { display: flex; flex-wrap: wrap; gap: 4px 14px }
#pun-stats #statistic-other span { padding-right: 0 }
#pun-qjump { float: left; position: relative; width: 50%; margin: 0 }
#pun-qjump .container { padding: 9px 11px; background: transparent }
#pun-about { order: 99; position: relative; z-index: 2; top: -26px; height: 0; margin: 0 }
#pun-about .container { padding: 0; text-align: center; font-size: 9px; line-height: 150%; color: var(--on-accent); text-shadow: 0 1px 3px rgb(11 13 13 / 45%) }
#pun-about a { color: var(--on-accent) }

/* кнопки вверх-вниз */
.go-up, .go-down { display: none; position: fixed; right: 20px; z-index: 50; width: 96px; height: 72px; opacity: .85; cursor: pointer; transition: opacity .12s ease-in-out, transform .12s ease-in-out }
.go-up { bottom: 146px }
.go-down { bottom: 66px }
.go-up img, .go-down img { display: block; width: 100%; height: auto }
.go-up:hover, .go-down:hover { opacity: 1 }
.go-up:hover { transform: translateY(-3px) }
.go-down:hover { transform: translateY(3px) }

/* помощь */
#pun-help .formal .info-box h3.legend { margin-bottom: 9px; padding-bottom: 0; border-bottom: 1px solid var(--border) }
#pun-help .formal .info-box h3.legend span { display: block; padding-bottom: 7px; border-bottom: 1px solid var(--border); font-size: 12px }
#pun-help .formal p, #pun-help .formal dd { margin-bottom: 11px }
#pun-help .formal ul, #pun-help .formal dl { padding: 0 0 0 11px }
#pun-help .formal li { padding: 0; line-height: 130% }
#pun-help .formal li * { vertical-align: text-top }
#pun-help .formal dt span { font: 15px/120% "courier new", courier, monospace }
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode { padding-bottom: 0 }