@charset "windows-1251";

/*
    Дизайн by noxscriptum.

    Держится на святой троице:
    display: none;
    !important;
    overflow: hidden;

    А также на моих слезах, кофе
    и подозрительно живучем родном хтмл времён динозавров.
*/

@import url(style_cs.1780270031.css);
@import url("https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Forum&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Marck+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Nunito+Sans:ital,wght@0,200..900;1,200..900&family=Philosopher:wght@400;700&family=Rubik:wght@400;500;600;700&display=swap");

/* Consolidated resets */
:root {
    --text: 43 29 25;
    --cat: 75 62 75;
    --body: 232 222 213;
    --border: 154 132 128;
    --hover: 28 23 28;
    --accent: 181 134 47;
    --font: "Inter", Arial, Helvetica, sans-serif;
    --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-ui: "Montserrat", Arial, Helvetica, sans-serif;
    --fa: "Font Awesome 6 Pro";
    --wrap: 1080px;
    --profile: 220px;
    --16: 16px;
    --40: calc(var(--16) * 2.5);
    --32: calc(var(--16) * 2);
    --28: calc(var(--16) * 1.75);
    --24: calc(var(--16) * 1.5);
    --20: calc(var(--16) * 1.25);
    --18: calc(var(--16) * 1.125);
    --14: calc(var(--16) / 1.14);
    --12: calc(var(--16) / 1.33);
    --10: calc(var(--16) / 1.6);
    --8: calc(var(--16) / 2);
    --6: calc(var(--16) / 2.66);
    --4: calc(var(--16) / 4);
    --2: calc(var(--16) / 8);
    --punWidth: var(--wrap);
    --punPad: var(--40);
    --bodyWidth: calc(var(--punWidth) - calc(var(--punPad) * 2));
    --avatarWidth: 180px;
    --profilePad: var(--16);
    --profileWidth: calc(var(--avatarWidth) + calc(var(--profilePad) * 2));
    --postGap: var(--24);
    --radius: 4px;
    --rsmall: calc(var(--radius) / 2);
    --rbig: calc(var(--radius) * 2);
    --shadow: 0 var(--8) var(--32) rgb(var(--text) / .18);
    --shadowSmall: 0 var(--4) var(--16) rgb(var(--text) / .12);
    --backdrop: url('https://forumstatic.ru/files/001c/b8/0a/91164.jpg');
    --header-bg: url('https://forumstatic.ru/files/001c/b8/0a/84346.jpg');
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Hidden elements and list resets */
#post fieldset legend > span,
#pun-break1,
#pun-break4,
#pun-index #pun-main h1,
#pun-index .category .tc2,
#pun-index .category .tc3,
#pun-index thead,
#pun-main h1,
#pun-title,
.clearer,
.datafield br,
.sharelink, .pa-gifts, #pun-announcement h2 {
    display: none;
}

#pun-viewtopic p.container:has(#mod-options) > span,
#pun-profile #viewprofile-next #profilenav,
#viewprofile-next #profilenav {
    display: none !important;
}

#profilenav li,
#pun-navlinks li,
#pun-stats li,
#pun-status li,
#pun-ulinks li,
.modmenu li,
.post-author li,
.post-links li,
.punbb:not(.punbb-admin) #pun-ulinks li,
#pun-admain * {
    list-style: none;
}

html {
    font: normal 70%/1.4 var(--font);
    color: rgb(var(--text));
    background: var(--backdrop) no-repeat center top / cover fixed, rgb(var(--cat));
    padding: var(--32) 0;
}

body {
    min-height: 100vh;
}

#pun {
    width: var(--punWidth);
    margin: 0 auto;
}

.punbb {
    position: relative;
    padding: 0 var(--32) var(--16);
    background: rgb(var(--body));
    border-radius: var(--rbig);
}

.punbb .container {
    padding-block: var(--16);
    padding-inline: 0;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#pun .post-content td {
    border: none !important;
    padding: var(--8) !important;
    vertical-align: top;
}

.checkfield input[type="checkbox"], .radiofield input[type="radio"], .punbb input[type="checkbox"], .punbb input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-grid;
    place-content: center;
    width: var(--14);
    height: var(--14);
    margin: 0 var(--6) 0 0;
    border-radius: var(--rsmall);
    background: rgb(var(--body) / .78);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .42), 0 var(--2) var(--6) rgb(var(--text) / .06);
    vertical-align: middle;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.radiofield input[type="radio"], .punbb input[type="radio"] {
    border-radius: 50%;
}

.checkfield input[type="checkbox"]::before, .punbb input[type="checkbox"]::before {
    content: "\f00c ";
    color: rgb(var(--body));
    font: 900 .58rem/1 var(--fa);
    transform: scale(0);
    transition: transform .15s ease;
}

.radiofield input[type="radio"]::before, .punbb input[type="radio"]::before {
    content: "";
    width: var(--6);
    height: var(--6);
    border-radius: 50%;
    background: rgb(var(--body));
    transform: scale(0);
    transition: transform .15s ease;
}

.checkfield input[type="checkbox"]:checked, .radiofield input[type="radio"]:checked, .punbb input[type="checkbox"]:checked, .punbb input[type="radio"]:checked {
    background: rgb(var(--cat));
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .18), 0 var(--3, 3px) var(--8) rgb(var(--text) / .12);
}

.checkfield input[type="checkbox"]:checked::before, .radiofield input[type="radio"]:checked::before, .punbb input[type="checkbox"]:checked::before, .punbb input[type="radio"]:checked::before {
    transform: scale(1);
}

.checkfield input[type="checkbox"]:hover, .radiofield input[type="radio"]:hover, .punbb input[type="checkbox"]:hover, .punbb input[type="radio"]:hover {
    box-shadow: inset 0 0 0 1px rgb(var(--cat) / .55), 0 var(--3, 3px) var(--8) rgb(var(--text) / .10);
    transform: translateY(-1px);
}

.checkfield input[type="checkbox"]:focus-visible, .radiofield input[type="radio"]:focus-visible, .punbb input[type="checkbox"]:focus-visible, .punbb input[type="radio"]:focus-visible {
    box-shadow: inset 0 0 0 1px rgb(var(--cat)), 0 0 0 3px rgb(var(--cat) / .14);
}

p.checkfield, div.checkfield, fieldset.radiofield {
    line-height: 1.6;
}

p.checkfield label, div.checkfield label, fieldset.radiofield label {
    display: inline-flex;
    align-items: center;
    gap: var(--4);
    margin-right: var(--12);
    color: rgb(var(--text) / .82);
    cursor: pointer;
}

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

input, textarea, select, optgroup, button {
    font: inherit;
}

:is(.punbb, .punbb-admin) a {
    color: rgb(var(--cat));
    text-decoration: none;
    transition: color .2s ease;
}

:is(.punbb, .punbb-admin) a:hover, :is(.punbb, .punbb-admin) a:focus {
    color: rgb(var(--hover));
    text-decoration: none;
}

#pun-adnav a, #pun-adnav a:link, #pun-adnav a:visited {
    color: rgb(var(--cat));
    text-decoration: none;
}

#pun-adnav a:hover, #pun-adnav a:focus, #pun-adnav a:active {
    color: rgb(var(--hover));
    text-decoration: none;
}

#pun-adnav li.isactive > a {
    color: rgb(var(--hover));
}

#pun::after, .punbb .container::after, .punbb .post-links ul::after, .punbb .main div.inline::after, .punbb .post-box::after, .punbb .linksb::after, #viewprofile-next::after, .post-body::after, .linkst::after {
    content: "";
    display: block;
    clear: both;
}

.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;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#pun-redirect, #pun-maint {
    width: min(600px, calc(100% - var(--32)));
    margin: var(--40) auto var(--12);
    float: none;
}

#pun-index .category {
    margin-top: var(--24);
}

#pun-index .category h2 {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .16), transparent 45%), linear-gradient(180deg, rgb(var(--cat) / .96), rgb(var(--cat)));
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: inset 0 1px 0 rgb(var(--body) / .18), inset 0 -1px 0 rgb(var(--text) / .16);
    overflow: hidden;
}

#pun-index .category h2 span {
    display: flex;
    align-items: center;
    gap: var(--8);
    min-height: var(--34, 34px);
    padding: 0 var(--16);
    color: rgb(var(--body));
    font: 800 .78rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .07em;
}

#pun-index .category h2 span::before {
    content: "\f02e ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--20);
    height: var(--20);
    flex: 0 0 var(--20);
    border-radius: 50%;
    background: rgb(var(--body) / .16);
    color: rgb(var(--body));
    font: 900 .68rem/1 var(--fa);
}

#pun-index .category:nth-child(even) h2 span::before {
    color: rgb(var(--accent));
}

#pun-index .category:nth-child(odd) h2 span::before {
    content: "\f0e7";
}

#pun-index .category .container {
    padding: var(--12);
    overflow: hidden;
    background: rgb(var(--cat) / .06);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18), 0 var(--6) var(--18) rgb(var(--text) / .04);
}

#pun-index .category table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 var(--8) !important;
}

#pun-index .category tbody tr {
    background: rgb(var(--body) / .48);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .20), 0 var(--4) var(--14) rgb(var(--text) / .045);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

#pun-index .category tbody tr:hover {
    background: rgb(var(--body) / .64);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .32), 0 var(--6) var(--18) rgb(var(--text) / .075);
    transform: translateY(-1px);
}

#pun-index .category tbody tr td:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

#pun-index .category tbody tr td:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

#pun-index .category td {
    padding: var(--12) var(--14) !important;
    border: 0 !important;
    vertical-align: middle;
}

#pun-index .category .tcl {
    width: auto;
}

#pun-index .category .tcr {
    width: 338px;
    color: rgb(var(--text) / .68);
    font: 600 .82rem/1.35 var(--font);
}

#pun-index .category .intd {
    display: flex;
    align-items: center;
    gap: var(--12);
    min-width: 0;
}

#pun-index .category .tclcon {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: var(--4);
    text-align: justify;
}

#pun-index .category .icon {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--36, 36px);
    width: var(--36, 36px);
    height: var(--36, 36px);
    margin: 0 !important;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .30), transparent 58%), rgb(var(--cat) / .14);
    color: rgb(var(--cat));
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .24), 0 var(--4) var(--12) rgb(var(--text) / .06);
    font-size: 0;
}

#pun-index .category .icon::before {
    content: "\f4ad ";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font: 900 1.2rem/1 var(--fa);
}

#pun-index .category tr.inew .icon,
#pun-index .category .inew .icon {
    color: rgb(var(--accent));
    animation: new-post-pulse 1.8s ease-in-out infinite;
}

#pun-index .category tr.inew .icon::before,
#pun-index .category .inew .icon::before {
    content: "\f0e7";
    font-size: 1.4rem;
    animation: new-post-spark 1.8s ease-in-out infinite;
}

@keyframes new-post-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            inset 0 0 0 1px rgb(var(--border) / .24),
            0 var(--4) var(--12) rgb(var(--text) / .06);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            inset 0 0 0 1px rgb(var(--accent) / .45),
            0 0 var(--16) rgb(var(--accent) / .38);
    }
}

@keyframes new-post-spark {
    0%,
    100% {
        transform: scale(1);
        opacity: .88;
    }

    50% {
        transform: scale(1.14);
        opacity: 1;
    }
}

#pun-index .category .tclcon h3 {
    margin: 0;
    font: 800 1rem/1.25 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
}

#pun-index .category .tclcon h3 a {
    color: rgb(var(--cat)) !important;
    text-decoration: none !important;
}

#pun-index .category .tclcon h3 a:hover, #pun-index .category .tclcon h3 a:focus {
    color: rgb(var(--hover)) !important;
}

#pun-index .category .tclcon p, #pun-index .category .tclcon .modlist {
    margin: 0;
    color: rgb(var(--text) / .58);
    font: 600 .78rem/1.35 var(--font);
}

