@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,300,0,0');

/* =========================================================
   ПАЛИТРА — ваниль без желтизны + приглушённое яблоко
   Меняй цвета ТОЛЬКО здесь — всё остальное завязано на переменные.
   ========================================================= */
:root {
  --header-img: url('https://forumstatic.ru/files/001c/bb/88/39862.png');

  --font-body: 'Manrope', 'Inter', Arial, sans-serif;
  --font-head: 'Manrope', 'Inter', Arial, sans-serif;

  --page-bg:   #cfc4c0;
  --card-bg:   #f6f2ef;
  --block-bg:  #efe9e5;
  --nav-bg:    #ebe3de;
  --row-bg:    #faf7f4;
  --line:      #e6ded9;

  --accent:       #a85a58;
  --accent-soft:  #c89392;
  --accent-hover: #8f4a48;
  --accent-pale:  #f0e2df;

  --text:  #5e524d;
  --muted: #a89c97;
  --on-accent: #ffffff;

  --online-bg:   #dde3cf;
  --online-text: #7e9560;

  --mark-bg:   #f1ddd9;
  --mark-text: #6b4642;

  --shadow:      rgba(80,60,55,.14);
  --shadow-soft: rgba(80,60,55,.08);
  --tint:        rgba(168,90,88,.10);
  --hairline:    rgba(95,86,80,.10);

  --header-height: 250px;
  --radius: 18px;
  --radius-s: 12px;
  --maxw: 1040px;
  --pad: 26px;
}

/* BASE */
html, body { background: #c8bbb5 url("https://forumstatic.ru/files/001c/bb/88/26506.png") center top / cover no-repeat fixed !important; font-family: var(--font-body) !important; color: var(--text); font-size: 13px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
#pun_wrap, .punbb { background: transparent !important; }
a { color: var(--accent); text-decoration: none; transition: color .15s ease, opacity .15s ease, background-color .15s ease; }
a:hover { color: var(--text); }
.acchide, #pun-navlinks h2, #pun-ulinks h2, #pun-status h2 { position: absolute; left: -9999px; }
.divider { display: none; }
#pun:not(:has(.punbb-admin)) { max-width: var(--maxw) !important; width: auto !important; margin: 40px auto !important; background: var(--card-bg) !important; border: 0 !important; border-radius: var(--radius) !important; box-shadow: 0 18px 50px var(--shadow); overflow: hidden; }
.section, .main, .category, .container, .formal, fieldset { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* HEADER */
#pun-title { padding: 0 !important; margin: 0 !important; height: var(--header-height); background-image: var(--header-img)!important; background-size: cover!important; background-position: center!important; background-repeat: no-repeat!important; background-color: var(--nav-bg); }
#pun-title table, #pun-title tbody, #pun-title tr, #pun-title td { display: block; width: 100%; height: 100%; border: 0; }
#pun-title .title-logo, #pun-title .title-logo-tdr { display: none; }

/* NAVIGATION */
#pun-navlinks { background: var(--nav-bg) !important; margin: -26px var(--pad) 0 !important; border-radius: var(--radius-s) !important; position: relative; z-index: 3; box-shadow: 0 6px 18px var(--shadow-soft); }
#pun-navlinks .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; padding: 13px 18px !important; margin: 0 !important; }
#pun-navlinks li { display: inline-flex; float: none !important; background: none !important; }
#pun-navlinks li a { display: block; padding: 4px 12px; font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--muted); border-radius: 8px; }
#pun-navlinks li a:hover, #pun-navlinks li.isactive a { background: var(--tint); color: var(--accent); }
#pun-ulinks { margin: 12px var(--pad) 0 !important; }
#pun-ulinks .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; padding: 6px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--line); }
#pun-ulinks li { float: none !important; padding: 0 !important; background: none !important; }
#pun-ulinks li a { font-size: 11.5px; color: var(--muted); font-weight: 500; }
#pun-ulinks li a:hover { color: var(--accent); }
#pun-ulinks .bubble { background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 0 5px; font-size: 10px; margin-left: 4px; }

/* STATUS / CRUMBS */
#pun-status { margin: 10px var(--pad) 0 !important; text-align: center; }
#pun-status .container { padding: 4px 0 !important; margin: 0 !important; }
#pun-status, #pun-status strong { color: var(--muted); font-size: 11px; font-weight: 500; }
#pun-status .status-right a { color: var(--accent); }
.crumbs { margin: 14px var(--pad) 0 !important; padding: 0 !important; font-size: 11px; color: var(--muted); }
.crumbs strong { color: var(--accent-soft); font-weight: 600; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--text); }

/* MAIN */
#pun-main { margin: 14px var(--pad) 0 !important; }
#pun-main > h1 { display: none !important; }

/* LINKS / BUTTONS / PAGINATION */
.linkst, .linksb { display: grid !important; grid-template-columns: auto auto 1fr auto !important; align-items: center !important; gap: 8px !important; margin: 0 0 10px !important; padding: 0 !important; font-size: 11.5px; }
.linksb { margin: 12px 0 0 !important; }
.linkst .postlink, .linkst .new-topic, .linksb .postlink, .linksb .new-topic { grid-column: 1 !important; }
.linkst .new-poll, .linksb .new-poll { grid-column: 2 !important; }
.linkst .pagelink, .linksb .pagelink { grid-column: 4 !important; justify-self: end !important; margin-left: 0 !important; }
.postlink a, .new-topic a, .new-poll a, .subscribelink a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; height: 28px !important; padding: 0 12px !important; border-radius: 8px !important; font-weight: 700; font-size: 10.5px !important; line-height: 1 !important; }
.postlink a, .new-topic a, .subscribelink a { background: var(--accent) !important; color: var(--on-accent) !important; border: 1px solid var(--accent) !important; box-shadow: 0 4px 12px rgba(168,90,88,.13) !important; }
.new-poll a { background: var(--accent-pale) !important; color: var(--accent-soft) !important; border: 1px solid var(--hairline) !important; }
.postlink a:hover, .new-topic a:hover, .subscribelink a:hover { background: var(--accent-hover) !important; color: var(--on-accent) !important; }
.new-poll a:hover { background: var(--nav-bg) !important; color: var(--accent) !important; }
.pagelink { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 600 !important; }
.pagelink a, #pun-pagelinks a, .pagelink strong, #pun-pagelinks strong { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 24px !important; height: 24px !important; padding: 0 7px !important; margin: 0 !important; border-radius: 8px !important; box-sizing: border-box !important; font-size: 11px !important; font-weight: 700 !important; }
.pagelink a, #pun-pagelinks a { background: var(--accent-pale); color: var(--text) !important; border: 1px solid var(--hairline) !important; }
.pagelink a:hover, #pun-pagelinks a:hover { background: var(--nav-bg); color: var(--accent) !important; }
.pagelink strong, #pun-pagelinks strong { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent) !important; }

