/* ============================================================
   BROKEN BRITAIN — V27 STABLE
   Stable architecture release: 2026-07-20

   01. Tokens and foundation
   02. Shared page shell and navigation
   03. Actions, pagination and buttons
   04. Side navigation and forms
   05. Service pages and feedback
   06. Posts and rendered BBCode
   07. Collections and private messages
   08. Forum identity and index composition
   09. Topic and forum page geometry
   10. Editor core
   11. Plugins and integrations
   12. Responsive component rules
   13. Page-specific exceptions

   MAINTENANCE CONTRACT
   - Component rules own appearance.
   - Page-specific selectors change geometry or unavoidable platform markup only.
   - Edit an existing component before adding a later override.
   - Keep style.css and style_cs.1784583355.css from the same release together.

   Component map: COMPONENT-MAP.md / component-map.html
============================================================ */

@import url(style_cs.1784583355.css);

:root {
  --bb-ui-dark: #171a1b;
  --bb-ui-ink: #292b2a;
  --bb-ui-topic-ink: #313231;
  --bb-ui-muted: #686967;
  --bb-ui-topic-muted: #6f706e;
  --bb-ui-editor-muted: #7a7874;
  --bb-ui-nav: #aba9a8;
  --bb-ui-red: #995743;
  --bb-ui-line: #d5d2cb;
  --bb-ui-topic-line: #d2cec8;
  --bb-ui-chip: #dfddd7;
  --bb-ui-paper: #f7f5f3;
  --bb-ui-cream: #f3f1ec;
  --bb-ui-soft: #efedea;
  --bb-ui-quote: #e9e5e0;
  --bb-ui-field: #f8f7f4;
  --bb-ui-editor-field: #faf9f6;
  --bb-ui-link: #555654;
  --bb-ui-author-card: #f5f3ef;
  --bb-ui-author-line: #d3d0c9;
  --bb-ui-subtle-text: #777672;
  --bb-ui-muted-surface: #ebe9e4;
  --bb-ui-faint: #aaa8a2;
  --bb-ui-radius: 6px;
  --bb-ui-side-width: 198px;
  --bb-ui-page-gap: 24px;
  --bb-ui-font: Arial, Helvetica, sans-serif;
  --bb-ui-serif: Georgia, "Times New Roman", serif;
  --bb-author-background: none;
  /* Header artwork uses a slightly darker ink and warmer divider. */
  --bb-shell-ink: #1c1e1e;
  --bb-ui-control-min-height: 42px;
  --bb-ui-control-gap: 12px;
  --bb-ui-control-pad-x: 18px;
  --bb-ui-control-pad-y: 10px;
}

/* Single palette source for style.css and style_cs.1784583355.css. */

/*
 * Native collection architecture: shared tables, shared editor,
 * and page-specific geometry only where MyBB markup requires it.
 */

html,
body {
  margin: 0;
  padding: 0;
}

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

body {
  font-size: 100.01%;
}

.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
}

.punbb :is(textarea, input, select, optgroup) {
  font: 1em verdana, arial, helvetica, sans-serif;
}

.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 {
  font-size: 1.1em;
}

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

.punbb optgroup {
  font-weight: bold;
}

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

.acchide,
#pun-index #pun-main h1,
:is(#pun-navlinks, #pun-pagelinks, #pun-status, #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 :is(.formsubmit, .submitfield, .modmenu) label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

#pun {
  position: relative;
}

.punbb {
  height: auto;
}

:is(#pun-redirect, #pun-maint, #pun-message, #pun-error) {
  width: 100%;
  margin: 0;
  float: none;
}

.punbb :is(.section, .main) {
  margin-bottom: 1em;
}

.punbb :is(.category, .post) {
  margin-top: 0.4em;
}

.punbb #pun-category1,
.punbb :is(.toppost, .topicpost) {
  margin-top: 0;
}

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

.punbb :is(.section, .forum, .formal, .modmenu, .info, .category, .post) {
  border-style: none none solid none;
  border-width: 0px 0px 2px 0px;
}

.punbb .container {
  border-style: solid;
  border-width: 1px;
}

.punbb .section h2,
#pun-main h1,
:is(#pun-main, #pun-stats, #pun-debug) h2 {
  padding: 0.5em 1em;
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;
}

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

.punbb .post-sig dt {
  display: block;
  border-top: 1px solid var(--bb-ui-line);
  width: 250px;
  margin: 5px 0;
}

.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
}

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

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

.punbb .post-content .blockcode,
.punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
}

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

.punbb .post-content :is(.quote-box, .code-box) {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 1px;
}

.punbb .quote-box cite,
.punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
}

.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  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;
}

.multipage {
  margin-top: 3em;
}

.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 :is(input, a, span) {
  margin: 0 0.6em 0 0;
}

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

.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em;
}

.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
}

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

.punbb .fs-box {
  padding: 1em 0 0.8em 0;
}

.punbb .fs-box :is(p, fieldset) {
  padding: 0 0 0.8em 0;
}

.punbb .inline :is(.inputfield, .selectfield, .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%;
  /* For IE */
}

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

.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 .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
}

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

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

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

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

#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-style: solid none none solid;
  border-width: 1px 0 0 1px;
  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-left-style: none;
  border-left-width: 0;
}

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

.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
}

.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
}

.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
}

.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
}

.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
}

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

.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.5em;
  overflow: hidden;
}

.punbb .post .post-author ul,
.punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
}

.pa-author {
  font-size: 1.1em;
  font-weight: bold;
}

.pa-author a {
  text-decoration: none;
}

li.pa-title {
  padding-bottom: 0.4em;
  font-weight: bold;
}

li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;
}

.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
}

.punbb .post-box {
  padding: 1em;
}

.punbb fieldset .post-box {
  margin-bottom: 0.8em;
}

.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
}

.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 1px;
  background: transparent;
  text-align: right;
}

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

:is(.pl-email, .pl-website) {
  float: left;
}

.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
}

.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
}

.punbb .modmenu strong,
.punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
}

.punbb .modmenu .container strong {
  float: left;
}

.punbb .modmenu input {
  margin-left: 1em;
}

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

.punbb .info .container .backlink {
  padding-top: 0.8em;
}

#viewprofile ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
}

#viewprofile h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
}

#viewprofile h2 span {
  padding: 0 5px;
  position: relative;
}

#viewprofile li,
#setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
}

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

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

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

.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em;
}

/* Unified pagination caption: matches the character-search subtitle. */

/*
 * =========================================================
 * BROKEN BRITAIN — SHARED PUBLIC UI
 * Common fallbacks for search, auth, profile and service pages.
 * Page-specific index/viewforum/viewtopic rules remain authoritative.
 * =========================================================
 */

/*
 * =========================================================
 * BROKEN BRITAIN — SEMANTIC NAVIGATION COMPONENTS
 * Native selectors are mapped to shared visual roles. Page rules below keep
 * only content-specific geometry or service behaviour.
 * =========================================================
 */

/* ACTION CORE: bars, subscriptions, moderator tools and feeds. */

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb),
#pun-messages #messages > .linksb {
  position: relative;
  display: grid;
  float: none;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "page action";
  align-items: center;
  column-gap: var(--bb-ui-control-gap);
  row-gap: 4px;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-height: var(--bb-ui-control-min-height);
  margin: 0;
  padding: var(--bb-ui-control-pad-y) var(--bb-ui-control-pad-x);
  border: 0;
  border-radius: 0;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-muted);
  font: 400 8px/1.2 var(--bb-ui-font) !important;
  letter-spacing: .35px;
  text-transform: uppercase;
  box-shadow: none;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > .linkst {
  min-height: 46px;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > .linksb,
#pun-messages #messages > .linksb {
  background-image: linear-gradient(var(--bb-ui-line), var(--bb-ui-line));
  background-position: center top;
  background-size: calc(100% - (2 * var(--bb-ui-control-pad-x))) 1px;
  background-repeat: no-repeat;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb) :is(.pagelink, .postlink, .subscribelink),
#pun-messages #messages > .linksb :is(.pagelink, .postlink, .subscribelink) {
  position: static;
  inset: auto;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb) .pagelink,
#pun-messages #messages > .linksb .pagelink {
  grid-area: page;
  justify-self: start;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb) .postlink,
#pun-messages #messages > .linksb .postlink {
  display: flex;
  grid-area: action;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 7px;
  text-align: right;
  font-weight: 400;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb) .postlink span,
#pun-messages #messages > .linksb .postlink span {
  display: block;
  float: none;
  width: auto;
  margin: 0;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb) .subscribelink,
#pun-messages #messages > .linksb .subscribelink {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  box-sizing: border-box;
  text-align: right;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb) > .clearer,
#pun-messages #messages > .linksb > .clearer {
  display: none;
}

.punbb:not(.punbb-admin) :is(.subscribelink, .modmenu .container > span) a,
.punbb:not(.punbb-admin) :is(.subscribelink, .modmenu .container > span) a:link,
.punbb:not(.punbb-admin) :is(.subscribelink, .modmenu .container > span) a:visited,
#pun-viewforum #pun-main > .modmenu a,
#pun-viewforum #pun-main > .modmenu a:link,
#pun-viewforum #pun-main > .modmenu a:visited {
  height: auto;
  color: var(--bb-ui-link);
  font: 400 9px/16px var(--bb-ui-font);
  letter-spacing: .35px;
  text-decoration: underline;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin) :is(.subscribelink, .modmenu .container > span) a:hover,
.punbb:not(.punbb-admin) :is(.subscribelink, .modmenu .container > span) a:focus,
#pun-viewforum #pun-main > .modmenu a:hover,
#pun-viewforum #pun-main > .modmenu a:focus {
  color: var(--bb-ui-red);
}

:is(#pun-viewtopic, #pun-viewforum) #pun-main > .modmenu {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  min-height: var(--bb-ui-control-min-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-muted);
  box-shadow: none;
}

:is(#pun-viewtopic, #pun-viewforum) #pun-main > .modmenu::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--bb-ui-control-pad-x);
  left: var(--bb-ui-control-pad-x);
  height: 1px;
  background: var(--bb-ui-line);
  pointer-events: none;
}

:is(#pun-viewtopic, #pun-viewforum) #pun-main > .modmenu > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  box-sizing: border-box;
  min-height: var(--bb-ui-control-min-height);
  margin: 0;
  padding: var(--bb-ui-control-pad-y) var(--bb-ui-control-pad-x) !important;
  border: 0;
  background: transparent !important;
  color: var(--bb-ui-muted);
  font: 400 9px/16px var(--bb-ui-font);
  text-align: left;
}

:is(#pun-viewtopic, #pun-viewforum) #pun-main > .modmenu > .container > strong {
  float: none;
  min-width: 0;
  height: auto;
  line-height: normal;
}

:is(#pun-viewtopic, #pun-viewforum) #pun-main > .modmenu > .container > span {
  margin-left: auto;
  text-align: right;
}

#pun-viewtopic #pun-main #topic-modmenu select {
  box-sizing: border-box;
  width: 220px !important;
  min-width: 0;
  max-width: 100%;
  height: 28px;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--bb-ui-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  color: var(--bb-ui-ink);
  font: 400 10px/16px var(--bb-ui-font);
}

#pun-viewtopic #pun-main #topic-users-in > .container {
  justify-content: flex-start;
}

#pun-viewtopic #pun-main #topic-users-in > .container > span {
  margin-left: 0;
  color: var(--bb-ui-ink);
  font-weight: 700;
  text-align: left;
}

#pun-viewforum #pun-main > .linksb .postlink {
  display: none !important;
}

/* Mobile Core: shared controls and action bars. */
@media (max-width: 700px) {
  :root {
    --bb-ui-control-pad-x: 14px;
  }

  .punbb:not(.punbb-admin):not(#pun-index) #pun-main > :is(.linkst, .linksb),
  #pun-messages #messages > .linksb {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
  }

  :is(#pun-viewtopic, #pun-viewforum) #pun-main > .modmenu > .container {
    align-items: flex-start;
  }

  #pun-viewtopic #pun-main #topic-modmenu > .container {
    flex-direction: column;
  }

  #pun-viewtopic #pun-main #topic-modmenu select,
  #pun-viewtopic #pun-main #topic-modmenu > .container > strong {
    width: 100% !important;
  }

  #pun-viewtopic #pun-main #topic-modmenu > .container > span {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

/* One pagination language for page captions, links and the current page. */

.punbb:not(.punbb-admin) :is(.pagelink, .pagination) {
  color: var(--bb-ui-muted) !important;
  font: 400 9px/18px var(--bb-ui-font) !important;
  letter-spacing: .55px !important;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin) :is(.pagelink, .pagination) a,
.punbb:not(.punbb-admin) :is(.pagelink, .pagination) a:link,
.punbb:not(.punbb-admin) :is(.pagelink, .pagination) a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 0 2px;
  padding: 0 3px;
  color: var(--bb-ui-muted) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-align: center;
  text-decoration: none;
}

.punbb:not(.punbb-admin) :is(.pagelink, .pagination) a:hover,
.punbb:not(.punbb-admin) :is(.pagelink, .pagination) a:focus {
  color: var(--bb-ui-red) !important;
}

.punbb:not(.punbb-admin) .pagelink strong,
.punbb:not(.punbb-admin) .pagelink span.current,
.punbb:not(.punbb-admin) .pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  margin: 0 2px;
  padding: 0 !important;
  border: 0;
  border-radius: 1px;
  background: var(--bb-ui-red);
  color: var(--bb-ui-cream) !important;
  font: 400 9px/18px var(--bb-ui-font) !important;
  letter-spacing: 0 !important;
  text-align: center;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(67,49,43,.2);
}

/* One action-button family with compact and primary sizes. */

.punbb:not(.punbb-admin) button,
.punbb:not(.punbb-admin) input:is([type="button"], [type="submit"], [type="reset"]),
.punbb:not(.punbb-admin) :is(.postlink, .formsubmit) a {
  box-sizing: border-box;
  min-height: 17px;
  margin: 0 5px 0 0;
  padding: 3px 9px;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: var(--bb-ui-chip);
  box-shadow: none;
  color: var(--bb-ui-muted) !important;
  font: 400 9px/11px var(--bb-ui-font);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  text-transform: lowercase;
  cursor: pointer;
}

.punbb:not(.punbb-admin) button,
.punbb:not(.punbb-admin) input:is([type="button"], [type="submit"], [type="reset"]) {
  display: inline-block;
}

.punbb:not(.punbb-admin) :is(.postlink, .formsubmit) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.punbb:not(.punbb-admin) button:is(:hover, :focus),
.punbb:not(.punbb-admin) input:is([type="button"], [type="submit"], [type="reset"]):is(:hover, :focus),
.punbb:not(.punbb-admin) :is(.postlink, .formsubmit) a:is(:hover, :focus) {
  background: var(--bb-ui-red);
  color: var(--bb-ui-cream) !important;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal .formsubmit input[type="submit"],
#pun-viewtopic #pun-main .formal .formsubmit input[type="submit"],
#pun-viewtopic #pun-main > :is(.linkst, .linksb) .postlink a {
  min-width: 72px;
  min-height: 28px;
  padding: 6px 16px;
  font: 400 8px/1.2 var(--bb-ui-font) !important;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* Profile and private messages share one two-column page component. */

:is(#pun-profile #profile, #pun-messages #profile.messages-container) > .container {
  display: flow-root;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px 24px;
  border: 0;
  background: var(--bb-ui-paper);
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) > .container > #profilenav {
  float: left;
  align-self: start;
  box-sizing: border-box;
  width: var(--bb-ui-side-width);
  margin: 0 var(--bb-ui-page-gap) 0 0;
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) > .container > #profilenav ~ * {
  min-width: 0;
  margin-left: calc(var(--bb-ui-side-width) + var(--bb-ui-page-gap));
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav {
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 0 10px;
  border: 1px solid var(--bb-ui-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-muted-surface);
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav > :is(h2, h3) {
  display: block;
  box-sizing: border-box;
  min-height: 34px;
  margin: 0;
  padding: 10px 14px 8px;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-line);
  background: var(--bb-ui-chip);
  color: var(--bb-ui-ink);
  font: 600 10px/14px var(--bb-ui-font);
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav > :is(h2, h3) span {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav ul {
  display: block;
  margin: 0;
  padding: 9px 0 0;
  border: 0;
  background: transparent;
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav li a {
  display: block;
  box-sizing: border-box;
  min-height: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bb-ui-muted);
  font: 600 10px/1.35 var(--bb-ui-font);
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-decoration: none;
  text-transform: lowercase;
}

:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav li.isactive a,
:is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav li a:is(:hover, :focus) {
  background: transparent;
  color: var(--bb-ui-red);
}

@media (max-width: 700px) {
  :is(#pun-profile #profile, #pun-messages #profile.messages-container) > .container {
    padding: 14px;
  }

  :is(#pun-profile #profile, #pun-messages #profile.messages-container) > .container > #profilenav {
    float: none;
    width: auto;
    margin: 0 0 14px;
  }

  :is(#pun-profile #profile, #pun-messages #profile.messages-container) > .container > #profilenav ~ * {
    margin-left: 0;
  }

  :is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }

  :is(#pun-profile #profile, #pun-messages #profile.messages-container) #profilenav li a {
    padding: 5px 8px;
    border-radius: 5px;
    background: var(--bb-ui-chip);
  }
}

/* Public profile: a self-contained card, independent from profile edit forms. */

#pun-profile #viewprofile-next {
  box-sizing: border-box;
  padding: 8px 24px 24px;
  background: var(--bb-ui-paper);
}

#pun-profile #pun-main > h1 {
  padding-bottom: 8px;
}

/* The reference profile keeps edit navigation out of the public view. */

#pun-profile #viewprofile-next > #profilenav {
  display: none !important;
}