#pun-index .category .tclcon .modlist {
    margin-top: var(--2);
    font-size: .76rem;
}

#pun-index .category .tclcon .modlist::before {
    content: "\f505 ";
    margin-right: var(--5, 5px);
    color: rgb(var(--cat) / .75);
    font: 900 .68rem/1 var(--fa);
}

#pun-index .category .lastpost-link {
    display: inline-flex;
    align-items: center;
    gap: var(--5, 5px);
    margin-bottom: var(--3, 3px);
    color: rgb(var(--cat)) !important;
    font: 800 .74rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none !important;
}

#pun-index .category .lastpost-link::before {
    content: "\f017 ";
    font: 900 .68rem/1 var(--fa);
}

#pun-index .category .lastpost-link:hover, #pun-index .category .lastpost-link:focus {
    color: rgb(var(--hover)) !important;
}

#pun-index .category .lastpost {
    display: block;
    color: rgb(var(--text) / .62);
    font: 600 .78rem/1.35 var(--font);
}

#pun-index .category .lastpost .byuser, #pun-index .category .byuser {
    display: inline-flex;
    align-items: center;
    margin-left: var(--3, 3px);
    color: rgb(var(--text) / .52);
    font: 600 .76rem/1.2 var(--font-ui);
    text-transform: lowercase;
    letter-spacing: .02em;
}

#pun-index .category .byuser::before {
    content: "от";
    margin-right: var(--4);
    color: rgb(var(--text) / .40);
}

#pun-index .category .byuser-username {
    color: rgb(var(--cat));
}

#pun-index .category .user-avatar {
    display: inline-flex;
    width: var(--30, 30px);
    height: var(--30, 30px);
    margin: 0 var(--8) 0 0;
    vertical-align: middle;
}

#pun-index .category .user-avatar a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

#pun-index .category .avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 2px rgb(var(--body)), 0 0 0 3px rgb(var(--border) / .34);
}

#pun-index .category .isonline {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: var(--7, 7px);
    height: var(--7, 7px);
    border-radius: 50%;
    background: rgb(var(--hover));
    box-shadow: 0 0 0 2px rgb(var(--body));
}

#pun-index .category .tcr:empty::before {
    display: inline-flex;
    align-items: center;
    gap: var(--6);
    color: rgb(var(--text) / .46);
    font: 700 .72rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .05em;
    content: "\f186  Пока тихо";
    font-family: var(--fa), var(--font-ui);
}

.post-content img, .post-sig img {
    max-width: 100%;
    vertical-align: middle;
}

.post-content .scrollbox {
    width: 100%;
    overflow: auto;
}

.quote-box, .code-box {
    margin: var(--8) 0;
    padding: var(--12) var(--16);
    background: rgb(var(--border) / .12);
}

.quote-box cite, .code-box strong.legend {
    display: block;
    margin-bottom: var(--8);
    font-style: normal;
    font-weight: 600;
}

.info-box {
    margin: 0 0 var(--16);
    padding: var(--16);
    background: rgb(var(--border) / .12);
    border-radius: var(--radius);
}

.info-box p, .info-box ul, .info-box ol, .info-box dl {
    margin-bottom: var(--8);
}

.info-box p:last-child, .info-box ul:last-child, .info-box ol:last-child, .info-box dl:last-child {
    margin-bottom: 0;
}

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

.linkst, .linksb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--8);
    width: 100%;
    height: auto;
    margin: var(--16) 0;
    position: static;
    float: none;
}

.linkst .pagelink, .linksb .pagelink {
    margin-right: auto;
}

.linkst .postlink, .linksb .postlink, .postlink.long {
    position: static;
    float: none;
    top: auto;
    right: auto;
    width: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--8);
    text-align: right;
    font-weight: 600;
}

#pun-viewtopic .pagelink {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    width: fit-content;
    max-width: 100%;
    min-height: var(--28);
    padding: var(--6) var(--12);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .42), transparent 58%), rgb(var(--cat) / .10);
    color: rgb(var(--text) / .62);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22), 0 var(--4) var(--12) rgb(var(--text) / .05);
    font: 700 .72rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .05em;
}

#pun-viewtopic .pagelink::before {
    content: "\f02e ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--18);
    height: var(--18);
    flex: 0 0 var(--18);
    border-radius: 50%;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    font: 900 .62rem/1 var(--fa);
}

#pun-viewtopic .pagelink strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--22, 22px);
    height: var(--22, 22px);
    padding: 0 var(--7, 7px);
    border-radius: 999px;
    background: rgb(var(--body) / .76);
    color: rgb(var(--cat));
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
    font: 800 .72rem/1 var(--font-ui);
}

#pun-viewtopic .pagelink a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--22, 22px);
    height: var(--22, 22px);
    padding: 0 var(--7, 7px);
    border-radius: 999px;
    background: rgb(var(--border) / .18);
    color: rgb(var(--cat)) !important;
    font: 800 .72rem/1 var(--font-ui);
    text-decoration: none !important;
}

#pun-viewtopic .pagelink a:hover {
    background: rgb(var(--cat));
    color: rgb(var(--body)) !important;
}

.subscribelink {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: var(--8) 0 var(--10) !important;
    text-align: right;
}

.subscribelink a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    min-height: var(--28);
    padding: var(--6) var(--14);
    border-radius: 999px;
    background: rgb(var(--cat) / .10);
    color: rgb(var(--cat)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22), 0 var(--4) var(--12) rgb(var(--text) / .05);
    font: 800 .68rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.subscribelink a::before {
    content: "\f02e ";
    font: 900 .72rem/1 var(--fa);
}

.subscribelink a:hover, .subscribelink a:focus {
    background: rgb(var(--cat));
    color: rgb(var(--body)) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .18), 0 var(--6) var(--18) rgb(var(--text) / .14);
}

#s-block {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--6);
    width: fit-content;
    max-width: 100%;
    margin: var(--8) 0 var(--12) auto;
    padding: var(--5, 5px) var(--6);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .42), transparent 58%), rgb(var(--cat) / .08);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22), 0 var(--4) var(--12) rgb(var(--text) / .05);
}

#sTheme {
    width: 220px;
    max-width: calc(100vw - var(--64, 64px));
    height: var(--28);
    padding: 0 var(--10);
    border: 0;
    outline: 0;
    border-radius: 999px;
    background: rgb(var(--body) / .76);
    color: rgb(var(--text));
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .20);
    font: 700 .76rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .035em;
}

#sTheme::placeholder {
    color: rgb(var(--text) / .42);
    opacity: 1;
}

#sTheme:focus {
    background: rgb(var(--body));
    box-shadow: inset 0 0 0 1px rgb(var(--cat) / .55), 0 0 0 3px rgb(var(--cat) / .10);
}

#isk.icons-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--28);
    width: var(--28);
    height: var(--28);
    border-radius: 50%;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .16), 0 var(--3, 3px) var(--10) rgb(var(--text) / .12);
    font-size: 0;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#isk.icons-search::before {
    content: "\f002 ";
    font: 900 .74rem/1 var(--fa);
}

#isk.icons-search:hover, #isk.icons-search:focus {
    background: rgb(var(--hover));
    color: rgb(var(--body));
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .20), 0 var(--5, 5px) var(--14) rgb(var(--text) / .18);
}

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

.formsubmit input, .formsubmit a, .formsubmit span {
    margin-right: var(--8);
}

fieldset {
    margin-bottom: var(--16);
    padding: var(--16);
    background: rgb(var(--border) / .08);
    border-radius: var(--radius);
}

.fs-box {
    padding: var(--8) 0;
}

.fs-box p, .fs-box fieldset {
    margin-bottom: var(--8);
}

.inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--12);
    align-items: flex-end;
}

.inline .inputfield, .inline .selectfield, .inline .passfield {
    margin: 0;
}

.required label, .datafield span.input {
    font-weight: 600;
}

.datafield span.input a {
    font-weight: normal;
}

.areafield span.input, .longinput span.input {
    display: block;
}

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

.hashelp {
    position: relative;
}

.helplinks {
    display: block;
    margin-top: var(--8);
    font-size: .9rem;
}

.helplinks span {
    display: block;
    margin-bottom: var(--4);
}

#pun-post .formal .info-box li {
    padding-left: var(--8);
    list-style-type: square;
    list-style-position: inside;
    line-height: 1.5;
}

.main .tcl {
    width: 50%;
    text-align: left;
}

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

.main .tcr {
    width: 30%;
    text-align: left;
}

.main td {
    padding: var(--12) var(--16);
    vertical-align: middle;
}

.main th {
    padding: var(--6) var(--16);
    text-align: left;
    font-weight: 600;
}

tbody.hasicon td.tcl {
    position: relative;
    padding-left: var(--32);
}

.post-author::before {
    content: "";
    position: absolute;
    inset: var(--6);
    border: 1px dashed rgb(var(--border) / .35);
    border-radius: calc(var(--rbig) - var(--6));
    pointer-events: none;
}

.post-author ul {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--6);
}

.post-author li {
    list-style: none;
    line-height: 1.25;
}

.post-author .pa-author {
    position: static;
}

.post-author #tuser {
    position: absolute;
    top: var(--2);
    left: var(--2);
    z-index: 5;
    width: var(--22);
    height: var(--22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 50%;
    background: rgb(var(--body) / .82);
    color: rgb(var(--cat));
    box-shadow: 0 var(--4) var(--10) rgb(var(--text) / .12);
    font-size: 0;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity .2s ease, visibility .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.post-author #tuser::before {
    content: "\f002 ";
    font: 900 .75rem/1 var(--fa);
}

.post-author:hover #tuser, .post-author:focus-within #tuser {
    opacity: 1;
    visibility: visible;
}

.post-author #tuser:hover {
    background: rgb(var(--cat));
    color: rgb(var(--body));
    transform: scale(1.08);
}

.pa-author {    padding-bottom: var(--4);
}

.pa-author a {
    display: inline-block;
    color: rgb(var(--cat));
    font: 700 0.9rem/1.1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pa-author .icons-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--18);
    height: var(--18);
    margin-left: var(--4);
    border-radius: 50%;
    background: rgb(var(--body) / .72);
    color: rgb(var(--cat));
    font-size: 0;
    vertical-align: middle;
}

.pa-author .icons-search::before {
    content: "\f002 ";
    font: 900 .72rem/1 var(--fa);
}

.pa-title {
    align-self: center;
    padding: var(--4) var(--10);
    border-radius: 999px;
    background: rgb(var(--cat) / .14);
    color: rgb(var(--cat));
    font: 600 .75rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pa-avatar {
    margin: var(--8) auto;
}

.pa-avatar img {
    display: block;
    max-width: var(--avatarWidth);
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: 0 0 0 var(--4) rgb(var(--body)), 0 0 0 calc(var(--4) + 1px) rgb(var(--border) / .42), 0 var(--8) var(--20) rgb(var(--text) / .18);
}

.pa-posts, .pa-respect {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--6);
    width: 100%;
    padding: var(--6) var(--8);
    border-radius: var(--radius);
    background: rgb(var(--body) / .68);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18);
    font-size: .85rem;
}

.pa-respect a[href*="relation.php"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--18);
    height: var(--18);
    margin-left: auto;
    margin-right: var(--4);
    border-radius: 50%;
    background: rgb(var(--accent) / .14);
    color: rgb(var(--accent));
    box-shadow: inset 0 0 0 1px rgb(var(--accent) / .22);
    flex: 0 0 var(--18);
    line-height: 1;
    font-size: 0;
    text-decoration: none !important;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.pa-respect a[href*="relation.php"]::before {
    content: "\2b";
    display: block;
    font: 900 .62rem/1 var(--font-ui);
}