/* FORUM INDEX */
.category, .usertable { margin-bottom: 20px !important; background: var(--block-bg) !important; border-radius: 16px !important; overflow: hidden; }
.category h2, .usertable h2 { background: var(--nav-bg) !important; padding: 14px 20px !important; margin: 0 !important; font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--text); border: 0 !important; }
.category h2 .catleft, .category h2 .catright { display: none; }
.category .container, .usertable .container { padding: 10px 18px 18px !important; }
.category .container table, .usertable .container table { border-collapse: collapse; width: 100%; }
.category thead th, .usertable thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; padding: 10px 8px 6px !important; text-align: left; border: 0 !important; }
.category tbody td, .usertable tbody td { padding: 12px 8px !important; border: 0 !important; border-top: 1px solid var(--line) !important; vertical-align: middle; background: var(--row-bg) !important; color: var(--text); }
.category tbody tr:hover td, .usertable tbody tr:hover td { background: #f2ebe5 !important; }
.category .tcl h3 a, .usertable .tcl h3 a, .usersname a { color: var(--text) !important; font-weight: 800 !important; }
.category .tcl h3 a:hover, .usertable .tcl h3 a:hover, .usersname a:hover { color: var(--accent) !important; }
.category .tc2, .category .tc3, .usertable .tc2, .usertable .tc3 { color: var(--text) !important; font-weight: 700 !important; text-align: center; }
.user_title { color: var(--muted); }
.isonline { color: var(--online-text); }

/* TOPIC LIST */
.forum { background: transparent !important; border-radius: 0 !important; overflow: visible !important; margin-bottom: 20px !important; }
.forum > h2, .forum > h2 span { display: none !important; }
.forum .container { background: transparent !important; padding: 0 !important; overflow: visible !important; }
.forum table { width: 100% !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 7px !important; }
.forum thead { display: none !important; }
.forum .tc3, .forum thead .tc3 { display: none !important; }
.forum .tcl { width: 70% !important; }
.forum .tc2 { width: 10% !important; }
.forum .tcr { width: 20% !important; }
.forum tbody tr { background: transparent !important; }
.forum tbody td { background: var(--row-bg) !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.55) !important; border-bottom: 1px solid var(--hairline) !important; padding: 10px 13px !important; vertical-align: middle !important; color: var(--text) !important; }
.forum tbody td:first-child { border-radius: 10px 0 0 10px !important; }
.forum tbody td:last-child { border-radius: 0 10px 10px 0 !important; }
.forum tbody tr:hover td { background: #f5ece4 !important; }
.forum .intd { display: flex !important; align-items: flex-start !important; gap: 8px !important; }
.forum .intd .icon { display: block !important; flex: 0 0 5px !important; width: 5px !important; height: 5px !important; margin-top: 7px !important; border-radius: 50% !important; background: var(--accent) !important; opacity: .55 !important; }
.forum .intd .icon img, .forum .intd .icon div { display: none !important; }
.forum .tcl h3 { margin: 0 0 4px !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25 !important; }
.forum .tcl h3 a { color: var(--text) !important; }
.forum .tcl h3 a:hover { color: var(--accent) !important; }
.forum .tclcon { font-size: 10.5px !important; line-height: 1.35 !important; color: var(--muted) !important; }
.forum .tclcon a { color: var(--accent-soft) !important; font-weight: 600 !important; }
.forum .tc2 { text-align: center !important; font-size: 12px !important; font-weight: 800 !important; color: var(--text) !important; }
.forum .tcr { text-align: right !important; font-size: 10.5px !important; line-height: 1.35 !important; color: var(--muted) !important; }
.forum .tcr .user-avatar, .forum .tcr .avatar-image { display: none !important; }
.forum .datetime, .forum .lastpost-link { display: block !important; color: var(--text) !important; font-size: 10.8px !important; font-weight: 700 !important; }
.forum .byuser, .forum .byuser-username { display: block !important; color: var(--muted) !important; font-size: 10.3px !important; }
.lastpost, .datetime, .byuser, .byuser-username { font-size: 11px; color: var(--muted); }

/* POSTS */
.topic { margin-bottom: 6px; }
.topic > h2 { background: var(--nav-bg) !important; padding: 11px 18px !important; margin: 0 0 14px !important; font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: var(--text); border: 0 !important; border-radius: var(--radius-s); }
.topic > h2 .item2 { float: right; font-weight: 500; color: var(--muted); }
.post { background: transparent; margin: 0 0 16px !important; border: 0 !important; }
.post .container { position: relative; overflow: hidden; padding: 0 !important; }
.post h3 { background: transparent; margin: 0 0 8px !important; padding: 0 !important; font-size: 11px; font-weight: 500; color: var(--muted); }
.post h3 strong { color: var(--muted); margin-right: 8px; }
.post h3 .permalink { color: var(--muted); }
.post h3 .permalink:hover, .post h3 .sharelink:hover { color: var(--accent); }
.post h3 .sharelink { float: right; color: var(--accent-soft); }
.post-body { margin-left: 232px; }
.post-box { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.post-content { color: var(--text); font-size: 13px; line-height: 1.7; }
.post-content p { margin: 0 0 .8em; color: var(--text); }
.post-content a { color: var(--accent) !important; font-weight: 600; }
.post-content img { max-width: 100%; height: auto; }
.post-content img.postimg { vertical-align: middle; }
.post-content .scrollbox { width: 100%; overflow: auto; }
.post-content hr { border: 0; border-top: 1px dashed var(--hairline); margin: 1.1em auto; width: 86%; }
.post-rating { margin-top: 10px; }
.post-rating a { color: var(--accent-soft); font-size: 11px; cursor: pointer; }
.reactions-root { clear: both; margin-top: 8px; }
.reaction-chip { background: var(--block-bg); border: 1px solid var(--line); border-radius: 14px; padding: 3px 8px; cursor: pointer; }
.clearer { clear: both; }
.post-links { clear: both; margin-left: 232px; padding-top: 8px; }
.post-links ul { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.post-links li { background: none !important; }
.post-links a { font-size: 11px; color: var(--muted); }
.post-links a:hover { color: var(--accent); }

/* POST AUTHOR */
.post-author { float: left; width: 210px; background: var(--block-bg) !important; border-radius: 16px !important; overflow: hidden; padding: 0 !important; margin: 0 !important; box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 8px 24px var(--shadow-soft); transition: transform .15s ease, box-shadow .15s ease; }
.post-author:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 10px 28px var(--shadow); }
.post-author ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 14px 14px; margin: 0; list-style: none; text-align: center; }
.post-author li { width: 100%; background: none !important; padding: 2px 0 !important; border: 0 !important; }
.post-author .fld-name { color: var(--muted); }
.post-author .pa-author { background: var(--nav-bg) !important; margin: 0 -14px 12px !important; padding: 11px 14px !important; font-family: var(--font-head); font-weight: 700 !important; font-size: 14px !important; letter-spacing: .2px; border-bottom: 1px solid var(--hairline) !important; }
.post-author .pa-author a { color: var(--accent); font-weight: 800 !important; }
.post-author .pa-author .flag-i, .post-author .flag-i { display: inline-block; width: 16px; height: 11px; margin-right: 8px !important; background-size: cover; vertical-align: middle; border-radius: 2px; }
.post-author .pa-title { color: var(--muted); font-size: 10px !important; font-weight: 500; text-transform: uppercase; letter-spacing: 1.15px; margin-bottom: 10px !important; }
.post-author .pa-avatar { margin-bottom: 6px !important; padding-bottom: 6px !important; border: 0 !important; }
.post-author .pa-avatar img { display: block; max-width: 100%; height: auto; box-sizing: border-box; margin: 0 auto; border: 1px dashed var(--accent); border-radius: 10px; padding: 3px; box-shadow: none; }
.post-author .pa-posts, .post-author .pa-respect { width: 50%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 42px; margin: 0 !important; padding: 4px 4px 3px !important; border-top: 0 !important; line-height: 1.1; }
.post-author .pa-posts { border-right: 1px solid var(--hairline); }
.post-author .pa-posts span:not(.fld-name), .post-author .pa-respect span:not(.fld-name) { color: var(--accent); font-size: 15px; line-height: 1; font-weight: 800; min-height: 16px; }
.post-author .pa-posts .fld-name, .post-author .pa-respect .fld-name, .post-author .pa-respect .fld-name a { display: block; margin-top: 4px; font-size: 8.5px; line-height: 1.2; text-transform: uppercase; letter-spacing: .55px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.post-author .pa-online { width: 100%; margin-top: 7px !important; padding-top: 0 !important; }
.post-author .pa-online strong, .post.online .post-author .pa-online strong, .post-author.online .pa-online strong { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto; max-width: 100%; box-sizing: border-box; background: var(--online-bg); color: var(--online-text); padding: 8px 14px; border-radius: 12px; font-size: 10.5px; font-weight: 700; text-align: center; box-shadow: none; }
.post-author .pa-online strong::before, .post.online .post-author .pa-online strong::before, .post-author.online .pa-online strong::before { content: ""; display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(168,90,88,.10); }
.post-author .pa-reg, .post-author .pa-invites, .post-author .pa-positive, .post-author .pa-awards, .post-author .pa-gifts, .post-author .pa-time-visit, .post-author .pa-ip, .post-author .pa-ua { display: none; }

/* CONTENT BLOCKS */
.post-content mark, .post-content .highlight-text { display: inline-block; background: var(--mark-bg) !important; color: var(--mark-text) !important; padding: 2px 7px; border-radius: 5px; }
.post-content .quote-box, .post-content .quote-box.answer-box { background: var(--row-bg) !important; border: 1px solid var(--hairline) !important; border-radius: 14px !important; padding: 12px 14px !important; margin: .7em 0 1.1em !important; color: var(--text) !important; overflow: hidden; }
.post-content .quote-box cite, .post-content .quote-box.answer-box cite { display: block !important; margin: 0 0 8px !important; padding: 0 !important; font-style: normal !important; font-size: 10.5px !important; line-height: 1.25; font-weight: 700 !important; color: var(--accent) !important; }
.post-content .quote-box cite::before { font-family: 'Material Symbols Outlined'; content: 'format_quote'; font-size: 14px; vertical-align: -2px; margin-right: 4px; font-variation-settings: 'FILL' 0, 'wght' 300; }
.post-content .quote-box blockquote, .post-content .quote-box.answer-box blockquote { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--text) !important; }
.post-content .quote-box blockquote p { margin: 0 !important; }
.post-content .spoiler-box, .post-content .quote-box.spoiler-box { background: var(--row-bg) !important; border: 1px solid var(--hairline) !important; border-radius: 12px !important; padding: 0 !important; margin: .7em 0 1.1em !important; overflow: hidden !important; }
.post-content .spoiler-box > div:first-child, .post-content .spoiler-box > b:first-child, .post-content .spoiler-box .legend { display: flex !important; align-items: center; background: var(--nav-bg) !important; color: var(--accent) !important; border: 0 !important; border-radius: 0 !important; padding: 9px 14px !important; margin: 0 !important; font-size: 11px !important; line-height: 1.2; font-weight: 700 !important; cursor: pointer !important; }
.post-content .spoiler-box > div:first-child::before, .post-content .spoiler-box > b:first-child::before, .post-content .spoiler-box .legend::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 7px; opacity: .75; }
.post-content .spoiler-box > blockquote { margin: 0 !important; padding: 11px 14px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--text) !important; }
.post-content .code-box { background: var(--row-bg) !important; border: 1px solid var(--hairline) !important; border-radius: 14px !important; padding: 12px 14px !important; margin: .7em 0 1.1em !important; color: var(--text) !important; }
.post-content .code-box strong.legend { display: block !important; margin: 0 0 8px !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 10.5px !important; line-height: 1.25; font-weight: 800 !important; letter-spacing: .2px; color: var(--accent) !important; }
.post-content .code-box .blockcode { display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: var(--text) !important; overflow: hidden; }
.post-content .code-box .scrollbox { display: block !important; width: auto !important; max-height: 220px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: auto !important; background: transparent !important; border: 0 !important; }
.post-content .code-box pre, .post-content pre, .post-content code { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--text) !important; font-family: 'Courier New', monospace !important; font-size: 12px !important; line-height: 1.65 !important; white-space: pre-wrap !important; }
.post-content table { width: 100% !important; max-width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; border-radius: 12px !important; background: var(--row-bg) !important; border: 1px solid var(--hairline) !important; }
.post-content table td, .post-content table th { border: 0 !important; border-top: 1px solid var(--hairline) !important; padding: 9px 12px !important; background: transparent !important; color: var(--text) !important; }
.post-content table tr:first-child td, .post-content table tr:first-child th { border-top: 0 !important; }
.post-sig { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.post-sig dt { display: block; width: 200px; margin: 14px 0 8px; border-top: 1px solid var(--line); }

/* FORMS */
.formal { background: var(--block-bg) !important; border-radius: 16px !important; overflow: hidden; }
.formal > h2, #post-form > h2 { background: var(--nav-bg) !important; padding: 11px 18px !important; margin: 0 !important; font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: var(--text); }
.formal .container { padding: 14px 18px !important; }
fieldset { margin: 0 0 14px; padding: 0; }
legend { padding: 0 0 8px; }
legend span { font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--accent-soft); }
.fs-box { padding: 0; }
.inputfield, .selectfield, .infofield { margin: 0 0 12px; }
.fs-box.inline .inputfield, .fs-box.inline .selectfield { display: inline-block; vertical-align: top; margin-right: 16px; }
label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.infofield { font-size: 11px; color: var(--muted); line-height: 1.5; }
input[type="text"], input[type="password"], textarea, select { font-family: var(--font-body); font-size: 12px; color: var(--text); background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
textarea { width: 100%; box-sizing: border-box; line-height: 1.6; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-soft); }
input[type="submit"], .button { font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 8px; padding: 9px 20px; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; box-shadow: 0 4px 12px rgba(168,90,88,.13); }
input[type="submit"]:hover, .button:hover { background: var(--accent-hover); color: var(--on-accent); }
.formsubmit { margin-top: 12px; }
.button.preview { background: var(--accent-soft); }

