/***************************************************************
  LEGUME FOR NOTACROSS · Ôàéë 1: Îñíîâà
  Èìïîðòû, ïåðåìåííûå, áàçîâàÿ â¸ðñòêà ôîðóìà
  12.2025
***************************************************************/

/* ============================================================
   ÈÌÏÎÐÒÛ
============================================================ */

@charset "windows-1251";
@import url('style_cs.1780943464.css');

/* Font Awesome */
@import url('https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css');

/* Design Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&family=Open+Sans:wght@300;400;600;700&family=Lato:wght@300;400;700&family=Montserrat:wght@300;400;500;700&family=PT+Sans:wght@400;700&family=PT+Serif:wght@400;700&family=Roboto+Slab:wght@100;200;300;400;700&family=Noto+Sans:wght@300;400;700&family=Russo+One&family=Oswald:wght@300;400;700&family=Alegreya:wght@200;400;700&family=Comforter&family=Great+Vibes&family=Andika:wght@400;700&family=Caveat&family=Playfair+Display:wght@400;700&family=Merriweather:wght@300;400;700&family=Roboto+Condensed:wght@300;400;700&family=Source+Sans+Pro:wght@300;400;600;700&family=Poppins:wght@300;400;500;700&family=Forum&display=swap&subset=cyrillic');

@font-face {
    font-family: "Yauza";
    src:
        url("https://forumstatic.ru/files/001c/98/41/23692.woff2") format("woff2"),
        url("https://forumstatic.ru/files/001c/98/41/71535.woff") format("woff"),
        url("https://forumstatic.ru/files/001c/98/41/43656.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   CSS-ÏÅÐÅÌÅÍÍÛÅ: ÒÅÌÀ BEIGE (äåôîëòíàÿ)
============================================================ */

:root, .beige {
    /* --- èçîáðàæåíèÿ --- */
    --bg-image: url('https://notafiles.ru/nota/ui/02/1/bg.jpg');
    --bgnav:    url('https://notafiles.ru/nota/ui/02/1/navlinks.png');
    --header:   url('https://notafiles.ru/nota/ui/02/1/header.jpg');
    --bpost:    url('https://notafiles.ru/nota/ui/02/1/post.png');
    --music:    url('https://notafiles.ru/nota/ui/02/1/music.png');
    --catbg:    url('https://notafiles.ru/nota/ui/02/1/cat.jpg');
    --catblur:  url('https://notafiles.ru/nota/ui/02/1/fishes-blur.jpg');
    --noise:    url('https://notafiles.ru/nota/ui/02/noise.png');
    --fishes:        url(https://notafiles.ru/nota/ui/01/01/fishes.png);
    --fishes-black:  url(https://notafiles.ru/nota/ui/01/fishes_black.png);
    --litter:        url(https://forumstatic.ru/files/001c/57/ad/45275.jpg);
    --base-profile:  url(https://forumstatic.ru/files/001c/57/ad/78733.jpg);

    /* --- øðèôòû --- */
    --font:  'Roboto', arial, helvetica, sans-serif;
    --font1: verdana, arial, helvetica, sans-serif;
    --font2: 'Roboto Slab', georgia, 'Times New Roman', serif;
    --font3: 'Open Sans', verdana, arial, helvetica, sans-serif;
    --font4: 'Yauza', verdana, arial, helvetica, sans-serif;
    --fa:    'Font Awesome 6 Pro';

    /* --- öâåòà (RGB-êîìïîíåíòû äëÿ rgb(var(--x))) --- */
    --bgcolor:     131, 124, 118;
    --text:        30, 30, 30;
    --pun-outer:   28, 26, 24, 0.5;
    --ulinks-bg:   24, 20, 19;
    --pun:         178, 176, 175;
    --navlinks:    178, 176, 175;
    --navlinks-bg: 18, 18, 18;
    --catbody:     187, 185, 184;
    --input:       200, 200, 200;
    --p-link:      #a1a1a1;
    --button:      93, 67, 44;
    --button-h:    109, 82, 58;
    --pun-light:   190, 190, 190;
    --white:       256, 256, 256;
    --black:       0, 0, 0;
    --moon-bg:     #393837;
    --sticky:      153, 43, 84;
    --page-dark:   18, 18, 18;

    /* --- àêöåíòû --- */
    --acc1: 91, 44, 31;
    --acc2: 81, 34, 20;
    --acc3: 73, 73, 73;
    --acc4: 83, 83, 83;
    --acc5: 153, 153, 153;
    --acc6: 175, 175, 175;
    --acc7: 256, 256, 256;
    --acc8: 153, 73, 43;

    /* --- ãðàäèåíò --- */
    --gr-shop: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(203 202 201));

    /* --- ðàçìåðû --- */
    --width:    1170px;
    --p-outer:  30px;
    --h-height: 380px;
    --b1:       8px;

    /* --- glass-êîìïîíåíòû --- */
    --glass-warm-bg-top:    rgb(47 43 40 / 45%);
    --glass-text-color:     rgb(232 232 232 / 50%);
    --glass-blur:           6px;
    --glass-shadow-outer:   0 4px 10px rgba(0, 0, 0, 0.35);
    --glass-shadow-inner:   inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    --glass-font-size-xs:   10px;
    --glass-radius-sm:      8px;
    --glass-divider-height: 1px;
    --glass-divider-gradient: linear-gradient(90deg, rgb(104 104 104), rgba(255, 255, 255, 0));
    --glass-divider-glow:   0 0 8px rgba(180, 110, 70, 0.35);

    /* --- ñêðîëëáàð --- */
    --scrollbar-size:       4px;
    --scrollbar-track-bg:   rgba(255, 255, 255, 0.03);
    --scrollbar-thumb-bg:   linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
    --scrollbar-thumb-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        0 0 6px rgba(0, 0, 0, 0.35);
    --scrollbar-radius: 10px;
}


/* ============================================================
   CSS-ÏÅÐÅÌÅÍÍÛÅ: ÒÅÌÀ BLUE
============================================================ */

.blue {
    --bg-image: url('https://notafiles.ru/nota/ui/02/2/bg.jpg');
    --header:   url('https://notafiles.ru/nota/ui/02/2/header.jpg');
    --bpost:    url('https://notafiles.ru/nota/ui/02/2/post.png');
    --music:    url('https://notafiles.ru/nota/ui/02/2/music.png');
    --catbg:    url('https://notafiles.ru/nota/ui/02/2/cat.jpg');

    --bgcolor:     122, 126, 129;
    --text:        30, 30, 30;
    --pun-outer:   17, 17, 17, 0.4;
    --ulinks-bg:   24, 20, 19;
    --pun:         169, 169, 169;
    --navlinks:    109, 114, 120;
    --navlinks-bg: 18, 18, 18;
    --catbody:     190, 190, 190;
    --input:       200, 200, 200;
    --p-link:      #a1a1a1;
    --button:      93, 67, 44;
    --button-h:    109, 82, 58;
    --pun-light:   190, 190, 190;

    --acc1: 60, 94, 115;
    --acc2: 83, 115, 135;
    --acc3: 82, 82, 82;
    --acc4: 51, 51, 51;
    --acc5: 153, 153, 153;
    --acc6: 175, 175, 175;
    --acc7: 256, 256, 256;
    --acc8: 58, 122, 134;
}


/* ============================================================
   CSS-ÏÅÐÅÌÅÍÍÛÅ: ÒÅÌÀ IRIS
============================================================ */

.iris {
    --bg-image: url('https://notafiles.ru/nota/ui/02/5/bg.jpg');
    --header:   url('https://notafiles.ru/nota/ui/02/5/header.jpg');
    --music:    url('https://notafiles.ru/nota/ui/02/2/music.png');
    --catbg:    url('https://notafiles.ru/nota/ui/02/5/cat.jpg');

    --bgcolor:     122, 126, 129;
    --text:        30, 30, 30;
    --pun-outer:   17, 17, 17, 0.4;
    --ulinks-bg:   24, 20, 19;
    --pun:         169, 169, 169;
    --navlinks:    109, 114, 120;
    --navlinks-bg: 18, 18, 18;
    --catbody:     190, 190, 190;
    --input:       200, 200, 200;
    --p-link:      #a1a1a1;
    --button:      93, 67, 44;
    --button-h:    109, 82, 58;
    --pun-light:   190, 190, 190;

    --acc1: 60, 94, 115;
    --acc2: 83, 115, 135;
    --acc3: 82, 82, 82;
    --acc4: 51, 51, 51;
    --acc5: 153, 153, 153;
    --acc6: 175, 175, 175;
    --acc7: 256, 256, 256;
    --acc8: 58, 122, 134;
}



/* ============================================================
   CSS-ÏÅÐÅÌÅÍÍÛÅ: ÒÅÌÀ VIOLET
============================================================ */

.violet {
    --bg-image: url('https://notafiles.ru/nota/ui/02/3/bg.jpg');
    --bgnav:    url('https://notafiles.ru/nota/ui/02/3/navlinks.png');
    --header:   url('https://notafiles.ru/nota/ui/02/3/header.jpg');
    --bpost:    url('https://notafiles.ru/nota/ui/02/3/post.png');
    --music:    url('https://notafiles.ru/nota/ui/02/3/music.png');
    --catbg:    url('https://notafiles.ru/nota/ui/02/3/cat.jpg');
    --fishes:   url(https://notafiles.ru/nota/ui/01/03/fishes.png);
    --catblur:  #0c0c0c;
    --moon-bg:  #252328;

    --bgcolor:     19, 19, 19;
    --text:        170, 170, 170;
    --pun-outer:   7, 7, 7, 0.4;
    --ulinks-bg:   10, 10, 10;
    --pun:         20, 20, 20;
    --navlinks:    136, 136, 136;
    --navlinks-bg: 10, 10, 10;
    --catbody:     0, 0, 0, 0;
    --input:       30, 30, 30;
    --p-link:      #a1a1a1;
    --button:      93, 67, 44;
    --button-h:    103, 77, 54;
    --pun-light:   20, 20, 20;

    --acc1: 107, 115, 155;
    --acc2: 158, 165, 199;
    --acc3: 160, 160, 160;
    --acc4: 180, 180, 180;
    --acc5: 153, 153, 153;
    --acc6: 175, 175, 175;
    --acc7: 0, 0, 0;
    --acc8: 118, 110, 225;

    --glass-shadow-inner: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}


/* ============================================================
   CSS-ÏÅÐÅÌÅÍÍÛÅ: ÒÅÌÀ GREEN
============================================================ */

.green {
    --bg-image: url('https://notafiles.ru/nota/ui/02/4/bg.jpg');
    --header:   url('https://notafiles.ru/nota/ui/02/4/header.jpg');
    --bpost:    url('https://notafiles.ru/nota/ui/02/4/post.png');
    --music:    url('https://notafiles.ru/nota/ui/02/4/music.png');
    --catbg:    url('https://notafiles.ru/nota/ui/02/4/cat.jpg');

    --bgcolor:     122, 126, 129;
    --text:        30, 30, 30;
    --pun-outer:   17, 17, 17, 0.4;
    --ulinks-bg:   24, 20, 19;
    --pun:         169, 169, 169;
    --navlinks:    109, 114, 120;
    --navlinks-bg: 18, 18, 18;
    --catbody:     190, 190, 190;
    --input:       200, 200, 200;
    --p-link:      #a1a1a1;
    --button:      49, 44, 93;
    --button-h:    84, 81, 111;

    --acc1: 75, 99, 63;
    --acc2: 78, 115, 59; /* ?CHECK — â îðèãèíàëå áûëî "78, 115 , 59;rgb" — ëèøíèé òåêñò óáðàí */
    --acc3: 82, 82, 82;
    --acc4: 51, 51, 51;
    --acc5: 153, 153, 153;
    --acc6: 175, 175, 175;
    --acc7: 256, 256, 256;
    --acc8: 65, 99, 43;
}


/* ============================================================
   ÑËÓÆÅÁÍÎÅ: ÇÀÃÐÓÇÊÀ ÒÅÌÛ
============================================================ */

html[data-theme-loading],
html[data-theme-loading] body {
    background: transparent !important;
}

html.no-theme-transition {
    transition: none !important;
}


/* ============================================================
   ÁÀÇÎÂÛÅ ÑÒÈËÈ: HTML, BODY, ÒÈÏÎÃÐÀÔÈÊÀ
============================================================ */

html {
    background:
        var(--bgnav) repeat-x fixed,
        var(--bg-image) no-repeat center / cover fixed,
        rgb(var(--bgcolor));
    color: var(--text);
    transition: background-color 120ms linear;
}

html,
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

strong {
    font-weight: 700;
}

/* A2 Reset */
.punbb * { margin: 0; }
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt { padding: 0; list-style: none; }
.punbb img { border: none; }
.punbb .main table { table-layout: fixed; width: 100%; }
.checkfield input[type="checkbox"], .radiofield input[type="radio"] { margin: 0 0.3em; }
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * { height: 1.8em; vertical-align: middle; }

/* A3 Òåêñò */
body { font-size: 100.01%; }
.punbb { font: normal 68.75% var(--font1); }

.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
    font: 12px var(--font1);
    border: 1px solid rgb(var(--text), .1);
    border-radius: 10px;
}

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

.punbb h1 span, .punbb h2 span, .punbb legend span, #pun-stats h2 span {
    font: 100 14px var(--font2);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.punbb pre { font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace; }
.punbb address, .punbb em { font-style: normal; }
.punbb .post-content em { font-style: italic; }
.punbb .post-content em.bbuline { font-style: normal; text-decoration: underline; }
.punbb a { text-decoration: none; }
.punbb optgroup { font-weight: bold; }

/* A4 Float clearing */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    line-height: 0.0;
    font-size: 0;
}

/* A4.2 Ñêðûòûå ýëåìåíòû (accessibility) */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
    font-size: 0;
    height: 0;
    width: 0;
    line-height: 0.0;
    position: absolute;
    left: -9999px;
    overflow: hidden;
}


/* ============================================================
   ÑÊÐÛÒÛÅ ÝËÅÌÅÍÒÛ (display:none)
============================================================ */

.punbb:not(.punbb-admin) #pun-title,
#pun-title .title-logo-tdl,
#pun-navlinks h2,
#pun-ulinks h2,
#pun-status h2,
#pun-index h1,
#pun-announcement h2,
.punbb :not(#pun-statistic) #pun-main h1,
#pun-crumbs1 .container strong,
#pun-crumbs2 .container strong,
#pun-index thead,
#pun-status .item4,
.acchide,
#pun-userlist h1,
#pun-userlist h2,
#pun-profile h2,
#pun-viewtopic h2,
#post fieldset legend > span,
.sharelink,
#formkey,
#formetc,
#pun-searchposts h1,
#pun-searchposts h2,
#pun-searchtopics h1,
#pun-searchtopics h2,
#pun-modviewforum h1,
#pun-modviewforum h2,
#pun-viewforum h1,
#pun-viewforum h2,
.punbb .submitfield label,
.pa-gifts,
.stickytext,
.closedatafield,
.post-sig dt,
#pun-navlinks #navawards,
#pun-navlinks #navrules,
.modlist,
.tclcon:has(.modlist) > br:last-of-type,
#pun-ulinks #h-unanswered,
.pl-email.email,
.catleft,
.catright,
#pun-premoderation .pa-title,
#pun-premoderation .pa-ua,
#pun-premoderation .pa-posts,
#pun-premoderation .pa-respect,
#pun-premoderation li[class^="pa-fld"],
#pun-premoderation h2 {
    display: none!important;
}

.pl-email.email, li.pl-reports { display: none; }

#pun-title { display: none; }
#pun-main div.catleft, #pun-main div.catright { display: none; }
.title-logo-tdr { display: none; }
#pun-index td.tc2, #pun-index td.tc3 { display: none; }
#pun-announcement { height: 0px; }
#tuser { display: none !important; }
.punbb thead, div#pun-live-rusff { display: none; }
#pun-main > h1 > span { display: none; }
li.pa-ip { display: none; }
.fd, .nm { display: none; }
.custom_tag_qr { display: none; }
#pa-edit { display: none; }
#filetable thead tr .header { display: none; }
#button-files_rusff, #button-graffiti_rusff { display: none !important; }
#pun-messages .post-author .pa-reg,
#pun-messages .post-author .pa-online,
#pun-messages .post-author .pa-last-visit { display: none; }


/* ============================================================
   ÑÒÐÓÊÒÓÐÀ: ÎÑÍÎÂÍÀß ÎÁ¨ÐÒÊÀ
============================================================ */

#pun_wrap {
    background: var(--header) top center no-repeat, rgb(var(--pun-outer));
    border-radius: var(--b1);
    width: var(--width);
    margin: 70px auto;
    padding: 410px 0px 120px 0px;
/*  box-shadow: 0px 0px 20px 0px #000000a1;
    border: 1px solid #ffffff17; */
}