.pa-respect a[href*="relation.php"]:hover {
    background: rgb(var(--accent));
    color: rgb(var(--body));
    box-shadow:
        inset 0 0 0 1px rgb(var(--body) / .18),
        0 var(--3, 3px) var(--8) rgb(var(--text) / .12);
    transform: translateY(-1px);
}

.pa-respect a[href*="relation.php"] img,
.pa-respect > img[src*="r_add.gif"] {
    display: none !important;
}

.pa-respect > img[src*="r_add.gif"] + span,
.pa-respect > img[src*="r_add.gif"] + strong {
    margin-left: var(--4);
}

.pa-respect span:last-child,
.pa-respect strong:last-child {
    color: rgb(var(--cat));
    font: 700 .82rem/1 var(--font-ui);
    white-space: nowrap;
}

.pa-time-visit, .pa-ip {
    padding: var(--6) var(--8);
    border-radius: var(--radius);
    background: rgb(var(--body) / .45);
    color: rgb(var(--text) / .72);
    font-size: .82rem;
}

.pa-time-visit .fld-name, .pa-ip .fld-name {
    color: rgb(var(--cat));
    font-weight: 600;
}

.pa-online {
    margin-top: var(--4);
    padding: var(--6) var(--8);
    border-radius: 999px;
    background: rgb(var(--hover) / .14);
    color: rgb(var(--hover));
    font: 600 .78rem/1.2 var(--font-ui);
}

.pa-online::before {
    content: "\f111 ";
    margin-right: var(--6);
    font: 900 .48rem/1 var(--fa);
}

.pa-online strong {
    font-weight: 600;
}

.post-author.topic-starter::after {
    content: "\f521 ";
    position: absolute;
    top: var(--10);
    right: var(--10);
    width: var(--24);
    height: var(--24);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    font: 900 .8rem/1 var(--fa);
    box-shadow: 0 var(--4) var(--12) rgb(var(--text) / .16);
}

.post-author.online {
    box-shadow: inset 0 0 0 1px rgb(var(--hover) / .26), 0 var(--8) var(--24) rgb(var(--text) / .10);
}

fieldset .post-box {
    margin-bottom: var(--8);
}

.post-links .pl-email {
    margin-right: var(--8);
}

.reaction-picker {
    display: flex;
    align-items: center;
    position: relative;
}

.reaction-counters-container {
    display: flex;
    align-items: center;
}

#pun-viewtopic p.container:has(#mod-options) {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100%;
    margin: var(--12) 0 var(--16) !important;
    padding: 0 !important;
    text-align: left !important;
}

#pun-viewtopic p.container:has(#mod-options) > strong {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
}

#mod-options {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 230px;
    max-width: 100%;
    min-height: var(--30, 30px);
    padding: var(--6) var(--32) var(--6) var(--12);
    border-radius: 999px;
    border: 0;
    outline: 0;
    background: linear-gradient(45deg, transparent 50%, rgb(var(--body)) 50%) right 13px center / 6px 6px no-repeat, linear-gradient(135deg, rgb(var(--body)) 50%, transparent 50%) right 9px center / 6px 6px no-repeat, radial-gradient(circle at 50% 0, rgb(var(--body) / .20), transparent 58%), rgb(var(--cat));
    color: rgb(var(--body));
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .16), 0 var(--4) var(--14) rgb(var(--text) / .12);
    font: 800 .68rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#mod-options:hover, #mod-options:focus {
    background-color: rgb(var(--hover));
    color: rgb(var(--body));
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .20), 0 var(--6) var(--18) rgb(var(--text) / .18);
}

#mod-options:focus {
    transform: translateY(-1px);
}

#mod-options option {
    background: rgb(var(--body));
    color: rgb(var(--text));
    font: 600 .9rem/1.3 var(--font-ui);
}

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

.info .backlink {
    margin-top: var(--8);
}

#profile .container {
    padding-left: 18.6em;
}

#profilenav {
    float: left;
    width: 14em;
    margin-left: -16.3em;
    display: inline;
}

#profilenav li {
    padding-bottom: var(--8);
    font-weight: 600;
}

#viewprofile ul, #profilenav ul {
    padding: var(--16);
    margin: 0 0 var(--16);
}

#viewprofile h2, #profilenav h2 {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 var(--8);
}

#viewprofile li, #setmods dl {
    padding: 0 0 0 16em;
    margin-bottom: var(--4);
}

#viewprofile li span, #setmods dt {
    float: left;
    width: 14em;
    margin-left: -16em;
    padding: var(--6) var(--8);
    font-weight: 600;
}

#viewprofile li strong, #viewprofile li div, #setmods dd {
    display: block;
    padding: var(--6) var(--8);
    font-weight: normal;
}

img.avatardemo {
    float: right;
    margin: 0 0 var(--8) var(--24);
}

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

#pun-userlist .usertable .container {
    padding: 0 0 var(--24);
}

#pun-userlist .usertable table {
    width: 100%;
}

#hero-header {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% + var(--64));
    height: 270px;
    margin: 0 calc(var(--32) * -1);
    background: var(--header-bg) no-repeat center center / cover;
    border: 0;
    overflow: hidden;
    border-radius: var(--rbig) var(--rbig) 0 0;
}

#hero-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgb(var(--body) / .05), transparent 34%), linear-gradient(90deg, rgb(var(--hover) / .10), transparent 28%, transparent 72%, rgb(var(--hover) / .10));
}

#hero-header .hero-title {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 42px;
    width: 417px;
    max-width: 42%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

#hero-header .hero-title-main {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--12);
    color: rgb(var(--border));
    font: 700 2.15rem/1.1 var(--font-title);
    text-transform: uppercase;
    letter-spacing: .16em;
    text-shadow: 0 1px 0 rgb(var(--text) / .28), 0 0 var(--12) rgb(var(--cat) / .20);
}

#hero-header .hero-title-main::before, #hero-header .hero-title-main::after {
    color: rgb(var(--border) / .70);
    font: 900 .82rem/1 var(--fa);
}

#hero-header .hero-title-main::before {
    content: "\f005 ";
}

#hero-header .hero-title-main::after {
    content: "\f005 ";
}

#hero-header .hero-title-sub {
    position: relative;
    display: block;
    width: min(420px, 90vw);
    margin-top: var(--12);
    padding: 0 var(--28);
    overflow: hidden;
    color: rgb(var(--body) / .58);
    font: 600 .82rem/1.2 var(--font-ui);
    text-transform: lowercase;
    letter-spacing: .12em;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

#hero-header .hero-title-news-track {
    display: inline-flex;
    width: max-content;
    white-space: nowrap;
    padding-left: 100%;
    animation: hero-news-marquee 350s linear infinite;
}

#hero-header .hero-title-news-track span {
    flex: 0 0 auto;
    display: inline-block;
    padding-right: 3em;
}

#hero-header .hero-title-news-track span::after {
    content: "";
    display: inline-block;
    width: .45em;
    height: .45em;
    margin-left: 3em;
    margin-right: 0em;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    vertical-align: middle;
}

@keyframes hero-news-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

#hero-header .hero-quidditch {
    position: absolute;
    z-index: 1;
    top: 75px;
    right: 115px;
    width: 188px;
    color: rgb(var(--body) / .64);
}

#hero-header .hero-quidditch-title {
    position: relative;
    margin: 0 0 var(--18);
    padding-bottom: var(--8);
    color: rgb(var(--border));
    font: 700 1.16rem/1.1 var(--font-title);
    text-transform: uppercase;
    letter-spacing: .14em;
}

#hero-header .hero-quidditch a {
    color: rgb(var(--body) / .64);
}

#hero-header .hero-quidditch a:hover {
    color: rgb(var(--body) / .84);
}

#hero-header .hero-quidditch-title::before {
    content: "\f1e3 ";
    margin-right: var(--8);
    color: rgb(var(--border) / .62);
    font: 900 .86rem/1 var(--fa);
}

#hero-header .hero-quidditch-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 116px;
    height: 1px;
    background: linear-gradient( 90deg, rgb(var(--border) / .46), transparent );
}

#hero-header .hero-house {
    display: grid;
    grid-template-columns: var(--24) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--10);
    min-height: var(--28);
    padding: var(--4) 0;
    border-bottom: 1px solid rgb(var(--border) / .14);
}

#hero-header .hero-house-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--20);
    height: var(--20);
    border-radius: 50%;
    background: rgb(var(--body) / .08);
    color: rgb(var(--border) / .78);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .20);
}

#hero-header .hero-house-icon::before {
    font: 900 .72rem/1 var(--fa);
}

#hero-header .hero-house.hogwarts .hero-house-icon::before {
    content: "\f19d ";
}

#hero-header .hero-house.charmabatons .hero-house-icon::before {
    content: "\e2ca ";
}

#hero-header .hero-house.durmstrang .hero-house-icon::before {
    content: "\f6f0 ";
}

#hero-header .hero-house.total .hero-house-icon::before {
    content: "\f521 ";
}

#hero-header .hero-house.hogwarts .hero-house-icon {
    color: rgb(156 116 86 / .82);
}

#hero-header .hero-house.charmabatons .hero-house-icon {
    color: rgb(142 116 156 / .80);
}

#hero-header .hero-house.durmstrang .hero-house-icon {
    color: rgb(92 116 142 / .80);
}

#hero-header .hero-house.total .hero-house-icon {
    color: rgb(164 139 82 / .84);
}

#hero-header .hero-house-name {
    min-width: 0;
    color: rgb(var(--body) / .60);
    font: 700 .82rem/1.1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hero-header .hero-house-points {
    color: rgb(var(--border) / .88);
    font: 800 .82rem/1 var(--font-ui);
    letter-spacing: .06em;
}

#hero-header .hero-season {
    display: inline-flex;
    align-items: center;
    gap: var(--6);
    margin-top: var(--18);
    color: rgb(var(--body) / .42);
    font: 700 .72rem/1.1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .10em;
}

#hero-header .hero-season::after {
    content: "\f0e7 ";
    color: rgb(var(--border) / .70);
    font: 900 .72rem/1 var(--fa);
}

/* gekmcfwbz */ 

#hero-header {
    position: relative;
    overflow: hidden;
}

#hero-header::after {
    content: "\2726   \2727   \2726   \2727   \2726";
    position: absolute;
    z-index: 4;
    left: 34%;
    top: 52%;
    width: 72%;
    pointer-events: none;
    opacity: 0;
    color: rgb(var(--accent));
    font: 700 1.2rem/1 var(--font-title);
    letter-spacing: 3.4rem;
    text-shadow:
        0 0 6px rgb(var(--accent) / .75),
        0 0 18px rgb(var(--accent) / .42);
    transform: translateY(8px);
    transition:
        opacity .25s ease,
        transform .25s ease;
}

#hero-header:hover::after {
    opacity: .95;
    transform: translateY(0);
    animation: hero-stars 1.8s ease-in-out infinite;
}

@keyframes hero-stars {
    0%, 100% {
        opacity: .55;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-6px);
    }
}


#pun-navlinks, #pun-ulinks {
    margin: 0;
}

#pun-navlinks a, #pun-ulinks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#pun-navlinks {
    margin: 0;
}

#pun-navlinks .container {
    width: calc(100% + var(--64));
    margin: 0 calc(var(--32) * -1);
    padding: var(--8) var(--32);
    box-sizing: border-box;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .16), transparent 45%), linear-gradient(180deg, rgb(var(--cat) / .96), rgb(var(--cat)));
  /*  box-shadow: inset 0 1px 0 rgb(var(--body) / .18), inset 0 -1px 0 rgb(var(--text) / .18); */
}

#pun-navlinks ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--6);
}

#pun-navlinks a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--24);
    padding: var(--4) var(--10);
    border-radius: 999px;
    color: rgb(var(--body) / .82);
    font: 700 .78rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

#pun-navlinks a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(var(--body) / .10);
    opacity: 0;
    transition: opacity .2s ease;
}