/* BB EDITOR */
#form-buttons { background: var(--block-bg); border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: 4px; }
#form-buttons table td { background-image: none !important; background-color: transparent !important; position: relative; width: 28px; height: 28px; cursor: pointer; border-radius: 6px; vertical-align: middle; text-align: center; transition: background-color .15s ease; }
#form-buttons table td:hover { background-color: var(--nav-bg) !important; }
#form-buttons table td img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0 !important; background: none !important; cursor: pointer; }
#form-buttons table td::before { font-family: 'Material Symbols Outlined'; font-size: 18px; line-height: 28px; color: var(--accent); display: block; width: 100%; text-align: center; pointer-events: none; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
#button-font::before { content: 'text_fields'; }
#button-size::before { content: 'format_size'; }
#button-bold::before { content: 'format_bold'; }
#button-italic::before { content: 'format_italic'; }
#button-underline::before { content: 'format_underlined'; }
#button-strike::before { content: 'format_strikethrough'; }
#button-left::before { content: 'format_align_left'; }
#button-center::before { content: 'format_align_center'; }
#button-right::before { content: 'format_align_right'; }
#button-link::before { content: 'link'; }
#button-spoiler::before { content: 'expand_circle_down'; }
#button-image::before { content: 'image'; }
#button-video::before { content: 'play_circle'; }
#button-hide::before { content: 'lock'; }
#button-quote::before { content: 'format_quote'; }
#button-code::before { content: 'code'; }
#button-color::before { content: 'palette'; }
#button-table::before { content: 'table_chart'; }
#button-smile::before { content: 'sentiment_satisfied'; }
#button-keyboard::before { content: 'keyboard'; }
#button-addition::before { content: 'more_horiz'; }
#button-files_rusff::before { content: 'attach_file'; }
#button-graffiti_rusff::before { content: 'brush'; }