#pun-profile #viewprofile,
#pun-profile #viewprofile > .container,
#pun-profile #viewprofile > .container > ul,
#pun-profile #viewprofile table,
#pun-profile #viewprofile tbody {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

#pun-profile #viewprofile > .container > ul > table > tbody > tr {
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) 120px;
  gap: 28px;
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

#pun-profile #viewprofile :is(#profile-left, #profile-right) {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#pun-profile #viewprofile #profile-left {
  display: block;
  align-self: start;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--bb-ui-radius);
  background: transparent;
  text-align: center;
}

#pun-profile #viewprofile #profile-left.has-custom-author-background {
  padding: 0 12px 12px;
  background-image: var(--bb-author-background, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#pun-profile #viewprofile #profile-left > .bb-profile-author-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 18px 16px 12px;
  border: 1px solid var(--bb-ui-author-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-author-card);
}

#pun-profile #viewprofile #profile-left.has-custom-author-background > .bb-profile-author-card {
  margin-top: 12px;
  border: 0;
}

#pun-profile #viewprofile #profile-left > li,
#pun-profile #viewprofile #profile-left > .bb-profile-author-card > li {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
}

#pun-profile #viewprofile #profile-left > li :is(strong, div),
#pun-profile #viewprofile #profile-left > .bb-profile-author-card > li :is(strong, div) {
  display: block;
  float: none;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#pun-profile #viewprofile #profile-name > strong {
  color: var(--bb-ui-ink);
  font: 400 19px/1.15 var(--bb-ui-serif);
  overflow-wrap: anywhere;
}

#pun-profile #viewprofile :is(#profile-name, #profile-title, #pa-avatar, #pa-online, #pa-edit, #pa-ua) {
  grid-column: 1 / -1;
}

#pun-profile #viewprofile #profile-name {
  order: 1;
}

#pun-profile #viewprofile #profile-title {
  order: 2;
  margin: 2px 0 12px;
}

#pun-profile #viewprofile #profile-title > strong {
  color: var(--bb-ui-muted);
  font: 600 9px/14px var(--bb-ui-font);
  letter-spacing: .8px;
  text-transform: uppercase;
}

#pun-profile #viewprofile #pa-avatar {
  order: 3;
  margin: 0 auto 12px;
}

#pun-profile #viewprofile #pa-avatar img {
  display: block;
  width: 148px !important;
  max-width: 100%;
  height: 150px !important;
  max-height: none;
  margin: 0 auto;
  border: 0;
  border-radius: 3px;
  object-fit: cover;
  filter: grayscale(0.72) contrast(0.94);
}

#pun-profile #viewprofile #pa-online {
  order: 6;
  margin-top: 14px;
}

#pun-profile #viewprofile #pa-online > strong {
  color: var(--bb-ui-red);
  font: 600 9px/14px var(--bb-ui-font);
  text-transform: lowercase;
}

#pun-profile #viewprofile #pa-online > strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--bb-ui-red);
}

#pun-profile #viewprofile :is(#pa-online, #pa-edit, #pa-ua) {
  display: none !important;
}

#pun-profile #viewprofile #profile-left > .bb-profile-author-card > :is(#pa-fld1, #pa-fld2) {
  grid-column: 1 / -1;
  order: 5;
  padding: 9px 2px;
  border-top: 1px solid var(--bb-ui-author-line);
  color: var(--bb-ui-muted);
  font: 400 9px/1.45 var(--bb-ui-font);
  overflow-wrap: anywhere;
}

#pun-profile #viewprofile #profile-left > .bb-profile-author-card > #pa-fld1,
#pun-profile #viewprofile #profile-left > .bb-profile-author-card > #pa-fld1 a {
  color: var(--bb-ui-red);
  letter-spacing: .04em;
  text-transform: uppercase;
}

#pun-profile #viewprofile #profile-left > .bb-profile-author-card > :is(#pa-fld1, #pa-fld2) > span,
#pun-profile #viewprofile .bb-author-background-source {
  display: none !important;
}

#pun-profile #viewprofile #profile-right {
  display: flex;
  flex-direction: column;
  align-content: start;
  align-self: start;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 22px;
  gap: 0 !important;
  border: 1px solid var(--bb-ui-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-muted-surface);
}

#pun-profile #viewprofile #profile-right > li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  flex: 0 0 35px !important;
  gap: 10px;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-bottom: 0;
  background: none !important;
  overflow-wrap: anywhere;
  order: 20;
}

#pun-profile #viewprofile #profile-right > li > span {
  flex: 0 0 auto;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--bb-ui-muted);
  font: 600 9px/14px var(--bb-ui-font);
  letter-spacing: .35px;
  text-transform: uppercase;
}

#pun-profile #viewprofile #profile-right > li > strong,
#pun-profile #viewprofile #profile-right > li > div {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--bb-ui-ink);
  font: 400 10px/15px var(--bb-ui-font);
}

#pun-profile #viewprofile #profile-right a {
  color: var(--bb-ui-link);
  text-decoration: none;
}

#pun-profile #viewprofile #profile-right a:is(:hover, :focus) {
  color: var(--bb-ui-red);
  text-decoration: underline;
}

#pun-profile #viewprofile #profile-right > #pa-respect { order: 1; }
#pun-profile #viewprofile #profile-right > #pa-positive { order: 2; }
#pun-profile #viewprofile #profile-right > #pa-register-date { order: 3; }
#pun-profile #viewprofile #profile-right > #pa-last-post { order: 4; }
#pun-profile #viewprofile #profile-right > #pa-last-visit { order: 5; }
#pun-profile #viewprofile #profile-right > #pa-time-visit { order: 6; }
#pun-profile #viewprofile #profile-right > #pa-posts { order: 7; }

#pun-profile #viewprofile #profile-right > :is(#pa-invites, #pa-email) {
  display: none !important;
}

#pun-profile #viewprofile #profile-future-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  box-sizing: border-box;
  width: 120px !important;
  padding: 0;
  border: 0;
  background: transparent;
}

#pun-profile #viewprofile .bb-profile-future-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 116px;
  padding: 28px 10px 16px;
  border: 1px solid var(--bb-ui-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-muted-surface);
  color: var(--bb-ui-ink);
  text-align: center;
}

#pun-profile #viewprofile .bb-profile-future-stat > span {
  position: absolute;
  top: -1px;
  left: 50%;
  box-sizing: border-box;
  min-width: 76px;
  padding: 6px 10px;
  border: 1px solid var(--bb-ui-line);
  border-top: 0;
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  color: var(--bb-ui-ink);
  font: 600 10px/13px var(--bb-ui-font);
  text-transform: uppercase;
  transform: translateX(-50%);
}

#pun-profile #viewprofile .bb-profile-future-stat > strong {
  color: var(--bb-ui-muted);
  font: 400 24px/1 var(--bb-ui-serif);
}

@media (min-width: 701px) and (max-width: 1100px) {
  #pun-profile #viewprofile > .container > ul > table > tbody > tr {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #pun-profile #viewprofile #profile-future-stats {
    grid-column: 2;
    width: min(100%, 120px) !important;
  }
}

@media (max-width: 700px) {
  #pun-profile #viewprofile-next {
    padding: 6px 14px 14px;
  }

  #pun-profile #viewprofile > .container > ul > table > tbody > tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #pun-profile #viewprofile #profile-left {
    padding: 0;
  }

  #pun-profile #viewprofile #profile-left.has-custom-author-background {
    padding: 0 8px 8px;
  }

  #pun-profile #viewprofile #profile-left.has-custom-author-background > .bb-profile-author-card {
    margin-top: 8px;
  }

  #pun-profile #viewprofile #profile-left > .bb-profile-author-card {
    grid-template-columns: 112px repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(44px, auto);
    gap: 0 10px;
    align-items: start;
    padding: 12px;
    text-align: left;
  }

  #pun-profile #viewprofile #profile-name {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: end;
    text-align: left;
  }

  #pun-profile #viewprofile #profile-title {
    grid-column: 2 / -1;
    grid-row: 2;
    margin: 3px 0 7px;
    text-align: left;
  }

  #pun-profile #viewprofile #pa-avatar {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: stretch;
    width: 112px;
    height: 132px;
    margin: 0;
  }

  #pun-profile #viewprofile #pa-avatar img {
    width: 112px !important;
    max-width: none;
    height: 132px !important;
    max-height: none;
    border-radius: 4px;
  }

  #pun-profile #viewprofile #profile-left > .bb-profile-author-card > :is(#pa-fld1, #pa-fld2) {
    grid-column: 1 / -1;
  }

  #pun-profile #viewprofile #profile-right {
    padding: 8px 14px;
  }

  #pun-profile #viewprofile #profile-future-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Active topics and PM sender cells use one avatar component. */

#pun-searchtopics #pun-main .forum .tcr .user-avatar,
#pun-messages #messages td:is(.pmtc22, .tc2) :is(.user-avatar, img:first-of-type) {
  display: inline-block;
  width: 38px !important;
  height: 38px !important;
  margin: 0 10px 0 0;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

#pun-searchtopics #pun-main .forum .tcr .avatar-image,
#pun-messages #messages td:is(.pmtc22, .tc2) .avatar-image {
  display: block;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

@media (max-width: 760px) {
  #pun-searchtopics #pun-main .forum .tcr :is(.user-avatar, .avatar-image),
  #pun-messages #messages td:is(.pmtc22, .tc2) :is(.user-avatar, .avatar-image, img:first-of-type) {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Remove the loose PunBB rules that sit between otherwise related blocks. */

.punbb:not(.punbb-admin) .divider,
.punbb:not(.punbb-admin) :is(#pun-break1, #pun-break2, #pun-break3, #pun-break4) {
  display: none !important;
}

/* Shared type and link palette. More specific page rules still win. */

.punbb:not(.punbb-admin) {
  color: var(--bb-ui-ink);
  font-family: var(--bb-ui-font);
}

.punbb:not(.punbb-admin) a,
.punbb:not(.punbb-admin) a:link,
.punbb:not(.punbb-admin) a:visited {
  color: var(--bb-ui-link);
}

.punbb:not(.punbb-admin) a:hover,
.punbb:not(.punbb-admin) a:focus {
  color: var(--bb-ui-red);
}

/* Inner-page breadcrumb: the same compact dark strip used on viewforum. */

.punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 {
  display: block;
  overflow: hidden;
  min-height: 46px;
  margin: 0;
  border: 0;
  border-radius: var(--bb-ui-radius) var(--bb-ui-radius) 0 0;
  background: var(--bb-ui-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  color: var(--bb-ui-nav);
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 .container {
  min-height: 46px;
  box-sizing: border-box;
  padding: 16px 24px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-nav);
  font: 500 10px/14px Arial,sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 a,
.punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 a:link,
.punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 a:visited {
  color: var(--bb-ui-nav);
  text-decoration: none;
}

.punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 a:hover {
  color: var(--bb-ui-red);
}

/* Rusff ad placeholders must not split the shared inner-page canvas. */

.punbb:not(.punbb-admin):not(#pun-index) #pun-break2 + .section,
.punbb:not(.punbb-admin):not(#pun-index) #pun-main ~ .section[style*="max-height:250px"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* SERVICE PAGES CORE: auth, registration, search, user list, help,
 * profile utilities and system responses inherit the same paper shell.
 * Page selectors below keep only content-specific geometry. */

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main {
  overflow: hidden;
  margin: 0;
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  box-shadow: 0 1px 3px rgba(76,72,66,.18);
  color: var(--bb-ui-ink);
  font: 400 10px/16px Arial,sans-serif;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main > h1 {
  box-sizing: border-box;
  margin: 0;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  background: var(--bb-ui-paper);
  box-shadow: none;
  color: var(--bb-ui-ink);
  font: 500 18px/22px Georgia,serif;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main > h1 span {
  font: inherit;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main > :is(.section, .formal, .forum, .info, .message, .error, .usertable, .topic, .post) {
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bb-ui-paper);
  box-shadow: none;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main :is(.section, .formal, .forum, .info, .message, .error, .usertable, .topic, .post) .container {
  box-sizing: border-box;
  border: 0;
  background: var(--bb-ui-paper);
}

/* Section headings share the dark category-band language. */

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main :is(.section, .formal, .forum, .info, .message, .error, .usertable) > h2,
.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-stats > h2 {
  box-sizing: border-box;
  min-height: 48px;
  padding: 17px 22px;
  border: 0;
  background: var(--bb-ui-dark);
  color: var(--bb-ui-nav);
  font: 500 10px/14px Arial,sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) :is(#pun-main, #pun-stats) h2 span {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* FORMS CORE: one architecture for login, registration, search and profile forms.
 * Message lists and the message editor remain separate native components. */

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal .container {
  padding: 20px 24px;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main fieldset {
  box-sizing: border-box;
  margin: 0;
  padding: 16px 18px 18px;
  border: 0;
  background-image: linear-gradient(var(--bb-ui-line),var(--bb-ui-line));
  background-position: center bottom;
  background-size: calc(100% - 32px) 1px;
  background-repeat: no-repeat;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main fieldset:last-of-type {
  background-image: none;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main fieldset legend,
.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main fieldset legend span {
  margin: 0;
  padding: 0 6px 0 0;
  background: transparent;
  color: var(--bb-ui-ink);
  font: 500 14px/18px Georgia,serif;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .fs-box {
  padding: 12px 0 2px;
}

/* Service-form rows share one rhythm; page rules may only change field width. */

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal .fs-box > :is(.inputfield, .selectfield, .passfield, .areafield, .datafield, .infofield, .checkfield, .radiofield) {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 12px;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal .fs-box > :is(.inputfield, .selectfield, .passfield, .areafield, .datafield, .infofield, .checkfield, .radiofield):last-child {
  padding-bottom: 0;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal :is(label, .label) {
  color: var(--bb-ui-muted);
  font: 500 9px/14px var(--bb-ui-font);
  letter-spacing: .35px;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal :is(.inputfield, .selectfield, .passfield, .areafield, .longinput) > .input {
  display: block;
  margin-top: 4px;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main :is(.formsubmit, .submitfield) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main :is(.formsubmit, .submitfield) > :is(input, button, a, span) {
  margin: 0;
}

/* Help keeps only documentation geometry; its card, type and borders are shared. */

#pun-help #pun-main .formal .info-box h3.legend {
  margin: 0 0 12px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-line);
  color: var(--bb-ui-ink);
  font: 500 14px/18px var(--bb-ui-serif);
}

#pun-help #pun-main .formal .info-box h3.legend span {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
}

#pun-help #pun-main .formal :is(p, dd) {
  margin: 0 0 12px;
}

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

#pun-help #pun-main .formal li {
  padding: 0;
  line-height: 1.45;
}

#pun-help #pun-main .formal dt span {
  font: 1.1em/1.4 monaco, "bitstream vera sans mono", "courier new", courier, monospace;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main .post-box {
  border: 1px solid var(--bb-ui-line);
  border-radius: 5px;
  background: var(--bb-ui-field);
  color: var(--bb-ui-ink);
}

.punbb:not(.punbb-admin) textarea,
.punbb:not(.punbb-admin) select,
.punbb:not(.punbb-admin) input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"]) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid var(--bb-ui-line);
  border-radius: 5px;
  outline: 0;
  background: var(--bb-ui-field);
  color: var(--bb-ui-ink);
  font: 400 10px/16px Arial,sans-serif;
}

.punbb:not(.punbb-admin) textarea:focus,
.punbb:not(.punbb-admin) select:focus,
.punbb:not(.punbb-admin) input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"]):focus {
  border-color: var(--bb-ui-red);
  box-shadow: 0 0 0 2px rgba(153,87,67,.12);
}

.punbb:not(.punbb-admin) input[type="checkbox"],
.punbb:not(.punbb-admin) input[type="radio"] {
  accent-color: var(--bb-ui-red);
}

.punbb:not(.punbb-admin) .formsubmit {
  box-sizing: border-box;
  margin: 0;
  padding: 14px 18px 18px;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main .info-box {
  margin: 10px 16px 16px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-muted-surface);
  color: var(--bb-ui-muted);
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main .info-box .legend {
  color: var(--bb-ui-ink);
  font: 500 14px/18px Georgia,serif;
}

/* Profile forms keep only their content-specific field width. */

#pun-profile #profile input:is([type="text"], [type="email"], [type="password"]) {
  width: min(100%, 360px);
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #viewprofile li {
  background-image: linear-gradient(var(--bb-ui-line),var(--bb-ui-line));
  background-position: center bottom;
  background-size: calc(100% - 32px) 1px;
  background-repeat: no-repeat;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #viewprofile li:last-child {
  background-image: none;
}

.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #viewprofile li span,
.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #viewprofile li strong,
.punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #viewprofile li div {
  border: 0;
  background: transparent;
  color: var(--bb-ui-muted);
  font: 400 10px/16px Arial,sans-serif;
}

/* Pagination uses the same rust accent as active navigation. */

/* Announcements and service messages use the same card and heading system. */

.punbb:not(.punbb-admin) #pun-announcement,
.punbb:not(.punbb-admin):is(#pun-redirect, #pun-maint, #pun-message, #pun-error) #pun-main {
  overflow: hidden;
  border: 0;
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  box-shadow: 0 1px 3px rgba(76,72,66,.18);
}

.punbb:not(.punbb-admin) #pun-announcement h2 {
  position: static;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 15px 22px;
  border: 0;
  background: var(--bb-ui-dark);
  color: var(--bb-ui-nav);
  font: 500 9px/14px var(--bb-ui-font);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin) #pun-announcement h2 span {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
}

.punbb:not(.punbb-admin) #pun-announcement .container,
.punbb:not(.punbb-admin):is(#pun-redirect, #pun-maint, #pun-message, #pun-error) #pun-main .container {
  padding: 18px 22px;
  border: 0;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-muted);
  font: 400 10px/16px var(--bb-ui-font);
}

/* One footer composition for every public page. */

.punbb:not(.punbb-admin) #pun-qjump {
  display: none;
}

.punbb:not(.punbb-admin) #pun-crumbs2 {
  position: relative;
  z-index: 3;
  width: 34%;
  height: 46px;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 0 0 0 var(--bb-ui-radius);
  background: var(--bb-ui-dark);
  color: var(--bb-ui-nav);
}

.punbb:not(.punbb-admin) #pun-crumbs2 .container {
  height: 46px;
  box-sizing: border-box;
  padding: 16px 24px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-nav);
  font: 500 10px/14px Arial,sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin) #pun-about {
  position: relative;
  z-index: 2;
  height: 46px;
  box-sizing: border-box;
  margin: -46px 0 0;
  border: 0;
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  background: var(--bb-ui-dark);
  color: var(--bb-ui-nav);
}

.punbb:not(.punbb-admin) #pun-about .container {
  height: 46px;
  box-sizing: border-box;
  padding: 15px 24px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-nav);
  font: 500 7px/14px Arial,sans-serif;
  letter-spacing: .4px;
  text-align: right;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin) #pun-about p,