#pun-navlinks a:hover, #pun-navlinks a:focus {
    color: rgb(var(--body));
    transform: translateY(-1px);
    box-shadow: 0 var(--4) var(--10) rgb(var(--text) / .14);
}

#pun-navlinks a:hover::before, #pun-navlinks a:focus::before {
    opacity: 1;
}

#pun-navlinks a span, #pun-navlinks a {
    z-index: 1;
}

#pun-navlinks li:not(:last-child)::after {
    content: "·";
    margin-left: var(--6);
    color: rgb(var(--body) / .34);
    font-weight: 700;
}

#pun-ulinks {
    position: relative;
    z-index: 5;
    width: calc(100% + var(--64));
    margin: 0 calc(var(--32) * -1);
    padding: var(--8) var(--32);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgb(var(--body) / .16), inset 0 -1px 0 rgb(var(--border) / .18);
}

#pun-ulinks .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    padding: 0;
}

#pun-ulinks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--4);
    min-height: 26px;
    padding: var(--8) var(--8);
    border-radius: 999px;
    background: rgb(var(--body) / .58);
    color: rgb(var(--cat));
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22), 0 var(--4) var(--10) rgb(var(--text) / .06);
    font: 600 .72rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#pun-ulinks a::before {
    flex: 0 0 auto;
    font: 900 .82rem/1 var(--fa);
}

#pun-ulinks a:hover, #pun-ulinks a:focus {
    background: rgb(var(--cat));
    color: rgb(var(--body));
    transform: translateY(-1px);
    box-shadow: 0 var(--4) var(--12) rgb(var(--text) / .14);
}

#pun-ulinks li.item1 a::before {
    content: "\f0e7 ";
}

#pun-ulinks #h-recent a::before {
    content: "\f017 ";
}

#pun-ulinks #h-replies a::before {
    content: "\f086 ";
}

#pun-ulinks #h-unanswered a::before {
    content: "\f075 ";
}

#pun-ulinks #h-myposts a::before {
    content: "\f15c ";
}

#pun-ulinks #h-uploads a::before {
    content: "\f093 ";
}

#pun-ulinks .nav-item-notifications a::before {
    content: "\f0f3 ";
}

#pun-ulinks #h-subscribe a::before {
    content: "\f02e ";
}

#pun-ulinks #h-markread a::before {
    content: "\f560 ";
}

.punbb:not(.punbb-admin) #pun-ulinks .bubble {
    position: absolute;
    top: calc(var(--4) * -1);
    right: calc(var(--4) * -1);
    min-width: var(--14);
    height: var(--14);
    padding: 0 var(--4);
    border-radius: 999px;
    background: rgb(var(--hover));
    color: rgb(var(--body));
    font: 700 .35rem/var(--14) var(--font-ui);
    text-align: center;
}

/* === липкая верхняя навигация + липкая панель быстрых ссылок === */

:root {
    --cf-navlinks-h: 38px;
}

#pun-navlinks {
    position: sticky;
    top: 0;
    z-index: 1001;
}

#pun-ulinks {
    position: sticky;
    top: var(--cf-navlinks-h);
    z-index: 1000;
    background: rgb(var(--body) / .94);
    backdrop-filter: blur(6px);
}

/* чтобы якоря/переходы не прятались под двумя липкими панелями */
html {
    scroll-padding-top: calc(var(--cf-navlinks-h) + 42px);
}

#pun-status {
    margin: var(--12) 0 0;
    width: auto;
    background: transparent;
}

#pun-status .container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--6) var(--10);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--8) var(--16);
    box-sizing: border-box;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .45), transparent 55%), rgb(var(--cat) / .12);
    color: rgb(var(--text) / .76);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .24), 0 var(--4) var(--14) rgb(var(--text) / .08);
    font: 600 .78rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
}

#pun-status .container::before {
    content: "\f0e7 ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--20);
    height: var(--20);
    border-radius: 50%;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    font: 900 .72rem/1 var(--fa);
}

#pun-status span {
    margin: 0;
    white-space: nowrap;
}

#pun-status a {
    color: rgb(var(--cat));
    text-decoration: none;
}

#pun-status a:hover, #pun-status a:focus {
    color: rgb(var(--hover));
}

#pun-crumbs1, #pun-crumbs2 {
    margin: var(--10) 0;
    overflow: visible;
    font-weight: normal;
}

#pun-crumbs1 .container, #pun-crumbs2 .container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--6) var(--14);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .45), transparent 60%), rgb(var(--cat) / .10);
    color: rgb(var(--text) / .62);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22), 0 var(--4) var(--14) rgb(var(--text) / .06);
    font: 600 .76rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
}

#pun-crumbs1 .container::before, #pun-crumbs2 .container::before {
    content: "\f5a0 ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--20);
    height: var(--20);
    border-radius: 50%;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    font: 900 .7rem/1 var(--fa);
}

#pun-crumbs1 a, #pun-crumbs2 a {
    display: inline-flex;
    align-items: center;
    color: rgb(var(--cat));
    text-decoration: none;
}

#pun-crumbs1 a:hover, #pun-crumbs1 a:focus, #pun-crumbs2 a:hover, #pun-crumbs2 a:focus {
    color: rgb(var(--hover));
}

#pun-crumbs1 strong, #pun-crumbs2 strong {
    color: rgb(var(--text) / .52);
    font-weight: 600;
}


#pun-announcement h2 span {
    display: block;
}

#pun-announcement .container {
    padding: var(--16) 0;
}

#pun-stats {
    margin-top: var(--24);
}

#pun-stats h2 {
    margin: 0 0 var(--8);
    padding: 0;
}

#pun-stats h2 span {
    display: inline-flex;
    align-items: center;
    min-height: var(--28);
    padding: 0 var(--16);
    background: rgb(var(--cat));
    color: rgb(var(--body));
    border-radius: var(--radius) var(--radius) 0 0;
    font: 600 .82rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
}

#pun-stats .statscon {
    padding: var(--12);
    background: rgb(var(--cat) / .07);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
}

#pun-stats .container {
    display: flex;
    flex-direction: column;
    gap: var(--8);
    padding: 0;
}

#pun-stats .statsinfo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--8);
}

#pun-stats .statsinfo li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--8);
    padding: var(--8) var(--10);
    background: rgb(var(--body));
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
    font-size: .9rem;
    line-height: 1.2;
}

#pun-stats .statsinfo span {
    color: rgb(var(--text) / .72);
}

#pun-stats .statsinfo strong {
    font-weight: 700;
    color: rgb(var(--cat));
}

#pun-stats #onlinelist {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

#pun-stats #onlinelist div {
    padding: var(--8) var(--10);
    background: rgb(var(--body) / .72);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .16);
    font-size: .9rem;
}

#pun-stats #onlinelist a:first-child {
    font-weight: 700;
}

#pun-stats #statistic-other {
    display: flex;
    flex-wrap: wrap;
    gap: var(--6);
}

#pun-stats #statistic-other span, #pun-stats #statistic-other span[style] {
    padding-right: 0 !important;
}

#pun-stats #statistic-other a {
    display: inline-flex;
    align-items: center;
    padding: var(--4) var(--8);
    background: rgb(var(--body));
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18);
    font-size: .85rem;
}

#pun-stats #statistic-other a:hover, #pun-stats #statistic-other a:focus {
    background: rgb(var(--cat));
    color: rgb(var(--body));
}

#pun-stats li.item1, #pun-stats li.item2, #pun-stats li.item3, #pun-stats li.item4 {
    float: none;
    clear: none;
    text-align: left;
}

li#onlinelist {
    width: 100%;
    margin-top: var(--8);
    padding-top: var(--8);
    line-height: 1.4;
}

li#onlinelist div {
    padding-top: var(--8);
}

#pun-qjump {
    margin: 0;
    width: 50%;
    float: left;
}

#pun-qjump .container {
    padding: var(--8) 0;
    background: transparent;
}

#pun-about {
    position: relative;
    z-index: 5;
    margin: 0 calc(var(--32) * -1) -50px;
    padding: 0;
}

#pun-about p.container {
    min-height: 50px;
    padding: 0 var(--32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgb(var(--body) / .38);
    font: 600 .72rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .08em;
}

#pun-about .item1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--8);
    padding-left: 0 !important;
}

#pun-about a {
    display: inline-flex;
    align-items: center;
    gap: var(--6);
    color: rgb(var(--body) / .72);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

#pun-about a:first-of-type::before {
    content: "\f005 ";
    font: 900 .7rem/1 var(--fa);
}

#pun-about a:last-of-type::before {
    content: "\f0ac ";
    font: 900 .7rem/1 var(--fa);
}

#pun-about a:hover, #pun-about a:focus {
    color: rgb(var(--body));
    transform: translateY(-1px);
}

#pun-help .formal .info-box h3.legend {
    margin-bottom: var(--8);
    padding-bottom: var(--4);
    font-weight: 600;
}

#pun-help .formal .info-box h3.legend span {
    display: block;
}

#pun-help .formal p, #pun-help .formal dd {
    margin-bottom: var(--16);
}

#pun-help .formal ul, #pun-help .formal dl {
    padding-left: var(--16);
}

#pun-help .formal li {
    line-height: 1.3;
}

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

#pun-help .formal dt span {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.2em;
    line-height: 1.2;
}

#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
    padding-bottom: 0;
}

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

.formsubmit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--8);
    margin-top: var(--16);
}

.formsubmit input, .formsubmit .button, .formsubmit a, .formsubmit span {
    margin: 0 !important;
}

input.button, .button, input[type="submit"], input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--28);
    padding: var(--6) var(--16);
    border-radius: 999px;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    font: 700 .82rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

input.button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, input.button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus {
    background: rgb(var(--hover));
    color: rgb(var(--body));
    transform: translateY(-1px);
    box-shadow: 0 var(--4) var(--12) rgb(var(--text) / .18);
}

input.button:active, .button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(0);
    box-shadow: none;
}

.formsubmit input[name="preview"], .button[name="preview"] {
    background: rgb(var(--border) / .22);
    color: rgb(var(--cat));
}

.formsubmit input[name="preview"]:hover, .formsubmit input[name="preview"]:focus, .button[name="preview"]:hover, .button[name="preview"]:focus {
    background: rgb(var(--cat) / .32);
    color: rgb(var(--hover));
}

#post {
    margin-top: var(--24);
}

#post fieldset {
    padding: var(--16);
    background: rgb(var(--cat) / .07);
    border-radius: var(--rbig);
}

#post .fs-box {
    display: flex;
    flex-direction: column;
    gap: var(--12);
}

#form-buttons {
    position: relative;
    z-index: 3;
}

#form-buttons table, #form-buttons tbody, #form-buttons tr {
    display: block;
    width: 100%;
}

#form-buttons tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--6);
}

#form-buttons td {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--28);
    height: var(--28);
    padding: 0;
    border-radius: var(--rsmall);
    background: rgb(var(--body)) !important;
    background-image: none !important;
    color: rgb(var(--cat));
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .28);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#form-buttons td:hover {
    background: rgb(var(--cat)) !important;
    color: rgb(var(--body));
    box-shadow: 0 var(--4) var(--12) rgb(var(--text) / .16);
    transform: translateY(-1px);
}

#form-buttons td:active {
    transform: translateY(0);
}

#form-buttons td img {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block !important;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    visibility: visible !important;
    cursor: pointer;
}

#form-buttons td::before {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font: 900 1rem/1 var(--fa);
    pointer-events: none;
}

#button-font::before {
    content: "\f031 ";
}

#button-size::before {
    content: "\f034 ";
}

#button-bold::before {
    content: "\f032 ";
}

#button-italic::before {
    content: "\f033 ";
}

#button-underline::before {
    content: "\f0cd ";
}

#button-strike::before {
    content: "\f0cc ";
}

#button-left::before {
    content: "\f036 ";
}

#button-center::before {
    content: "\f037 ";
}