/* PROFILE PAGE */
#profilenav { float: left; width: 180px; background: var(--nav-bg) !important; border-radius: var(--radius-s); margin: 0 18px 14px 0; overflow: hidden; }
#profilenav h2 { padding: 10px 14px; margin: 0; font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--accent); }
#profilenav ul { list-style: none; margin: 0; padding: 0 8px 10px; }
#profilenav li { padding: 0 !important; background: none !important; }
#profilenav li a { display: block; padding: 6px 8px; font-size: 11.5px; color: var(--text); border-radius: 6px; }
#profilenav li a:hover { background: var(--tint); }
#profilenav li.isactive a { background: var(--card-bg); color: var(--accent); font-weight: 600; }
#viewprofile .container { padding: 14px 18px !important; overflow: hidden; }
#viewprofile ul, #viewprofile table { width: 100%; }
#viewprofile li { list-style: none; padding: 5px 0 !important; background: none !important; font-size: 12px; color: var(--text); }
#viewprofile li span { color: var(--muted); }
#profile-left { width: 160px; padding-right: 18px; }
#profile-name strong { font-family: var(--font-head); font-size: 15px; color: var(--accent); }
#profile-title strong { color: var(--muted); font-weight: 500; }
#profile-gifts { margin-top: 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.messages-container .container { overflow: hidden; }
.messages-container #profilenav { width: 200px; }