.punbb:not(.punbb-admin) #pun-about p span {
  display: block;
  margin: 0;
  padding: 0;
}

.punbb:not(.punbb-admin) :is(#pun-about, #pun-crumbs2) a,
.punbb:not(.punbb-admin) :is(#pun-about, #pun-crumbs2) a:link,
.punbb:not(.punbb-admin) :is(#pun-about, #pun-crumbs2) a:visited {
  color: var(--bb-ui-nav);
  text-decoration: none;
}

.punbb:not(.punbb-admin) :is(#pun-about, #pun-crumbs2) a:hover {
  color: var(--bb-ui-red);
}

@media (max-width: 700px) {
  .punbb:not(.punbb-admin):not(#pun-index) #pun-crumbs1 .container {
    padding: 13px 14px;
    white-space: normal;
  }

  .punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic) #pun-main > h1 {
    padding: 15px 16px;
    font-size: 16px;
    line-height: 20px;
  }

  .punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main .formal .container {
    padding: 14px;
  }

  .punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main fieldset {
    padding-right: 0;
    padding-left: 0;
  }

  .punbb:not(.punbb-admin):not(#pun-index):not(#pun-viewforum):not(#pun-viewtopic):not(#pun-messages) #pun-main :is(.formsubmit, .submitfield) {
    align-items: stretch;
  }

  .punbb:not(.punbb-admin) :is(textarea, select),
  .punbb:not(.punbb-admin) .longinput input {
    width: 100%;
  }

  .punbb:not(.punbb-admin) #pun-crumbs2 {
    width: 100%;
    height: 42px;
    border-radius: var(--bb-ui-radius) var(--bb-ui-radius) 0 0;
  }

  .punbb:not(.punbb-admin) #pun-crumbs2 .container {
    height: 42px;
    padding: 14px;
    text-align: center;
  }

  .punbb:not(.punbb-admin) #pun-about {
    height: auto;
    min-height: 62px;
    margin-top: 0;
    border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  }

  .punbb:not(.punbb-admin) #pun-about .container {
    height: auto;
    min-height: 34px;
    padding: 8px 14px 12px;
    text-align: center;
  }
}

/*
 * =========================================================
 * TOPIC PAGE: COLOURS, TYPE AND CORNERS
 * Visual layer only: the native MyBB layout stays unchanged.
 * =========================================================
 */

#pun-viewtopic #pun-main > #pun-live-rusff,
#pun-viewtopic #pun-main > .linkst #pun-live-rusff {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  transform: translateX(-50%);
  white-space: nowrap;
}

#pun-viewtopic #pun-main > #pun-live-rusff {
  top: -3em;
  line-height: 2em;
}

#pun-viewtopic #pun-main > .linkst #pun-live-rusff {
  top: 0;
}

#pun-viewtopic #pun-main h1 {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 2.7em;
  margin-bottom: 1em;
  border: 1px solid var(--bb-ui-topic-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-ink);
  font-family: var(--bb-ui-serif);
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

#pun-viewtopic #pun-main h1::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  z-index: 0;
  width: min(38%, 360px);
  height: 42px;
  background: url("https://forumstatic.ru/files/001c/c0/01/24815.png") right bottom / contain no-repeat;
  opacity: 0.68;
  pointer-events: none;
}

#pun-viewtopic #pun-main h1 span {
  position: relative;
  z-index: 1;
}

#pun-viewtopic #pun-main h2,
#pun-viewtopic #pun-main .topic > h2 {
  border-color: var(--bb-ui-dark);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-dark);
  color: #f4f1ec;
  font-family: var(--bb-ui-font);
  font-weight: 400;
  letter-spacing: 0.08em;
}

#pun-viewtopic #pun-main :is(.topic, .info-box, .formal, .modmenu, .formsubmit) {
  border-radius: var(--bb-ui-radius);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 {
  border-color: var(--bb-ui-topic-line);
  border-radius: var(--bb-ui-radius) var(--bb-ui-radius) 0 0;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-muted);
  font-family: var(--bb-ui-font);
  font-weight: 400;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 span {
  border-color: var(--bb-ui-topic-line);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-muted);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 a,
:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 a:visited {
  color: var(--bb-ui-topic-muted);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 strong,
:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 strong a,
:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 strong a:visited {
  color: var(--bb-ui-red);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 strong::before {
  content: "#";
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .container {
  border-color: var(--bb-ui-topic-line);
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-ink);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.post-author, .post-body, .post-links) {
  border-color: var(--bb-ui-topic-line);
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-ink);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author a,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author a:visited {
  color: var(--bb-ui-topic-ink);
  font-family: var(--bb-ui-serif);
  font-weight: 400;
  text-transform: none;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-title,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author li,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author p {
  color: var(--bb-ui-topic-muted);
  font-family: var(--bb-ui-font);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.post-content, .post-sig) {
  color: var(--bb-ui-topic-ink);
  font-family: var(--bb-ui-font);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-sig dt {
  width: 100%;
  border-color: var(--bb-ui-topic-line);
}

/* Shared rendered BBCode. Page-specific rules only adapt its surrounding layout. */

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content :is(.quote-box, .code-box),
#pun-post #post-preview :is(.quote-box, .code-box) {
  position: relative;
  box-sizing: border-box;
  width: auto;
  min-height: 4.2em;
  margin: 0.55em 0 1.2em;
  padding: 1.75em;
  border: 1px solid var(--bb-ui-topic-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-quote);
  color: var(--bb-ui-topic-ink);
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .quote-box::before,
#pun-post #post-preview .quote-box::before {
  content: "";
  position: absolute;
  top: -0.7em;
  left: -0.15em;
  width: 3.65em;
  height: 3.65em;
  background: url("https://forumstatic.ru/files/001c/c0/01/56641.png") center / contain no-repeat;
  pointer-events: none;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .code-box::before,
#pun-post #post-preview .code-box::before {
  content: none;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main :is(.quote-box cite, .code-box strong.legend, .spoiler-box > div:first-child),
#pun-post #post-preview :is(.quote-box cite, .code-box strong.legend, .spoiler-box > div:first-child) {
  display: block;
  margin: 0;
  padding: 0 0 0.7em;
  color: var(--bb-ui-red);
  font: 500 10px/14px var(--bb-ui-serif);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .quote-box:not(.spoiler-box) > cite,
#pun-post #post-preview .quote-box:not(.spoiler-box) > cite {
  padding-left: 3.8em;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .code-box,
:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .code-box :is(pre, code, .scrollbox),
#pun-post #post-preview .code-box,
#pun-post #post-preview .code-box :is(pre, code, .scrollbox) {
  color: var(--bb-ui-topic-ink);
  font-family: var(--bb-ui-font);
  font-size: inherit;
  line-height: inherit;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .code-box pre,
#pun-post #post-preview .code-box pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .spoiler-box > div:first-child,
#pun-post #post-preview .spoiler-box > div:first-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0;
  cursor: pointer;
  text-align: center;
  background: none !important;
}

/* The standalone reply preview reserves room for its control on both sides. */

#pun-post #pun-main .post-content .spoiler-box > div:first-child,
#pun-post #post-preview .spoiler-box > div:first-child {
  padding-inline: 40px;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .spoiler-box > div:first-child::before,
#pun-post #post-preview .spoiler-box > div:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--bb-ui-radius);
  background: linear-gradient(var(--bb-ui-red), var(--bb-ui-red)) center / 10px 2px no-repeat,
    linear-gradient(var(--bb-ui-red), var(--bb-ui-red)) center / 2px 10px no-repeat,
    var(--bb-ui-soft);
  transform: translateY(-50%);
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .spoiler-box > div:first-child.visible::before,
#pun-post #post-preview .spoiler-box > div:first-child.visible::before {
  content: "";
  background: linear-gradient(var(--bb-ui-red), var(--bb-ui-red)) center / 10px 2px no-repeat,
    var(--bb-ui-soft);
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .spoiler-box > div:first-child > img:first-child,
#pun-post #post-preview .spoiler-box > div:first-child > img:first-child {
  display: none !important;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content :is(.quote-box, .spoiler-box) > blockquote,
:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .code-box .scrollbox,
#pun-post #post-preview :is(.quote-box, .spoiler-box) > blockquote,
#pun-post #post-preview .code-box .scrollbox {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

#pun-viewtopic #pun-main a,
#pun-viewtopic #pun-main a:visited {
  color: #555957;
}

#pun-viewtopic #pun-main a:hover,
#pun-viewtopic #pun-main a:focus {
  color: var(--bb-ui-red);
}

#pun-viewtopic #pun-main :is(input, select, textarea) {
  border-color: var(--bb-ui-topic-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-ink);
  font-family: var(--bb-ui-font);
}

/* Topic message layout. Keep this after the colour layer above. */

#pun-viewtopic #pun-main {
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-ink);
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  position: relative;
  overflow: visible;
}

#pun-viewtopic #pun-main.multipage {
  margin-top: 0;
}

#pun-viewtopic #pun-main > h1 {
  box-sizing: border-box;
  min-height: 76px;
  margin: 0;
  padding: 24px 28px;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-topic-line);
  border-radius: 0;
  font-family: var(--bb-ui-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#pun-viewtopic #pun-main > h1::after {
  width: min(42%, 420px);
  height: 58px;
}

#pun-viewtopic #pun-main .topic {
  margin: 0;
  padding: 0 0 1px;
  border-radius: 0;
}

#pun-viewtopic #pun-main .topic > h2 {
  display: none;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post {
  border-color: var(--bb-ui-topic-line);
  color: var(--bb-ui-topic-ink);
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 44px minmax(240px, auto) auto;
  margin: 14px 18px;
  overflow: visible;
  border: 0;
  border-right: 1px solid var(--bb-ui-topic-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  box-shadow: none;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post > h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-topic-line);
  border-radius: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post > h3 span {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0 22px;
  border: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 :is(.translatelink, .sharelink) {
  display: none;
}

/* Quadro.Live recommendation strip is not part of the forum navigation. */

#pun-live-rusff {
  display: none !important;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 .permalink {
  margin-right: auto;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post h3 strong {
  order: 2;
  float: none;
  width: auto;
  margin-left: auto;
  color: var(--bb-ui-red);
  font-size: 11px;
  text-align: right;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post > .container {
  display: contents;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author {
  grid-column: 1;
  grid-row: 1 / span 2;
  float: none;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--bb-ui-topic-line);
  text-align: center;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background {
  align-self: start;
  height: auto;
  padding: 12px;
  border-radius: 6px;
  background-image: var(--bb-author-background, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background > ul,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background > p {
  min-height: 0;
  padding: 18px 16px 12px;
  border-radius: 6px;
  background: var(--bb-ui-author-card);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .bb-author-background-source {
  display: none !important;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author ul,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding: 18px 16px 0;
  line-height: 1.35;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author li {
  min-width: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-size: 19px;
  line-height: 1.15;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-title {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-avatar {
  grid-column: 1 / -1;
  margin: 0 auto 12px;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-avatar img {
  display: block;
  width: 148px;
  max-width: 100%;
  height: 150px;
  margin: 0 auto;
  border-radius: 3px;
  object-fit: cover;
  filter: grayscale(0.72) contrast(0.94);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.pa-fld1, .pa-fld2, .pa-fld5, .pa-fld6, .pa-last-visit) {
  grid-column: 1 / -1;
  padding: 8px 2px;
  border-top: 1px solid var(--bb-ui-topic-line);
  font-size: 9px;
  line-height: 1.45;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-fld1,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-fld1 a,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-fld1 a:visited {
  color: var(--bb-ui-red);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.pa-posts, .pa-positive, .pa-respect, .pa-gifts, .pa-fld3, .pa-fld4) {
  box-sizing: border-box;
  min-height: 40px;
  padding: 5px 4px 6px;
  border-top: 1px solid var(--bb-ui-topic-line);
  border-right: 0;
  color: var(--bb-ui-topic-ink);
  font-family: var(--bb-ui-serif);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.pa-gifts, .pa-fld4, .pa-positive, .pa-respect) {
  border-right: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.pa-awards, .pa-award, .pa-gifts, .pa-ua) {
  display: none !important;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .fld-name {
  display: block;
  margin-bottom: 4px;
  color: var(--bb-ui-topic-muted);
  font-family: var(--bb-ui-font);
  font-size: 7px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Иконки статистики вместо подписей «Сообщений» и «Позитив». */

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author :is(.pa-posts, .pa-positive, .pa-respect) > .fld-name {
  width: 18px;
  height: 18px;
  margin: 0 auto 2px;
  overflow: hidden;
  color: transparent !important;
  font-size: 0;
  line-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .pa-posts > .fld-name {
  background-image: url("https://forumstatic.ru/files/001c/c0/01/95778.png?v=1");
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author :is(.pa-positive, .pa-respect) > .fld-name {
  background-image: url("https://forumstatic.ru/files/001c/c0/01/28990.png?v=1");
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author :is(.pa-positive, .pa-respect) > .fld-name a {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent !important;
  font-size: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author li[data-profile-html-ready="true"]:empty {
  display: none !important;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .pa-online {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 3px 0 8px;
  padding: 0;
  border: 0;
  color: var(--bb-ui-red);
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .pa-online::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: var(--bb-ui-red);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-body {
  grid-column: 2;
  grid-row: 2;
  float: none;
  box-sizing: border-box;
  min-width: 0;
  min-height: 240px;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-box {
  box-sizing: border-box;
  min-height: 240px;
  padding: 24px 26px;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-content {
  font-size: 12px;
  line-height: 1.75;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-content p {
  margin: 0 0 1em;
  line-height: 1.75;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.post-content, .post-sig) img {
  max-width: 100%;
  height: auto;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links {
  grid-column: 1 / -1;
  grid-row: 3;
  float: none;
  width: auto;
  margin: 0;
  border: 0;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links ul {
  border-color: var(--bb-ui-topic-line);
  border-top-style: solid;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-topic-muted);
  font-family: var(--bb-ui-font);
  font-size: 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  box-sizing: border-box;
  min-height: 48px;
  height: auto;
  margin: 0 18px;
  padding: 9px 4px 10px;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-topic-line);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}

/* The native HTML prints destructive actions before quote/edit on some pages.
   A flex spacer creates two semantic groups without depending on DOM order:
   profile/PM on the left, quote/edit/delete on the right. */
#pun-viewtopic #pun-main .post-links ul::before {
  content: "";
  flex: 1 1 auto;
  order: 3;
  min-width: 8px;
}

#pun-viewtopic #pun-main .post-links li {
  order: 10;
}

#pun-viewtopic #pun-main .post-links .pl-profile,
#pun-viewtopic #pun-main .post-links .pl-email:has(a[href*="profile.php"]) {
  display: block;
  order: 1;
}

#pun-viewtopic #pun-main .post-links .pl-pm,
#pun-viewtopic #pun-main .post-links .pl-email:has(a[href*="messages.php"]) {
  display: block;
  order: 2;
}

#pun-viewtopic #pun-main .post-links .pl-quote {
  order: 4;
}

#pun-viewtopic #pun-main .post-links .pl-edit {
  order: 5;
}

#pun-viewtopic #pun-main .post-links .pl-delete {
  order: 6;
}

#pun-viewtopic #pun-main .post-links :is(.pl-report, .pl-reports),
#pun-viewtopic #pun-main .post-links .pl-email:has(a[href^="mailto:"]),
#pun-viewtopic #pun-main .post-links a[href^="mailto:"] {
  display: none !important;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 17px;
  margin: 0;
  padding: 3px 9px;
  border: 0;
  border-radius: 5px;
  background: var(--bb-ui-chip);
  color: var(--bb-ui-topic-muted);
  font: 400 9px/11px Arial, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  text-transform: lowercase;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links a:hover,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links a:focus {
  background: var(--bb-ui-red);
  color: var(--bb-ui-cream);
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-rating {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  color: var(--bb-ui-topic-muted);
  font-size: 9px;
}

:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-rating a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--bb-ui-red);
  border-radius: 50%;
  color: var(--bb-ui-red);
  text-decoration: none;
}

/* Punk social stamps: native Rusff rating remains the data source. */

#pun-viewtopic #pun-main .post :is(.bb-native-rating, .bb-native-vote) {
  display: none !important;
}

#pun-viewtopic #pun-main .post .bb-post-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 18px 0 2px;
  padding: 0;
}

#pun-viewtopic #pun-main .post :is(.bb-post-like, .bb-post-comment) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--bb-ui-topic-line);
  border-radius: 3px;
  background: var(--bb-ui-muted-surface);
  box-shadow: 3px 3px 0 rgba(23,26,27,.14);
  color: var(--bb-ui-topic-muted) !important;
  font: 600 8px/12px var(--bb-ui-font);
  letter-spacing: .45px;
  text-decoration: none !important;
  text-transform: uppercase;
  transform: rotate(-1deg);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}

#pun-viewtopic #pun-main .post .bb-post-like {
  min-width: 52px;
  height: 40px;
  padding: 2px 8px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

#pun-viewtopic #pun-main .post .bb-post-comment {
  min-width: 34px;
  width: 34px;
  margin-left: -3px;
  padding: 5px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: rotate(.7deg);
}

#pun-viewtopic #pun-main .post :is(.bb-post-like, .bb-post-comment)::after {
  content: none;
}

#pun-viewtopic #pun-main .post :is(.bb-post-like, .bb-post-comment) > i {
  display: block;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#pun-viewtopic #pun-main .post .bb-post-like > i {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  background-image: url("https://forumstatic.ru/files/001c/c0/01/77422.png");
}

#pun-viewtopic #pun-main .post .bb-post-like.is-pressed > i {
  background-image: url("https://forumstatic.ru/files/001c/c0/01/15201.png");
}

#pun-viewtopic #pun-main .post .bb-post-comment > i {
  background-image: url("https://forumstatic.ru/files/001c/c0/01/95778.png?v=1");
}

#pun-viewtopic #pun-main .post .bb-post-like > strong {
  color: inherit;
  font: inherit;
}

#pun-viewtopic #pun-main .post .bb-post-comment:is(:hover, :focus) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: rotate(1deg) translateY(-1px);
}

#pun-viewtopic #pun-main .post .bb-post-comment:is(:hover, :focus) > i {
  filter: none;
}

#pun-viewtopic #pun-main .post .bb-post-like:is(:hover, :focus),
#pun-viewtopic #pun-main .post .bb-post-like.is-pressed {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--bb-ui-topic-muted) !important;
  transform: translateY(-1px);
}

#pun-viewtopic #pun-main .post .bb-post-like.is-pressed {
  color: var(--bb-ui-red) !important;
}

#pun-viewtopic #pun-main .post .bb-post-like.is-disabled {
  opacity: 1;
  box-shadow: none;
  pointer-events: none;
  cursor: default;
}

#pun-viewtopic #pun-main .post .bb-post-like.is-busy {
  pointer-events: none;
}

#pun-viewtopic #pun-main .bb-relation-modal-trigger {
  display: none !important;
}