#button-right::before {
    content: "\f038 ";
}

#button-link::before {
    content: "\f0c1 ";
}

#button-spoiler::before {
    content: "\f518 ";
}

#button-image::before {
    content: "\f03e ";
}

#button-video::before {
    content: "\f03d ";
}

#button-hide::before {
    content: "\f070 ";
}

#button-quote::before {
    content: "\f10d ";
}

#button-code::before {
    content: "\f121 ";
}

#button-color::before {
    content: "\f53f ";
}

#button-table::before {
    content: "\f00a ";
}

#button-smile::before {
    content: "\f118 ";
}

#button-keyboard::before {
    content: "\f11c ";
}

#button-addition::before {
    content: "\f067 ";
}

#button-files_rusff::before {
    content: "\f0c6 ";
}

#button-graffiti_rusff::before {
    content: "\f1fc ";
}

#button-mask::before {
    content: "\f6e8";
}

#floatbut::before {
    content: "\f03c ";
}

#floatbut {
    overflow: visible !important;
}

#float {
    position: absolute;
    z-index: 9999;
    top: calc(100% + var(--6));
    left: 0;
    display: none;
    width: max-content;
    min-width: 150px;
    padding: var(--8);
    border-radius: var(--radius);
    background: rgb(var(--body) / .96);
    color: rgb(var(--text));
    box-shadow:
        0 var(--8) var(--24) rgb(var(--text) / .14),
        inset 0 0 0 1px rgb(var(--border) / .28);
    font: 700 .68rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
    cursor: default;
}

#float.is-open {
    display: block;
}

#float strong {
    display: block;
    margin: 0 0 var(--6);
    color: rgb(var(--text) / .62);
    font: 800 .62rem/1.2 var(--font-ui);
    text-align: center;
}

#float .float-options {
    display: flex;
    gap: var(--6);
}

#float .vibor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--24);
    padding: var(--6) var(--8);
    border-radius: var(--rsmall);
    background: rgb(var(--cat));
    color: rgb(var(--body));
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .16);
    font: 800 .62rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#float .vibor:hover,
#float .vibor:focus {
    background: rgb(var(--hover));
    color: rgb(var(--body));
    transform: translateY(-1px);
    box-shadow: 0 var(--4) var(--12) rgb(var(--text) / .16);
}

.bb-float {
    display: block;
    max-width: 45%;
    margin: var(--4) var(--12) var(--8) 0;
}

.bb-float-left {
    float: left;
    margin: var(--4) var(--12) var(--8) 0;
}

.bb-float-right {
    float: right;
    margin: var(--4) 0 var(--8) var(--12);
}

.bb-float img {
    max-width: 100%;
    height: auto;
}

#font-area, #size-area, #color-area, #table-area, #smilies-area, #image-area, #video-area, #spoiler-area, #keyboard-area, #addition-area {
    position: relative;
    z-index: 4;
    margin-top: var(--8);
    padding: var(--12) !important;
    background: rgb(var(--body) / .96) !important;
    color: rgb(var(--text));
    border-radius: var(--radius);
    box-shadow: 0 var(--8) var(--24) rgb(var(--text) / .14), inset 0 0 0 1px rgb(var(--border) / .28);
}

#font-area div, #size-area div, #addition-area div, #spoiler-type-list a, #video-host-list a, #image-source-list a, #image-area-actions a, #video-area-actions a {
    border-radius: var(--rsmall);
}

#color-area table, #table-area table {
    width: auto;
    border-collapse: separate;
    border-spacing: var(--4);
}

#color-area td, #table-area td {
    padding: 0 !important;
    cursor: pointer;
}

#table-area td {
    background: rgb(var(--border) / .18);
}

#table-area td:hover, #table-area td.selected {
    background: rgb(var(--cat));
}

#smilies-area img {
    margin: var(--4);
    padding: var(--2);
    border-radius: var(--rsmall);
}

#smilies-area img:hover {
    background: rgb(var(--border) / .18);
}

#image-area textarea, #video-area textarea, #main-reply {
    width: 100%;
    background: rgb(var(--body));
    color: rgb(var(--text));
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .35);
}

#main-reply {
    min-height: 220px;
    padding: var(--12);
    resize: vertical;
    font: 1rem/1.6 var(--font);
}

#main-reply:focus {
    box-shadow: inset 0 0 0 1px rgb(var(--cat)), 0 0 0 3px rgb(var(--cat) / .12);
}

.resizable-textarea .grippie {
    height: var(--8);
    border-radius: 0 0 var(--radius) var(--radius);
    background: linear-gradient(90deg, transparent, rgb(var(--border) / .35), transparent);
    cursor: ns-resize;
}

#post .formsubmit {
    display: flex;
    justify-content: center;
    gap: var(--8);
    margin-top: var(--16);
}

.post {
    margin-top: var(--24);
}

.post .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    margin: var(--16) 0 var(--24);
    padding: 0;
    position: relative;
}

.post h3 {
    font-size: .9rem;
    font-weight: normal;
    order: 1;
    width: calc(100% - var(--profileWidth) - var(--postGap));
    margin-left: calc(var(--profileWidth) + var(--postGap));
    margin-bottom: var(--8);
    padding: var(--6) var(--10);
    background: rgb(var(--cat) / .10);
    border-radius: var(--radius);
    font: 600 .78rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.post h3 span {
    display: flex;
    align-items: center;
    gap: var(--8);
}

.post h3 strong {
    text-align: right;
    margin-left: auto;
    padding: var(--2) var(--6);
    border-radius: 999px;
    background: rgb(var(--body));
    color: rgb(var(--cat));
    font-weight: 700;
}

.post h3 .permalink {
    color: rgb(var(--text) / .72);
}

.post-author {
    position: relative;
    padding: var(--16);
    background: radial-gradient(circle at 50% 0%, rgb(var(--body) / .75), transparent 42%), linear-gradient(180deg, rgb(var(--cat) / .16), rgb(var(--border) / .10));
    border-radius: var(--rbig);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .28), 0 var(--8) var(--24) rgb(var(--text) / .10);
    text-align: center;
    overflow: hidden;
    order: 2;
    flex: 0 0 var(--profileWidth);
    width: var(--profileWidth);
}

.post-body {
    order: 3;
    width: calc(100% - var(--profileWidth));
    padding-left: var(--postGap);
    min-width: 0;
}

.post-box {
    position: relative;
    padding: var(--20);
    background: linear-gradient(180deg, rgb(var(--body) / .96), rgb(var(--body) / .82)), rgb(var(--body));
    border-radius: var(--rbig);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .24), 0 var(--8) var(--24) rgb(var(--text) / .08);
}

.post-box::before {
    content: "";
    position: absolute;
    top: var(--24);
    left: calc(var(--10) * -1);
    width: var(--20);
    height: var(--20);
    background: rgb(var(--body));
    transform: rotate(45deg);
    box-shadow: inset 1px 1px 0 rgb(var(--border) / .18);
}

.post-content {
    position: relative;
    z-index: 1;
    width: 100%;
    color: rgb(var(--text));
    font-size: 1rem;
    line-height: 1.6;
    word-break: break-word;
}

.post-content p {
    margin: 0 0 var(--10) !important;
    line-height: 1.6;
}

.post-content p:last-child {
    margin-bottom: 0 !important;
}

.post-content img {
    max-width: 100%;
    border-radius: var(--radius);
}

.post-content .quote-box cite, .post-content .code-box strong.legend {
    display: inline-flex;
    margin-bottom: var(--8);
    padding: var(--2) var(--8);
    border-radius: 999px;
    background: rgb(var(--body));
    color: rgb(var(--cat));
    font: 700 .78rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.post-rating {
    position: relative;
    z-index: 2;
    margin-top: var(--10);
}

.post-rating p.container {
    padding: 0;
}

.post-rating a[onclick^="BR"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--body));
    font-size: .78rem !important;
    font-weight: 800 !important;
}

.post-rating a[onclick^="BR"]::before {
    content: "\f004 ";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--hover) / .2);
    font-family: var(--fa);
    font-size: var(--24);
    font-weight: 900;
    line-height: 1;
}

.post a.positive[href*="relation.php"] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--24);
    height: var(--16);
    flex: 0 0 var(--24);
    font-size: 0 !important;
    background: transparent;
    box-shadow: none;
    margin-top: -2px;
}

.post a.positive[href*="relation.php"]::before {
    content: "\f086";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--hover) / .2);
    font-family: var(--fa);
    font-size: var(--24);
    font-weight: 800;
    line-height: 1;
}

.post-rating a[onclick^="BR"]:hover::before, .post a.positive[href*="relation.php"]:hover::before {
    color: rgb(var(--cat));
}

.reactions-container {
    width: calc(100% - var(--profileWidth));
    margin-left: var(--profileWidth);
    padding-left: var(--postGap);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--8);
    box-sizing: border-box;
    position: relative;
}

.reaction-picker, .reaction-counters-container {
    display: flex;
    align-items: center;
    position: relative;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--28);
    height: var(--28);
    border-radius: 50%;
    background: rgb(var(--cat) / .10);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
}

.reaction-picker > div, .reaction-picker [class*="popover"], .reaction-picker [class*="dropdown"] {
    right: 0;
    left: auto;
}

.post-links {
    order: 4;
    width: calc(100% - var(--profileWidth));
    margin-left: var(--profileWidth);
    padding-left: var(--postGap);
    margin-top: var(--12);
}

.post-links ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--6);
    padding: var(--8) 0 0;
}

.post-links li {
    display: inline-flex;
    padding: 0;
}

.post-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--24);
    padding: var(--4) var(--8);
    border-radius: 999px;
    background: rgb(var(--cat) / .08);
    color: rgb(var(--cat));
    font: 600 .76rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.post-links a:hover, .post-links a:focus {
    background: rgb(var(--cat));
    color: rgb(var(--body));
    transform: translateY(-1px);
}

.post-links .pl-delete {
    margin-left: auto;
}

.post-links .pl-email a::before, .post-links .pl-delete a::before, .post-links .pl-edit a::before, .post-links .pl-quote a::before {
    margin-right: var(--4);
    font: 900 .78rem/1 var(--fa);
}

.post-links .profile a::before {
    content: "\f007 ";
}

.post-links .pm a::before {
    content: "\f0e0 ";
}

.post-links .email a::before {
    content: "\f1fa ";
}

.post-links .pl-delete a::before {
    content: "\f2ed ";
}

.post-links .pl-edit a::before {
    content: "\f304 ";
}

.post-links .pl-quote a::before {
    content: "\f10d ";
}

.post-links ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--8);
    width: 100%;
}

.post-links li {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

.post-links .pl-delete {
    margin-left: auto !important;
}

/* если удалить нет, но есть редактировать — она уедет вправо */
.post-links ul:not(:has(.pl-delete)) .pl-edit {
    margin-left: auto !important;
}

/* если нет ни удалить, ни редактировать — цитата остаётся справа */
.post-links ul:not(:has(.pl-delete)):not(:has(.pl-edit)) .pl-quote {
    margin-left: auto !important;
}

.post-content .quote-box, .post-content .code-box, .post-content .spoiler-box {
    padding: var(--12) var(--16);
    position: relative;
    margin: var(--12) 0;
    border-radius: var(--radius);
    background: rgb(var(--cat) / .07);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
}

.post-content .quote-box cite::before {
    content: "\f007 ";
    font: 900 .72rem/1 var(--fa);
}

.post-content .spoiler-box {
    padding: 0;
    overflow: hidden;
    background: rgb(var(--cat) / .07);
}

.post-content .spoiler-box > div:first-child {
    display: flex;
    align-items: center;
    gap: var(--8);
    min-height: var(--32);
    padding: var(--8) var(--12);
    background: rgb(var(--cat) / .14);
    color: rgb(var(--cat));
    font: 700 .82rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    user-select: none;
}

.post-content .spoiler-box > div:first-child::before {
    content: "\f06e ";
    flex: 0 0 auto;
    font: 900 .82rem/1 var(--fa);
}

.post-content .spoiler-box > div:first-child.visible::before {
    content: "\f070 ";
}

.post-content .spoiler-box > blockquote {
    margin: 0;
    padding: var(--14) var(--16);
    border: none;
    background: rgb(var(--body) / .45);
}

.post-content .spoiler-box blockquote table, .post-content .spoiler-box blockquote tbody, .post-content .spoiler-box blockquote tr, .post-content .spoiler-box blockquote td, .post-content .spoiler-box blockquote th {
    border: none !important;
    background-image: none !important;
}

.post-content .spoiler-box blockquote td, .post-content .spoiler-box blockquote th {
    padding: var(--8) !important;
    vertical-align: top;
}

.post-content .spoiler-box .spoiler-box {
    margin: var(--10) 0;
    background: rgb(var(--border) / .08);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18);
}