#pun {
    margin: auto;
    border-radius: var(--b1);
}

.punbb {
    width: 1050px;
    height: auto;
}

/* A5 Layout */
#pun-redirect, #pun-maint { margin: 50px 20% 12px 20%; width: auto; float: none; }
.punbb .section, .punbb .main { margin-bottom: 0.1em; width: 100%; }
.punbb .category, .punbb .post { margin-top: -10px; background: none; }
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost { margin-top: 0; }
#pun-post .topic { margin-top: 30px; }
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post { border: none; }
.punbb .container { border: none; }
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 { border: none; }
.forum { margin-top: 20px; }


/* ============================================================
   ÍÀÂÈÃÀÖÈß: #pun-navlinks
============================================================ */

#pun-navlinks {
    border-style: none;
    border-width: 0;
    margin: 0;
    position: fixed;
    top: 0px;
    width: var(--width);
    height: 41px;
    margin-left: -60px;
    background-color: rgb(var(--navlinks-bg));
    z-index: 999;
}

#pun-navlinks .container {
    font: 11px var(--font3);
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 35px;
}

#pun-navlinks li { display: inline; padding-right: 1em; }

#pun-navlinks li a {
    text-transform: uppercase;
    color: rgb(var(--navlinks));
    font: 400 11px var(--font2);
}

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

#pun-ulinks li, #pun-ulinks li a {
    -webkit-text-size-adjust: none;
    line-height: 1;
}


/* ============================================================
   ÍÀÂÈÃÀÖÈß: #pun-ulinks
============================================================ */

#pun-ulinks {
    margin-top: -95px;
    margin-left: -60px;
    position: sticky;
    top: 40px;
    z-index: 100;
    width: 1170px;
    padding-bottom: 20px;
    height: 10px;
    background-color: rgb(var(--ulinks-bg));
}

#pun-ulinks .container { border: none; padding: 10px 40px 0px 30px; }

#pun-ulinks li, #pun-ulinks li a {
    display: inline;
    border: none;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 400;
    font-family: var(--font3);
}

#pun-ulinks li a { padding: 0 0.3em 0 0.6em; }
#pun-ulinks li.item1, #pun-ulinks li.item1 a { border: none; padding-left: 0; }
#pun-ulinks a { color: rgb(var(--acc6)); text-decoration: none; }

.punbb-admin #pun-ulinks { width: 1110px; margin-left: -30px; }


/* ============================================================
   ÕËÅÁÍÛÅ ÊÐÎØÊÈ
============================================================ */

#pun-break1 {
    margin: 0 1em;
    border: none;
    height: 0;
    margin: -2px 1em;
    position: relative;
    z-index: 1;
}

#pun-crumbs2 {
    font-weight: bold;
    overflow: hidden;
    margin-bottom: 0;
    border: none;
    margin-top: 20px;
    background: rgb(var(--pun));
    width: 1050px;
    padding: 10px 30px;
    margin-left: -30px;
    border-radius: 8px;
}

#pun-crumbs1 {
    width: 1170px;
    position: relative;
    margin-left: -60px;
    color: rgb(var(--acc7));
    overflow: hidden;
}

#pun-crumbs1 p.container {
    height: auto;
    color: rgb(var(--acc6));
    margin: 10px 30px;
    font: 300 16px var(--font2);
}

#pun-index #pun-crumbs1 {
    margin-bottom: -32px;
    height: 65px;
    margin-top: 0px;
}

#pun-crumbs1 > p > a { color: var(--p-link); }

#pun-break4 { margin: -2px 1em; border: none; position: relative; height: 0; z-index: 1; }


/* ============================================================
   PAGELINKS
============================================================ */

#pun-pagelinks {
    position: absolute;
    top: -15px;
    left: 0;
    margin: 0;
    border: none;
    padding: 0;
    width: 100%;
}

#pun-pagelinks .container { background: transparent; border: none; padding: 0; }
#pun-pagelinks .container li { display: inline; }

#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
    height: 2em;
    line-height: 2em;
    padding: 0;
    font-size: 1.2em;
    margin-left: -9999px;
    display: block;
    float: left;
    width: 100%;
}