@media (max-width: 700px) {
  #pun-viewtopic #pun-main .post .bb-post-social {
    margin-top: 12px;
  }

  #pun-viewtopic #pun-main .post .bb-post-comment {
    min-width: 34px;
    width: 34px;
    padding: 5px;
  }
}

/* Rusff may inject a country flag directly beside the author name. */

:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author img,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author .flag,
:is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author [class*="flag"],
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author :is(.pa-country, .pa-flag) {
  display: none !important;
}

/* Primary actions: registration, reply, submit and preview. */

@media (max-width: 700px) {
  #pun-viewtopic #pun-main > h1 {
    min-height: 62px;
    padding: 19px 18px;
    font-size: 17px;
    line-height: 20px;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    margin: 10px;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post > h3 {
    grid-column: 1;
    grid-row: 2;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author {
    grid-column: 1;
    grid-row: 1;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-body {
    grid-column: 1;
    grid-row: 3;
    min-height: 180px;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-box {
    min-height: 180px;
    padding: 20px 18px;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-links {
    grid-column: 1;
    grid-row: 4;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-content :is(.quote-box, .code-box) {
    padding: 1.4em;
  }
}

/*
 * =========================================================
 * BROKEN BRITAIN — SEARCH RESULTS
 * Active/unanswered/user topics and user-post search results.
 * These pages reuse the visual language of viewforum/viewtopic
 * instead of the stock PunBB result tables.
 * =========================================================
 */

/* Search results inherit Service Page shell plus Collection/Post Core.
 * Only repeated native headings are hidden locally. */

:is(#pun-searchtopics, #pun-searchposts) #pun-main > h1,
#pun-searchtopics #pun-main > .forum > h2,
#pun-searchposts #pun-main > .topic > h2 {
  display: none !important;
}

/* Compact top and bottom pagination, matching the page counters elsewhere. */

/* =========================================================
   BROKEN BRITAIN — NATIVE COLLECTION SYSTEM
   One visual architecture for native MyBB/PunBB list tables.
   Page rules may define column widths, but not repaint rows independently.
========================================================= */

/* Only collection-specific sizing stays local; colours come from shared UI tokens. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable),
#pun-messages #messages fieldset {
  --bb-collection-row-height: 72px;
  --bb-collection-title-font: 500 13px/17px var(--bb-ui-serif);
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bb-ui-paper);
  box-shadow: none;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) > .container,
#pun-messages #messages fieldset > .fs-box {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* The table remains a real table. No flex/grid conversion is used here. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) table,
#pun-messages #messages fieldset table {
  width: 100%;
  height: auto;
  table-layout: fixed;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
}

/* A shared optional table heading. Topic collections hide it below. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) thead,
#pun-messages #messages fieldset thead {
  background: transparent;
  color: var(--bb-ui-muted);
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) th,
#pun-messages #messages fieldset th {
  box-sizing: border-box;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-line);
  background: transparent;
  color: var(--bb-ui-muted);
  font: 500 8px/38px var(--bb-ui-font);
  letter-spacing: .55px;
  text-transform: uppercase;
}

/* Viewforum and topic search use the editorial, headerless list variant. */
:is(#pun-viewforum, #pun-searchtopics) #pun-main .forum thead {
  display: none;
}

/* Every collection row uses the same height, rhythm and inset divider. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) tbody tr,
#pun-messages #messages fieldset tbody tr {
  height: var(--bb-collection-row-height);
  border: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--bb-ui-line), var(--bb-ui-line));
  background-position: center bottom;
  background-size: calc(100% - 48px) 1px;
  background-repeat: no-repeat;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) tbody tr:last-child,
#pun-messages #messages fieldset tbody tr:last-child {
  background-image: none;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td,
#pun-messages #messages fieldset td {
  box-sizing: border-box;
  height: var(--bb-collection-row-height);
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-muted);
  font: 400 10px/15px var(--bb-ui-font);
  vertical-align: middle;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl,
#pun-messages #messages fieldset td.tcl {
  position: relative;
  text-align: left;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td:is(.tc2, .tc3, .tcmod),
#pun-messages #messages fieldset td:is(.tc2, .tc3, .tcmod) {
  color: var(--bb-ui-ink);
  text-align: center;
}

/* Native icon/title wrapper shared by forum, search and message tables. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl .intd,
#pun-messages #messages fieldset td.tcl .intd {
  position: relative;
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  padding: 4px 8px 4px 64px;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl .tclcon,
#pun-messages #messages fieldset td.tcl .tclcon {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Neutralise the legacy cell indent: the native .intd now reserves icon space. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) tbody.hasicon td.tcl,
#pun-messages #messages fieldset tbody.hasicon td.tcl {
  padding-left: 16px;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl:has(> div.icon),
#pun-messages #messages fieldset td.tcl:has(> div.icon) {
  padding-left: 72px;
}

/* One title style, independent of the exact native wrapper.
   Rusff may render the primary link inside h3, inside .tclcon, or directly in td.tcl. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl h3,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl h3 a,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl .tclcon > a,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl > a,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl a[href*="viewtopic.php"],
#pun-messages #messages fieldset td.tcl .tclcon > a,
#pun-messages #messages fieldset td.tcl > a,
#pun-messages #messages fieldset td.tcl a[href*="messages.php"] {
  display: inline-block;
  margin: 0;
  color: var(--bb-ui-ink) !important;
  font: var(--bb-collection-title-font) !important;
  letter-spacing: .2px;
  text-decoration: none !important;
  text-transform: uppercase;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl h3 a:hover,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl .tclcon > a:hover,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl > a:hover,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl a[href*="viewtopic.php"]:hover,
#pun-messages #messages fieldset td.tcl .tclcon > a:hover,
#pun-messages #messages fieldset td.tcl > a:hover,
#pun-messages #messages fieldset td.tcl a[href*="messages.php"]:hover {
  color: var(--bb-ui-red) !important;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) :is(.forumdesc, .byuser),
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) .tclcon > span,
#pun-messages #messages fieldset td.tcl :is(small, span) {
  color: var(--bb-ui-muted);
  font: 400 9px/13px var(--bb-ui-font);
  text-transform: none;
}

/* Active/search topic lists: the native "new messages" label matches forum descriptions. */
.punbb:not(.punbb-admin) #pun-main td.tcl span.newtext {
  color: var(--bb-ui-muted) !important;
  font: 400 9px/13px var(--bb-ui-font) !important;
  text-transform: none !important;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td:is(.tc2, .tc3, .tcr, .tcmod) a,
#pun-messages #messages fieldset td a {
  color: var(--bb-ui-muted);
  font: inherit;
  text-decoration: none;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td:is(.tc2, .tc3, .tcr, .tcmod) a:hover,
#pun-messages #messages fieldset td a:hover {
  color: var(--bb-ui-red);
}

/* The same two-state status sprite is used in every native collection.
   Match the semantic .icon class rather than assuming Rusff always emits a div. */
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) table td.tcl .icon,
#pun-messages #messages fieldset table td.tcl .icon {
  position: absolute;
  top: 50%;
  left: 16px;
  display: block;
  width: 28px;
  height: 14px;
  box-sizing: border-box;
  margin: -7px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background-color: transparent !important;
  background-image: url('https://forumstatic.ru/files/001c/c0/01/15820.png') !important;
  background-position: 0 0 !important;
  background-size: 28px 28px !important;
  background-repeat: no-repeat !important;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) table :is(tr.inew .icon, .icon.inew),
#pun-messages #messages fieldset table :is(tr.inew .icon, .icon.inew) {
  background-position: 0 -14px !important;
}

.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) table td.tcl .icon::before,
.punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) table td.tcl .icon::after,
#pun-messages #messages fieldset table td.tcl .icon::before,
#pun-messages #messages fieldset table td.tcl .icon::after {
  display: none;
}

/* Active-topic geometry: only semantic columns and the avatar remain local. */
#pun-searchtopics #pun-main .forum td.tcl {
  width: 46%;
}

#pun-searchtopics #pun-main .forum td.tc2 {
  width: 18%;
}

#pun-searchtopics #pun-main .forum td.tc3 {
  width: 8%;
}

#pun-searchtopics #pun-main .forum td.tcr {
  width: 28%;
  padding-right: 24px;
  text-align: left;
  white-space: nowrap;
}
/* Opened private messages use the shared rendered-post component. */
#pun-messages #profile.messages-container > .container > fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#pun-messages #profile.messages-container > .container > fieldset > legend {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 18px 4px;
  color: var(--bb-ui-ink);
  font: 600 12px/16px var(--bb-ui-font);
}

#pun-messages #profile.messages-container > .container > fieldset > .fs-box {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Registration is a full-width author-card fact, just like optional fields. */
:is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .pa-reg {
  grid-column: 1 / -1;
  padding: 8px 2px;
  border-top: 1px solid var(--bb-ui-topic-line);
  font-size: 9px;
  line-height: 1.45;
}

/* Private messages keep only the compact author identity. */

#pun-messages #pun-main .post .post-author :is(.pa-reg, .pa-posts),
#pun-messages #pun-main .post .post-links .pl-email {
  display: none !important;
}

/* The PM canvas is open; topic-card vertical dividers do not belong here. */

#pun-messages #pun-main .post,
#pun-messages #pun-main .post .post-author {
  border-right: 0 !important;
}

/* Keep the remaining PM action at the far edge of the post. */
#pun-messages #pun-main .post .post-links .pl-delete {
  order: 2;
  margin-left: auto;
}

/* Private messages use the native profile/sidebar structure.
   The table itself inherits the shared collection system above; this section
   contains only the PM layout and markup-specific exceptions. */
#pun-messages #pun-main > #profile.messages-container {
  overflow: visible;
  margin: 0;
  border: 0;
  background: var(--bb-ui-paper);
}

/* Sidebar and PM form columns inherit the shared two-column component. */

#pun-messages #messages,
#pun-messages #messages :is(fieldset, .fs-box, table, tbody) {
  height: auto !important;
  min-height: 0 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
}

#pun-messages #messages,
#pun-messages #messages :is(fieldset, .fs-box) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The breadcrumb already names the page; keep the legend accessible only. */
#pun-messages #messages fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The shared collection component supplies table, row, cell and title styles.
   Only service-specific borders, columns and PM markup are overridden here. */
#pun-messages #messages table {
  position: relative;
  border: 0 !important;
  background: transparent !important;
}

#pun-messages #messages thead {
  display: none !important;
}

#pun-messages #messages fieldset tbody tr {
  border: 0 !important;
  background-color: transparent !important;
  background-size: calc(100% - 32px) 1px;
}

#pun-messages #messages fieldset tbody td {
  border: 0 !important;
  background: transparent !important;
}

/* Fallback widths; the service's inline .pmt* widths remain authoritative. */
#pun-messages #messages .tcl { width: 55%; }
#pun-messages #messages .tc2 { width: 22%; }
#pun-messages #messages .tc3 { width: 18%; }
#pun-messages #messages .pmtc24 {
  width: 5%;
  text-align: center;
}

/* Keep the sender name on the avatar's horizontal centre line. */

#pun-messages #messages td.pmtc22 {
  white-space: nowrap;
  text-align: left !important;
}

#pun-messages #messages td.pmtc22 > :is(.user-avatar, a) {
  vertical-align: middle;
}

#pun-messages #messages td.pmtc22 > a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  line-height: 1.2;
}

/* Paint the shared status sprite on the cell: the native icon is nested in
   .intd and cannot use the same absolute-positioning context as forum rows. */

/* Sender avatar matches the last-author avatar in active topics. */

#pun-messages #pun-main .formsubmit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 0 0;
}

@media (max-width: 700px) {
  .punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable),
  #pun-messages #messages fieldset {
    --bb-collection-row-height: 64px;
    --bb-collection-title-font: 500 11px/15px var(--bb-ui-serif);
  }

  .punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td,
  #pun-messages #messages fieldset td {
    padding-right: 10px;
    padding-left: 10px;
  }

  .punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) td.tcl .intd,
  #pun-messages #messages fieldset td.tcl .intd {
    padding-left: 48px;
  }

  .punbb:not(.punbb-admin) #pun-main :is(.forum, .usertable) table .icon,
#pun-messages #messages fieldset table .icon {
    left: 8px;
  }

  #pun-messages #messages fieldset {
    overflow-x: auto;
  }

  #pun-messages #messages table {
    min-width: 620px;
  }
}

/* User-post collections: continuous light canvas with compact author column. */

#pun-searchposts #pun-main .topic .post {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--bb-ui-line),var(--bb-ui-line));
  background-position: center bottom;
  background-size: calc(100% - 48px) 1px;
  background-repeat: no-repeat;
  box-shadow: none;
}

#pun-searchposts #pun-main .topic .post:last-child {
  background-image: none;
}

#pun-searchposts #pun-main .topic .post > h3 {
  position: static;
  box-sizing: border-box;
  min-height: 30px;
  margin: 0;
  padding: 12px 28px 0 218px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-muted);
  font: 400 9px/14px var(--bb-ui-font);
  text-align: left;
}

#pun-searchposts #pun-main .topic .post > h3 span,
#pun-searchposts #pun-main .topic .post > h3 a {
  color: var(--bb-ui-muted) !important;
  font: inherit;
  text-decoration: none !important;
}

#pun-searchposts #pun-main .topic .post > h3 span {
  border: 0 !important;
  background: transparent !important;
}

#pun-searchposts #pun-main .topic .post > h3 a:hover {
  color: var(--bb-ui-red) !important;
}

#pun-searchposts #pun-main .topic .post > h3 strong {
  float: right;
  color: var(--bb-ui-red);
  font: 500 10px/14px var(--bb-ui-serif);
}

#pun-searchposts #pun-main .topic .post > .container {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  align-items: stretch;
  box-sizing: border-box;
  min-height: 112px;
  padding: 0;
  border: 0;
  background: transparent;
}

#pun-searchposts #pun-main .topic .post-author {
  position: static;
  float: none;
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 18px 22px 14px 28px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-muted);
}

#pun-searchposts #pun-main .topic .post-author ul {
  margin: 0;
  padding: 0;
}

#pun-searchposts #pun-main .topic .post-author li {
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-ui-muted);
  font: 400 9px/14px var(--bb-ui-font);
  list-style: none;
}

#pun-searchposts #pun-main .topic .post-author .pa-author strong {
  color: var(--bb-ui-ink);
  font: 500 15px/19px var(--bb-ui-serif);
  letter-spacing: .2px;
}

#pun-searchposts #pun-main .topic .post-author .fld-name {
  color: var(--bb-ui-muted);
  font: inherit;
  text-transform: uppercase;
}

#pun-searchposts #pun-main .topic .post-body {
  position: static;
  float: none;
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 16px 28px 12px;
  border: 0;
  background: transparent;
}

#pun-searchposts #pun-main .topic .post-box {
  min-height: 60px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#pun-searchposts #pun-main .topic .post-content {
  color: var(--bb-ui-ink);
  font: 400 13px/1.6 var(--bb-ui-font);
}

#pun-searchposts #pun-main .topic .post-content p {
  margin: 0 0 10px;
}

#pun-searchposts #pun-main .topic .post-content :is(.quote-box, .code-box, .spoiler-box) {
  position: relative;
  box-sizing: border-box;
  margin: 10px 0 14px;
  padding: 1.75em;
  border: 1px solid var(--bb-ui-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-quote);
  color: var(--bb-ui-ink);
  box-shadow: none;
}