.post-content .quote-box:not(.spoiler-box) {
    position: relative;
    margin: var(--12) 0;
    padding: var(--12) var(--16);
    background: rgb(var(--cat) / .07);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
}

.post-content .quote-box:not(.spoiler-box)::before {
    content: "\f10d ";
    position: absolute;
    top: var(--10);
    right: var(--12);
    color: rgb(var(--cat) / .24);
    font: 900 1rem/1 var(--fa);
}

.post-content .quote-box cite {
    display: inline-flex;
    align-items: center;
    gap: var(--6);
    margin: 0 0 var(--8);
    padding: var(--4) var(--8);
    border-radius: 999px;
    background: rgb(var(--body) / .78);
    color: rgb(var(--cat));
    font: 700 .78rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-style: normal;
}

.post-content .code-box {
    position: relative;
    margin: var(--12) 0;
    padding: var(--12) var(--16);
    background: rgb(var(--text) / .06);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
}

.post-content .code-box strong.legend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    width: fit-content;
    min-height: var(--24);
    padding: 0 var(--12);
    margin: 0 0 var(--8);
    border-radius: 999px;
    background: rgb(var(--cat));
    color: rgb(var(--body)) !important;
    font: 800 .68rem/var(--24) var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    vertical-align: top;
}

.post-content .code-box strong.legend a {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit !important;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
}

.post-content .code-box strong.legend::before {
    content: "\f121 ";
    font: 900 .75rem/1 var(--fa);
}

.post-content .code-box pre, .post-content pre {
    margin: 0;
    padding: var(--12);
    overflow: auto;
    max-height: 360px;
    border-radius: var(--radius);
    background: rgb(var(--body) / .78);
    color: rgb(var(--text));
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18);
    font: .98rem/1.55 "Courier New", Courier, monospace;
    white-space: pre-wrap;
}

.post-content .spoiler-box, .post-content .quote-box.spoiler-box {
    position: relative;
    margin: var(--12) 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: none !important;
    background: rgb(var(--cat) / .07) !important;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22);
}

.post-content .spoiler-box > div:first-child, .post-content .quote-box.spoiler-box > div:first-child {
    display: flex !important;
    align-items: center;
    gap: var(--8);
    min-height: var(--32);
    margin: 0 !important;
    padding: var(--8) var(--12) !important;
    border: none !important;
    background: rgb(var(--cat) / .14) !important;
    background-image: none !important;
    color: rgb(var(--cat));
    font: 700 .82rem/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    user-select: none;
}

.post-content .spoiler-box > div:first-child::before, .post-content .quote-box.spoiler-box > div:first-child::before {
    content: "\f06e ";
    flex: 0 0 auto;
    color: rgb(var(--cat));
    font: 900 .82rem/1 var(--fa);
}

.post-content .spoiler-box > div:first-child.visible::before, .post-content .quote-box.spoiler-box > div:first-child.visible::before {
    content: "\f070 ";
}

.post-content .spoiler-box > blockquote, .post-content .quote-box.spoiler-box > blockquote {
    margin: 0 !important;
    padding: var(--14) var(--16) !important;
    border: none !important;
    background: rgb(var(--body) / .45) !important;
    background-image: none !important;
    color: rgb(var(--text));
}

.post-content .spoiler-box *, .post-content .quote-box.spoiler-box * {
    background-image: none !important;
}

.post-content .spoiler-box table, .post-content .spoiler-box tbody, .post-content .spoiler-box tr, .post-content .spoiler-box td, .post-content .spoiler-box th, .post-content .quote-box.spoiler-box table, .post-content .quote-box.spoiler-box tbody, .post-content .quote-box.spoiler-box tr, .post-content .quote-box.spoiler-box td, .post-content .quote-box.spoiler-box th {
    border: none !important;
    background-image: none !important;
}

.post-content .spoiler-box td, .post-content .spoiler-box th, .post-content .quote-box.spoiler-box td, .post-content .quote-box.spoiler-box th {
    padding: var(--8) !important;
    vertical-align: top;
}

.post-content .spoiler-box .spoiler-box, .post-content .quote-box.spoiler-box .quote-box.spoiler-box {
    margin: var(--10) 0 !important;
    background: rgb(var(--border) / .08) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18);
}

.post-content .hide-box, .post-content .hideblock, .post-content .hidden-text, .post-content .punhide {
    position: relative;
    margin: var(--12) 0;
    padding: var(--12) var(--16);
    border-radius: var(--radius);
    background: rgb(var(--cat) / .10);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .24);
}

.post-content .hide-box::before, .post-content .hideblock::before, .post-content .hidden-text::before, .post-content .punhide::before {
    content: "\f023 ";
    margin-right: var(--6);
    color: rgb(var(--cat));
    font: 900 .85rem/1 var(--fa);
}

.post-content abbr {
    text-decoration: underline dotted rgb(var(--hover));
    cursor: help;
}

.post-content hr {
    height: 0;
    margin: var(--16) 0;
    border: none;
    border-top: 1px dashed rgb(var(--border) / .45);
}

#pun-profile #viewprofile-next, #viewprofile-next {
    margin: var(--16) 0;
    padding: var(--20);
    border-radius: var(--rbig);
    background: rgb(var(--cat) / .05);
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .20), 0 var(--8) var(--24) rgb(var(--text) / .05);
    box-sizing: border-box;
}

#pun-profile #viewprofile-next table, #viewprofile-next table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#pun-profile #viewprofile-next tbody, #pun-profile #viewprofile-next tr, #viewprofile-next tbody, #viewprofile-next tr {
    width: 100% !important;
}

#pun-profile #viewprofile-next td, #viewprofile-next td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    vertical-align: top !important;
}

#pun-profile #viewprofile-next li, #viewprofile-next li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    box-sizing: border-box !important;
}

#pun-profile #viewprofile-next li span, #viewprofile-next li span {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pun-profile #viewprofile-next li strong, #pun-profile #viewprofile-next li div, #viewprofile-next li strong, #viewprofile-next li div {
    margin: 0;
    padding: 0 !important;
}

#pun-profile #viewprofile-next td#profile-left, #viewprofile-next td#profile-left, td#profile-left {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding: 0 var(--24) 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    text-align: center !important;
    vertical-align: top !important;
}

#pun-profile #viewprofile-next #profile-left::before, #pun-profile #viewprofile-next #profile-left::after, #viewprofile-next #profile-left::before, #viewprofile-next #profile-left::after, #profile-left::before, #profile-left::after {
    content: none !important;
    display: none !important;
}

#pun-profile #viewprofile-next #profile-left > li, #viewprofile-next #profile-left > li, #profile-left > li {
    display: block !important;
    width: 220px !important;
    margin: 0 0 var(--10) !important;
    padding: 0 !important;
    text-align: center !important;
}

#pun-profile #viewprofile-next #profile-name strong, #viewprofile-next #profile-name strong, #profile-name strong {
    display: block !important;
    width: 220px !important;
    margin: 0 auto !important;
    color: rgb(var(--cat)) !important;
    font: 800 1.18rem/1.1 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .13em !important;
    text-align: center !important;
}

#pun-profile #viewprofile-next #profile-title strong, #viewprofile-next #profile-title strong, #profile-title strong {
    display: block !important;
    width: 180px !important;
    margin: 0 auto !important;
    padding: var(--7, 7px) var(--8) !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    background: rgb(var(--border) / .22) !important;
    color: rgb(var(--cat)) !important;
    font: 800 .66rem/1.2 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    text-align: center !important;
}

#pun-profile #viewprofile-next #pa-avatar, #viewprofile-next #pa-avatar, #pa-avatar {
    margin: var(--12) 0 !important;
}

#pun-profile #viewprofile-next #pa-avatar div, #viewprofile-next #pa-avatar div, #pa-avatar div {
    display: block !important;
    width: 220px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#pun-profile #viewprofile-next #pa-avatar img, #viewprofile-next #pa-avatar img, #pa-avatar img {
    display: block !important;
    width: 180px !important;
    height: auto !important;
    max-width: 180px !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 0 0 var(--4) rgb(var(--body)), 0 0 0 calc(var(--4) + 1px) rgb(var(--border) / .42), 0 var(--8) var(--20) rgb(var(--text) / .14) !important;
}

#pun-profile #viewprofile-next #pa-online strong, #viewprofile-next #pa-online strong, #pa-online strong {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--5, 5px) !important;
    width: 180px !important;
    margin: 0 auto !important;
    padding: var(--7, 7px) var(--8) !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    background: rgb(var(--border) / .20) !important;
    color: rgb(var(--hover)) !important;
    font: 800 .66rem/1.2 var(--font-ui) !important;
    white-space: nowrap !important;
    text-align: center !important;
}

#pun-profile #viewprofile-next #pa-online strong::before, #viewprofile-next #pa-online strong::before, #pa-online strong::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 var(--6) !important;
    width: var(--6) !important;
    height: var(--6) !important;
    border-radius: 50% !important;
    background: rgb(var(--hover)) !important;
}

#pun-profile #viewprofile-next #pa-edit, #viewprofile-next #pa-edit, #pa-edit {
    margin-top: var(--12) !important;
}

#pun-profile #viewprofile-next #pa-edit a, #viewprofile-next #pa-edit a, #pa-edit a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--6) !important;
    min-height: var(--24) !important;
    padding: 5px var(--12) !important;
    border-radius: 999px !important;
    background: rgb(var(--cat)) !important;
    color: rgb(var(--body)) !important;
    font: 800 .66rem/1 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#pun-profile #viewprofile-next #pa-edit a::before, #viewprofile-next #pa-edit a::before, #pa-edit a::before {
    content: "\f304 " !important;
    font: 900 .72rem/1 var(--fa) !important;
}

#pun-profile #viewprofile-next #pa-edit a:hover, #viewprofile-next #pa-edit a:hover, #pa-edit a:hover {
    background: rgb(var(--hover)) !important;
}

#pun-profile #viewprofile-next td#profile-right, #viewprofile-next td#profile-right, td#profile-right {
    width: auto !important;
    padding-left: var(--16) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    vertical-align: top !important;
}

#pun-profile #viewprofile-next #profile-right > li, #viewprofile-next #profile-right > li, #profile-right > li {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center !important;
    column-gap: var(--16);
    min-height: var(--40);
    margin: 0 0 var(--8) !important;
    padding: var(--8) var(--14) !important;
    border-radius: var(--radius);
    background: rgb(var(--body) / .44) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .22) !important;
    box-sizing: border-box !important;
}

#pun-profile #viewprofile-next #profile-right > li > span, #viewprofile-next #profile-right > li > span, #profile-right > li > span {
    display: flex !important;
    align-items: center !important;
    gap: var(--6);
    min-width: 0;
    color: rgb(var(--text) / .58) !important;
    font: 800 .68rem/1.2 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}