#pun-pagelinks a:active, #pun-pagelinks a:focus { position: relative; margin: 0; }
#pun-pagelinks li a span { display: block; margin: 0 1em; }
#pun-pagelinks a:active, #pun-pagelinks a:focus { background-color: #333; color: #fff; }


/* ============================================================
   ÎÑÍÎÂÍÎÉ ÊÎÍÒÅÍÒ: #pun-main
============================================================ */

#pun-main::before {
    content: "";
    display: block;
    height: 20px;
    width: 1110px;
    position: relative;
    left: -30px;
    top: -10px;
    border-radius: 8px;
    background: var(--catblur);
}

#pun-index #pun-main::before, #pun-viewtopic #pun-main::before { display: none; }
#pun-main > h1 { position: relative; overflow: hidden; }
#pun-main > h1::before { border-top-left-radius: 14px; }


/* ============================================================
   ÏÀÃÈÍÀÖÈß È ÑÑÛËÊÈ
============================================================ */

.punbb .linkst {
    width: 100%;
    height: auto;
    position: relative;
    /* ?CHECK — font: 300 rgb(var(--font3)) — íåâàëèäíîå çíà÷åíèå, îñòàâëåíî êàê åñòü */
    font: 300 rgb(var(--font3));
    color: rgb(var(--text));
    text-transform: uppercase;
}

.multipage { /* margin-top: 3em; */ }

.linkst .pagelink {
    position: absolute;
    width: 400px;
    font-size: 9px;
    top: -20px;
    left: -25px;
}

.linkst .postlink {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    gap: 32px;
    margin-top: 10px;
}

#pun-viewtopic .linkst .pagelink { color: rgb(var(--white), .7); }
#pun-viewtopic .linkst { margin-top: 20px; margin-bottom: -10px; }

.violet .pagelink { color: rgb(var(--text)); }

.punbb .linkst .postlink a,
.subscribelink a {
    padding: 4px 20px;
    background: rgb(var(--acc1), .6);
    border-radius: 3px;
    color: #c1c1c1 !important;
    font: 700 9px var(--font3);
    letter-spacing: 1px;
}

.punbb .linkst .postlink a:hover,
.subscribelink a:hover,
.punbb .linksb .postlink a:hover { background: rgb(var(--acc2)); }

.punbb .linksb .postlink a {
    padding: 4px 20px;
    background: rgb(var(--acc1), .6);
    border-radius: 3px;
    color: #c1c1c1 !important;
    font: 700 9px var(--font3);
    letter-spacing: 1px;
}

.punbb .linksb { text-align: right; text-transform: uppercase; }
.linksb .pagelink { float: left; width: 24em; text-align: left; }
.linksb .postlink { float: right; font-weight: bold; display: flex; gap: 30px; }
.subscribelink { clear: both; padding-top: 20px; padding-bottom: 0.5em; }
.pagelink a { color: rgb(var(--white), .5); }


/* ============================================================
   ÒÀÁËÈÖÛ ÊÀÒÅÃÎÐÈÉ È ÔÎÐÓÌÎÂ
============================================================ */

#pun-index .tcl {
    overflow: hidden;
    text-align: justify;
    width: 640px;
    padding-right: 40px;
}

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

.punbb .main .tcr {
    overflow: hidden;
    text-align: left;
    width: 30%;
    vertical-align: text-top;
}

#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl { width: 40%; }

#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 { text-align: left; width: 20%; }

#pun-searchtopics .main .tc2 { text-align: left; width: 10%; }

#pun-debug table .tcl { width: 15%; white-space: normal; }
#pun-debug .tcr { width: 90%; white-space: normal; }

#pun-index .tcl h3 { font-size: 1.2em; font-weight: bold; }

.punbb td span.youposted { font-weight: bold; margin-left: -1em; position: absolute; }
.punbb td .modlist { display: block; padding-top: 0.3em; }
.punbb .main td { border: none; padding: 0.8em 1em; }
.punbb .main th { border-style: none none none solid; border-width: 0 0 0 1px; padding: 0.4em 1em 0.4em 1em; }
.punbb .main .tcl { border: none; }
.punbb tbody.hasicon td.tcl { padding-left: 3.2em; }

.punbb tbody.hasicon td.tcl {
    padding-left: 3.2em;
    width: 500px;
}

#pun-index .category tbody {
    background: rgb(var(--acc7), .15);
    background-repeat: repeat;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 1030px;
    margin-bottom: 20px;
}

#pun-index .category .tclcon {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.statscon {
    text-transform: lowercase;
    font: 11px var(--font3);
    background: rgb(var(--acc7), .15);
    background-repeat: repeat;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 1030px;
    margin-bottom: 20px;
}

/* ðàçäåëèòåëü ìåæäó ôîðóìàìè */
.hasicon .tclcon {
    position: relative;
    padding-bottom: 12px;
    transition: filter .35s ease;
}

.hasicon .tclcon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    margin-bottom: -10px;
}

.hasicon tr:last-child .tclcon::after { display: none; }

.hasicon tr {
    transition: background .35s ease, box-shadow .35s ease;
    border-radius: 8px;
}

#pun-viewforum table tr, #pun-modviewforum table tr, #pun-searchtopics table tr,
#pun-userlist table tr, #pun-statistic table tr, #pun-respect table tr,
#pun-positive table tr, #pun-messages #messages table tr, .profile-awards-container table tr {
    display: flex;
    align-items: center;
    margin-top: 8px;
    background: rgb(var(--catbody));
    border-radius: 8px;
}


/* ============================================================
   ÈÊÎÍÊÈ ÒÎÏÈÊÎÂ
============================================================ */

#pun-index tr div.icon {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(var(--acc3), .2);
    position: relative;
    left: -20px;
    top: 2px;
}

.punbb table div.icon {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(var(--acc3), .2);
    position: relative;
    left: -5px;
    top: 2px;
}

.punbb tr.inew div.icon { background-color: rgb(var(--acc8), 50%) !important; }
.punbb tr.isticky div.icon { background-color: rgb(var(--sticky), 90%) !important; }
.punbb tr.iclosed div.icon { background-color: rgb(var(--acc4), 10%) !important; }

div.icon { border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2; }
tr.iredirect div.icon { border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7; }
div.inew { border-color: #0080D7 #0065C0 #0058B3 #0072CA; }


/* ============================================================
   ÊÀÒÅÃÎÐÈÈ: ÇÀÃÎËÎÂÎÊ h2
============================================================ */

#pun-index h2, #pun-messages h2 {
    text-align: center;
    background: var(--catbg);
    width: 1110px;
    height: 50px;
    color: rgb(var(--white), .6);
    text-transform: lowercase;
    padding: 0;
    text-shadow: 1px 1px 2px #00000061;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -30px;
    margin-bottom: 10px;
}

#pun-index h2 span::after { left: 100%; margin-left: 24px; }

#pun-stats h2 span {
    width: 1090px;
    height: 52px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#pun-stats h2 {
    text-align: center;
    background: var(--catbg) !important;
    width: 1110px;
    height: 50px;
    color: rgb(var(--white), .6) !important;
    text-transform: lowercase;
    padding: 0;
    text-shadow: 1px 1px 2px #00000061;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -30px;
    margin-bottom: 10px;
}

/* ============================================================
   ÖÂÅÒÀ È ÑÑÛËÊÈ (CS-áëîê)
============================================================ */

/* CS1.1 */
.punbb .section .container, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
#viewprofile li strong, #viewprofile li div, #setmods dd, .punbb .info-box,
.punbb #pun-main .info-box .legend, .punbb .main .container, .punbb .post .container,
.punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-stats h2,
.punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
    background: none;
    color: rgb(var(--text));
    border: none;
    font: 300 11px var(--font1);
}

.punbb .post-body, .punbb .formal fieldset .post-box {
    background: rgb(var(--pun));
    color: rgb(var(--text));
    border: none;
    font: 400 12px var(--font1);
}

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
    color: rgb(var(--text));
    text-transform: uppercase;
    font: 9px var(--font3);
    background: transparent;
}

/* CS1.6 */
.punbb .post h3 span, .punbb th, #setmods dl {
    background: var(--catblur);
    border-radius: 5px;
}

#viewprofile li { background: rgb(var(--catbg)); }
.offline li.pa-online strong { font-weight: normal; }

/* CS3 Ññûëêè */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
    color: rgb(var(--acc1));
}

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
    color: rgb(var(--acc2));
}

.punbb a:hover, .punbb a:focus, .punbb a:active,
.punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
    color: rgb(var(--acc2));
}

.punbb .main .tcl h3 a {
    font: 18px var(--font2);
    font-weight: 300;
    text-transform: lowercase;
    color: rgb(var(--acc3));
    position: relative;
    left: -10px;
    top: -4px;
    padding: 0px;
}

.punbb .main .tcl h3 a::before { content: ""; }
.punbb .main .tcl h3 a:hover { color: rgb(var(--acc3)); }

.punbb .main .tclcon a {
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    font: 9px var(--font3);
}

.punbb .main .tclcon a::before { content: "› "; opacity: .6; padding: 0px 4px; }


/* ============================================================
   ÑÒÀÒÈÑÒÈÊÀ
============================================================ */

#pun-stats .container { padding: 0.8em 1em; }
#pun-stats li.item1, #pun-stats li.item2 { float: left; clear: both; line-height: 150%; }
#pun-stats li.item3, #pun-stats li.item4 { text-align: right; line-height: 150%; }

li#onlinelist { margin-top: 1em; border: none; float: left; width: 100%; line-height: 130%; text-align: justify; }
li#onlinelist div { border: none; padding: 0.7em 0 0 0; }


/* ============================================================
   QUICK JUMP / ABOUT
============================================================ */

#pun-qjump { margin: 0; border: none; width: 50%; position: relative; float: left; }
#pun-qjump .container { border: none; background: transparent; padding: 0.8em 1em; }
#pun-about .container { border: none; text-align: right; line-height: 150%; padding: 0.8em 1em; }
#pun-about p span { display: block; padding-left: 50%; }
#pun-about { text-transform: uppercase; font-size: 8px; }
div.punbb-admin #pun-about .container { border: none; }


/* ============================================================
   ÈÍÔÎÐÌÀÖÈÎÍÍÛÅ ÁËÎÊÈ
============================================================ */