#pun-searchposts #pun-main .topic .post-content .quote-box::before {
  content: "";
  position: absolute;
  top: -0.7em;
  left: -0.15em;
  width: 3.65em;
  height: 3.65em;
  background: url("https://forumstatic.ru/files/001c/c0/01/56641.png") center / contain no-repeat;
  pointer-events: none;
}

#pun-searchposts #pun-main .topic .post-content .quote-box cite,
#pun-searchposts #pun-main .topic .post-content .code-box .legend,
#pun-searchposts #pun-main .topic .post-content .spoiler-box > div:first-child {
  display: block;
  margin: 0 0 8px;
  padding: 0 0 0.7em;
  color: var(--bb-ui-red);
  font: 500 10px/14px var(--bb-ui-serif);
  letter-spacing: .55px;
  text-transform: uppercase;
}

#pun-searchposts #pun-main .topic .post-content .quote-box:not(.spoiler-box) > cite {
  padding-left: 3.8em;
}

#pun-searchposts #pun-main .topic .post-content .quote-box:not(:has(> cite)) {
  padding-top: 3em;
}

#pun-searchposts #pun-main .topic .post-content blockquote,
#pun-searchposts #pun-main .topic .post-content pre,
#pun-searchposts #pun-main .topic .post-content code {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-ui-ink);
  font: 400 13px/1.6 var(--bb-ui-font);
  white-space: pre-wrap;
}

#pun-searchposts #pun-main .topic .post-links {
  position: static;
  float: none;
  grid-column: 1 / -1;
  grid-row: 2;
  box-sizing: border-box;
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 7px 28px 12px;
  border: 0;
  background: transparent;
  text-align: right;
}

#pun-searchposts #pun-main .topic .post-links ul {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
}

#pun-searchposts #pun-main .topic .post-links li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

#pun-searchposts #pun-main .topic .post-links a,
#pun-searchposts #pun-main .topic .post-links a:link,
#pun-searchposts #pun-main .topic .post-links a:visited {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 12px;
  border: 0;
  border-radius: 5px;
  background: var(--bb-ui-chip);
  color: var(--bb-ui-muted) !important;
  font: 400 9px/16px var(--bb-ui-font);
  text-decoration: none !important;
  text-transform: lowercase;
}

#pun-searchposts #pun-main .topic .post-links a:hover {
  color: var(--bb-ui-red) !important;
}

@media (max-width: 760px) {
  #pun-searchtopics #pun-main .forum table,
  #pun-searchtopics #pun-main .forum tbody,
  #pun-searchtopics #pun-main .forum tr,
  #pun-searchtopics #pun-main .forum td {
    display: block;
    width: 100% !important;
    height: auto;
  }

  #pun-searchtopics #pun-main .forum tbody tr {
    position: relative;
    min-height: 82px;
    padding: 0;
  }

  #pun-searchtopics #pun-main .forum td:is(.tc2, .tc3) {
    display: none;
  }

  #pun-searchtopics #pun-main .forum td.tcl {
    padding: 8px 12px 0;
  }

  #pun-searchtopics #pun-main .forum td.tcr {
    box-sizing: border-box;
    padding: 2px 16px 12px 64px;
    white-space: normal;
  }

  #pun-searchposts #pun-main .topic .post > h3 {
    padding: 12px 16px 0;
  }

  #pun-searchposts #pun-main .topic .post > .container {
    display: block;
    min-height: 0;
  }

  #pun-searchposts #pun-main .topic .post-author {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px 4px;
  }

  #pun-searchposts #pun-main .topic .post-author li {
    display: inline-block;
    margin-right: 10px;
  }

  #pun-searchposts #pun-main .topic .post-body {
    padding: 10px 16px;
  }

  #pun-searchposts #pun-main .topic .post-links {
    padding: 4px 16px 12px;
  }
}

/* =========================================================
 * REMAINING SERVICE SCREENS
 * Auth, search, user directory, help and moderator lists.
 * ========================================================= */

/* Authentication and search forms use the shared form component in a
   readable centred measure instead of stretching across the full canvas. */

:is(#pun-login, #pun-register, #pun-search) #pun-main .formal {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  border: 0;
}

#pun-login #pun-main .formal {
  max-width: 620px;
}

:is(#pun-login #login, #pun-register #register, #pun-search #punbbsearch) .fs-box {
  display: grid;
  gap: 0;
}

:is(#pun-login #login, #pun-register #register, #pun-search #punbbsearch)
  :is(input[type="text"], input[type="email"], input[type="password"], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* User directory filter and results. */

#pun-userlist #pun-main .formal {
  margin-bottom: 0;
  border: 0;
}

#pun-userlist #userlist .fs-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

#pun-userlist #userlist .fs-box > :is(.inputfield, .selectfield, .infofield) {
  float: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#pun-userlist #userlist .fs-box > .infofield {
  grid-column: 1 / -1;
  color: var(--bb-ui-muted);
  font: 400 9px/1.5 var(--bb-ui-font);
}

#pun-userlist #userlist :is(input[type="text"], select) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#pun-userlist #pun-main .usertable > .container {
  padding: 0;
}

#pun-userlist #pun-main .usertable :is(th, td).username {
  width: 30%;
  text-align: left;
}

#pun-userlist #pun-main .usertable :is(th, td):is(.title, .user_title) {
  width: 18%;
}

#pun-userlist #pun-main .usertable :is(th, td).relation,
#pun-userlist #pun-main .usertable :is(th, td):is(.posts, .num_posts) {
  width: 10%;
}

#pun-userlist #pun-main .usertable :is(th, td).registered,
#pun-userlist #pun-main .usertable :is(th, td).last_visit {
  width: 16%;
}

#pun-userlist #pun-main .usertable td.username {
  white-space: nowrap;
}

#pun-userlist #pun-main .usertable td.username .user-avatar {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 42px;
  margin-right: 12px;
  overflow: visible;
  vertical-align: middle;
}

#pun-userlist #pun-main .usertable td.username .avatar-image {
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

#pun-userlist #pun-main .usertable td.username .isonline {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border: 1px solid var(--bb-ui-paper);
  border-radius: 50%;
  background: #82be78;
}

#pun-userlist #pun-main .usertable td.username .usersname {
  display: inline-flex;
  align-items: center;
  height: 42px;
  vertical-align: middle;
}

#pun-userlist #pun-main .usertable td.username .usersname a {
  color: var(--bb-ui-ink);
  font: 500 13px/1.3 var(--bb-ui-serif);
  text-decoration: none;
}

#pun-userlist #pun-main .usertable td.username .usersname a:hover {
  color: var(--bb-ui-red);
}

/* Help is a documentation collection: the native sections remain semantic,
   while their information boxes form a compact responsive card grid. */

#pun-help #pun-main {
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-paper);
  color: var(--bb-ui-ink);
  font-family: var(--bb-ui-font);
}

#pun-help #pun-main > .formal {
  margin: 0 0 20px;
  border: 0;
  background: transparent;
}

#pun-help #pun-main > .formal:last-child {
  margin-bottom: 0;
}

#pun-help #pun-main > .formal > .container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--bb-ui-line);
  border-top: 0;
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius);
  background: var(--bb-ui-paper);
}

#pun-help #pun-main #smilies > .container {
  grid-template-columns: minmax(0, 1fr);
}

#pun-help #pun-main .info-box {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--bb-ui-line);
  border-radius: var(--bb-ui-radius);
  background: var(--bb-ui-soft);
  color: var(--bb-ui-muted);
}

#pun-help #pun-main .info-box :is(code, samp, pre) {
  color: var(--bb-ui-ink);
  font-family: var(--bb-ui-font);
  overflow-wrap: anywhere;
}

/* Moderator topic lists keep their native controls but share collection
   geometry, typography and control accents with the public forum list. */

#pun-modviewforum #pun-main .forum :is(th, td).tcl {
  width: 55%;
}

#pun-modviewforum #pun-main .forum :is(th, td):is(.tc2, .tc3) {
  width: 15%;
}

#pun-modviewforum #pun-main .forum :is(th, td):is(.tcr, .tcmod) {
  width: 15%;
}

#pun-modviewforum #pun-main :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--bb-ui-red);
}

@media (max-width: 760px) {
  :is(#pun-login, #pun-register, #pun-search) #pun-main .formal {
    width: calc(100% - 28px);
  }

  #pun-userlist #userlist .fs-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pun-userlist #pun-main .usertable :is(th, td):is(.relation, .posts, .num_posts, .registered) {
    display: none;
  }

  #pun-userlist #pun-main .usertable :is(th, td).username {
    width: 50%;
  }

  #pun-userlist #pun-main .usertable :is(th, td):is(.title, .user_title),
  #pun-userlist #pun-main .usertable :is(th, td).last_visit {
    width: 25%;
  }

  #pun-help #pun-main {
    padding: 14px;
  }

  #pun-help #pun-main > .formal > .container {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
}

#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-navlinks,
#pun-navlinks .container {
  border-style: none;
  border-width: 0;
  margin: 0;
}

#pun-ulinks li,
#pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 1px;
  white-space: nowrap;
}

#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em;
}

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

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

#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
}

#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
}

#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;
}

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

#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 {
  margin-top: 0;
}

#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
}

#pun-about p span {
  display: block;
  padding-left: 50%;
}

#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
}

#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
}

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

div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;
}

/* 08. FORUM IDENTITY AND INDEX COMPOSITION */

html,
body {
  min-height: 100%;
  background-color: #d9d8d4;
  background-image: url('https://forumstatic.ru/files/001c/c0/01/18234.jpg');
  background-position: center top;
  background-size: 627px 627px;
  background-repeat: repeat;
  background-attachment: fixed;
}

body {
  min-width: 1040px;
  color: var(--bb-shell-ink);
}

#pun {
  width: 950px;
  margin: 0 auto 70px;
  float: none;
}

.punbb {
  float: none;
  width: 100%;
  font-family: var(--bb-ui-font);
  color: var(--bb-shell-ink);
}

.punbb a {
  color: inherit;
}

/*
 * The administration panel keeps the public navigation, but it must
 * participate in normal layout instead of overlaying admin forms.
 */

.punbb-admin #pun-navlinks {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  float: none;
  clear: both;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  margin: 0 0 14px;
  background: var(--bb-ui-dark);
  border: 0;
  border-radius: 6px;
}

.punbb-admin #pun-navlinks .container,
.punbb-admin #pun-navlinks ul {
  position: static;
  inset: auto;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 24px;
  background: transparent;
  border: 0;
}

.punbb-admin #pun-navlinks li {
  height: 58px;
}

.punbb-admin #pun-navlinks a,
.punbb-admin #pun-navlinks a:link,
.punbb-admin #pun-navlinks a:visited {
  color: var(--bb-ui-nav);
}

.punbb-admin #pun-navlinks a:hover,
.punbb-admin #pun-navlinks a:focus,
.punbb-admin #pun-navlinks a:active,
.punbb-admin #pun-navlinks li.isactive a {
  color: var(--bb-ui-red);
}

.punbb-admin :is(#pun-ulinks, #pun-status, #pun-break1) {
  display: none !important;
}

.bb-news h2 {
  margin: 0 0 9px;
  color: var(--bb-ui-red);
  font: 13px Georgia,serif;
  text-transform: uppercase;
}

.bb-news a {
  display: block;
  padding: 9px 0;
  color: #aaa;
  border-bottom: 1px solid #3b3e3f;
  text-decoration: none;
  font-size: 9px;
}

.bb-news time {
  display: block;
  font-size: 10px;
}

.bb-news strong {
  display: block;
  margin-top: 13px;
  color: #ccc;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.bb-welcome-copy {
  margin-left: 310px;
}

.bb-welcome-copy h2 {
  margin: 4px 0 20px;
  font: 500 28px Georgia,serif;
  text-transform: uppercase;
}

.bb-welcome-copy p {
  margin: 0 0 5px;
  color: #666;
  font-size: 11px;
  line-height: 1.9;
}

.bb-quicklinks {
  position: absolute;
  left: 45px;
  right: 45px;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
}

.bb-quicklinks a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #60615f;
  text-decoration: none;
  font-size: 25px;
}

.bb-quicklinks span {
  font-size: 9px;
  text-transform: uppercase;
}

.punbb .category .container {
  border: 0;
  background: transparent;
}

.punbb .category h2,
.punbb .category th {
  display: none;
}

.punbb .category td {
  height: 112px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--bb-ui-line);
  background: transparent;
  vertical-align: middle;
}

.punbb .category td.tcl {
  width: auto;
  padding-left: 185px;
  position: relative;
}

.punbb .category td:is(.tc2, .tc3) {
  width: 70px;
  text-align: center;
  background: transparent;
  border-left: 1px solid #ddd;
}

.punbb .category td.tcr {
  width: 205px;
  border-left: 1px solid #ddd;
}

.punbb .category .tcl h3 {
  margin-bottom: 7px;
  font: 500 17px Georgia,serif;
  text-transform: uppercase;
}

.punbb .category .tcl h3 a {
  color: #282a29;
  text-decoration: none;
}

.punbb .category .tcl .forumdesc {
  color: #6d6d69;
  font-size: 9px;
  line-height: 1.6;
}

.punbb .category .tcl:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 165px;
  height: 92px;
  background: linear-gradient(140deg,#aaa,#e4e1da);
  filter: grayscale(1);
}

.punbb .category :is(.tc2, .tc3) {
  font: 17px Georgia,serif;
}

.punbb .category .tcr {
  color: #666;
  font-size: 9px;
  line-height: 1.5;
}

@media (min-width: 701px) and (max-width: 1050px) {
  body {
    min-width: 0;
  }

  .bb-shell,
  #pun {
    width: 94vw;
    min-width: 0;
  }
}

/* Native MyBB navigation placed over the custom header */

#pun-title {
  display: none;
}

#pun-navlinks .container {
  position: absolute;
  inset: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

#pun-navlinks ul {
  position: absolute;
  inset: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
}

#pun-navlinks li {
  height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#pun-navlinks a,
#pun-navlinks a:link,
#pun-navlinks a:visited {
  display: block;
  padding: 0;
  color: var(--bb-ui-nav);
  background: transparent;
  text-decoration: none;
  font: 400 10px/16px Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .35px;
}

#pun-navlinks a:hover,
#pun-navlinks a:focus,
#pun-navlinks a:active,
#pun-navlinks li.isactive a,
#pun-navlinks li.isactive a:link,
#pun-navlinks li.isactive a:visited {
  color: var(--bb-ui-red);
  background: transparent;
  text-decoration: none;
}

#pun-ulinks li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

#pun-ulinks a,
#pun-ulinks a:link,
#pun-ulinks a:visited {
  padding: 0;
  border: 0;
  text-decoration: none;
  font: 400 9px/14px Arial,sans-serif;
  text-transform: uppercase;
}

#pun-ulinks a:hover,
#pun-ulinks a:focus,
#pun-ulinks a:active {
  text-decoration: none;
}

@media (min-width: 701px) and (max-width: 1050px) {
  :is(#pun-navlinks, #pun-ulinks) {
    left: 15%;
    width: 82%;
  }
}

/* Compact two-line header; final navigation geometry is grouped below. */

/* Broken Britain footer: native MyBB statistics with separate flexible layers */

#pun-index #pun-stats {
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-sizing: border-box;
  margin: 26px 0 0;
  background: var(--bb-ui-cream) url('https://forumstatic.ru/files/001c/c0/01/30751.jpg') center/627px 627px repeat;
  border: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 5px rgba(55,54,51,.14);
}

#pun-index #pun-stats:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15px;
  right: 0;
  left: 0;
  height: 24px;
  background: var(--bb-ui-cream) url('https://forumstatic.ru/files/001c/c0/01/30751.jpg') center top/627px 627px repeat;
  clip-path: polygon(0 54%,4% 34%,8% 58%,13% 25%,18% 52%,24% 31%,30% 62%,36% 24%,42% 48%,49% 30%,55% 60%,61% 29%,67% 51%,73% 23%,79% 57%,85% 32%,91% 55%,96% 27%,100% 47%,100% 100%,0 100%);
}

#pun-index #pun-stats:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 12px;
  width: 270px;
  height: 210px;
  background: url('https://forumstatic.ru/files/001c/c0/01/89829.png') right bottom/contain no-repeat;
  pointer-events: none;
}

#pun-index #pun-stats h2 {
  position: relative;
  z-index: 3;
  height: 38px;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 0 0 26px;
  color: var(--bb-ui-ink);
  background: transparent;
  border: 0;
  font: 600 10px/16px Arial,sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#pun-index #pun-stats h2 span {
  font: inherit;
}

#pun-index #pun-stats .container {
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-ui-link);
}

#pun-index #pun-stats ul {
  display: grid;
  grid-template-columns: repeat(4,145px) minmax(0,1fr);
  grid-template-rows: minmax(170px,auto) auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pun-index #pun-stats li:is(.item1, .item2, .item3, .item4) {
  position: relative;
  float: none;
  clear: none;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 58px 12px 16px;
  border-right: 1px solid var(--bb-ui-author-line);
  color: #5e5f5d;
  font: 500 8px/13px Arial,sans-serif;
  text-align: center;
  text-transform: uppercase;
}

#pun-index #pun-stats li.item4 {
  border-right: 0;
}

#pun-index #pun-stats li:is(.item1, .item2, .item3, .item4):before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  background-position: center;
  background-size: 40px 40px;
  background-repeat: no-repeat;
}

#pun-index #pun-stats li.item1:before {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/13585.png');
}

#pun-index #pun-stats li.item2:before {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/18516.png');
}

#pun-index #pun-stats li.item3:before {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/15728.png');
}

#pun-index #pun-stats li.item4:before {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/78248.png');
}