/* STATS / ANNOUNCEMENT / MODMENU */
#pun-stats { margin: 4px var(--pad) 0 !important; background: var(--block-bg) !important; border-radius: var(--radius-s) !important; }
#pun-stats .statscon { padding: 14px 18px !important; }
#pun-stats ul { margin: 0; padding: 0; }
#pun-stats li { list-style: none; font-size: 11.5px; color: var(--text); padding: 2px 0 !important; background: none !important; }
#pun-stats li span { color: var(--muted); }
#pun-stats .onlinelist { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px !important; }
#pun-announcement { margin: 0 var(--pad) 18px !important; background: var(--block-bg) !important; border-radius: var(--radius-s) !important; overflow: hidden; }
#pun-announcement h2 { background: var(--nav-bg) !important; color: var(--accent); padding: 10px 16px !important; margin: 0 !important; font-family: var(--font-head); font-size: 12.5px; font-weight: 700; }
#pun-announcement .container { padding: 12px 16px !important; color: var(--text); }
.modmenu p, #topic-modmenu p, #topic-users-in p { padding: 8px 0 !important; margin-top: 12px !important; font-size: 10.5px !important; color: var(--muted) !important; }
.modmenu a, #topic-users-in a, #topic-modmenu a { color: var(--accent-soft) !important; }
.modmenu a:hover, #topic-users-in a:hover, #topic-modmenu a:hover { color: var(--accent) !important; }
#mod-options { font-family: var(--font-body); }
#pun-live-rusff { background: var(--block-bg); border-radius: var(--radius-s); padding: 8px 14px; margin: 0 0 14px; font-size: 11.5px; color: var(--muted); }
#pun-live-rusff .cool1 { cursor: pointer; color: var(--accent); font-weight: 600; }
.youposted { color: var(--accent); font-weight: 700; }
.forumdesc { color: var(--muted); font-size: 11px; }