.punbb .info-box { padding: 1.1em 1.7em 1em 1.7em; border: none; margin: 0 0 1.1em 0; }
.punbb .info-box * { padding: 0 0 0.7em 0; }
.punbb #pun-main .info-box .legend { font-size: 1.1em; font-weight: bold; }
.punbb .info .container { padding: 0.8em 1em; }
.punbb .info .container .backlink { padding-top: 0.8em; }


/* ============================================================
   ÔÎÐÌÛ
============================================================ */

.punbb .formal .container { padding: 1.7em 2.3em 1.1em 2.3em; }
.punbb .formsubmit { padding: 0 0 0 1.7em; margin: 1em 0 0 0; }
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span { margin: 0 0.6em 0 0; }
.punbb fieldset { border: none; padding: 0 18px 0 18px; margin: 0 0 1em 0; }
.punbb fieldset legend { padding: 0; margin: 0 0 0 10px; font-size: 1.1em; }
.punbb fieldset legend span { padding: 0 5px; margin: 0px; letter-spacing: normal; font: 500 11px var(--font3); }
.punbb fieldset fieldset { border-style: none; margin: 0; padding: 0 0 8px 0; }
.punbb .fs-box { padding: 1em 0 0.8em 0; position: relative; }
.punbb .fs-box p, .punbb .fs-box fieldset { padding: 0 0 0.8em 0; }

.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield { float: left; margin-right: 1em; }
.punbb .inline .infofield { clear: both; }
.punbb .datafield br { display: none; }
.punbb .required label, .punbb .datafield span.input { font-weight: bold; }
.punbb .datafield span.input a { font-weight: normal; }
.punbb .areafield span.input, .punbb p.longinput span.input { display: block; padding: 0 12em 0 0; height: 100%; }

.punbb textarea, .punbb .longinput input {
    width: 64%;
    margin: 0;
    color: rgb(var(--text));
}

.punbb .hashelp { position: relative; }
.punbb .helplinks { display: block; position: absolute; top: 1em; right: 0; font-weight: normal; width: 36%; }
.punbb #profile .helplinks { top: 1.5em; }
.punbb .helplinks span { display: block; padding-bottom: 0.2em; }

#pun-post .formal .info-box li { padding-left: 4px; list-style-type: square; list-style-position: inside; line-height: 1.5; margin: 0; }
.punbb .modmenu input { margin-left: 1em; }

#post .fs-box { display: flex; flex-direction: column; }
#post .fs-box .inputfield.required { order: -1; }

.punbb #profile .fs-box .container { width: 1000px; }

/* User list */
#pun-userlist .formal, #pun-userlist .formal .container { border-bottom: none; margin-bottom: 0; }
#pun-userlist .usertable .container { padding: 0 2.3em 2.3em 2.3em; border: none; }
#pun-userlist .usertable table { border: none; }


/* ============================================================
   HELP
============================================================ */

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


/* ============================================================
   ÑÊÐÎËËÁÀÐÛ
============================================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(153 153 153 / 55%) transparent;
}

/* WebKit */
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); border-radius: var(--scrollbar-radius); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: var(--scrollbar-radius); box-shadow: var(--scrollbar-thumb-shadow); }
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.7));
}


/* ============================================================
   ÏÎËß ÂÂÎÄÀ È ÂÛÄÅËÅÍÈÅ
============================================================ */

::selection {
    background: rgb(var(--acc3), 0.3);
    color: rgb(var(--acc7), 0.8);
}

input, textarea, select { outline: none; }

input, textarea {
    color: rgb(var(--text));
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 10px;
    background: rgb(var(--input), 0.7);
    transition: background .25s ease;
}

input:focus, textarea:focus { background: rgb(var(--input), 1.0); }

select:hover { cursor: pointer; }


/* ============================================================
   ÊÍÎÏÊÈ ÔÎÐÌÀÒÈÐÎÂÀÍÈß ÏÎÑÒÀ
============================================================ */

#pun #form-buttons table,
#pun #form-buttons tbody { width: 100%; }

#pun #form-buttons td img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#pun #form-buttons td {
    position: relative;
    display: flex;
    width: 30px;
    height: 24px;
    background: rgb(var(--acc3), .1);
    align-items: center;
    border-radius: 3px;
}

#pun #form-buttons td:hover { cursor: pointer; background: rgb(var(--acc7), .1); }
#pun #form-buttons td#button-mask { background: none !important; }

#form-buttons table tr {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 1rem;
}

#form-buttons td::before {
    font: 400 16px var(--fa);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* èêîíêè êíîïîê */
#button-font::before      { content: '\f031'; }
#button-sticker::before   { content: '\f86d'; }
#button-size::before      { content: '\f894'; }
#button-bold::before      { content: '\f032'; }
#button-italic::before    { content: '\f033'; }
#button-underline::before { content: '\f0cd'; }
#button-strike::before    { content: '\f0cc'; }
#button-left::before      { content: '\f036'; }
#button-right::before     { content: '\f038'; }
#button-center::before    { content: '\f037'; }
#button-link::before      { content: '\f0c1'; }
#button-spoiler::before   { content: '\f518'; }
#button-image::before     { content: '\f302'; }
#button-video::before     { content: '\f144'; }
#button-hide::before      { content: '\f30d'; }
#button-quote::before     { content: '\f27a'; }
#button-code::before      { content: '\f121'; }
#button-color::before     { content: '\f53f'; }
#button-table::before     { content: '\f009'; }
#button-smile::before     { content: '\f118'; }
#button-keyboard::before  { content: '\f11c'; }
#button-addition::before  { content: '\f0d7'; }
#button-mask::before      { content: '\f630'; }
#button-mybb::before      { content: '\f03e' !important; }
#button-transL::before    { content: '\f891'; }
#button-justify::before   { content: '\f039'; }
#button-indent::before    { content: '\f1dd'; }
#button-image-2::before   { content: '\f03e' !important; }
#form-buttons #button-image ~ #button-image::before { content: '\f03e' !important; }
#button-float::before     { content: '\f1fe'; }
#button-mod::before       { content: '\f186'; }

.imgbb-container { display: inline-block; margin-top: 5px; margin-bottom: 5px; float: right; }

#pun-admain textarea { margin-top: 2.2em !important; height: 400px; }

#keyboard-area input { line-height: 100%; border-radius: 8px; }


/* ============================================================
   ÊÎÍÒÅÍÒ ÏÎÑÒÀ: ÒÅÊÑÒ, ÁËÎÊÈ, ÑÒÈËÈÇÀÖÈß
============================================================ */

.punbb .post-content {
    padding: 0px;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.punbb .post-sig dt { display: none; }

.punbb .post-content p {
    margin: 0;
    line-height: 160%;
    padding: 4px 0;
    text-align: justify;
    word-break: break-word;
}

.post-content p {
    line-height: 160%;
    padding: var(--4) 0;
    text-align: justify;
    word-break: break-word;
}

.punbb .post-content img { vertical-align: text-bottom; }
.punbb .post-content img.postimg { vertical-align: middle; }
.post-content img { vertical-align: middle; }

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

.post-box .post-content ul { padding: 0.4rem 0 0.8rem 2.4rem; }
.post-box .post-content ul ul { padding-top: var(--4); padding-bottom: 0; }
.post-content li p { padding: 0 0 var(--4) 0; }

/* Óäàë¸ííûé òåêñò */
del { text-decoration: none; filter: blur(6px); }
del:hover { filter: none; }

/* Ïîä÷¸ðêèâàíèå */
.bbuline { font-style: unset; text-decoration: underline; text-decoration-color: rgb(var(--primary400)); }

/* Âûäåëåíèå */
#pun .highlight-text { background-color: rgb(var(--warning)); padding: 0.1rem 0.2rem 0.2rem; }

/* Àááðåâèàòóðà */
.post-content abbr { text-decoration: underline dotted rgb(var(--primary400)); cursor: help !important; }

/* Ññûëêà */
.post-content a { font-weight: 700; }

/* Ìàðêåð ñïèñêà */
.post-content ::marker { font-weight: 700; color: rgb(var(--acc1)); }

/* HR */
.post-content hr {
    opacity: 0.2;
    background: none;
    color: transparent;
    border-top: 1px dotted rgb(var(--text));
    margin: 8px 0;
    height: 1px;
}

/* Òàáëèöà â ïîñòå */
#pun .post-content td { border: none !important; padding: 8px !important; vertical-align: top; }

.post-sig::before,
.punbb #profile-signature ul::before {
    content: '';
    display: block;
    margin: 16px auto 8px;
    width: 50%;
    height: 1px;
    border-top: 1px dotted rgb(var(--acc3), .2);
}

.punbb #profile-signature ul { border: none; padding: 0; }


/* ============================================================
   ÖÈÒÀÒÀ, ÊÎÄ, ÑÏÎÉËÅÐ
============================================================ */

.quote-box,
.code-box,
.spoiler-box {
    position: relative;
    padding: 0px;
    background: rgb(var(--acc7), .02);
    border-radius: var(--glass-radius-sm);
    box-shadow: 0 0 12px #0000000d, var(--glass-shadow-inner);
    width: 98%;
    margin: 10px auto !important;
}

.spoiler-box { padding: 10px 0px; }

.post-content .spoiler-box > div {
    font: 500 12px var(--font2);
    color: rgb(var(--text));
}

.post-content .spoiler-box > div::before {
    content: "\f324";
    font: 500 9px var(--fa);
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: rgb(var(--acc3), .7) !important;
    text-transform: uppercase;
    background: rgb(var(--acc7), .2);
    padding: 3px 10px;
    border-radius: 5px;
}

.post-content .spoiler-box > div.visible { font: 500 12px var(--font2); color: rgb(var(--text)); }

.post-content .spoiler-box > div.visible::before {
    content: "\f323";
    font: 500 9px var(--fa);
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: rgb(var(--acc3), .7) !important;
    text-transform: uppercase;
    background: rgb(var(--acc7), .2);
    padding: 3px 10px;
    border-radius: 5px;
}

blockquote { padding: 15px 25px; font: 400 12px var(--font); color: rgb(var(--text)); }

.blockcode .scrollbox { height: 40px !important; }

.quote-box cite {
    display: block;
    font: 700 9px var(--font3);
    color: rgb(var(--acc3));
    text-transform: uppercase;
    background-color: rgb(var(--acc7), .2);
    padding: 2px 10px;
    border-radius: 3px 3px 0px 0px;
}

.code-box pre { margin: 0; font: 400 0.9rem/145% 'Courier New', monospace; color: rgb(var(--text)); }

.code-box strong {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 5px 0px 5px 5px;
}