#pun-index #pun-stats li:is(.item1, .item2, .item3) strong {
  display: block;
  position: absolute;
  top: 88px;
  right: 0;
  left: 0;
  margin: 0;
  color: var(--bb-ui-ink);
  font: 500 27px/30px Georgia,serif;
  text-transform: none;
}

#pun-index #pun-stats li.item4>strong {
  display: block;
  position: absolute;
  top: 93px;
  right: 0;
  left: 0;
  margin: 0;
  font: 500 19px/30px Georgia,serif;
  text-align: center;
}

#pun-index #pun-stats li.item4>strong a {
  display: inline;
  position: static;
  margin: 0;
  color: var(--bb-ui-red);
  font: inherit;
  text-decoration: none;
  text-transform: none;
}

#pun-index #pun-stats li.item4 a:hover {
  color: var(--bb-ui-red);
}

#pun-index #pun-stats li#onlinelist {
  grid-column: 1/-1;
  position: relative;
  z-index: 4;
  float: none;
  width: auto;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 24px;
  color: var(--bb-ui-link);
  border: 0;
  font: 400 9px/15px Arial,sans-serif;
}

#pun-index #pun-stats li#onlinelist div {
  padding: 0;
  border: 0;
  font: inherit;
}

#pun-index #pun-stats li#onlinelist a {
  color: var(--bb-ui-link);
  font-weight: 600;
  text-decoration: none;
  text-transform: none !important;
}

#pun-index #pun-stats li#onlinelist>div>a:first-child {
  color: var(--bb-ui-red);
  text-transform: uppercase !important;
}

#pun-index #pun-stats li#onlinelist a:hover {
  color: var(--bb-ui-red);
}

/* Bottom breadcrumb and platform links share one dark strip */

#pun-index #pun-crumbs2 {
  position: relative;
  z-index: 3;
  width: 34%;
  height: 46px;
  box-sizing: border-box;
  margin: 0;
  background: var(--bb-ui-dark);
  border: 0;
  border-radius: 0 0 0 6px;
  color: var(--bb-ui-nav);
}

#pun-index #pun-crumbs2 .container {
  height: 46px;
  box-sizing: border-box;
  padding: 16px 24px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-nav);
  font: 500 8px/14px Arial,sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
}

#pun-index #pun-crumbs2 a {
  color: var(--bb-ui-nav);
  text-decoration: none;
}

#pun-index #pun-about {
  position: relative;
  z-index: 2;
  height: 46px;
  box-sizing: border-box;
  margin: -46px 0 0;
  background: var(--bb-ui-dark);
  border: 0;
  border-radius: 0 0 6px 6px;
  color: var(--bb-ui-nav);
}

#pun-index #pun-about:before {
  content: "BROKEN BRITAIN © 2026";
  position: absolute;
  left: 34%;
  top: 16px;
  color: var(--bb-ui-nav);
  font: 500 8px/14px Arial,sans-serif;
  letter-spacing: .7px;
}

#pun-index #pun-about .container {
  height: 46px;
  box-sizing: border-box;
  padding: 15px 24px;
  border: 0;
  background: transparent;
  color: var(--bb-ui-nav);
  font: 500 8px/14px Arial,sans-serif;
  letter-spacing: .4px;
  text-align: right;
  text-transform: uppercase;
}

#pun-index #pun-about p,
#pun-index #pun-about p span {
  display: block;
  margin: 0;
  padding: 0;
}

#pun-index #pun-about a {
  color: var(--bb-ui-nav);
  text-decoration: none;
}

#pun-index :is(#pun-about, #pun-crumbs2) a:hover {
  color: var(--bb-ui-red);
}

#pun-index #pun-qjump {
  display: none;
}

/* Fallback collage markup is still present in HTML, but the approved hero is an image. */
:is(.bb-collage, .bb-title, .bb-skyline) {
  display: none;
}

/* Paper mount joining the navigation and hero artwork */

.bb-shell {
  width: 950px;
  margin: 20px auto 14px;
  color: var(--bb-shell-ink);
  font: 11px/1.55 Arial,sans-serif;
  position: relative;
  isolation: isolate;
}

.bb-header {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 4;
  color: #aaa;
  background: var(--bb-ui-dark);
  box-shadow: 0 1px 2px #aaa;
  margin-bottom: 0;
  height: 58px;
  width: 970px;
  margin-left: -10px;
  border-radius: 8px;
}

:is(.bb-hero, .bb-welcome) {
  z-index: 1;
}

#pun-ulinks a,
#pun-ulinks a:link,
#pun-ulinks a:visited {
  color: var(--bb-ui-link);
}

#pun-ulinks a:hover,
#pun-ulinks a:focus,
#pun-ulinks a:active {
  color: var(--bb-ui-red);
}

/* Full-bleed panoramic hero */

body {
  overflow-x: hidden;
}

.punbb .bb-news a,
.punbb .bb-news a:link,
.punbb .bb-news a:visited {
  color: #aaa;
}

.punbb .bb-news a:hover,
.punbb .bb-news a:focus,
.punbb .bb-news a:active {
  color: var(--bb-ui-red);
}

/* Hero aligned to the 990px paper mount */

.bb-news {
  position: absolute;
  z-index: 3;
  color: #aaa;
  padding: 24px 20px 20px;
  background: transparent;
  transform: none;
  box-shadow: none;
  box-sizing: border-box;
  top: 16%;
  right: 8.5%;
  width: 19%;
  min-width: 188px;
}

/* Useful links below the hero */

.bb-useful a {
  flex: 1;
  padding: 3px 16px;
  color: var(--bb-ui-link);
  border-left: 1px solid #cfccc5;
  text-align: center;
  text-decoration: none;
  font: 500 9px/14px Arial,sans-serif;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.bb-useful a:first-child {
  border-left: 0;
}

.punbb .bb-useful a,
.punbb .bb-useful a:link,
.punbb .bb-useful a:visited {
  color: var(--bb-ui-link);
  text-decoration: none;
}

.punbb .bb-useful a:hover,
.punbb .bb-useful a:focus,
.punbb .bb-useful a:active {
  color: var(--bb-ui-red);
  text-decoration: none;
}

/* Layered bottom edge of the hero composition */

.bb-hero {
  position: relative;
  background: url('https://forumstatic.ru/files/001c/c0/01/57220.jpg') center center/cover no-repeat;
  background-repeat: no-repeat;
  left: 50%;
  width: 990px;
  height: 412px;
  aspect-ratio: auto;
  transform: translateX(-50%);
  background-image: url('https://forumstatic.ru/files/001c/c0/01/41912.jpg');
  background-position: center;
  background-size: cover;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

/* Compact character-search panel */

.bb-useful {
  position: relative;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 28px;
  background: rgba(246,245,241,.94);
  z-index: 5;
  margin: -18px auto 0;
  box-shadow: 0 3px 8px rgba(55,54,51,.22);
  width: 950px;
  border-radius: 12px;
}

.bb-welcome {
  position: relative;
  box-sizing: border-box;
  margin-top: 14px;
  overflow: hidden;
  background: rgba(246,245,241,.9);
  border: 1px solid var(--bb-ui-line);
  box-shadow: 0 1px 2px #c4c2bd;
  height: 112px;
  padding: 0 30px;
  border-radius: 12px;
}

/* Character search belongs to the forum index only. */

.punbb:not(#pun-index) .bb-welcome {
  display: none !important;
}

.bb-character-copy strong {
  font: 500 17px/20px Georgia,serif;
  letter-spacing: .5px;
}

.bb-character-copy span {
  color: var(--bb-ui-subtle-text);
  font: 400 8px/12px Arial,sans-serif;
  letter-spacing: .6px;
}

.bb-character-list i:nth-child(2n) {
  background: linear-gradient(145deg,#b9b7b0,#626665);
}

/* Native user status inside the character-search panel */

.bb-character-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: uppercase;
  padding-left: 0;
}

#pun-status a,
#pun-crumbs1 {
  display: none;
}

/* Account link below the greeting */

#pun-status a,
#pun-status a:link,
#pun-status a:visited {
  display: inline;
  text-decoration: none;
}

#pun-status a:hover,
#pun-status a:focus,
#pun-status a:active {
  color: var(--bb-ui-red);
  text-decoration: none;
}

/* Status over the lower-left corner of the hero */

#pun-status {
  position: absolute;
  z-index: 12;
  margin: 0;
  border: 0;
  background: transparent;
  top: 410px;
  left: 38px;
  width: 345px;
  height: 48px;
}

#pun-status a,
#pun-status a:link,
#pun-status a:visited {
  color: #505250;
}

/* One shared corner radius */

:is(.bb-header, .bb-hero, .bb-useful, .bb-welcome),
#pun-index #pun-main {
  border-radius: 12px;
}

/* Readable status and balanced three-slot search */

#pun-status .container {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 500;
  color: var(--bb-ui-ink);
  font: 600 11px/15px Arial,sans-serif;
  text-shadow: 0 1px 1px rgba(255,255,255,.82);
}

#pun-status .container>span:last-child {
  display: block;
  float: none;
  margin: 5px 0 0;
  white-space: normal;
  margin-top: 1px;
}

#pun-status .container>span:last-child a {
  font: 500 8px/12px Arial,sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #3f4140;
  font-size: 9px;
  font-weight: 600;
}

.bb-character-search {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-left: 0;
}

.bb-character-list {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 8px;
}

.bb-character-list i {
  display: block;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: linear-gradient(145deg,#777a78,#c7c5bf);
  box-shadow: 0 0 0 1px var(--bb-ui-faint);
  width: 48px;
  height: 48px;
}

#pun {
  isolation: isolate;
}

/* Forum index: dark category bands and editorial forum rows */

#pun-index #pun-main {
  margin-top: 0;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

#pun-index .category h2 span {
  font: inherit;
}

#pun-index .category table {
  border-collapse: collapse;
}

#pun-index .category th {
  display: none;
}

#pun-index .category tr:last-child td {
  border-bottom: 0;
}

#pun-index .category .tcl:before {
  display: none;
}

#pun-index .category .tcl h3 a {
  color: var(--bb-ui-ink);
  text-decoration: none;
}

#pun-index .category .tcl h3 a:hover {
  color: var(--bb-ui-red);
}

#pun-index .category td.tcr a:hover {
  color: var(--bb-ui-red);
}

/* Tighter corners and paper extending above navigation */

#pun:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -20px;
  bottom: -20px;
  left: -20px;
  background: #f2f1ed url('https://forumstatic.ru/files/001c/c0/01/30751.jpg') center/627px 627px repeat;
  top: -24px;
  border-radius: 6px;
}

:is(.bb-header, .bb-hero, .bb-useful, .bb-welcome),
#pun-index #pun-main,
#pun-index .category {
  border-radius: 6px;
}

#pun-index .category .container {
  overflow: hidden;
  border: 0;
  background: rgba(246,245,241,.96);
  border-radius: 0 0 6px 6px;
}

/* MyBB already renders the last poster avatar */

/* Approved compact forum-category layout */

#pun-index .category {
  overflow: hidden;
  margin: 0 0 16px;
  border: 0;
  background: rgba(246,245,241,.94);
  box-shadow: 0 2px 5px rgba(55,54,51,.14);
  margin-bottom: 12px;
  border-radius: 6px;
}

#pun-index .category h2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  color: var(--bb-ui-nav);
  background: var(--bb-ui-dark);
  border: 0;
  font: 500 11px/44px Arial,sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  height: 48px;
  padding: 0 28px;
  background-color: var(--bb-ui-dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 6px 6px 0 0;
  font-size: 10px;
  line-height: 48px;
}

#pun-index #pun-category1 h2 {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/46174.jpg');
}

#pun-index #pun-category2 h2 {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/57989.jpg');
}

#pun-index #pun-category3 h2 {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/35365.jpg');
}

#pun-index #pun-category4 h2 {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/86130.jpg');
}

#pun-index #pun-category5 h2 {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/61178.jpg');
}

#pun-index .category td:is(.tc2, .tc3) {
  display: none;
}

#pun-index .category table,
#pun-index .category tbody {
  display: block;
  width: 100%;
}

#pun-index .category tr {
  display: grid;
  grid-template-columns: minmax(0,62fr) minmax(0,38fr);
  width: 100%;
}

#pun-index .category td.tcl {
  width: auto;
  padding: 12px 24px 12px 88px;
}

#pun-index .category td.tcr {
  position: relative;
  color: #626361;
  background: transparent;
  border-left: 1px solid #ddd9d1;
  font: 400 9px/15px Arial,sans-serif;
  width: auto;
  padding: 23px 20px 1px 106px;
}

#pun-index .category .tcl h3 {
  margin: 0 0 7px;
  font: 500 17px/21px Georgia,serif;
  letter-spacing: .2px;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 19px;
}

#pun-index .category .forumdesc {
  color: var(--bb-ui-muted);
  font: 400 9px/15px Arial,sans-serif;
  max-width: 460px;
  font-size: 10px;
  line-height: 15px;
}

#pun-index .category tbody.hasicon td.tcl {
  padding-left: 88px;
}

#pun-index .category table div.icon {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 16px;
  margin: -8px 0 0 -68px;
  background: transparent url('https://forumstatic.ru/files/001c/c0/01/15820.png') 0 0/32px 32px no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#pun-index .category table div.icon:before,
#pun-index .category table div.icon:after {
  display: none;
}

#pun-index .category table div.inew {
  background-position: 0 -16px;
  box-shadow: none;
}

#pun-index .category td.tcr img:first-of-type {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.78);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--bb-ui-faint);
  left: 52px;
  width: 38px;
  height: 38px;
  border-width: 2px;
}

#pun-index .category td.tcr a {
  color: var(--bb-ui-link);
  text-decoration: none;
  font-weight: 600;
  font-size: 9px;
  line-height: 13px;
}

#pun-index .category td {
  box-sizing: border-box;
  padding: 16px;
  border: 0;
  background: transparent;
  vertical-align: middle;
  height: 88px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 0;
}

#pun-index .category tbody tr {
  background-image: linear-gradient(var(--bb-ui-line),var(--bb-ui-line));
  background-position: center bottom;
  background-size: calc(100% - 32px) 1px;
  background-repeat: no-repeat;
}

#pun-index .category tbody tr:last-child {
  background-image: none;
}

#pun-index #pun-stats li#onlinelist {
  background-color: rgba(243,241,236,.96);
  background-image: linear-gradient(var(--bb-ui-author-line),var(--bb-ui-author-line));
  background-position: center top;
  background-size: calc(100% - 32px) 1px;
  background-repeat: no-repeat;
}

#pun-index .bb-forum-about {
  color: var(--bb-ui-muted);
  font: 400 10px/15px Arial,sans-serif;
}

#pun-index .bb-forum-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

#pun-index .bb-forum-links a {
  display: inline-block;
  padding: 3px 9px;
  color: var(--bb-ui-muted);
  background: var(--bb-ui-chip);
  border-radius: 5px;
  font: 400 9px/11px Arial,sans-serif;
  text-decoration: none;
  text-transform: lowercase;
}

#pun-index .bb-forum-links a:hover {
  color: var(--bb-ui-cream);
  background: var(--bb-ui-red);
}

#pun-ulinks a,
#pun-ulinks a:link,
#pun-ulinks a:visited {
  font-size: 8px;
  line-height: 12px;
}

/* Viewforum: remove the native rules above the topic actions and below the page */

/* Uploaded forum logo */

.bb-brand {
  margin-left: 30px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 90px;
  color: #ddd;
  border-radius: 50%;
  font-family: Georgia,serif;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  border: 0;
  background: transparent;
  text-decoration: none;
}

.bb-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Main navigation in the dark bar; utility links float below it */

#pun-navlinks,
#pun-navlinks .container,
#pun-navlinks ul,
#pun-navlinks li {
  height: 58px;
}

#pun-navlinks a,
#pun-navlinks a:link,
#pun-navlinks a:visited {
  font-size: 11px;
  line-height: 16px;
}

#pun-ulinks .container {
  padding: 0;
  border-top: 1px solid rgba(171,169,168,.14);
  box-sizing: border-box;
  height: 22px;
  border: 0;
  background: transparent;
}

#pun-ulinks ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  height: 22px;
}

/* Final vertical position */

#pun-navlinks {
  position: absolute;
  z-index: 20;
  left: 150px;
  width: 780px;
  margin: 0;
  border: 0;
  top: -2px;
}

#pun-ulinks {
  margin-top: 0;
  position: absolute;
  z-index: 20;
  left: 150px;
  width: 780px;
  margin: 0;
  border: 0;
  height: 22px;
  background: transparent;
  top: 56px;
}

/* Keep user-provided titles and descriptions inside the editorial grid. */

#pun-index .category .tcl h3,
#pun-index .category .forumdesc,
#pun-index .category td.tcr {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tablet layout: scale the approved composition instead of forcing 760–990px overflow. */