/* FOOTER */
#pun-about { margin: 16px var(--pad) 26px !important; text-align: center; }
#pun-about .container { padding: 12px 0 0 !important; border-top: 1px solid var(--line); }
#pun-about, #pun-about a { font-size: 10.5px; color: var(--muted); }
#pun-about a:hover { color: var(--accent); }

/* ADMIN */
.punbb-admin .adminmain { padding-left: 0 !important; margin-bottom: 0 !important; }
#pun:has(.punbb-admin) { max-width: 1120px !important; margin: 30px auto !important; background: var(--card-bg) !important; border: 0 !important; border-radius: var(--radius) !important; box-shadow: 0 18px 50px var(--shadow) !important; overflow: hidden !important; }
.punbb-admin { background: transparent !important; }
.punbb-admin #pun-title { height: auto !important; background-image: none !important; background: var(--nav-bg) !important; padding: 0 26px !important; }
.punbb-admin #pun-title table, .punbb-admin #pun-title tbody, .punbb-admin #pun-title tr { display: table !important; width: 100% !important; height: auto !important; }
.punbb-admin #pun-title td { display: table-cell !important; height: auto !important; vertical-align: middle !important; }
.punbb-admin #pun-title .title-logo { display: block !important; padding: 14px 0 !important; }
.punbb-admin #pun-title .title-logo span { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--accent); }
.punbb-admin #pun-title .title-logo-tdr { display: table-cell !important; text-align: right !important; }
.punbb-admin #pun-navlinks { margin: 14px 26px 0 !important; background: var(--nav-bg) !important; border-radius: var(--radius-s) !important; box-shadow: none !important; }
.punbb-admin #pun-ulinks { margin: 12px 26px 0 !important; }
.punbb-admin #pun-status { margin: 10px 26px 0 !important; text-align: center !important; }
.punbb-admin .crumbs { margin: 14px 26px 0 !important; }
.punbb-admin #pun-admain { display: grid !important; grid-template-columns: 185px minmax(0, 1fr) !important; gap: 18px !important; padding: 18px 26px 26px !important; box-sizing: border-box !important; }
.punbb-admin #pun-admain > h1 { display: none !important; }
.punbb-admin #pun-adnav { float: none !important; width: auto !important; margin: 0 !important; grid-column: 1 !important; }
.punbb-admin #pun-admain1, .punbb-admin #pun-admain2, .punbb-admin .adformal { grid-column: 2 !important; float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
.punbb-admin #pun-adnav, .punbb-admin .adformal { background: var(--block-bg) !important; border: 0 !important; border-radius: 16px !important; overflow: hidden !important; }
.punbb-admin #pun-adnav h2, .punbb-admin .adformal h2 { background: transparent !important; color: var(--text) !important; border: 0 !important; box-shadow: none !important; padding: 15px 16px 8px !important; margin: 0 !important; font-family: var(--font-head) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; }
.punbb-admin #pun-adnav h2 span, .punbb-admin .adformal h2 span { font-size: 13px !important; }
.punbb-admin #pun-adnav .adcontainer, .punbb-admin .adformal .adcontainer { background: transparent !important; border: 0 !important; padding: 8px 14px 16px !important; box-sizing: border-box !important; }
.punbb-admin #pun-adnav ul { padding: 0 !important; margin: 0 !important; }
.punbb-admin #pun-adnav li { padding: 0 !important; margin: 0 0 2px !important; list-style: none !important; }
.punbb-admin #pun-adnav a { display: block !important; padding: 6px 9px !important; border-radius: 8px !important; color: var(--text) !important; text-decoration: none !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.25 !important; }
.punbb-admin #pun-adnav a:hover, .punbb-admin #pun-adnav li.isactive > a { background: var(--card-bg) !important; color: var(--accent) !important; }
.punbb-admin #pun-adnav ul.adsubnav { display: block !important; margin: 2px 0 7px 8px !important; padding: 0 0 0 9px !important; border-left: 1px solid var(--line) !important; }
.punbb-admin #pun-adnav ul.adsubnav li { padding: 0 !important; margin: 0 0 1px !important; color: var(--muted) !important; }
.punbb-admin #pun-adnav ul.adsubnav a { padding: 4px 7px !important; color: var(--muted) !important; font-size: 10.5px !important; font-weight: 500 !important; text-decoration: none !important; }
.punbb-admin #pun-adnav ul.adsubnav a:hover { background: var(--tint) !important; color: var(--accent) !important; }
.punbb-admin #pun-admain fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.punbb-admin #pun-admain legend { margin: 0 0 10px !important; padding: 0 !important; }
.punbb-admin #pun-admain legend span { background: transparent !important; color: var(--accent-soft) !important; padding: 0 !important; margin: 0 !important; font-family: var(--font-head) !important; font-size: 12px !important; font-weight: 700 !important; }
.punbb-admin #pun-admain fieldset .adfs-box { padding: 0 !important; overflow: visible !important; }
.punbb-admin #pun-admain fieldset p { border-left: 0 !important; background: transparent !important; padding: 0 0 14px !important; margin: 0 0 14px !important; border-bottom: 1px solid var(--line) !important; position: relative !important; }
.punbb-admin #pun-admain fieldset p:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }
.punbb-admin #pun-admain .adlabel { float: none !important; display: block !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; color: var(--accent-soft) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.4 !important; }
.punbb-admin #pun-admain .adinput { display: block !important; padding: 0 !important; color: var(--text) !important; line-height: 1.5 !important; }
.punbb-admin #pun-admain .adinput em { display: block !important; max-width: 560px !important; padding: 6px 0 0 !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.45 !important; }
.punbb-admin #pun-admain fieldset p br { display: none !important; }
.punbb-admin #pun-admain select, .punbb-admin #pun-admain input[type="text"], .punbb-admin #pun-admain input[type="password"] { min-width: 210px !important; height: 34px !important; background: var(--row-bg) !important; border: 1px solid var(--hairline) !important; border-radius: 10px !important; color: var(--text) !important; padding: 6px 10px !important; box-sizing: border-box !important; font-family: var(--font-body) !important; font-size: 12px !important; }
.punbb-admin #pun-admain p.contains-textarea { border-left: 0 !important; background: transparent !important; }
.punbb-admin #pun-admain p.contains-textarea .adinput { margin-top: 0 !important; }
.punbb-admin #pun-admain p.contains-textarea .adlabel { margin-left: 0 !important; width: auto !important; }
.punbb-admin #pun-admain textarea { width: 100% !important; min-height: 650px !important; background: var(--row-bg) !important; color: var(--text) !important; border: 1px solid var(--hairline) !important; border-radius: 16px !important; padding: 24px !important; box-sizing: border-box !important; font-family: 'Courier New', monospace !important; font-size: 13px !important; line-height: 1.85 !important; font-weight: 400 !important; letter-spacing: .15px !important; tab-size: 2 !important; box-shadow: inset 0 1px 2px var(--shadow-soft), 0 6px 20px var(--shadow-soft) !important; resize: vertical !important; }
.punbb-admin #pun-admain textarea:focus, .punbb-admin #pun-admain select:focus, .punbb-admin #pun-admain input:focus { outline: none !important; border-color: var(--accent-soft) !important; box-shadow: 0 0 0 4px var(--tint), 0 8px 25px var(--shadow-soft) !important; }
.punbb-admin #pun-admain textarea::selection { background: var(--tint); }
.punbb-admin #pun-about { margin: 16px 26px 26px !important; text-align: center; }
.punbb-admin #pun-about .container { padding: 12px 0 0 !important; border-top: 1px solid var(--line); }
.punbb-admin #pun-about, .punbb-admin #pun-about a { font-size: 10.5px; color: var(--muted); }