.code-box strong a {
    padding: 3px 10px;
    background: rgb(var(--acc1), .8);
    border-radius: 20px;
    color: #c1c1c1 !important;
    font: 400 8px var(--font3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.code-box strong a:hover { background: rgb(var(--acc2)); }
.blockcode { padding: 0 15px !important; }

.spoiler-box > div {
    position: relative;
    padding: var(--10) var(--16) var(--10) var(--36);
    font: 600 0.9rem/140% var(--font);
    color: rgb(var(--text));
    cursor: pointer;
}

.spoiler-box > div.visible::before { content: '\f068'; background: rgb(var(--acc8)); }
.spoiler-box > div:hover { color: rgb(var(--acc8)); }


/* ============================================================
   LAYOUT ÏÎÑÒÀ: ÃÐÈÄ
============================================================ */

.punbb .post .container {
    --author-w: 250px;
    --links-h: 0px;
    display: grid;
    grid-template-columns: var(--author-w) 1fr;
    grid-template-rows: auto var(--links-h);
    grid-template-areas:
        "author body"
        "author links";
    position: relative;
    width: 1110px;
    margin-left: -30px;
}

.post.toppost { margin-top: 60px; }
.post.toppost .pa-author { padding-top: 20px; }

.post:last-of-type .post-author { border-bottom-right-radius: 8px; }
#pun-main .post:not(:first-of-type):last-of-type .post-author { border-bottom-right-radius: 8px; }

.punbb .post { scroll-margin-top: 76px; }
.topic { margin-bottom: 20px !important; }

.punbb .post h3 {
    border: none;
    position: relative;
    left: 30px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.punbb .post h3 span {
    width: 820px;
    position: relative;
    display: flex;
    padding: 10px 20px;
    flex-direction: row;
    justify-content: flex-end;
    top: 0px;
    gap: 12px;
    font: 700 10px var(--font3);
    text-transform: uppercase;
    border-radius: 8px 8px 0px 0px;
    align-items: center;
    flex-wrap: nowrap;
    background: rgb(var(--pun-light));
}

.punbb .post h3 strong { float: right; width: 5em; text-align: right; font-weight: normal; }

.punbb .post-box { padding: 10px; }
.punbb fieldset .post-box { margin-bottom: 0.8em; }
.punbb .clearer { clear: both; height: 0; font-size: 0; }

.punbb #pun-main h1 { overflow: hidden; }


/* ============================================================
   ÊÎËÎÍÊÀ ÀÂÒÎÐÀ
============================================================ */

.post-author {
    grid-area: author;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    color: rgb(var(--white), .75);
    margin-top: -35px !important;
}

.post-author > ul {
    position: relative;
    top: 0px;
    left: -10px;
    width: 230px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    background: var(--base-profile) top center no-repeat;
    height: fit-content;
    padding: 20px 0px !important;
    box-shadow: 0px 3px 12px #00000040;
}

.violet .post-author > ul { filter: brightness(0.8); }

li.pa-row0 {
    backdrop-filter: blur(20px);
    margin: auto;
    background: rgb(var(--black), .2);
    border-radius: 8px;
    width: 210px;
}

/* ôîí ïðîôèëÿ */
.post-author .pa-fld5 { position: absolute; inset: 0; z-index: 0; margin: 0; }
.post-author .pa-fld5 img { width: 100%; height: 100%; object-fit: cover; }

/* çàòåìíåíèå */
.post-author > ul::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: brightness(0.9);
}

/* êîíòåíò ïîâåðõ */
.post-author > ul > li { position: relative; z-index: 2; }

/* èìÿ */
li.pa-author { font: 500 16px var(--font2); margin-bottom: 4px; }
.post-author li a { color: rgb(var(--white), .75) !important; font-weight: 700; }

#cv, .cv { margin-bottom: 5px; }

#cv a, .cv a {
    display: inline-block;
    font: bold 12px var(--font2);
    text-transform: uppercase;
    padding-bottom: 6px;
    background: url(https://forumstatic.ru/files/001c/57/ad/12953.png) repeat-x bottom center;
    color: var(--p-link);
}

#cv a:hover, .cv a:hover { color: #fff; }
#profile-right #cv a, #profile-right .cv a { color: rgb(var(--text)); }

li.pa-title {
    font: 500 10px var(--font);
    text-transform: lowercase;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 4px 0px !important;
}

/* ñòàòû ñòðîêè */
.pa-row1 {
    display: flex;
    justify-content: center;
    font: 300 10px var(--font);
    padding: 10px 0px !important;
    border-radius: 8px;
    background: rgb(var(--black), .2);
    backdrop-filter: blur(20px);
    width: 210px;
    position: relative !important;
    top: 10px;
    margin: auto !important;
    align-items: stretch;
    height: 40px;
}

.pa-row1 > li { display: flex; flex-direction: column; align-items: center; min-width: 40px; justify-content: space-between; }

.pa-row1 ::before { font-family: var(--fa); font-size: 14px; margin-bottom: -6px; font-weight: 900; }

.pa-row1 .pa-fld1::before       { content: "\f51e"; }
.pa-row1 .pa-posts::before      { content: "\f0e0"; }
.pa-row1 .pa-totalposts::before { content: "\f304"; }

.pa-row1 .pa-respect .fld-name a { position: relative; }

.post-author .pa-fld1 .fld-name,
.post-author .pa-posts .fld-name,
.post-author .pa-totalposts .fld-name { display: none; }

li.pa-ip { margin-bottom: -15px; font: 300 10px var(--font3); }

.pa-fld3 { pointer-events: none; }

.post-author .pa-fld3 {
    font: 11px var(--font2);
    padding: 2px 0;
    text-transform: lowercase;
    width: 230px;
    backdrop-filter: blur(10px);
    background: rgb(var(--black), .2);
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -20px;
    margin-bottom: -15px;
}

.post-author .pa-fld4 {
    padding: 10px 6px;
    text-transform: lowercase;
    font: 400 10px var(--font);
}

.post-author .pa-fld6 img { max-width: 24px; display: flex; align-items: center; opacity: .8; }

.post-author .pa-fld6 {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 2px;
    z-index: 3;
    justify-content: center;
}

.post-author .pa-fld7 { padding: 0px; float: left; margin-top: -20px; margin-left: 0px !important; z-index: 3; }

.pa-avatar img { max-width: 180px; max-height: 180px; border-radius: 0px; border: 8px solid rgba(0, 0, 0, .45); }
li.pa-avatar { width: 180px; padding: 0px; margin: auto; }

.pa-avatar img.allow_change:hover { filter: grayscale(1); cursor: pointer; }

li.pa-respect {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pa-respect:before {
    content: "\f004";
    font-family: var(--fa, 'Font Awesome 6 Pro');
    font-weight: 700;
    font-size: 16px;
    color: rgb(var(--white), .75);
    display: inline-block;
    transition: color 0.3s ease;
}

.pa-respect:hover:before { color: rgb(var(--acc1), .3); }

.pa-respect a:before { display: none !important; content: none !important; }

.pa-respect {
    display: inline-flex;
    align-items: center;
}

.post-author .pa-respect .fld-name {
    font-size: 10px;
    line-height: 0;
    position: relative;
    top: 9px;
    opacity: 0;
}

.pa-respect img { display: none; }

/* äåêîäèðóåìûå ïîëÿ */
.pa-fld5, .pa-fld6, .pa-fld7,
.field-fld5, .field-fld6, .field-fld7,
#pa-fld5 strong, #pa-fld6 strong, #pa-fld7 strong { visibility: hidden; }

.pa-fld5.nota-decoded, .pa-fld6.nota-decoded, .pa-fld7.nota-decoded,
.field-fld5.nota-decoded, .field-fld6.nota-decoded, .field-fld7.nota-decoded,
#pa-fld5 strong.nota-decoded, #pa-fld6 strong.nota-decoded, #pa-fld7 strong.nota-decoded { visibility: visible; }

[data-nota-decoding] { opacity: 0; transform: translateY(4px); pointer-events: none; }

.nota-decoded {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 140ms ease-out, transform 160ms cubic-bezier(.2,.6,.2,1);
}

@media (prefers-reduced-motion: reduce) {
    .nota-decoded { transition: none; transform: none; }
}

.perspage, #perspage {
    width: 24px;
    height: 24px;
    background-size: contain;
    position: relative;
    top: 4px;
    left: 4px;
    margin-bottom: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   ÒÅËÎ ÏÎÑÒÀ È ÑÑÛËÊÈ ÏÎÑÒÀ
============================================================ */

.post-body {
    grid-area: body;
    padding: 10px 20px;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    border-radius: 0px 0px 8px 8px;
}

.post-links {
    grid-area: links;
    display: flex;
    align-items: flex-start;
    position: relative;
    top: -30px;
    padding-left: 15px;
}

.post-links ul { display: flex; align-items: center; gap: 14px; width: 100%; flex-wrap: wrap; }
.post-links li { margin: 0; }

.post-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: rgb(var(--acc3), .7) !important;
    text-transform: uppercase;
    font: 700 9px var(--font3);
    background: rgb(var(--acc7), .2);
    padding: 3px 10px;
    border-radius: 5px;
}

.post-links a:hover { background: rgb(var(--acc7), .4); }

.post-links a::before { font-family: var(--fa); color: rgb(var(--acc3), .9) !important; font-weight: 900; font-size: 12px; line-height: 1; display: inline-block; }

.post-links .profile a::before { content: "\f007"; }
.post-links .pm a::before      { content: "\f075"; }
.post-links .pl-delete a::before { content: "\f2ed"; }
.post-links .pl-edit a::before { content: "\f044"; }
.post-links .pl-quote a::before { content: "\f10d"; }

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

.post-links ul, .post:has(.custom_tag_hideprofile) h3 span { width: 100% !important; }

.fs-box .post-links .pl-delete { display: none; }

#main-reply {
    background: rgb(var(--input));
    color: rgb(var(--text));
    padding: 15px 10px 15px 20px;
}


/* ============================================================
   HIDE-PROFILE ÐÅÆÈÌ
============================================================ */

.post:has(.custom_tag_hideprofile) .post-author { display: none !important; }

.post:has(.custom_tag_hideprofile) .post-body,
.post:has(.custom_tag_hideprofile) .post-links,
.post:has(.custom_tag_hideprofile) { margin-left: 0 !important; }

.post:has(.custom_tag_hideprofile) h3 {
    width: 1110px;
    position: relative !important;
    left: -30px !important;
}

.punbb .post:has(.custom_tag_hideprofile) .post-links {
    grid-area: links;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.punbb .post:has(.custom_tag_hideprofile) .post-links ul {
    padding: 0px;
    height: 2em;
    line-height: 2em;
    border: none;
    background: transparent;
    text-align: right;
    position: relative;
}

.punbb .post:has(.custom_tag_hideprofile) .container {
    grid-template-columns: 1fr;
    grid-template-areas: "body" "links";
}

.punbb .post:has(.custom_tag_hideprofile) .post-author { display: none; }


/* ============================================================
   MOON ÏÎÑÒ
============================================================ */

.moon { padding: 0px; }

.moon .post-body {
    grid-area: body;
    padding: 10px 20px;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    border-radius: 0px 0px 8px 8px;
    background-color: var(--moon-bg);
    background-image: var(--fishes-black);
    color: rgb(var(--white), .7);
    text-align: center;
}

.punbb .moon .post-content p { text-align: center; }

.moon .post-links a { background: rgb(var(--black)); color: rgb(var(--acc4)) !important; }
.moon h3 span { color: rgb(var(--acc5)); background: rgb(var(--black)) !important; }
.moon img { border: 1px solid #00000061; box-shadow: 0px 0px 12px #0000006e; border-radius: 5px; }

.moon .quote-box, .moon .code-box, .moon .spoiler-box {
    background: #0000003b;
    border: 1px solid #0000001f;
    border-radius: 8px;
}

.moon .quote-box cite { color: rgb(var(--acc4)); background-color: rgb(var(--black), .2); }
.moon blockquote { color: rgb(var(--white), .8); }
.moon .reaction-counter__count { color: #ffffff70 !important; font-weight: 200; font-size: 11px; }
.moon .custom_tag_nmb { background-color: var(--rquote); color: #ffffff66; }
.moon .reaction-picker .reaction-picker-button svg { color: #ffffff70 !important; }


/* ============================================================
   ÐÅÉÒÈÍÃ (ËÀÉÊÈ)
============================================================ */

.punbb .post-rating p.container,
.punbb .post-vote p.container {
    position: relative;
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
}

.post-vote { display: flex !important; }

.punbb .post-rating a,
.punbb .post-vote a {
    color: rgb(var(--white), .7) !important;
    font: 700 11px var(--font3);
    z-index: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.punbb .post-rating p.container::before {
    content: "\f004";
    font: 900 32px var(--fa);
    position: absolute;
    color: rgb(var(--acc1), .4);
    padding-top: 3px;
    transition: transform .15s ease, opacity .2s ease, color .2s ease;
}

.punbb .post-vote p.container::before {
    content: "\f27a";
    font: 900 28px var(--fa);
    position: absolute;
    color: rgb(var(--acc1), .4);
    padding-top: 7px;
}

.post-vote.rated p.container::before { color: rgb(var(--acc3), .2); opacity: .7; }
.post-vote.rated:hover p.container::before { transform: none; opacity: .6; }
.post-vote.rated a { opacity: .6; cursor: default; }

/* hover òîëüêî åñëè ÍÅ rated */
.post-rating a:not(.rated):hover ~ p.container::before,
.post-rating a:not(.rated):hover + p.container::before {
    transform: translateY(-1px) scale(1.05);
    opacity: .9;
}

.post-rating:not(.rated):hover p.container::before { transform: translateY(-1px) scale(1.05); opacity: .9; }

/* rated — ñåðîå ñåðäöå */
.post-rating a.rated ~ p.container::before,
.post-rating a.rated + p.container::before { color: #9aa0a6 !important; opacity: .7; }

.post-rating.rated p.container::before { color: rgb(var(--acc3), .2); opacity: .7; }

/* hover íà rated — íè÷åãî */
.post-rating a.rated:hover ~ p.container::before,
.post-rating a.rated:hover + p.container::before { transform: none; opacity: .7; }

.post-rating.rated:hover p.container::before { transform: none; opacity: .7; }

.post-rating, .post-vote { float: right; position: relative !important; right: -27px !important; }
.post-rating { padding-bottom: 70px; position: relative; }

/* ðåéòèíã — ïîçèöèîíèðîâàíèå */
.post-rating [data-tooltip], .post-vote [data-tooltip] { position: relative; }

.punbb .post-rating a.like-user {
    width: 180px;
    gap: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    height: 20px;
}

.isguest .post .post-rating { pointer-events: auto; }


/* ============================================================
   TOOLTIP È LIKE-HOVER
============================================================ */

.nota-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    padding: 6px 12px;
    font: 500 12px/1.2 var(--font);
    white-space: nowrap;
    border-radius: 10px;
    background: rgb(var(--acc3) / 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgb(var(--text)) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 20;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.nota-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: inherit;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.post-rating [data-tooltip]:hover .nota-tooltip,
.post-vote [data-tooltip]:hover .nota-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

.isguest .nota-tooltip { opacity: 0; }

/* like-hover (JS-driven) */
.like-hover { pointer-events: none; }
.like-hover .like-more { pointer-events: auto; }

.post-rating .like-hover {
    position: absolute;
    bottom: calc(100% + 12px);
    margin-left: -150px;
    min-width: 220px;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgb(var(--acc3) / 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.06);
    color: rgb(var(--white));
    font: 500 12px/1.2 var(--font);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    z-index: 10000;
}

.post-rating .like-hover.is-visible { opacity: 1; transform: translateY(0); filter: brightness(1.05); pointer-events: auto; }

/* ñòðåëêà */
.like-hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: inherit;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* íåâèäèìûé ìîñò */
.like-hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -10%;
    right: -10%;
    height: 15px;
    background: transparent;
}

.like-hover-title { font: 500 12px var(--font2); opacity: .75; padding: 10px 10px 5px; text-transform: uppercase; }

.like-hover-users {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 0 6px 10px 6px;
}

.like-user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgb(var(--white), .6);
    border-radius: 8px;
    padding: 4px 6px;
    transition: background .15s ease, color .15s ease;
}

.like-user img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: rgb(0 0 0 / 0.2); object-fit: cover; }
.like-user span { font: 500 12px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.like-user:hover { background: rgb(var(--white) / 0.08); color: rgb(var(--text)); }

.like-more {
    margin-top: 2px;
    padding: 6px 0;
    text-align: center;
    font: 600 12px var(--font);
    color: rgb(var(--acc8));
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}

.like-more:hover { background: rgb(var(--acc8) / 0.15); color: rgb(var(--white)); }

/* voters modal */
.voters-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.voters-overlay.is-active { opacity: 1; visibility: visible; }

.voters-modal {
    padding: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgb(var(--acc2), .4);
    border: 1px solid rgb(var(--white), 0.1);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
}

.voters-overlay.is-active .voters-modal { transform: translateY(0) scale(1); }

.voters-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font: 600 16px var(--font2);
    text-transform: uppercase;
    color: rgb(var(--text));
}

.voters-modal-close { cursor: pointer; font-size: 24px; line-height: 1; color: rgb(var(--text), 0.5); transition: color 0.15s ease; }
.voters-modal-close:hover { color: rgb(var(--acc1)); }

.voters-modal-list { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-right: 5px; }

/* +1 float animation */
.plus-float {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    font-size: 14px;
    font-weight: 600;
    color: currentColor;
    opacity: 0;
    transform: translate(-50%, 0) scale(.9);
    transition: transform .6s ease, opacity .6s ease;
}

.plus-float.show { opacity: 1; transform: translate(-50%, -20px) scale(1.05); }


/* ============================================================
   ÐÅÀÊÖÈÈ (EMOJI)
============================================================ */

.topic .reactions-root .emoji-mart-category-label span { background: #a0a0a0; }

.reactions-root .emoji-mart-category-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 26px;
    height: 26px;
}

.reactions-root .emoji-mart .emoji-mart-emoji:hover { background: #b0b0b0 !important; border: none !important; }
.reactions-root .emoji-mart-search-icon { position: absolute; top: 3px !important; right: 11px; z-index: 2; padding: 2px 5px 1px; border: none; background: none; }
.topic .reactions-root .emoji-mart-search-icon { margin-top: 3px; }

#pun .punbb .reactions-root .emoji-mart-search input { color: rgb(70, 70, 70); background-color: #cecece; }
.topic .reactions-root .emoji-mart { background: #b0b0b0; border: none; }
#pun .emoji-mart-anchor:hover { color: #FFF !important; }
#pun .emoji-mart-anchor { color: rgb(70, 70, 70); }

.reactions-root .emoji-mart, .reactions-root .emoji-mart * { box-sizing: border-box; line-height: 1.15; font: 300 11px var(--font1); }
.reactions-root { float: right; position: relative; top: 16px; }
.reaction-picker .reaction-picker-button svg { width: 10px !important; height: 10px !important; }

.topic .reaction-chip { background-color: rgb(var(--acc7), .15); border: none; padding: 0px 8px; }
.topic .reaction-chip:not(.reaction-chip--disabled):hover { background-color: rgb(var(--acc7), .2); border: none; }
.topic .reaction-chip.reaction-chip--clicked { background-color: rgb(var(--acc3), .25); color: rgb(var(--text), .6); border: none; }
.topic .reaction-chip.reaction-chip--clicked:not(.reaction-chip--disabled):hover { background-color: rgb(var(--acc3), .15); border: none; color: rgb(var(--text), .6); }
.moon .topic .reaction-chip { background-color: var(--rquote) !important; border: none; }

.reaction-picker-panel {
    position: absolute;
    top: 0;
    right: -116px;
    transform: translate(0, 28px);
    z-index: 9999;
    box-shadow: 0 0 12px #00000052;
    padding: 10px;
    background: rgb(var(--pun));
    border-radius: 8px;
}

.reactions-container { display: flex; gap: 16px; flex-direction: row-reverse; }
.topic .reaction-counter__count { color: rgb(var(--text), .5); font-weight: 200; font-size: 11px; }
.moon .reaction-counter__count { color: #ffffff70 !important; font-weight: 200; font-size: 11px; }


/* ============================================================
   ÏÐÎÔÈËÜ
============================================================ */

#profile .post.toppost .pa-author { padding-top: 0px; }

#pun-profile #profile .container { padding-left: 10em; position: relative; min-height: 500px; }
#viewprofile { flex-grow: 1; }

#viewprofile-next { display: flex; gap: var(--32); }
#viewprofile-next::after { display: none; }
#viewprofile-next #profilenav { display: inline-block !important; }

#pun-profile #profile #profilenav { float: left; width: 10em; margin-left: -10em; }
#viewprofile-next #profilenav { padding-top: var(--16); }
#viewprofile .container::after { display: none; }
#viewprofile .container tr { display: flex; gap: 30px; }

body #profile-left {
    padding: 16px !important;
    background: rgb(var(--catbg));
    border-radius: 5px;
    width: 180px;
}

#profilenav li { list-style: none; }

#profilenav a {
    display: block;
    margin-bottom: 8px;
    color: rgb(var(--acc3), .7) !important;
    text-transform: uppercase;
    font: 700 9px var(--font3);
    background: rgb(var(--acc7), .2);
    padding: 3px 10px;
    border-radius: 5px;
}

#profilenav a:hover { background: rgb(var(--acc7), .4); }
#profilenav li:not(:last-child) a { margin-right: var(--4); }
#profilenav .isactive a { font-weight: 700; }

#profile-right li { padding: 4px; margin: 4px; font: 300 11px var(--font); }

#viewprofile li span { display: inline-block; min-width: 140px; font: 700 10px var(--font); text-transform: uppercase; }
#viewprofile li strong { display: inline-block; font-weight: normal; }
#profile-right li strong { padding-left: 2em; }
#profile-left li { list-style: none; }
#profile-left #profile-title { margin: 8px 0px; }
#profile-left #pa-online { padding-top: 8px; }
#profile-left #pa-avatar strong { display: none; }

td.tc0.ft-image { border: 2px solid rgb(var(--light100)); }
#profile li { list-style: none; }
#profile #select-hosting .infofield * { margin: 0; }

#pun-messages #profilenav {
    float: none;
    display: flex;
    justify-content: space-between;
    margin-right: 0;
}

#pun-messages #profilenav h2 { display: none; }
#pun-messages #profilenav ul { display: inline-block; margin-bottom: var(--16); }
#pun-messages #profilenav ul li { display: inline-block; }

#viewprofile #perspage {
    position: relative;
    top: -1px;
    left: 0px;
    background-color: #000000ab;
    color: var(--p-link);
    border-radius: 10px;
}

.nota-tooltip-abs {
    position: fixed !important;
    z-index: 999999 !important;
    background: #111 !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nota-profile-posts-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 14px;
    background: #111;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
}

.nota-profile-posts-btn:hover { background: #333; }


/* ============================================================
   #pun-status (ØÀÏÊÀ: ñòàòóñ ïîëüçîâàòåëÿ)
============================================================ */

#pun-status {
    position: absolute;
    top: 427px;
    display: flex;
    margin-left: 775px;
    color: rgb(var(--acc3));
    z-index: 100;
    flex-direction: row-reverse;
    width: 250px;
    height: 64px;
    align-items: center;
}

#pun-status a { color: var(--p-link) !important; }

#pun-status .container {
    color: rgb(var(--white), .6);
    width: 300px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    font: 300 10px var(--font);
    text-align: right;
    margin-right: 10px;
}

#pun-status img { border-radius: 50%; }
#pun-status .item2 { display: block; }
#pun-status .item1 { width: 300px; }
#wanted:hover { background: #000; }

.h-av {
    width: 64px;
    height: 64px;
    float: right;
    position: absolute;
    outline: 1px solid rgba(255, 255, 255, 0.15);
    outline-offset: -2px;
    top: 0px;
    right: -60px;
    filter: brightness(0.6);
    background: rgb(var(--navlinks-bg));
}


/* ============================================================
   GLASS AVATAR TITLE
============================================================ */

.glass-ava-wrap { position: relative; display: inline-block; }

.glass-ava-title {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    padding: 3px 8px;
    white-space: nowrap;
    color: var(--glass-text-color);
    background: linear-gradient(180deg, var(--glass-warm-bg-top), var(--glass-warm-bg-bottom));
    border-radius: var(--glass-radius-sm);
    box-shadow: var(--glass-shadow-outer);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    opacity: 0.8;
    pointer-events: none;
    transition: opacity 0.4s ease;
    font: 8px var(--font3);
    text-transform: uppercase;
}

.glass-ava-wrap:hover .glass-ava-title { opacity: 1; }


/* ============================================================
   ØÀÏÊÀ: ÑÑÛËÊÈ, ÀÍÎÍÑÛ, ÂÎÏÐÎÑ ÄÍß
============================================================ */

#main-links { position: absolute; top: 278px; margin-left: 120px; }

.main-link {
    padding: 2px 14px;
    font: 9px var(--font3);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(var(--acc6)) !important;
    border-radius: 999px;
    opacity: 0.85;
    transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.main-link:hover { color: rgb(var(--acc7)); opacity: 1; background: rgba(255, 255, 255, 0.2); }

.main-link.is-wanted { padding: 2px 14px; font-weight: 500; color: #fff; opacity: 0.95; }
.main-link.is-wanted:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }

/* flooders / posters */
#flooders::before { content: 'ôëóäèëè'; }
#posters::before { content: 'ïèñàëè ïîñòû'; }
#flooders::before, #posters::before {
    color: rgb(var(--acc5));
    text-transform: uppercase;
    display: block;
    font: 9px var(--font2);
    margin-bottom: 8px;
    text-align: center;
}

#flooders img, #posters img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.9;
    filter: grayscale(85%) brightness(0.5) contrast(0.9) saturate(0.8);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    outline: 1px solid rgba(255, 255, 255, 0.25);
    outline-offset: -2px;
    transition: filter 0.6s ease, opacity 0.6s ease;
    margin: 0px 4px;
}

#flooders img:hover, #posters img:hover {
    -webkit-filter: none;
    filter: none;
    transition: filter 0.3s ease, transform 0.3s ease;
    transform: translateY(-1px);
}

#posters { position: absolute; top: 90px; margin-left: 720px; width: 364px; }
#flooders { position: absolute; top: 90px; margin-left: -35px; width: fit-content; }

/* best post / episode */
#best { width: 320px; height: 66px; text-align: justify; color: rgb(var(--acc6), .7); overflow-y: scroll; font: 9px var(--font); padding-right: 7px; margin-bottom: 6px; }
#best-post { font-weight: 200; font-size: 11px; line-height: 14px; max-height: 100px; overflow: auto; padding-right: 5px; }
#best-post-author { text-transform: uppercase; font: 10px var(--font2); margin-bottom: 4px; }

#best-episode { width: 320px; height: 30px; display: flex; text-transform: uppercase; font: 10px var(--font2); align-items: flex-end; border-top: 1px solid rgb(var(--white), .1); }
#best-episode a { color: rgb(var(--acc6)); }
#best-episode a:hover { color: rgb(var(--acc7)); transition: color 0.3s ease; }

#best-post-author a { color: rgb(var(--acc6)); }
#best-post-author a:hover { color: rgb(var(--acc7)); transition: color 0.3s ease; }
#best-post-author a::after { content: 'ïèøåò: '; margin-left: 4px; }

#bests { width: 60%; padding: 10px 0px 0px 10px; }
#best-ep a, #best-post a { color: #fff; }

#best-ep {
    margin: auto;
    text-transform: uppercase;
    font-weight: 200;
    min-height: 26px;
    border-radius: 15px;
    padding: 4px 15px;
    border: 1px solid #fff;
    margin-top: 10px;
    margin-left: 0px;
    text-align: center;
    font-size: 10px;
}

#weekly {
    width: 330px;
    height: 120px;
    top: 210px;
    opacity: 1;
    margin-left: 730px;
    padding: 15px;
    font: 9px var(--font3);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgb(var(--acc6)) !important;
    border-radius: 5px;
    position: absolute;
    overflow: hidden;
    background: var(--bpost) no-repeat;
}