@media (min-width: 701px) and (max-width: 1050px) {
  :is(.bb-header, .bb-hero, .bb-useful) {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .bb-hero {
    left: 0;
    height: auto;
    aspect-ratio: 990/412;
    transform: none;
    background-size: 100% 100%;
  }

  .bb-news {
    right: 8.5%;
    min-width: 170px;
  }
}

/* Mobile layout: keep text navigation and remove page-wide horizontal scrolling */

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    background-attachment: scroll;
  }

  #pun,
  .bb-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0;
    margin-left: 0;
  }

  #pun {
    margin-bottom: 20px;
  }

  #pun:before {
    top: 0;
    right: 0;
    bottom: -10px;
    left: 0;
    border-radius: 0;
  }

  .bb-shell {
    margin-top: 0;
    margin-bottom: 10px;
  }

  .bb-header {
    width: 100% !important;
    height: 84px;
    min-height: 84px;
    margin-left: 0;
    border-radius: 0;
  }

  .bb-brand {
    position: absolute;
    z-index: 22;
    top: 4px;
    left: 6px;
    width: 64px;
    height: 64px;
    margin: 0;
    flex-basis: 64px;
  }

  #pun-navlinks {
    top: 0 !important;
    left: 72px !important;
    width: calc(100% - 72px) !important;
    height: 58px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #pun-navlinks .container {
    position: static !important;
    width: 100% !important;
    height: 58px !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #pun-navlinks ul {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    height: 58px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    box-sizing: border-box;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 !important;
    overflow: visible !important;
  }

  #pun-navlinks li {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }

  #pun-navlinks a,
  #pun-navlinks a:link,
  #pun-navlinks a:visited {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    overflow: visible !important;
    color: var(--bb-ui-nav) !important;
    background: none !important;
    border: 0 !important;
    text-indent: 0 !important;
    font: 400 8px/12px Arial,sans-serif !important;
    letter-spacing: .15px !important;
    text-align: center;
    text-transform: uppercase;
  }

  #pun-navlinks a:hover,
  #pun-navlinks a:focus,
  #pun-navlinks a:active,
  #pun-navlinks li.isactive a,
  #pun-navlinks li.isactive a:link,
  #pun-navlinks li.isactive a:visited {
    color: var(--bb-ui-red) !important;
    background: none !important;
  }

  #pun-ulinks {
    top: 58px !important;
    left: 0 !important;
    width: 100% !important;
    height: 26px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    background: var(--bb-ui-dark);
  }

  #pun-ulinks .container {
    width: 100% !important;
    height: 26px !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-top: 1px solid rgba(171,169,168,.14);
    scrollbar-width: none;
  }

  #pun-ulinks .container::-webkit-scrollbar {
    display: none;
  }

  #pun-ulinks ul {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px !important;
    white-space: nowrap;
  }

  #pun-ulinks li,
  #pun-ulinks a {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: none !important;
    text-indent: 0 !important;
  }

  #pun-ulinks a,
  #pun-ulinks a:link,
  #pun-ulinks a:visited {
    color: var(--bb-ui-nav) !important;
    font: 400 7.5px/12px Arial,sans-serif !important;
  }

  .bb-hero {
    left: 0;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 990/412;
    transform: none;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 0 0 6px 6px;
  }

  .bb-news {
    display: none;
  }

  .bb-useful {
    width: calc(100% - 16px);
    height: 48px;
    margin: -8px auto 0;
    padding: 0 4px;
  }

  .bb-useful a {
    min-width: 0;
    padding: 3px 4px;
    font-size: 7px;
    line-height: 10px;
    letter-spacing: .1px;
  }

  .bb-welcome {
    width: calc(100% - 16px);
    height: 90px;
    margin: 10px auto 0;
    padding: 12px;
  }

  .bb-character-search {
    gap: 10px;
  }

  .bb-character-copy {
    min-width: 0;
    gap: 4px;
  }

  .bb-character-copy strong {
    font-size: 14px;
    line-height: 16px;
  }

  .bb-character-copy span {
    font-size: 7px;
    line-height: 10px;
  }

  .bb-character-list {
    flex: 0 0 auto;
    gap: 6px;
    padding: 0;
  }

  .bb-character-list i {
    width: 30px;
    height: 30px;
    border-width: 2px;
  }

  #pun-status {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 24px);
    height: auto;
    margin: 8px 12px;
  }

  #pun-status .container {
    font-size: 9px;
    line-height: 14px;
  }

  #pun-index #pun-main {
    width: calc(100% - 16px);
    margin-right: auto;
    margin-left: auto;
  }

  #pun-index .category {
    width: 100%;
    margin-bottom: 10px;
  }

  #pun-index .category h2 {
    height: 42px;
    padding: 0 16px;
    font-size: 9px;
    line-height: 42px;
  }

  #pun-index .category table,
  #pun-index .category tbody,
  #pun-index .category tr {
    width: 100% !important;
    max-width: 100% !important;
  }

  #pun-index .category tr {
    display: grid;
    grid-template-columns: minmax(0,1fr);
  }

  #pun-index .category td {
    width: auto !important;
    max-width: 100% !important;
  }

  #pun-index .category td.tcl,
  #pun-index .category tbody.hasicon td.tcl {
    min-height: 76px;
    height: auto;
    padding: 12px 14px 12px 56px;
  }

  #pun-index .category table div.icon {
    margin-left: -44px;
  }

  #pun-index .category .tcl h3 {
    font-size: 14px;
    line-height: 18px;
  }

  #pun-index .category .forumdesc,
  #pun-index .bb-forum-about {
    max-width: none;
    font-size: 9px;
    line-height: 14px;
  }

  #pun-index .category td.tcr {
    min-height: 62px;
    height: auto;
    padding: 13px 12px 10px 62px;
    border-top: 0;
    border-left: 0;
    background-image: linear-gradient(var(--bb-ui-line),var(--bb-ui-line));
    background-position: center top;
    background-size: calc(100% - 24px) 1px;
    background-repeat: no-repeat;
  }

  #pun-index .category td.tcr img:first-of-type {
    left: 14px;
    width: 34px;
    height: 34px;
  }

  #pun-index #pun-stats:after {
    display: none;
  }

  #pun-index #pun-stats ul {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: auto;
  }

  #pun-index #pun-stats li:is(.item1, .item2, .item3, .item4) {
    min-height: 135px;
  }

  #pun-index #pun-stats li:is(.item2, .item4) {
    border-right: 0;
  }

  #pun-index #pun-stats li:is(.item3, .item4) {
    border-top: 0;
    background-image: linear-gradient(var(--bb-ui-author-line),var(--bb-ui-author-line));
    background-position: center top;
    background-size: calc(100% - 20px) 1px;
    background-repeat: no-repeat;
  }

  #pun-index #pun-stats li#onlinelist {
    grid-column: 1/-1;
    padding: 12px 14px;
  }

  #pun-index #pun-crumbs2 {
    width: 100%;
    border-radius: 0;
  }

  #pun-index #pun-about {
    height: auto;
    min-height: 46px;
    margin: 0;
    border-radius: 0 0 6px 6px;
  }

  #pun-index #pun-about:before {
    display: none;
  }

  #pun-index #pun-about .container {
    height: auto;
    min-height: 46px;
    padding: 15px 14px;
    text-align: center;
  }

  :is(.go-up, .go-down) {
    right: 6px;
    width: 44px;
  }
}

/*
 * =========================================================
 * FORUM PAGE: TOPIC LIST
 * Native MyBB markup, styled to match the approved index.
 * =========================================================
 */

#pun-viewforum {
  --bb-vf-surface: rgba(246,245,241,.96);
}

/* Inner pages keep their native navigation context. */

#pun-viewforum.punbb:not(.punbb-admin) #pun-crumbs1 {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0 !important;
  box-shadow: none;
}

#pun-viewforum #pun-crumbs1 .container {
  height: 46px;
}

#pun-viewforum #pun-crumbs1 strong {
  display: none;
}

#pun-viewforum #pun-main {
  position: relative;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--bb-vf-surface);
  color: var(--bb-ui-ink);
  box-shadow: none;
}

/* The breadcrumb already names the current location. */

#pun-viewforum #pun-main > h1 {
  display: none;
}

/* Pagination and create-topic controls. */

/* Viewforum topic-list geometry. Visual rules come from SHARED COLLECTIONS. */

#pun-viewforum #pun-main .forum .tcl {
  width: 50%;
}

#pun-viewforum #pun-main .forum :is(.tc2, .tc3) {
  width: 9%;
}

#pun-viewforum #pun-main .forum .tcr {
  width: 32%;
  padding-right: 24px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pun-viewforum #pun-main .forum .stickytext,
#pun-viewforum #pun-main .forum .closedatafield {
  display: none;
}

#pun-viewforum #pun-main .forum td.tcr > .user-avatar,
#pun-viewforum #pun-main .forum td.tcr img:first-of-type,
#pun-viewforum #pun-main .forum td.tcr .avatar-image,
#pun-viewforum #pun-main .forum td.tcr .isonline {
  display: none !important;
}

/* Moderator controls and the lower pagination continue the same card. */

/* Viewforum keeps only native-content and width deltas; visuals are shared. */

#pun-viewforum #pun-crumbs2 {
  width: 34%;
}

#pun-viewforum #pun-crumbs2 strong {
  display: none;
}

/* Rusff may append an empty iframe after the native footer. */

#pun-viewforum #pun-about + iframe {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

@media (max-width: 700px) {
  #pun-viewforum :is(#pun-crumbs1, #pun-main, #pun-crumbs2, #pun-about) {
    width: calc(100% - 16px);
    margin-right: auto;
    margin-left: auto;
  }

  #pun-viewforum #pun-crumbs1 .container {
    padding: 16px 14px;
  }

  #pun-viewforum #pun-main .forum th:is(.tc2, .tc3),
  #pun-viewforum #pun-main .forum td:is(.tc2, .tc3) {
    display: none;
  }

  #pun-viewforum #pun-main .forum .tcl {
    width: 58%;
  }

  #pun-viewforum #pun-main .forum .tcr {
    width: 42%;
  }

  #pun-viewforum #pun-crumbs2 {
    margin-top: 0;
    border-radius: 0 0 0 var(--bb-ui-radius);
  }
}

/* Дополнительные поля профиля: показываем только значение без системного названия. */

.post-author li[class*="pa-fld"] > .fld-name,
#pun-profile #viewprofile li[id^="pa-fld"] > .fld-name,
#pun-profile #viewprofile li[class*="pa-fld"] > .fld-name {
  display: none !important;
}

/* Footer cleanup: no decorative copyright or loose system divider below it. */

.punbb:not(.punbb-admin) #pun-about::before {
  content: none !important;
  display: none !important;
}

/*
 * Keep the HTML footer alive: it hosts the fixed up/down controls.
 * Collapse only its own layout so the old system divider stays invisible.
 */

.punbb:not(.punbb-admin) #html-footer {
  display: block !important;
  overflow: visible !important;
  width: auto !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* The quick-reply canvas should meet the footer without a loose bottom rule. */

#pun-viewtopic #pun-main > .formal,
#pun-viewtopic #pun-main > .formal > .container {
  border-bottom: 0 !important;
}

/* Keep long bottom breadcrumbs on one line beside the platform links. */

.punbb:not(.punbb-admin) #pun-crumbs2 .container {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 701px) {
  .punbb:not(.punbb-admin) #pun-crumbs2 {
    width: 70%;
  }
}

/*
 * =========================================================
 * EDITOR CORE
 * One native editor component for quick reply, full post pages and PM.
 * MyBB uses two wrapper shapes: #post-form contains form#post in topics,
 * while PM uses form#post containing #post-form. The component targets
 * both structures without changing the platform markup.
 * =========================================================
 */

:is(#pun-viewtopic, #pun-post) #post-form,
#pun-messages form#post {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--bb-ui-paper) !important;
  box-shadow: none !important;
}

#pun-viewtopic #post-form {
  overflow: hidden;
  border-radius: var(--bb-ui-radius) !important;
}

#pun-post #post-form {
  overflow: visible;
  border-radius: 0 !important;
}

#pun-messages form#post {
  overflow: visible;
  margin-top: 18px !important;
  border-radius: 0 !important;
}

:is(#pun-viewtopic, #pun-post) #post-form > h2 {
  display: none !important;
}

/* Editor canvas. */
:is(#pun-viewtopic, #pun-post) #post-form > #post.container,
#pun-messages form#post > #post-form {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 24px 26px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bb-ui-paper) !important;
  box-shadow: none !important;
}

/* Preview and native form sections. */
:is(#pun-viewtopic, #pun-post) #post-form fieldset,
#pun-messages form#post > fieldset {
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(var(--bb-ui-line), var(--bb-ui-line)) !important;
  background-position: center bottom !important;
  background-size: calc(100% - 32px) 1px !important;
  background-repeat: no-repeat !important;
}

:is(#pun-viewtopic, #pun-post) #post-form fieldset:last-of-type,
#pun-messages form#post > fieldset:last-of-type {
  background-image: none !important;
}

:is(#pun-viewtopic, #pun-post) #post-form fieldset > legend,
#pun-messages form#post > fieldset > legend {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bb-ui-editor-muted) !important;
  font: 500 10px/15px var(--bb-ui-font) !important;
  letter-spacing: .075em;
  text-transform: uppercase;
}

:is(#pun-viewtopic, #pun-post) #post-form fieldset > legend span,
#pun-messages form#post > fieldset > legend span {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

:is(#pun-viewtopic, #pun-post) #post-form :is(.fs-box, .areafield),
:is(#pun-viewtopic, #pun-post) #post-form .fs-box.hashelp,
:is(#pun-viewtopic, #pun-post) #post-form .areafield .input,
#pun-messages form#post :is(.fs-box, .areafield),
#pun-messages form#post .fs-box.hashelp,
#pun-messages form#post .areafield .input {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Native BBCode toolbar. */
:is(#pun-viewtopic, #pun-post) #post-form #form-buttons,
#pun-messages form#post #form-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0 !important;
  padding: 9px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--bb-ui-line) !important;
  border-radius: var(--bb-ui-radius) var(--bb-ui-radius) 0 0;
  background: #efede9 !important;
  scrollbar-width: thin;
}

:is(#pun-viewtopic, #pun-post) #post-form #form-buttons table,
#pun-messages form#post #form-buttons table {
  width: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 3px 0 !important;
  background: transparent !important;
}

:is(#pun-viewtopic, #pun-post) #post-form #form-buttons td,
#pun-messages form#post #form-buttons td {
  box-sizing: border-box;
  width: 25px !important;
  min-width: 25px;
  height: 25px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  background: transparent !important;
  opacity: .72;
  transition: border-color .16s ease, background-color .16s ease, opacity .16s ease;
}

:is(#pun-viewtopic, #pun-post) #post-form #form-buttons td:hover,
#pun-messages form#post #form-buttons td:hover {
  border-color: var(--bb-ui-line) !important;
  background: #e2dfd9 !important;
  opacity: 1;
}

:is(#pun-viewtopic, #pun-post) #post-form #form-buttons img,
#pun-messages form#post #form-buttons img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/* Message field. */
:is(#pun-viewtopic, #pun-post) #post-form #main-reply,
#pun-messages form#post #main-reply {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  height: 240px;
  min-height: 220px;
  margin: -1px 0 0 !important;
  padding: 18px 20px !important;
  resize: vertical;
  border: 1px solid var(--bb-ui-line) !important;
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius) !important;
  outline: 0;
  background: var(--bb-ui-editor-field) !important;
  color: var(--bb-ui-editor-muted) !important;
  font: 400 13px/1.65 var(--bb-ui-font) !important;
  box-shadow: inset 0 0 0 3px rgba(210, 206, 200, .22) !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

:is(#pun-viewtopic, #pun-post) #post-form #main-reply:focus,
#pun-messages form#post #main-reply:focus {
  border-color: var(--bb-ui-red) !important;
  box-shadow: inset 0 0 0 3px rgba(153, 87, 67, .08) !important;
}

/* Optional editor settings. */
:is(#pun-viewtopic, #pun-post) #post-form .checkfield,
#pun-messages form#post .checkfield {
  min-height: 24px;
  margin: 0;
  padding: 8px 0 0;
  color: var(--bb-ui-editor-muted);
  font: 400 10px/16px var(--bb-ui-font);
}

:is(#pun-viewtopic, #pun-post) #post-form .checkfield input,
#pun-messages form#post .checkfield input {
  min-height: 0;
  margin-right: 6px;
  padding: 0;
}

/* Submit row. PM uses an unclassed paragraph after #post-form. */
:is(#pun-viewtopic, #pun-post) #post-form .formsubmit,
#pun-messages form#post > #post-form + p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#pun-messages form#post > #post-form + p > span {
  float: none !important;
}

#pun-messages form#post > #post-form + p > span:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#pun-messages form#post > #post-form + p > .checkfield {
  margin-left: auto;
  padding-top: 0;
}

:is(#pun-viewtopic, #pun-post) #post-form .formsubmit input.button,
#pun-messages form#post > #post-form + p input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 92px;
  min-height: 34px;
  margin: 0 !important;
  padding: 8px 18px !important;
  border: 0 !important;
  border-radius: var(--bb-ui-radius) !important;
  background: var(--bb-ui-chip) !important;
  color: #666865 !important;
  font: 400 8px/1.2 var(--bb-ui-font) !important;
  letter-spacing: .35px;
  text-transform: uppercase;
  box-shadow: none !important;
  cursor: pointer;
}

:is(#pun-viewtopic, #pun-post) #post-form .formsubmit input.button:hover,
:is(#pun-viewtopic, #pun-post) #post-form .formsubmit input.button:focus,
#pun-messages form#post > #post-form + p input.button:hover,
#pun-messages form#post > #post-form + p input.button:focus {
  background: var(--bb-ui-red) !important;
  color: var(--bb-ui-paper) !important;
  outline: 0;
}

/* Preview uses the same paper and parsed-content component. */
:is(#pun-viewtopic, #pun-post) #post-form #post-preview,
#pun-messages form#post > #post-preview {
  margin: 0 0 20px !important;
  padding: 16px 18px 18px !important;
  border: 1px solid var(--bb-ui-line) !important;
  border-radius: var(--bb-ui-radius) !important;
  background: var(--bb-ui-editor-field) !important;
  background-image: none !important;
}

/* Toolbar popovers are part of Editor Core, not a full-page exception. */
:is(#pun-viewtopic, #pun-post) #post-form #tags > .container,
:is(#pun-viewtopic, #pun-post) #post-form #tags [id$="-area"],
#pun-messages form#post #tags > .container,
#pun-messages form#post #tags [id$="-area"] {
  border-color: var(--bb-ui-line) !important;
  border-radius: var(--bb-ui-radius);
  background-color: var(--bb-ui-editor-field) !important;
  color: var(--bb-ui-ink) !important;
  box-shadow: 0 3px 10px rgba(55, 54, 51, .14);
}

:is(#pun-viewtopic, #pun-post) #post-form #tags a,
#pun-messages form#post #tags a {
  color: var(--bb-ui-link);
}

:is(#pun-viewtopic, #pun-post) #post-form #tags a:hover,
#pun-messages form#post #tags a:hover {
  color: var(--bb-ui-red);
}

@media (max-width: 700px) {
  :is(#pun-viewtopic, #pun-post) #post-form > #post.container,
  #pun-messages form#post > #post-form {
    padding: 18px 14px 20px !important;
  }

  :is(#pun-viewtopic, #pun-post) #post-form #form-buttons,
  #pun-messages form#post #form-buttons {
    justify-content: flex-start;
  }

  :is(#pun-viewtopic, #pun-post) #post-form #form-buttons table,
  #pun-messages form#post #form-buttons table {
    margin: 0 !important;
  }

  :is(#pun-viewtopic, #pun-post) #post-form #main-reply,
  #pun-messages form#post #main-reply {
    height: 180px;
    min-height: 180px;
    padding: 14px 15px !important;
  }

  #pun-messages form#post > #post-form + p {
    align-items: flex-start;
  }

  #pun-messages form#post > #post-form + p > .checkfield {
    width: 100%;
    margin-left: 0;
  }
}

/* Carry the topic paper through the small layout gutter above the footer. */

#pun-viewtopic #pun-about::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 22px;
  background: var(--bb-ui-paper);
  pointer-events: none;
}

/*
 * =========================================================
 * FULL POST PAGE SHELL
 * The editor itself is defined once in SHARED MESSAGE EDITOR.
 * =========================================================
 */

#pun-post #pun-main {
  overflow: hidden;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 var(--bb-ui-radius) var(--bb-ui-radius) !important;
  background: var(--bb-ui-paper) !important;
  box-shadow: 0 1px 3px rgba(76, 72, 66, .18);
}

#pun-post #pun-main > h1 {
  box-sizing: border-box;
  min-height: 58px;
  margin: 0 !important;
  padding: 20px 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--bb-ui-paper) !important;
  background-image: linear-gradient(var(--bb-ui-line), var(--bb-ui-line)) !important;
  background-position: center bottom !important;
  background-size: calc(100% - 32px) 1px !important;
  background-repeat: no-repeat !important;
  color: var(--bb-ui-ink) !important;
  font: 500 18px/22px var(--bb-ui-serif) !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: none !important;
}