#pun-profile #viewprofile-next #profile-right > li > span a, #viewprofile-next #profile-right > li > span a, #profile-right > li > span a {
    color: inherit !important;
    text-decoration: none !important;
}

#pun-profile #viewprofile-next #profile-right > li > strong, #viewprofile-next #profile-right > li > strong, #profile-right > li > strong {
    display: block !important;
    min-width: 0;
    color: rgb(var(--text)) !important;
    font: 700 .95rem/1.35 var(--font) !important;
    text-align: left !important;
}


#pun-profile #viewprofile-next #profile-right #pa-fld1,
#pun-profile #viewprofile-next #profile-right #pa-fld2 {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 var(--8) !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

#pun-profile #viewprofile-next #profile-right #pa-fld1 > span,
#pun-profile #viewprofile-next #profile-right #pa-fld2 > span{
    display: none !important;
}

#pun-profile #viewprofile-next #profile-right #pa-fld1 > strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    text-align: left !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-card {
    position: relative !important;
    width: 100% !important;
    padding: var(--10) !important;
    border-radius: var(--radius) !important;
    background:
        radial-gradient(circle at 50% 0, rgb(var(--body) / .62), transparent 58%),
        rgb(var(--body) / .56) !important;
    box-shadow:
        inset 0 0 0 1px rgb(var(--border) / .20),
        0 var(--4) var(--14) rgb(var(--text) / .05) !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-name {
    display: flex !important;
    align-items: center !important;
    gap: var(--6) !important;
    margin-bottom: var(--5, 5px) !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-name a {
    display: inline !important;
    align-items: unset !important;
    justify-content: unset !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgb(var(--cat)) !important;
    font: 800 .72rem / 1.15 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-meta {
    margin-bottom: var(--4) !important;
    color: rgb(var(--text) / .58) !important;
    font: 700 .64rem / 1.25 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-desc {
    overflow: auto !important;
    padding-right: var(--4) !important;
    color: rgb(var(--text) / .72) !important;
    font: 500 .74rem / 1.38 var(--font) !important;
    margin-bottom: var(--6) !important;
    text-align: justify !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-desc::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-tags#profile-right .pzl-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--4) !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-tag {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: var(--20);
    margin: 0 !important;
    padding: 0 var(--6) !important;
    border-radius: 999px !important;
    background: rgb(var(--cat) / .12) !important;
    color: rgb(var(--cat)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .18) !important;
    font: 800 .54rem / 1 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;
}

#pun-profile #viewprofile-next #profile-right .pzl-tag.gold {
    background: rgb(var(--accent) / .16) !important;
    color: rgb(var(--accent)) !important;
}

#pun-profile #viewprofile-next #profile-right .frog-pa-link a {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: var(--34) !important;
    margin: 0 !important;
    padding: var(--8) var(--10) !important;
    padding-left: calc(var(--28) + var(--10) + var(--8)) !important;
    padding-right: calc(var(--28) + var(--10) + var(--8)) !important;
    border-radius: var(--radius) !important;
    background:
        radial-gradient(circle at 50% 0, rgb(255 237 187 / .10), transparent 58%),
        linear-gradient(135deg, rgb(72 38 27), rgb(38 22 19) 58%, rgb(90 50 32)) !important;
    color: rgb(246 224 184) !important;
    box-shadow:
        inset 0 0 0 1px rgb(var(--accent) / .34),
        0 var(--3, 3px) var(--8) rgb(var(--text) / .08) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

#viewprofile-next #profile-right .frog-pa-link__icon {
    width: var(--24) !important;
    height: var(--24) !important;
    background: radial-gradient(circle, rgb(255 237 187) 0 34%, rgb(var(--accent)) 35% 39%, rgb(73 40 25) 40% 100%) !important;
    color: rgb(61 38 23);
    font-size: 1rem;
    line-height: 1;
}

#profile-right .frog-pa-link__text {
    justify-items: center;
    text-align: center;
    min-width: 110px;
    max-width: 110px;
    margin-left: var(--24) !important;
}


#pa-register-date > span::before {
    content: "\f073 ";
    font: 900 .72rem/1 var(--fa);
}

#pa-invites > span::before {
    content: "\f0c0 ";
    font: 900 .72rem/1 var(--fa);
}

#pa-time-visit > span::before {
    content: "\f017 ";
    font: 900 .72rem/1 var(--fa);
}

#pa-email > span::before {
    content: "\f0e0 ";
    font: 900 .72rem/1 var(--fa);
}

#pa-posts > span::before {
    content: "\f15c ";
    font: 900 .72rem/1 var(--fa);
}

#pa-last-post > span::before {
    content: "\f4ad ";
    font: 900 .72rem/1 var(--fa);
}

#pa-last-visit > span::before {
    content: "\f2f2 ";
    font: 900 .72rem/1 var(--fa);
}

#pun-profile #viewprofile-next #profile-right strong a, #viewprofile-next #profile-right strong a, #profile-right strong a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    min-height: var(--20);
    margin: 2px 3px;
    padding: 3px var(--8);
    border-radius: 999px;
    background: rgb(var(--border) / .20) !important;
    color: rgb(var(--cat)) !important;
    font: 800 .68rem/1 var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-decoration: none !important;
    vertical-align: middle;
}

#pun-profile #viewprofile-next #profile-right strong a:hover, #viewprofile-next #profile-right strong a:hover, #profile-right strong a:hover {
    background: rgb(var(--cat)) !important;
    color: rgb(var(--body)) !important;
}

#pa-email .sendemail::before {
    content: "@";
    font: 900 .7rem/1 var(--fa);
}

#pa-email .sendpm::before {
    content: "\f1d8 ";
    font: 900 .7rem/1 var(--fa);
}

#user-posts::before {
    content: "\f15c ";
    font: 900 .7rem/1 var(--fa);
}

#user-topics::before {
    content: "\f086 ";
    font: 900 .7rem/1 var(--fa);
}

#profile-gifts {
    width: 100%;
    margin-top: var(--16);
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    width: fit-content;
    max-width: min(100%, 760px);
    margin: var(--12) auto var(--16) 0 !important;
    padding: var(--8) var(--16) !important;
    border-radius: var(--rbig);
    background:
        radial-gradient(circle at 50% 0, rgb(var(--body) / .45), transparent 60%),
        rgb(var(--cat) / .10);
    color: rgb(var(--text) / .68);
    box-shadow:
        inset 0 0 0 1px rgb(var(--border) / .22),
        0 var(--4) var(--14) rgb(var(--text) / .06);
    font: 600 .76rem/1.2 var(--font-ui);
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="])::before {
    content: "\f06e";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--20);
    height: var(--20);
    flex: 0 0 var(--20);
    border-radius: 50%;
    background: rgb(var(--cat));
    color: rgb(var(--body));
    font: 900 .7rem/1 var(--fa);
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="]) > span {
    color: rgb(var(--cat));
    font-weight: 800 !important;
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="]) > span::after {
    content: ":";
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="]) a[href*="profile.php?id="] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--5, 5px);
    max-width: 220px;
    min-height: var(--20);
    padding: var(--3, 3px) var(--8);
    border-radius: 999px;
    background: rgb(var(--body) / .72);
    color: rgb(var(--cat)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--border) / .20);
    font: 800 .68rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="]) a[href*="profile.php?id="]::before {
    content: "\f007";
    flex: 0 0 auto;
    font: 900 .68rem/1 var(--fa);
}

#pun-viewtopic p.container:has(a[href*="profile.php?id="]) a[href*="profile.php?id="]:hover,
#pun-viewtopic p.container:has(a[href*="profile.php?id="]) a[href*="profile.php?id="]:focus {
    background: rgb(var(--cat));
    color: rgb(var(--body)) !important;
}

.linkst .postlink span, .linksb .postlink span, .postlink span {
    display: inline-flex;
}

.linkst .postlink a, .linksb .postlink a, .postlink a[href*="post.php?tid="] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--6);
    min-height: var(--28);
    padding: var(--6) var(--14);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 0, rgb(var(--body) / .22), transparent 58%), rgb(var(--cat));
    color: rgb(var(--body)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .16), 0 var(--4) var(--14) rgb(var(--text) / .12);
    font: 800 .72rem/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .055em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.linkst .postlink a::before, .linksb .postlink a::before, .postlink a[href*="post.php?tid="]::before {
    content: "\f3e5 ";
    font: 900 .78rem/1 var(--fa);
}

.linkst .postlink a:hover, .linksb .postlink a:hover, .postlink a[href*="post.php?tid="]:hover, .linkst .postlink a:focus, .linksb .postlink a:focus, .postlink a[href*="post.php?tid="]:focus {
    background: rgb(var(--hover));
    color: rgb(var(--body)) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .20), 0 var(--6) var(--18) rgb(var(--text) / .18);
}

.linkst .postlink a:active, .linksb .postlink a:active, .postlink a[href*="post.php?tid="]:active {
    transform: translateY(0);
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .14), 0 var(--2) var(--8) rgb(var(--text) / .10);
}

/* Mobile / responsive rules */
@media (max-width: 900px) {
    .post-box::before {
        display: none;
    }

    .post h3, .post-body, .post-links, .reactions-container {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    .post-author {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: var(--12);
    }

    #pun-profile #viewprofile-next table, #pun-profile #viewprofile-next tbody, #pun-profile #viewprofile-next tr, #pun-profile #viewprofile-next td, #viewprofile-next table, #viewprofile-next tbody, #viewprofile-next tr, #viewprofile-next td {
        display: block !important;
        width: 100% !important;
    }

    #pun-profile #viewprofile-next td#profile-left, #viewprofile-next td#profile-left, td#profile-left {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        margin: 0 auto var(--16) !important;
        padding: 0 !important;
    }

    #pun-profile #viewprofile-next td#profile-right, #viewprofile-next td#profile-right, td#profile-right {
        padding-left: 0 !important;
    }

    #pun-profile #viewprofile-next #profile-right > li, #viewprofile-next #profile-right > li, #profile-right > li {
        grid-template-columns: 1fr;
        gap: var(--4);
        text-align: center;
    }

    #pun-profile #viewprofile-next #profile-right > li > span, #viewprofile-next #profile-right > li > span, #profile-right > li > span {
        justify-content: center;
    }

    #pun-profile #viewprofile-next #profile-right > li > strong, #viewprofile-next #profile-right > li > strong, #profile-right > li > strong {
        text-align: center !important;
    }
}



.post.hideprofile .post-author,
.post.hideprofile .pl-email,
.post.hideprofile .pl-website {
    display: none !important;
}

.post.hideprofile h3,
.post.hideprofile h3 > span,
.post.hideprofile .post-body,
.post.hideprofile .post-links,
.post.hideprofile .post-links ul,
.post.hideprofile .reactions-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
}

.post.hideprofile .post-box::before {
    display: none !important;
}


#rep_form {
    width: 100%;
    margin: 0;
    padding: var(--14);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 0, rgb(var(--body) / .74), transparent 58%),
        rgb(var(--body) / .96);
    box-shadow:
        inset 0 0 0 1px rgb(var(--border) / .24),
        0 var(--8) var(--24) rgb(var(--text) / .14);
    color: rgb(var(--text));
}

#rep_form table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

#rep_form td {
    padding: var(--8) !important;
    border: 0 !important;
    vertical-align: top;
}

#rep_form .tcl {
    width: 28% !important;
    color: rgb(var(--cat));
    font: 800 .68rem/1.25 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .045em;
}

#rep_form .tcl span + br + span,
#rep_form .tcl span:not(:first-child) {
    display: block;
    margin-top: var(--4);
    color: rgb(var(--text) / .48);
    font: 600 .62rem/1.25 var(--font-ui);
    text-transform: none;
    letter-spacing: .02em;
}

#rep_form .tc2 {
    color: rgb(var(--text) / .78);
    font: 600 .8rem/1.35 var(--font);
}