#weekly:hover { opacity: 1; transition: filter 0.3s ease, transform 0.3s ease; transform: translateY(-2px); }
#weekly:hover::after { opacity: 0.35; transition: opacity 0.3s ease; }

/* àíîíñû */
#announcements {
    display: flex;
    gap: 14px;
    position: absolute;
    top: 383px;
    width: 700px;
    margin-left: -30px;
    overflow-x: auto;
    flex-wrap: nowrap;
    height: 65px;
    align-items: center;
}

.announcement { display: flex; flex-direction: column; opacity: 0.85; transition: opacity 0.3s ease, transform 0.3s ease; }
.announcement:hover { opacity: 1; transform: translateY(-2px); }

.a-title { font: 11px var(--font2); text-transform: uppercase; letter-spacing: 0.08em; width: fit-content; font-weight: 200; }
.a-sub { font: 8px var(--font3); width: fit-content; text-transform: uppercase; }
.punbb #announcements a.announcement { color: rgb(var(--white)); }

/* âîïðîñ äíÿ */
#question-day {
    display: flex;
    text-decoration: none;
    color: rgb(var(--acc6));
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    position: absolute;
    top: 380px;
    margin-left: 720px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    width: 320px;
    height: 65px;
}

#question-day:hover { opacity: 1; transform: translateY(-2px); filter: brightness(120%); }
.q-label { display: block; font: 10px var(--font2); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; }
.q-text { font: 10px var(--font3); line-height: 1; }