#pun-post #pun-main > h1 span {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 700px) {
  #pun-post #pun-main > h1 {
    min-height: 50px;
    padding: 16px 18px !important;
    font-size: 16px !important;
  }
}

/*
 * =========================================================
 * ADMIN: SHARED WARM PALETTE
 * Keep stock headings and controls on the shared warm palette.
 * =========================================================
 */

.punbb-admin {
  color: var(--bb-ui-ink);
  font-family: var(--bb-ui-font);
}

.punbb-admin #pun-admain,
.punbb-admin #pun-admain :is(.adcontainer, .container),
.punbb-admin #pun-admain fieldset,
.punbb-admin #pun-admain table,
.punbb-admin #pun-admain td {
  border-color: var(--bb-ui-line);
  background-color: var(--bb-ui-paper);
  color: var(--bb-ui-ink);
}

.punbb-admin #pun-admain :is(.adcontainer, .section, .formal, .info-box),
.punbb-admin #pun-admain fieldset {
  border-radius: 6px;
}

.punbb-admin #pun-admain h1,
.punbb-admin #pun-admain h2,
.punbb-admin #pun-admain h3 {
  border-color: var(--bb-ui-dark);
  background: var(--bb-ui-dark);
  color: var(--bb-ui-nav);
  font-family: var(--bb-ui-font);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.punbb-admin #pun-admain legend,
.punbb-admin #pun-admain legend span,
.punbb-admin #pun-admain th {
  border-color: var(--bb-ui-line);
  background: var(--bb-ui-soft);
  color: var(--bb-ui-red);
}

.punbb-admin #pun-admain a,
.punbb-admin #pun-admain a:link,
.punbb-admin #pun-admain a:visited {
  color: var(--bb-ui-link);
}

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

.punbb-admin #pun-admain input,
.punbb-admin #pun-admain select,
.punbb-admin #pun-admain textarea {
  box-sizing: border-box;
  border: 1px solid var(--bb-ui-line);
  border-radius: 6px;
  background: var(--bb-ui-paper);
  color: var(--bb-ui-ink);
  font-family: var(--bb-ui-font);
  accent-color: var(--bb-ui-red);
}

.punbb-admin #pun-admain input:focus,
.punbb-admin #pun-admain select:focus,
.punbb-admin #pun-admain textarea:focus {
  border-color: var(--bb-ui-red);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(153, 87, 67, 0.12);
}

.punbb-admin #pun-admain button,
.punbb-admin #pun-admain input[type="button"],
.punbb-admin #pun-admain input[type="submit"],
.punbb-admin #pun-admain input[type="reset"] {
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--bb-ui-chip);
  color: var(--bb-ui-muted);
  font: 600 10px/1.2 var(--bb-ui-font);
  box-shadow: none;
}

.punbb-admin #pun-admain button:hover,
.punbb-admin #pun-admain button:focus,
.punbb-admin #pun-admain input[type="button"]:hover,
.punbb-admin #pun-admain input[type="submit"]:hover,
.punbb-admin #pun-admain input[type="reset"]:hover {
  background: var(--bb-ui-red);
  color: var(--bb-ui-paper);
}

.punbb-admin #pun-admain tr,
.punbb-admin #pun-admain .divider {
  border-color: var(--bb-ui-line);
}

/*
 * =========================================================
 * JULY 19: SMALL CROSS-PAGE FIXES
 * Keep these overrides last: several older page-specific rules above
 * intentionally have the same specificity.
 * =========================================================
 */

/* The online list and the dark index footer must form one canvas. */

#pun-index :is(#pun-stats, #pun-crumbs2, #pun-about),
#pun-index #pun-stats li#onlinelist {
  margin-bottom: 0 !important;
}

/*
 * The service inserts an empty advertising section between statistics and
 * crumbs. Its default .section margin was the remaining visible gap.
 */

#pun-index #pun-stats + .section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Strong tags injected into action links must not restore bold text. */

:is(#pun-viewtopic, #pun-messages, #pun-post) .postlink a strong {
  font-weight: 400 !important;
}

/* Full reply page: compact native topic review. */

#pun-post #pun-main > .topic {
  box-sizing: border-box;
  overflow: visible !important;
  margin: 18px 26px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bb-ui-topic-ink);
}

#pun-post #pun-main > .topic > h2 {
  margin: 0 !important;
  padding: 15px 20px !important;
  border: 0 !important;
  border-radius: var(--bb-ui-radius) var(--bb-ui-radius) 0 0 !important;
  background: var(--bb-ui-dark);
  color: var(--bb-ui-nav);
  font: 500 11px/16px var(--bb-ui-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pun-post #pun-main > .topic > h2 span {
  color: inherit;
}

#pun-post #pun-main > .topic .post,
#pun-post #pun-main > .topic .post:last-child {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bb-ui-paper) !important;
  box-shadow: none !important;
  color: var(--bb-ui-topic-ink);
}

#pun-post #pun-main > .topic .post h3 {
  margin: 0 !important;
  padding: 10px 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bb-ui-topic-muted) !important;
  font: 400 11px/1.45 var(--bb-ui-font) !important;
}

#pun-post #pun-main > .topic .post h3 span {
  display: block;
  box-sizing: border-box;
  margin: 0 0 0 150px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
}

#pun-post #pun-main > .topic .post h3 strong {
  float: right;
  color: var(--bb-ui-red);
  font-weight: 500;
}

#pun-post #pun-main > .topic .post h3 strong::before {
  content: "#";
}

#pun-post #pun-main > .topic .post h3 a,
#pun-post #pun-main > .topic .post h3 a:visited {
  color: var(--bb-ui-topic-muted);
}

#pun-post #pun-main > .topic .post .container {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 82px !important;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--bb-ui-topic-ink);
}

#pun-post #pun-main > .topic .post-author {
  float: none !important;
  box-sizing: border-box;
  width: auto !important;
  margin: 0 !important;
  padding: 14px 18px 14px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bb-ui-topic-ink) !important;
  font: 400 13px/1.6 var(--bb-ui-font) !important;
  text-align: left !important;
}

#pun-post #pun-main > .topic .post-author p {
  margin: 0;
  padding: 0;
}

#pun-post #pun-main > .topic .pa-author {
  color: var(--bb-ui-topic-ink) !important;
  font: 400 15px/1.35 var(--bb-ui-serif) !important;
  text-transform: none;
}

#pun-post #pun-main > .topic .post-body {
  min-width: 0;
  min-height: 0 !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 14px 0 14px 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bb-ui-topic-ink) !important;
  font: 400 13px/1.6 var(--bb-ui-font) !important;
}

#pun-post #pun-main > .topic .post :is(.post-box, .post-content),
#pun-post #pun-main > .topic .post .post-content > p {
  box-sizing: border-box;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bb-ui-topic-ink) !important;
  font: 400 13px/1.6 var(--bb-ui-font) !important;
}

#pun-post #pun-main > .topic .post > .container::after {
  content: "" !important;
  display: block !important;
  grid-column: 1 / -1;
  clear: both;
  width: 100%;
  height: 1px;
  margin: 14px 0 -16px;
  overflow: visible;
  visibility: visible !important;
  background: var(--bb-ui-topic-line);
  font-size: 0;
  line-height: 0;
}

@media (max-width: 700px) {
  #pun-post #pun-main > .topic {
    margin-right: 14px !important;
    margin-left: 14px !important;
  }

  #pun-post #pun-main > .topic .post {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #pun-post #pun-main > .topic .post h3 span {
    margin-left: 0 !important;
  }

  #pun-post #pun-main > .topic .post .container {
    display: block !important;
  }

  #pun-post #pun-main > .topic :is(.post-author, .post-body) {
    padding: 10px 0 !important;
  }

  #pun-post #pun-main > .topic .post > .container::after {
    margin-top: 10px;
  }

  /*

 Mobile topic author card: avatar on the left, compact stats on the right.

 */
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author,
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background {
    align-self: start;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--bb-ui-radius);
    background-color: transparent !important;
    text-align: left !important;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author > ul,
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author > p,
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author ul,
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background > ul,
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background > p,
  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author.has-custom-author-background ul {
    position: relative;
    display: grid !important;
    grid-template-columns: 112px repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(44px, auto);
    gap: 0 10px;
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: var(--bb-ui-radius);
    background: var(--bb-ui-author-card);
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-avatar {
    display: block !important;
    float: none !important;
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: stretch;
    width: 112px !important;
    height: 132px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-avatar img {
    display: block !important;
    width: 112px !important;
    max-width: none !important;
    height: 132px !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 4px;
    object-fit: cover;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-author {
    display: block !important;
    float: none !important;
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: end;
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.15;
    text-align: left;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-title {
    display: block !important;
    float: none !important;
    grid-column: 2 / -1;
    grid-row: 2;
    margin: 3px 0 7px;
    font-size: 7px;
    text-align: left;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.pa-posts, .pa-positive, .pa-respect) {
    display: block !important;
    float: none !important;
    align-self: end;
    min-height: 42px;
    padding: 5px 2px 0;
    border-top: 1px solid var(--bb-ui-topic-line);
    font-size: 11px;
    text-align: center;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .pa-posts {
    grid-column: 2;
    grid-row: 3;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post :is(.pa-positive, .pa-respect) {
    grid-column: 3;
    grid-row: 3;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .pa-online {
    position: absolute;
    top: 13px;
    right: 12px;
    display: block !important;
    width: 6px;
    height: 6px;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #82be78;
    color: transparent;
    font-size: 0;
  }

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author .pa-online::before {
    content: none;
  }

  /* Long optional profile captions do not belong in the compact card. */

  :is(#pun-viewtopic, #pun-messages) #pun-main .post .post-author :is(.pa-fld1, .pa-fld2, .pa-fld4, .pa-fld5, .pa-fld6, .pa-last-visit) {
    display: none !important;
  }
}

/* Shared BBCode component: topic, full editor, preview and search results. */

:is(#pun-viewtopic, #pun-messages, #pun-post, #pun-searchposts) #pun-main .post-content :is(.quote-box, .code-box, .spoiler-box),
#pun-post #post-preview :is(.quote-box, .code-box, .spoiler-box) {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 1.1em !important;
}

:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content :is(.quote-box, .spoiler-box) > blockquote,
:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .code-box .scrollbox,
#pun-post #post-preview :is(.quote-box, .spoiler-box) > blockquote,
#pun-post #post-preview .code-box .scrollbox,
#pun-searchposts #pun-main .topic .post-content blockquote,
#pun-searchposts #pun-main .topic .post-content pre {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

:is(#pun-viewtopic, #pun-messages, #pun-post, #pun-searchposts) #pun-main .post-content :is(.quote-box, .code-box, .spoiler-box) p:last-child,
#pun-post #post-preview :is(.quote-box, .code-box, .spoiler-box) p:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Compact notification, message and profile actions in the main header. */

#pun-navlinks ul.bb-header-nav {
  --bb-header-nav-gap: clamp(12px, 2vw, 26px);
  align-items: center;
  justify-content: flex-start;
  gap: var(--bb-header-nav-gap);
}

#pun-navlinks ul.bb-header-nav > li.bb-header-action {
  align-self: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 58px;
}

#pun-navlinks ul.bb-header-nav > li.bb-header-notifications {
  margin-left: auto !important;
}

/* The action buttons form one compact group despite the wider menu spacing. */

#pun-navlinks ul.bb-header-nav > li.bb-header-action + li.bb-header-action {
  margin-left: calc(6px - var(--bb-header-nav-gap)) !important;
}

#pun-navlinks .bb-header-action-link {
  display: grid;
  place-items: center;
  width: 55px;
  height: 42px;
  padding-top: 5px !important;
  padding-left: 25px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#pun-navlinks .bb-header-action-link::before,
#pun-navlinks .bb-header-action-link::after {
  content: none !important;
}

#pun-navlinks .bb-header-action-icon {
  display: block;
  width: 55px;
  height: 42px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35px 35px;
  opacity: .84;
  transition: opacity .18s ease, transform .18s ease;
}

#pun-navlinks .bb-header-notifications .bb-header-action-icon {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/29290.png');
}

#pun-navlinks .bb-header-messages .bb-header-action-icon {
  background-image: url('https://forumstatic.ru/files/001c/c0/01/88456.png');
}

#pun-navlinks .bb-header-action-link:hover .bb-header-action-icon,
#pun-navlinks .bb-header-action-link:focus-visible .bb-header-action-icon {
  opacity: 1;
  transform: translateY(-1px);
}

#pun-navlinks :is(.bb-header-profile-avatar, .bb-header-profile-fallback) {
  display: block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(171, 169, 168, .72);
  border-radius: 50%;
  object-fit: cover;
  transition: border-color .18s ease, transform .18s ease;
}

#pun-navlinks .bb-header-profile-fallback {
  background: radial-gradient(circle at 50% 34%, var(--bb-ui-nav) 0 21%, transparent 22%),
    radial-gradient(ellipse at 50% 106%, var(--bb-ui-nav) 0 49%, transparent 50%),
    #3b3d3d;
}

#pun-navlinks .bb-header-profile .bb-header-action-link:hover :is(.bb-header-profile-avatar, .bb-header-profile-fallback),
#pun-navlinks .bb-header-profile .bb-header-action-link:focus-visible :is(.bb-header-profile-avatar, .bb-header-profile-fallback) {
  border-color: var(--bb-ui-red);
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  #pun-navlinks ul.bb-header-nav {
    justify-content: center !important;
  }

  /* Keep native navigation items textual on mobile. Only the three
     explicitly prepared header actions may replace their labels with art. */

  #pun-navlinks ul.container > li:not(.bb-header-action) > a,
  #pun-navlinks ul.container > li:not(.bb-header-action) > a:link,
  #pun-navlinks ul.container > li:not(.bb-header-action) > a:visited {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 3px 6px !important;
    background: none !important;
    color: var(--bb-ui-nav) !important;
    font: 400 8px/12px var(--bb-ui-font) !important;
    line-height: 12px !important;
    text-indent: 0 !important;
  }

  #pun-navlinks ul.container > li:not(.bb-header-action) > a::before,
  #pun-navlinks ul.container > li:not(.bb-header-action) > a::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  #pun-navlinks ul.container > li:not(.bb-header-action) > a > span {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    text-indent: 0 !important;
  }

  #pun-navlinks ul.container > li:not(.bb-header-action) > a :is(img, picture, svg) {
    display: none !important;
  }

  #pun-navlinks ul.bb-header-nav > li.bb-header-action {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
  }

  #pun-navlinks ul.bb-header-nav > li.bb-header-notifications {
    margin-left: 0 !important;
  }

  #pun-navlinks ul.bb-header-nav > li.bb-header-action + li.bb-header-action {
    margin-left: -4px !important;
  }

  #pun-navlinks ul.bb-header-nav > li.bb-header-action > a.bb-header-action-link {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #pun-navlinks .bb-header-action-icon {
    width: 24px;
    height: 24px;
    background-size: 29px 29px;
  }

  #pun-navlinks .bb-header-notifications .bb-header-action-icon {
    background-image: url('https://forumstatic.ru/files/001c/c0/01/29290.png') !important;
  }

  #pun-navlinks .bb-header-messages .bb-header-action-icon {
    background-image: url('https://forumstatic.ru/files/001c/c0/01/88456.png') !important;