#reputationText {
    display: block;
    width: 100% !important;
    min-height: 92px;
    padding: var(--10);
    border-radius: var(--radius);
    background: rgb(var(--body) / .78);
    color: rgb(var(--text));
    box-shadow:
        inset 0 0 0 1px rgb(var(--border) / .28),
        inset 0 var(--2) var(--5, 5px) rgb(var(--text) / .04);
    resize: vertical;
}



/* =========================================================
   HOUSE QUOTES: факультетские цвета без полоски
========================================================= */

/* общая иконка справа */
#pun-viewtopic .post .post-content .quote-box:not(.spoiler-box)::before {
    content: "?";
    position: absolute;
    right: var(--12);
    top: var(--12);
    z-index: 1;
    width: var(--28, 28px);
    height: var(--28, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(124 112 108 / .12);
    color: rgb(124 112 108);
    box-shadow:
        inset 0 0 0 1px rgb(124 112 108 / .22),
        0 var(--3, 3px) var(--8) rgb(var(--text) / .05);
    font: 900 .68rem / 1 var(--font-ui);
    letter-spacing: .02em;
    opacity: .85;
    pointer-events: none;
}

/* =========================================================
   GRYFFINDOR
========================================================= */

#pun-viewtopic .post.house-gryffindor .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(128 35 42 / .13), transparent 42%),
        linear-gradient(135deg, rgb(128 35 42 / .08), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(128 35 42 / .20),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.house-gryffindor .post-content .quote-box:not(.spoiler-box)::before {
    content: "G";
    background: rgb(128 35 42 / .13);
    color: rgb(128 35 42);
    box-shadow:
        inset 0 0 0 1px rgb(128 35 42 / .24),
        0 var(--3, 3px) var(--8) rgb(128 35 42 / .08);
}

#pun-viewtopic .post.house-gryffindor .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(128 35 42 / .13) !important;
    color: rgb(128 35 42) !important;
    box-shadow: inset 0 0 0 1px rgb(128 35 42 / .22) !important;
}

/* =========================================================
   SLYTHERIN
========================================================= */

#pun-viewtopic .post.house-slytherin .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(47 101 72 / .13), transparent 42%),
        linear-gradient(135deg, rgb(47 101 72 / .08), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(47 101 72 / .20),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.house-slytherin .post-content .quote-box:not(.spoiler-box)::before {
    content: "S";
    background: rgb(47 101 72 / .13);
    color: rgb(47 101 72);
    box-shadow:
        inset 0 0 0 1px rgb(47 101 72 / .24),
        0 var(--3, 3px) var(--8) rgb(47 101 72 / .08);
}

#pun-viewtopic .post.house-slytherin .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(47 101 72 / .13) !important;
    color: rgb(47 101 72) !important;
    box-shadow: inset 0 0 0 1px rgb(47 101 72 / .22) !important;
}

/* =========================================================
   RAVENCLAW
========================================================= */

#pun-viewtopic .post.house-ravenclaw .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(45 76 128 / .13), transparent 42%),
        linear-gradient(135deg, rgb(45 76 128 / .08), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(45 76 128 / .20),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.house-ravenclaw .post-content .quote-box:not(.spoiler-box)::before {
    content: "R";
    background: rgb(45 76 128 / .13);
    color: rgb(45 76 128);
    box-shadow:
        inset 0 0 0 1px rgb(45 76 128 / .24),
        0 var(--3, 3px) var(--8) rgb(45 76 128 / .08);
}

#pun-viewtopic .post.house-ravenclaw .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(45 76 128 / .13) !important;
    color: rgb(45 76 128) !important;
    box-shadow: inset 0 0 0 1px rgb(45 76 128 / .22) !important;
}

/* =========================================================
   HUFFLEPUFF
========================================================= */

#pun-viewtopic .post.house-hufflepuff .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(181 134 47 / .14), transparent 42%),
        linear-gradient(135deg, rgb(181 134 47 / .09), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(181 134 47 / .22),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.house-hufflepuff .post-content .quote-box:not(.spoiler-box)::before {
    content: "H";
    background: rgb(181 134 47 / .14);
    color: rgb(181 134 47);
    box-shadow:
        inset 0 0 0 1px rgb(181 134 47 / .26),
        0 var(--3, 3px) var(--8) rgb(181 134 47 / .08);
}

#pun-viewtopic .post.house-hufflepuff .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(181 134 47 / .13) !important;
    color: rgb(181 134 47) !important;
    box-shadow: inset 0 0 0 1px rgb(181 134 47 / .22) !important;
}

/* =========================================================
   DURMSTRANG
========================================================= */

#pun-viewtopic .post.school-durmstrang .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(60 104 112 / .16), transparent 42%),
        linear-gradient(135deg, rgb(60 104 112 / .10), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(60 104 112 / .24),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.school-durmstrang .post-content .quote-box:not(.spoiler-box)::before {
    content: "D";
    background: rgb(60 104 112 / .15);
    color: rgb(60 104 112);
    box-shadow:
        inset 0 0 0 1px rgb(60 104 112 / .28),
        0 var(--3, 3px) var(--8) rgb(60 104 112 / .10);
}

#pun-viewtopic .post.school-durmstrang .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(60 104 112 / .14) !important;
    color: rgb(60 104 112) !important;
    box-shadow: inset 0 0 0 1px rgb(60 104 112 / .24) !important;
}

/* =========================================================
   BEAUXBATONS / SHARMABATON
========================================================= */

#pun-viewtopic .post.school-beauxbatons .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(142 91 132 / .16), transparent 42%),
        linear-gradient(135deg, rgb(142 91 132 / .10), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(142 91 132 / .24),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.school-beauxbatons .post-content .quote-box:not(.spoiler-box)::before {
    content: "B";
    background: rgb(142 91 132 / .15);
    color: rgb(142 91 132);
    box-shadow:
        inset 0 0 0 1px rgb(142 91 132 / .28),
        0 var(--3, 3px) var(--8) rgb(142 91 132 / .10);
}

#pun-viewtopic .post.school-beauxbatons .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(142 91 132 / .14) !important;
    color: rgb(142 91 132) !important;
    box-shadow: inset 0 0 0 1px rgb(142 91 132 / .24) !important;
}

/* =========================================================
   UNKNOWN
========================================================= */

#pun-viewtopic .post.house-unknown .post-content .quote-box:not(.spoiler-box),
#pun-viewtopic .post:not(.house-gryffindor):not(.house-slytherin):not(.house-ravenclaw):not(.house-hufflepuff):not(.school-durmstrang):not(.school-beauxbatons) .post-content .quote-box:not(.spoiler-box) {
    background:
        radial-gradient(circle at 100% 0, rgb(124 112 108 / .12), transparent 42%),
        linear-gradient(135deg, rgb(124 112 108 / .08), rgb(var(--body) / .66)) !important;
    box-shadow:
        inset 0 0 0 1px rgb(124 112 108 / .18),
        0 var(--4) var(--12) rgb(var(--text) / .045) !important;
}

#pun-viewtopic .post.house-unknown .post-content .quote-box:not(.spoiler-box)::before,
#pun-viewtopic .post:not(.house-gryffindor):not(.house-slytherin):not(.house-ravenclaw):not(.house-hufflepuff):not(.school-durmstrang):not(.school-beauxbatons) .post-content .quote-box:not(.spoiler-box)::before {
    content: "?";
    background: rgb(124 112 108 / .12);
    color: rgb(124 112 108);
    box-shadow:
        inset 0 0 0 1px rgb(124 112 108 / .22),
        0 var(--3, 3px) var(--8) rgb(var(--text) / .05);
}

#pun-viewtopic .post.house-unknown .post-content .quote-box:not(.spoiler-box) cite,
#pun-viewtopic .post:not(.house-gryffindor):not(.house-slytherin):not(.house-ravenclaw):not(.house-hufflepuff):not(.school-durmstrang):not(.school-beauxbatons) .post-content .quote-box:not(.spoiler-box) cite {
    background: rgb(124 112 108 / .13) !important;
    color: rgb(124 112 108) !important;
    box-shadow: inset 0 0 0 1px rgb(124 112 108 / .22) !important;
}

/* === мини-панель: яркость + шрифт/размер постов === */

:root {
    --cf-post-font: var(--font);
    --cf-post-size: 16px;
    --cf-screen-dim: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: #000;
    opacity: var(--cf-screen-dim);
    pointer-events: none;
}

#cf-reader-panel {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    font-family: var(--font-ui);
    text-transform: lowercase;
}

#cf-reader-li {
    position: relative;
    display: inline-flex;
    align-items: center;
    list-style: none;
}

#cf-reader-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--24);
    height: var(--24);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgb(var(--body) / .82);
    cursor: pointer;
    font-size: 0;
    letter-spacing: 0;
    text-transform: none;
    transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#cf-reader-toggle::before {
    content: "\f013";
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--24);
    height: var(--24);
    border-radius: inherit;
    color: currentColor;
    font: 900 11px/1 var(--fa);
    opacity: 1;
    transition: background .2s ease, color .2s ease;
}

#cf-reader-toggle:hover,
#cf-reader-toggle:focus {
    color: rgb(var(--body));
    transform: translateY(-1px);
    box-shadow: 0 var(--4) var(--10) rgb(var(--text) / .14);
}

#cf-reader-toggle:hover::before,
#cf-reader-toggle:focus::before {
    background: rgb(var(--body) / .16);
}

#cf-reader-toggle span {
    display: none;
}

#cf-reader-toggle::after {
    display: none;
}

#cf-reader-box {
    position: absolute;
    top: calc(100% + var(--8));
    right: 0;
    z-index: 2147483640;
    display: none;
    width: 255px;
    padding: 18px 16px;
    border-radius: 0 0 var(--radius) var(--radius);
    background: rgb(var(--hover) / .96);
    color: rgb(var(--body));
    box-shadow: 0 8px 28px rgb(0 0 0 / .28);
    backdrop-filter: blur(8px);
}

#cf-reader-panel.open #cf-reader-box {
    display: grid;
    gap: 16px;
}

.cf-reader-row {
    display: grid;
    gap: 8px;
}

.cf-reader-label {
    color: rgb(var(--body) / .78);
    font: 800 .62rem/1 var(--font-ui);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cf-reader-controls {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 6px;
    align-items: center;
}

#cf-font-select {
    min-width: 0;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgb(0 0 0 / .22);
    color: rgb(var(--body));
    box-shadow: inset 0 0 0 1px rgb(var(--body) / .12);
    font: 700 .68rem/1 var(--font-ui);
}

#cf-font-select option {
    background: rgb(var(--hover));
    color: rgb(var(--body));
}

.cf-size-btn {
    width: var(--24);
    height: var(--24);
    border: 0;
    border-radius: 7px;
    background: rgb(0 0 0 / .26);
    color: rgb(var(--body));
    font: 900 .78rem/1 var(--font-ui);
    cursor: pointer;
}

#cf-size-value {
    min-width: 22px;
    color: rgb(var(--body) / .86);
    font: 800 .68rem/1 var(--font-ui);
    text-align: center;
}

#cf-dim-range {
    width: 100%;
    accent-color: rgb(var(--accent));
}

.post-content,
.post-content p,
.post-content li,
.post-content td,
.post-content blockquote,
.post-content .quote-box,
.post-content .code-box {
    font-family: var(--cf-post-font) !important;
    font-size: var(--cf-post-size) !important;
}

@media (max-width: 720px) {
    #cf-reader-panel {
        position: static;
    }

    #cf-reader-li {
        flex: 0 0 auto;
        position: relative;
    }

    #cf-reader-toggle {
        width: var(--24) !important;
        height: var(--24) !important;
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }

    #cf-reader-box {
        position: fixed;
        top: calc(var(--40) + var(--32));
        left: var(--8);
        right: var(--8);
        width: auto;
        max-width: none;
        border-radius: 0 0 var(--radius) var(--radius);
    }
}