/* fade-in */
.punbb #announcements,
.punbb #question-day { opacity: 0; animation: ncFadeIn 0.9s ease forwards; }

.punbb #question-day { animation-delay: 0.15s; }

@keyframes ncFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 0.9; transform: translateY(0); }
}


/* ============================================================
   ÊÍÎÏÊÀ ÒÅÌÛ / ÏÅÐÅÊËÞ×ÀÒÅËÜ
============================================================ */

.button {
    background: rgb(var(--acc1), .7);
    padding: 4px 16px;
    border-radius: 3px !important;
    text-transform: uppercase;
    font: 600 11px var(--font3) !important;
    color: rgb(var(--white));
}

.button:hover {
    background: rgb(var(--acc1), 1);
    padding: 4px 16px;
    border-radius: 3px !important;
    text-transform: uppercase;
    font: 600 11px var(--font3) !important;
    color: rgb(var(--white));
    cursor: pointer;
}

/* òåìà-ïåðåêëþ÷àòåëü */
#theme_switcher {
    position: fixed;
    top: 80px;
    margin-left: -50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#theme_switcher li { display: inline-block; }
#theme_switcher li label { display: none; }

#theme_switcher li input {
    width: auto;
    height: auto;
    -webkit-appearance: none;
    margin: 0 !important;
    padding: 0;
    background: none;
    border: none;
    vertical-align: middle !important;
    box-shadow: none;
    display: inline-block;
}