/* MOBILE */
@media (max-width: 1100px) {
  #pun:not(:has(.punbb-admin)) { margin: 16px !important; }
  .punbb-admin #pun-admain { grid-template-columns: 170px minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
  :root { --header-height: 160px; --pad: 12px; }
  #pun-navlinks { margin: -18px var(--pad) 0 !important; }
  #pun-navlinks .container { padding: 10px !important; gap: 2px; }
  #pun-navlinks li a { padding: 4px 8px; font-size: 11px; }
  .linkst, .linksb { grid-template-columns: auto auto 1fr !important; }
  .linkst .pagelink, .linksb .pagelink { grid-column: 1 / -1 !important; justify-self: start !important; }
  .post-author { float: none; width: 100%; margin: 0 0 14px !important; }
  .post-author .pa-avatar img { max-width: 170px; height: auto; margin: 0 auto; }
  .post-body, .post-links { margin-left: 0; }
  #profilenav, .messages-container #profilenav { float: none; width: 100%; margin: 0 0 14px; }
  #profile-left { width: auto; padding-right: 0; display: block; }
  .category thead, .forum thead, .usertable thead { display: none !important; }
  .category .tc2, .category .tc3, .forum .tc2, .forum .tc3 { display: none !important; }
  .punbb-admin #pun-admain { display: block !important; padding: 16px !important; }
  .punbb-admin #pun-adnav { margin-bottom: 18px !important; }
}