#theme_switcher li:not(:last-child) input { margin-right: 8px; }
#theme_switcher li input::before { font: 900 10px var(--fa); color: rgb(var(--acc6), .1); }

#theme_switcher li input#beige::before,
#theme_switcher li input#blue::before,
#theme_switcher li input#violet::before,
#theme_switcher li input#green::before { content: "\f111"; }

#theme_switcher li:hover input::before,
#theme_switcher li:has([type="radio"]:checked) input::before { color: rgb(var(--acc8), .9); }


/* ============================================================
   ÁÀÍÍÅÐÛ
============================================================ */

#banners {
    padding: 16px;
    background: var(--header);
    border-radius: 8px;
    position: relative;
    top: 100px;
    left: -30px;
    opacity: 0.7;
    border: #0000008c 1px solid;
    width: 1080px;
    margin: -50px auto;
    text-align: right;
    text-shadow: 0 1px 2px black;
}

.banners_wrap { max-height: 60px; overflow-y: auto; filter: grayscale(100%); opacity: 0.7; }
#banners a { display: inline-flex; }
#banners img { width: 88px; height: 31px; object-fit: cover; border-radius: var(--4); }
#banners img:hover { opacity: 1; }


/* ============================================================
   ÌÎÄÀËÜÍÛÅ ÎÊÍÀ
============================================================ */

#pun-report .inner, #pun-reputation .inner, #pun-admin-award-form .inner {
    display: none;
    position: fixed;
    background: rgb(var(--pun));
    padding: 20px;
    border-radius: 8px;
    color: rgb(var(--text));
    left: 50%;
    top: 50%;
    margin: -135px 0 0 -384px;
    width: 768px;
    z-index: 100;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
    -khtml-box-shadow: 0 0 40px #222;
}

.pun-modal .modal-inner {
    width: 700px;
    max-width: 94%;
    height: auto;
    max-height: 62vh; /* ?CHECK — â îðèãèíàëå áûëî äâà çíà÷åíèÿ: 44em è 62vh */
    margin-top: 20vh; /* ?CHECK — â îðèãèíàëå áûëî äâà çíà÷åíèÿ: 12% auto 0 è 20vh */
    box-shadow: 0 0 14px rgba(0, 0, 0, .3);
    position: relative;
    background: rgb(var(--pun));
    z-index: 120000;
    overflow: hidden;
    border-radius: 8px;
}

.pun-modal.unread-notifications .modal-inner.section { background: rgb(var(--light100) / .8) !important; }

.pages .container { overflow: visible !important; }
#pun-main.main.pages::before { display: none; }

.unread-notifications #notifications-advanced, .unread-notifications #notifications-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    clear: both;
    max-height: 46vh; /* ?CHECK — â îðèãèíàëå áûëî äâà çíà÷åíèÿ: 30em è 46vh */
    background: rgb(var(--pun));
    padding: 0px 10px 10px;
    border-radius: 0px 0px 8px 8px;
}

#notifications-settings, .unread-notifications .notifications-block-title {
    padding: 0 1em;
    height: 2.2em;
    line-height: 2.2em;
    clear: both;
    background: rgb(var(--pun));
    margin-top: -8px;
}


/* ============================================================
   ÑÒÈÊÅÐÛ
============================================================ */

.hvStickerPackModal {
    padding: 16px 16px 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none !important;
    border-radius: 4px;
    background: rgb(var(--pun)) !important;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.hvStickerPackModalContent {
    border: none !important;
    padding: 12px;
    min-height: 70px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 230px;
    overflow-x: hidden;
    overflow-y: auto;
}

.hvStickerPackModalTab {
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .12);
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    margin-top: 8px;
    margin-right: 8px;
    color: rgb(var(--text));
}


/* ============================================================
   ADMIN PAGES
============================================================ */

.punbb-admin { margin-top: 30px; background-color: rgb(var(--pun)); }
.adminmain { padding-left: 15em; margin-bottom: 1em; margin-top: 100px; }

/* ?CHECK — â îðèãèíàëå ýòîò áëîê áûë ïðîäóáëèðîâàí äâàæäû ïîäðÿä èäåíòè÷íî */
.punbb-admin #pun-status {
    display: flex;
    position: absolute;
    top: 70px;
    height: auto;
    background: rgb(var(--acc3));
    width: 1110px;
    margin-left: -30px;
}

#pun .adcontainer { border: none; border-width: 0 1px 1px 1px; margin-bottom: 16px; }
.punbb-admin #filetable .tc3 { width: 10% !important; }

#pun-adnav { position: sticky; top: 80px; }
#pun-adnav sup { display: none; }
#pun-adnav li { list-style: none !important; }
#adnav-standard > ul > li { padding: 0 0 4px; }
#pun-adnav ul.adsubnav li { padding-left: 16px !important; }

#adnav-standard > ul > li > a {
    display: block;
    padding: 4px 8px;
    box-sizing: border-box;
    position: relative;
    text-transform: uppercase;
    border-radius: 8px;
    background-color: rgb(var(--acc5), .38);
    font: 10px var(--font3);
}

#pun-adnav li.isactive > a { background: #333; color: #fff; }

#pun-adnav li.item3:not(.isactive) > a,
#pun-adnav li.item-forms:not(.isactive) > a,
#pun-adnav li.item15:not(.isactive) > a,
#pun-adnav li.item20:not(.isactive) > a,
#pun-adnav li.item11:not(.isactive) > a,
#pun-adnav li.item22:not(.isactive) > a {
    background-color: rgb(var(--acc1), .38);
    font: 10px var(--font3);
}

#pun-adnav li.item3 > a:after,
#pun-adnav li.item-forms > a:after,
#pun-adnav li.item15 > a:after,
#pun-adnav li.item20 > a:after,
#pun-adnav li.item11 > a:after,
#pun-adnav li.item22 > a:after {
    content: '\f005';
    font: 700 8px var(--fa);
    margin-top: 2px;
    margin-left: 6px;
    float: right;
}

#adnav-standard > ul > li > a:hover { background: rgb(var(--acc8)) !important; color: #fff; }
#pun-adnav .adsubnav { padding-left: 8px; }

#pun-admain .submittop { position: sticky; top: 56px; z-index: 7; }
#pun-admain textarea, #pun-admain input, #pun-admain select, #pun-admain optgroup { font: 1em verdana, arial, helvetica, sans-serif; padding: 10px; }

#pun-ulinks .nota-telegram a::before {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands";
    content: "\f2c6";
    margin-right: .35em;
}

#pun-ulinks .nota-telegram { color: rgb(var(--acc1)) !important; }

#filetable td.tcl a[href^="?edit&file="] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border: 1px solid currentColor;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0;
    vertical-align: middle;
    opacity: .75;
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

#filetable td.tcl a[href^="?edit&file="]::before {
    content: "\f044";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
}

#filetable td.tcl a[href^="?edit&file="]:hover { opacity: 1; transform: translateY(-1px); }

#topic-modmenu span { margin-left: 20px; }
.modmenu { float: right; padding: 10px 0px; border-radius: 8px; width: 100%; }

#pun > div:not(#pun-viewtopic) {
    background: rgb(var(--pun));
    width: 1050px;
    padding: 30px;
    margin: 30px auto;
    border-radius: 8px;
    box-shadow: 0px 0px 20px #0000008c;
}

#pun #pun-viewtopic { width: 1050px; padding: 30px; margin: 30px auto; border-radius: 8px; }

#pun-viewtopic #post-form {
    background: rgb(var(--pun));
    padding: 110px 30px 60px;
    margin-top: -130px;
    width: 100%;
    margin-left: -30px;
    border-radius: 8px;
    margin-bottom: -70px;
}

.isguest #pun-viewtopic #post-form { padding: 20px 30px 60px; margin-top: -30px; }


/* ============================================================
   ÐÀÇËÈ×ÍÎÅ / ÑÏÅÖÈÔÈ×ÍÛÅ ÝËÅÌÅÍÒÛ
============================================================ */

#lvgrm { width: 700px; height: 800px; background-color: #1b1b1b; margin: auto; }

#lvgrm-adr { letter-spacing: 5px; margin: 6px 0px; }
#lvgrm-name { font-size: 24px; margin-bottom: 30px; }
#lvgrm-pic { width: 400px; height: 800px; float: left; overflow: hidden; }
#lvgrm-pic img { height: 100%; }
#lvgrm-txt { width: 300px; height: 800px; float: right; background: url(https://forumstatic.ru/files/001c/57/ad/88212.jpg); color: #fff; align-content: center; font-family: var(--font); font-weight: 100; padding: 20px; letter-spacing: 1px; }

.datetime, .byuser { text-transform: lowercase; font-size: 11px; }

#topic-ams { display: flex; }
#topic-ams1 { width: 360px; height: 90px; }

#html-topic img { max-height: 70px; border-radius: 35px; opacity: 0.8; }
#html-topic table td { border: none; }
#topic-ams1 img, #topic-ams1-h { display: inline; }
#topic-ams1-h, #topic-ams1-s, #topic-ams1-t { display: block; }
#topic-ams1-h { font-family: var(--font); font-size: 12px; }
#topic-ams1-s { font-size: 9px; color: #6c6c6c; }
#topic-ams1-t { font-size: 9px; height: auto; }

#html-topic { background: var(--fishes) center center repeat-y; width: auto; height: auto; padding: 20px; margin: auto; border-radius: 20px; border: 1px solid #b1b1b1; }
.dark #html-topic { background: url(https://forumstatic.ru/files/001c/57/ad/51802.jpg) center center repeat-y; }

#html-post { background: var(--fishes) center center repeat-y; width: 720px; height: auto; padding: 20px; margin: auto; border-radius: 20px; border: 1px solid #b1b1b1; font: 12px; font-family: var(--font); }

#topic-header { font-family: Arial Black; font-size: 26px; text-align: center; }
#topic-sign { text-align: center; padding: 8px; font-size: 10px; }

#page-edit {
    padding: 5px 20px;
    background: rgb(var(--acc1));
    color: #fff;
    display: flex;
    width: max-content;
    float: right;
    margin-top: 50px;
    margin-right: -50px;
    border-radius: 20px;
    text-transform: uppercase;
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 1px;
    transition: .33s;
}

#page-edit:hover { background-color: #000; }
#page-edit a { color: #fff; }

.post-char-counter {
    text-align: right;
    font-family: var(--font3);
    font-size: 9px;
    color: rgba(var(--text), 0.5);
    margin-top: 15px;
    padding-right: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
}

.post-char-counter span { font-weight: bold; color: rgba(var(--text), 0.5); }