/* =========================================================
   STYLE.CSS — LAYOUT & COMPONENT ARCHITECTURE
   Gaming UI 2026 Edition | foreumes.ru
   Pure CSS | Zero JavaScript
   ========================================================= */

@import url(style_cs.1785074219.css);

/* =========================================================
   A — RESET & NORMALIZATION
   ========================================================= */

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

html {
    min-height: 100vh;
    overflow-y: scroll;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    font: inherit;
}

/* =========================================================
   B — BASE TYPOGRAPHY
   ========================================================= */

.punbb {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.punbb h1,
.punbb h2,
.punbb h3,
.punbb h4 {
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.punbb a {
    color: var(--accent);
    text-decoration: none;
    transition:
        color var(--duration-normal) var(--ease-out),
        text-shadow var(--duration-normal) var(--ease-out);
}

.punbb a:hover,
.punbb a:focus {
    color: var(--accent-hover);
}

.punbb pre,
.punbb code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.punbb ul,
.punbb ol {
    list-style: none;
}

/* =========================================================
   C — LAYOUT & CONTAINERS
   ========================================================= */

#pun {
    max-width: var(--layout-max);
    margin-inline: auto;
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.punbb {
    width: 100%;
}

.punbb .container {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    background: var(--bg-surface);
}

.punbb .section,
.punbb .main,
.punbb .category,
.punbb .post {
    margin-bottom: var(--space-6);
}

.punbb .section h2,
#pun-main h1,
#pun-main h2,
#pun-stats h2,
#pun-debug h2 {
    padding: var(--space-3-5) var(--space-5);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: 1px solid var(--border-default);
    background: linear-gradient(135deg, var(--bg-surface-elevated), var(--bg-surface-raised));
    color: var(--text-primary);
}

/* Clearfix for legacy float-based elements */
.punbb .container::after,
.punbb .post-links ul::after,
.punbb .main div.inline::after,
.punbb .post-box::after,
.punbb .linksb::after {
    content: "";
    display: table;
    clear: both;
}

/* Screen-reader only utility */
.acchide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   D — HEADER
   ========================================================= */

#pun-title {
    display: none !important;
}

/* =========================================================
   E — NAVIGATION & TOP USER BAR (WITH AVATAR, MAIL, BELL, SEARCH)
   ========================================================= */

#pun-navlinks {
    margin-bottom: var(--space-4);
}

#pun-navlinks .container {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

#pun-navlinks ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    align-items: center;
}

#pun-navlinks li {
    display: flex;
}

/* Hide "Ïðîôèëü" and default "Ïîèñê" links from main navigation menu as requested */
#pun-navlinks li#navprofile,
#pun-navlinks li#navsearch,
#pun-navlinks li a[href*="profile"],
#pun-navlinks li a[href*="search"]:not(.nav-search-btn) {
    display: none !important;
}

#pun-navlinks li a {
    padding: var(--space-2-5) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text-secondary);
    transition:
        background var(--duration-normal) var(--ease-out),
        color var(--duration-normal) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

#pun-navlinks li a:hover,
#pun-navlinks li a:focus {
    background: var(--bg-hover-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
}

#pun-navlinks li.isactive a {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: var(--weight-bold);
}

/* =========================================================
   F — USER LINKS & NAV RIGHT WIDGET GROUP (Avatar, Mail, Bell, Search)
   ========================================================= */

#pun-ulinks {
    margin-bottom: var(--space-5);
}

#pun-ulinks .container {
    padding: var(--space-2);
    border: none;
    background: transparent;
}

/* Integration of the right-side nav bar matching reference design */
#pun-navlinks .nav-right-group,
#pun-ulinks ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Right block sub-container matching image_4961f8.png for User/Mail/Bell */
.nav-user-actions-group {
    display: flex;
    align-items: center;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

/* User identity pill (Avatar + Username or Login/Register) */
#pun-ulinks li.pa-user-widget,
.nav-user-profile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-1-5) var(--space-3-5) var(--space-1-5) var(--space-1-5);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-right: 1px solid var(--border-default);
}

/* Avatar circle style */
#pun-ulinks img.user-avatar,
.nav-user-avatar,
.punbb .user-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--accent);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* Mailbox Icon / Link */
#pun-ulinks a[href*="mail"],
#pun-ulinks a[href*="inbox"],
#pun-ulinks a[href*="messages"],
.nav-icon-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-default);
    transition: color var(--duration-normal) var(--ease-out);
}

#pun-ulinks a[href*="mail"]:hover,
#pun-ulinks a[href*="inbox"]:hover,
#pun-ulinks a[href*="messages"]:hover,
.nav-icon-mail:hover {
    color: var(--accent);
}

/* Bell Notification Icon / Link */
#pun-ulinks a[href*="notice"],
#pun-ulinks a[href*="notify"],
#pun-ulinks a[href*="alert"],
.nav-icon-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-out);
}

#pun-ulinks a[href*="notice"]:hover,
#pun-ulinks a[href*="notify"]:hover,
#pun-ulinks a[href*="alert"]:hover,
.nav-icon-bell:hover {
    color: var(--accent);
}

/* Search button/bar integrated at the end of the navigation block */
#pun-navlinks form[action*="search"],
#pun-ulinks form[action*="search"],
.nav-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: all var(--duration-normal) var(--ease-out);
    margin-left: var(--space-2);
}

#pun-navlinks form[action*="search"]:hover,
#pun-ulinks form[action*="search"]:hover,
.nav-search-btn:hover {
    background: var(--bg-surface-elevated);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

#pun-ulinks li {
    display: flex;
    border: none;
}

#pun-ulinks li a {
    padding: var(--space-2) var(--space-3-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    transition:
        background var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out),
        color var(--duration-normal) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

#pun-ulinks li a:hover,
#pun-ulinks li a:focus {
    background: var(--bg-surface-elevated);
    border-color: var(--border-accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Register / Login CTA button */
#pun-ulinks li.register-login-btn a,
#pun-ulinks li:last-child a:not(.nav-search-btn):not([href*="logout"]) {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--text-inverse);
    border: none;
    padding: var(--space-2) var(--space-5);
    box-shadow: var(--shadow-accent);
    font-weight: var(--weight-bold);
}

#pun-ulinks li.register-login-btn a:hover,
#pun-ulinks li:last-child a:not(.nav-search-btn):not([href*="logout"]):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent-lg);
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
}

/* =========================================================
   G — STATUS & BREADCRUMBS
   ========================================================= */

#pun-status,
#pun-crumbs1 {
    margin-bottom: var(--space-4);
}

#pun-status .container,
#pun-crumbs1 p.container {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

#pun-break1,
#pun-break4 {
    display: none;
}

/* Hide "upgrade account" links */
#pun-status .container a[href*="upgrade"],
#pun-status .container a[href*="pay"],
#pun-status .container a[href*="premium"],
#pun-status .container a[href*="vip"],
#pun-status .container a[href*="billing"],
#pun-status .container a[href*="services"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* =========================================================
   H — ANNOUNCEMENT
   ========================================================= */

#pun-announcement {
    margin-bottom: var(--space-6);
}

#pun-announcement .container {
    padding: var(--space-6);
    background: linear-gradient(145deg, var(--bg-surface-raised), var(--bg-surface));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
}

#pun-announcement h2 {
    position: static;
    margin: 0 0 var(--space-4) 0;
    padding: 0 0 var(--space-3) 0;
    border-bottom: 1px solid var(--border-default);
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    color: var(--accent);
    background: none;
}

#pun-announcement h2 span {
    display: inline-block;
    padding: 0;
    border: none;
    font-size: 0 !important;
    color: transparent !important;
}

#pun-announcement h2 span::after {
    content: "Îáúÿâëåíèÿ";
    font-size: var(--text-xl);
    color: var(--accent);
    visibility: visible;
}

#pun-announcement .post-content {
    min-height: 0;
    height: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* =========================================================
   I — CATEGORIES & FORUM TABLES
   ========================================================= */

.punbb .category .container {
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-default);
}

.punbb .main table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.punbb .main th {
    padding: var(--space-3) var(--space-5);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
    background: var(--bg-surface-raised);
}

.punbb .main td {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-default);
    vertical-align: middle;
    transition: background var(--duration-normal) var(--ease-out);
}

.punbb .main tr:last-child td {
    border-bottom: none;
}

.punbb .main tr:hover td {
    background: var(--bg-hover);
}

/* Column widths */
.punbb .main .tcl {
    width: 55%;
    overflow: hidden;
}

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

.punbb .main .tcr {
    width: 25%;
    overflow: hidden;
}

#pun-index .tcl h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-1-5);
    font-weight: var(--weight-bold);
}

#pun-index .tcl h3 a {
    color: var(--text-primary);
    transition: color var(--duration-normal) var(--ease-out);
}

#pun-index .tcl h3 a:hover {
    color: var(--accent);
}

.punbb .main .tcr {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.punbb .main .tcr a {
    color: var(--text-secondary);
}

.punbb .main .tcr a:hover {
    color: var(--accent);
}

/* ── Topic Icons ── */
.punbb div.icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: none;
    margin: 0;
    position: absolute;
    left: var(--space-5);
    background: var(--bg-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out);
}

.punbb div.inew {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    box-shadow: var(--glow-accent);
}

.punbb tbody.hasicon td.tcl {
    padding-left: 84px;
    position: relative;
}

/* =========================================================
   J — TOPIC VIEW
   ========================================================= */

#pun-viewtopic .post {
    margin-bottom: var(--space-5);
}

/* =========================================================
   K — POSTS
   ========================================================= */

.punbb .post {
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.punbb .post .container {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    border: none;
}

/* Post header */
.punbb .post h3 {
    width: 100%;
    order: 1;
    border-bottom: 1px solid var(--border-default);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-raised);
    color: var(--text-tertiary);
}

.punbb .post h3 span,
.punbb .post h3 strong {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    float: none;
}

.punbb .post h3 a[rel="bookmark"],
.punbb .post h3 .permalink {
    margin-inline: var(--space-1);
    color: var(--text-muted);
}

.punbb .post h3 a[rel="bookmark"]:hover,
.punbb .post h3 .permalink:hover {
    color: var(--accent);
}

/* Post author sidebar */
.punbb .post-author {
    width: var(--author-width);
    order: 2;
    flex-shrink: 0;
    padding: var(--space-6);
    background: var(--bg-surface-raised);
    border-right: 1px solid var(--border-default);
    float: none;
    margin: 0;
}

.punbb .post-body {
    flex: 1;
    min-width: 0;
    order: 3;
    padding: var(--space-6);
    margin: 0;
    border: none;
    float: none;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
}

.punbb .post-links {
    width: 100%;
    order: 4;
    margin: 0;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-top: 1px solid var(--border-default);
    background: var(--bg-surface-raised);
}

.punbb .post-links ul {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    height: auto;
    line-height: normal;
}

.punbb .post-links li {
    display: block;
    padding: 0;
}

.punbb .post-links a {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition:
        color var(--duration-normal) var(--ease-out),
        background var(--duration-normal) var(--ease-out);
}

.punbb .post-links a:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

/* ── Author Block Reordering ── */
.punbb .post-author ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.punbb .post-author li {
    order: 10;
}

/* Author name */
.punbb .post-author li.pa-author {
    order: 1;
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    margin-bottom: var(--space-3);
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    position: relative;
    width: max-content;
    max-width: 100%;
}

.punbb .post-author li.pa-author a:first-of-type {
    order: 1;
    color: var(--text-primary);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.punbb .post-author li.pa-author a:first-of-type:hover {
    color: var(--accent);
}

/* Activity indicator dot tightly coupled to nickname */
.punbb .post-author li.pa-author a:first-of-type::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--c-offline);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    flex-shrink: 0;
}

/* Online dot */
.punbb .post-author:has(li.pa-online) li.pa-author a:first-of-type::after {
    background-color: var(--c-online);
    box-shadow:
        0 0 8px rgba(0, 230, 118, 0.5),
        inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Search profile link */
.punbb .post-author li.pa-author a:nth-of-type(2),
.punbb .post-author li.pa-author span {
    order: 3;
    margin-left: var(--space-1);
    color: var(--text-muted);
}

/* Hide default online text */
.punbb .post-author li.pa-online {
    display: none !important;
}

/* ── CSS Tooltip for Activity ── */
.punbb .post-author li.pa-author a:first-of-type::before {
    content: "Ïîëüçîâàòåëü íåàêòèâåí";
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    transform: translateX(30%);
    width: max-content;
    max-width: 220px;
    background: var(--bg-surface-highest);
    color: var(--text-secondary);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-normal) var(--ease-out),
        visibility var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
    pointer-events: none;
    box-shadow: var(--shadow-xl);
    z-index: var(--z-tooltip);
}

.punbb .post-author:has(li.pa-online) li.pa-author a:first-of-type::before {
    content: "Ïîëüçîâàòåëü àêòèâåí";
    background: rgba(0, 230, 118, 0.12);
    border-color: rgba(0, 230, 118, 0.3);
    color: var(--c-online);
}

.punbb .post-author li.pa-author a:first-of-type:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(30%) translateY(2px);
}

/* Avatar */
.punbb .post-author li.pa-avatar {
    order: 2;
    margin-bottom: var(--space-3);
}

.punbb .post-author li.pa-avatar img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* User title / rank badge */
.punbb .post-author li.pa-title {
    order: 3;
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    align-self: flex-start;
}

/* ── Admin Red Badge ── */
.punbb .post.group1 .post-author li.pa-title,
.punbb .post.group-1 .post-author li.pa-title,
.punbb .user-group-1 li.pa-title {
    background: linear-gradient(135deg, var(--c-admin-bg), rgba(153, 27, 27, 0.25));
    border: 1px solid var(--border-admin);
    color: var(--c-admin) !important;
    box-shadow: var(--glow-admin);
    text-shadow: 0 0 8px var(--c-admin-glow);
}

.punbb .post.group1 .post-author li.pa-title::before,
.punbb .post.group-1 .post-author li.pa-title::before {
    content: "🛡️ ";
    font-size: 0.85em;
}

/* Post content */
.punbb .post-content {
    flex-grow: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.punbb .post-content p {
    margin-bottom: var(--space-4);
}

.punbb .post-content a {
    border-bottom: 1px solid var(--accent-soft);
    transition:
        color var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
}

.punbb .post-content a:hover {
    border-color: var(--accent);
}

/* Signature */
.punbb .post-sig {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

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

/* =========================================================
   L — USERNAME COLORS (ADMIN, MODERATOR, PARTICIPANT)
   ========================================================= */

:root {
    --c-mod:        #448aff;
    --c-mod-bright: #82b1ff;
    --c-mod-glow:   rgba(68, 138, 255, 0.35);

    --c-user:       #00e676;
    --c-user-bright:#69f0ae;
    --c-user-glow:  rgba(0, 230, 118, 0.35);
}

/* ── Àäìèíèñòðàòîð (Êðàñíûé) ── */
a.group1,
a.group-1,
span.group1 a,
span.group-1 a,
.post.group1 .pa-author a,
.post.group-1 .pa-author a,
.user-group-1 a.username {
    color: var(--c-admin) !important;
    text-shadow: 0 0 8px var(--c-admin-glow) !important;
    font-weight: var(--weight-bold) !important;
}

a.group1:hover,
a.group-1:hover,
span.group1 a:hover,
span.group-1 a:hover,
.post.group1 .pa-author a:hover,
.post.group-1 .pa-author a:hover,
.user-group-1 a.username:hover {
    color: var(--c-admin-bright) !important;
    text-shadow: 0 0 12px var(--c-admin-glow) !important;
}

/* ── Ìîäåðàòîð (Ñèíèé) ── */
a.group2,
a.group-2,
span.group2 a,
span.group-2 a,
.post.group2 .pa-author a,
.post.group-2 .pa-author a,
.user-group-2 a.username {
    color: var(--c-mod) !important;
    text-shadow: 0 0 8px var(--c-mod-glow) !important;
    font-weight: var(--weight-bold) !important;
}

a.group2:hover,
a.group-2:hover,
span.group2 a:hover,
span.group2 a:hover,
.post.group2 .pa-author a:hover,
.post.group-2 .pa-author a:hover,
.user-group-2 a.username:hover {
    color: var(--c-mod-bright) !important;
    text-shadow: 0 0 12px var(--c-mod-glow) !important;
}

/* ── Ó÷àñòíèê (Çåëåíûé) ── */
a.group3,
a.group-3,
span.group3 a,
span.group-3 a,
.post.group3 .pa-author a,
.post.group3 .pa-author a,
.user-group-3 a.username,
a.group4, a.group-4, span.group4 a, span.group-4 a, .post.group4 .pa-author a, .post.group4 .pa-author a, .user-group-4 a.username {
    color: var(--c-user) !important;
    text-shadow: 0 0 8px var(--c-user-glow) !important;
    font-weight: var(--weight-bold) !important;
}

a.group3:hover,
a.group-3:hover,
span.group3 a:hover,
span.group3 a:hover,
.post.group3 .pa-author a:hover,
.post.group3 .pa-author a:hover,
.user-group-3 a.username:hover,
a.group4:hover, a.group-4:hover, span.group4 a:hover, span.group4 a:hover, .post.group4 .pa-author a:hover, .post.group4 .pa-author a:hover, .user-group-4 a.username:hover {
    color: var(--c-user-bright) !important;
    text-shadow: 0 0 12px var(--c-user-glow) !important;
}

/* =========================================================
   M — QUOTES & CODE
   ========================================================= */

.punbb .quote-box,
.punbb .code-box {
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    background: var(--bg-void);
}

.punbb .quote-box cite,
.punbb .code-box strong.legend {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--accent);
    margin-bottom: var(--space-2);
    padding: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.punbb .code-box {
    border-left-color: var(--c-warning);
    overflow-x: auto;
    background: #000;
}

.punbb .code-box pre {
    margin: 0;
    padding: 0;
    white-space: pre;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
}

/* =========================================================
   N — PAGINATION & FORUM CONTROLS
   ========================================================= */

.punbb .linkst,
.punbb .linksb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-4) 0;
    height: auto;
    float: none;
    padding: 0;
    font-size: var(--text-base);
}

/* Force "ÑÒÐÀÍÈÖÀ" first before "ÒÅÌ / ÑÎÎÁÙÅÍÈÉ" */
.punbb .linkst .pagelink,
.punbb .linksb .pagelink,
.punbb .linkst p,
.punbb .linksb p {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.linkst .pagelink,
.linksb .pagelink,
.linkst .postlink,
.linksb .postlink {
    position: static;
    width: auto;
    text-align: left;
    float: none;
}

#pun-pagelinks {
    position: static;
    margin: 0;
}

#pun-pagelinks .container {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

#pun-pagelinks li {
    display: inline-flex;
}

#pun-pagelinks a,
#pun-pagelinks span.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    margin: 0;
    height: auto;
    line-height: 1;
    color: var(--text-secondary);
    transition:
        background var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out),
        color var(--duration-normal) var(--ease-out);
}

#pun-pagelinks a:hover,
#pun-pagelinks a:focus {
    background: var(--bg-hover-strong);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

#pun-pagelinks span.active,
#pun-pagelinks a:active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
    box-shadow: var(--glow-accent-sm);
    font-weight: var(--weight-bold);
}

/* Rename "Âñ¸ ïðî÷èòàíî" → "Ïîìåòèòü êàê ïðî÷èòàííîå" */
.punbb a[href*="markread"] {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.punbb a[href*="markread"]::after {
    content: "Ïîìåòèòü êàê ïðî÷èòàííîå";
    font-size: var(--text-sm) !important;
    color: var(--text-tertiary);
    visibility: visible;
    transition: color var(--duration-normal) var(--ease-out);
}

.punbb a[href*="markread"]:hover::after {
    color: var(--accent-hover);
}

/* =========================================================
   O — FORMS, INPUTS & BUTTONS
   ========================================================= */

.punbb fieldset {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: var(--bg-surface);
    position: relative;
}

.punbb fieldset legend span {
    padding: 0 var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--accent);
}

/* Inputs */
.punbb input[type="text"],
.punbb input[type="password"],
.punbb input[type="email"],
.punbb input[type="url"],
.punbb input[type="number"],
.punbb textarea,
.punbb select {
    width: 100%;
    max-width: 100%;
    padding: var(--space-2-5) var(--space-3-5);
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    transition:
        border-color var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        background var(--duration-normal) var(--ease-out);
}

.punbb input:focus,
.punbb textarea:focus,
.punbb select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-surface);
}

.punbb textarea {
    resize: vertical;
    min-height: 120px;
}

/* Buttons */
.punbb input[type="submit"],
.punbb input[type="button"],
.punbb button {
    padding: var(--space-2-5) var(--space-6);
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    cursor: pointer;
    transition:
        background var(--duration-normal) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out);
}

.punbb input[type="submit"]:hover,
.punbb input[type="button"]:hover,
.punbb button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}

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

.punbb input[type="submit"]:disabled,
.punbb input[type="button"]:disabled,
.punbb button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary button style */
.punbb input[type="button"].secondary,
.punbb button.secondary {
    background: var(--bg-surface-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.punbb input[type="button"].secondary:hover,
.punbb button.secondary:hover {
    background: var(--bg-surface-highest);
    border-color: var(--border-strong);
    color: var(--text-primary);
    box-shadow: none;
}

/* Checkboxes & Radios */
.punbb input[type="checkbox"],
.punbb input[type="radio"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Labels */
.punbb label {
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* =========================================================
   P — REMOVAL OF OLD FLOATING SEARCH (USING NEW NAV SEARCH INSTEAD)
   ========================================================= */

#pun-main {
    position: relative;
}

/* Old absolute search form removed in favor of integrated nav search block */
#pun-main > form[action*="search"] {
    display: none !important;
}

/* =========================================================
   Q — QUICKPOST & FORM OVERRIDES
   ========================================================= */

/* Offset quickpost legend text ~2 lines down */
.punbb #quickpost legend span,
.punbb #quickpost .post-box > p:first-child,
.punbb .formal fieldset .post-box legend span {
    display: inline-block;
    transform: translateY(2.5em);
    pointer-events: none;
}

/* Info boxes */
.punbb .info-box {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.punbb .info-box .legend {
    font-weight: var(--weight-bold);
    color: var(--accent);
    margin-bottom: var(--space-2);
    display: block;
}

/* =========================================================
   R — PROFILE & USER PAGES
   ========================================================= */

#viewprofile h2,
#profilenav h2 {
    background: linear-gradient(135deg, var(--bg-surface-elevated), var(--bg-surface-raised));
    color: var(--text-primary);
    padding: var(--space-3-5) var(--space-5);
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: 1px solid var(--border-default);
}

#viewprofile h2 span,
#profilenav h2 span {
    color: var(--accent);
    background: transparent;
}

#viewprofile ul,
#profilenav ul {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#viewprofile li,
#setmods dl {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
    padding: var(--space-3) var(--space-5);
}

#viewprofile li:last-child,
#setmods dl:last-child {
    border-bottom: none;
}

#viewprofile li strong,
#viewprofile li div,
#setmods dd {
    color: var(--text-secondary);
}

/* =========================================================
   S — MOD MENU (ADMIN MODERATION TOOLS)
   ========================================================= */

.punbb .modmenu {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.punbb .modmenu .container {
    background: linear-gradient(145deg, var(--bg-surface-raised), var(--bg-surface)) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) var(--space-6) !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: var(--text-base) !important;
    color: var(--text-primary) !important;
}

.punbb .modmenu .container * {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font-size: inherit !important;
}

.punbb .modmenu h2,
.punbb .modmenu legend,
.punbb .modmenu legend span {
    display: block !important;
    padding: 0 0 var(--space-3) 0 !important;
    margin: 0 0 var(--space-4) 0 !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--weight-bold) !important;
    color: var(--accent) !important;
    background: none !important;
    border-bottom: 1px solid var(--border-default) !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.punbb .modmenu form,
.punbb .modmenu fieldset {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.punbb .modmenu input[type="submit"],
.punbb .modmenu button,
.punbb .modmenu a.button {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: var(--text-inverse) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-sm) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-accent) !important;
    transition: transform var(--duration-fast) var(--ease-out), background var(--duration-normal) var(--ease-out);
}

.punbb .modmenu input[type="submit"]:hover,
.punbb .modmenu button:hover,
.punbb .modmenu a.button:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent)) !important;
}

/* =========================================================
   T — FOOTER & STATS
   ========================================================= */

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

#pun-stats .container {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

#pun-stats h2 {
    background: linear-gradient(135deg, var(--bg-surface-elevated), var(--bg-surface-raised));
    color: var(--text-primary);
}

#pun-stats .container .container {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    border: none;
    border-radius: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

#pun-stats a {
    color: var(--text-secondary);
}

#pun-stats a:hover {
    color: var(--accent);
}

#pun-about {
    display: none !important;
}

/* =========================================================
   U — SYSTEM CLEANUP & AD BLOCKING
   ========================================================= */

/* Dividers */
.punbb .divider,
.punbb hr {
    display: none !important;
}

/* Browser / OS / Agent info */
.pa-browser,
.pa-os,
.pa-agent,
.agent-info,
img[src*="/os/"],
img[src*="/browser/"],
img[src*="/agents/"],
.post-author li:has(img[src*="/os/"]),
.post-author li:has(img[src*="/browser/"]) {
    display: none !important;
}

/* RSS / Feed links */
.feedlink,
a[href*="action=feed"],
a[href*="type=rss"],
a[href*="type=atom"] {
    display: none !important;
}

/* Premium / Upgrade / Pay links */
.punbb a[href*="upgrade"],
.punbb a[href*="premium"],
.punbb a[href*="pay"],
.punbb a[href*="action=upgrade"],
.punbb a[href*="vip"],
.punbb a[href*="billing"],
.punbb a[href*="services"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Hide footer clutter */
#pun-crumbs2,
#brdfooter .copyright {
    display: none !important;
}

/* Ad containers */
#ad_top,
#ad_bottom,
#ad-top,
#ad-bottom,
.reklama,
.advertisement,
.ad-banner,
.banner-box,
.banner-container,
div[id^="yandex_rtb_"],
div[id^="Yandex_rtb_"],
div[id^="ad_block_"],
.adsbygoogle,
iframe[src*="yandex"],
iframe[src*="googleads"],
iframe[name*="google_ads_iframe"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* Hide post-bottom clutter */
.punbb #pun-main > .info-box:last-of-type,
.punbb #pun-main > .post-box ~ .info-box,
.punbb #pun-main > .post-box ~ .linksb,
.punbb #pun-main > .post-box ~ div:not(#pun-qe):not(form) {
    display: none !important;
}

/* =========================================================
   V — UTILITIES
   ========================================================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* =========================================================
   W — ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.punbb a:focus-visible,
.punbb button:focus-visible,
.punbb input:focus-visible,
.punbb textarea:focus-visible,
.punbb select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-contrast: more) {
    .punbb .post h3,
    .punbb .main th,
    .punbb fieldset {
        border-width: 2px;
    }

    .punbb .quote-box,
    .punbb .code-box {
        border-left-width: 4px;
    }
}

/* =========================================================
   X — RESPONSIVE DESIGN
   ========================================================= */

@media screen and (min-width: 1440px) {
    #pun {
        padding: var(--space-8) var(--space-6);
    }
}

@media screen and (max-width: 1024px) {
    .punbb .main .tcl {
        width: 50%;
    }

    .punbb .main .tcr {
        width: 30%;
    }

    .punbb .main .tc2,
    .punbb .main .tc3 {
        width: 10%;
    }
}

@media screen and (max-width: 768px) {
    #pun {
        padding: var(--space-3);
        margin: 0;
        gap: var(--space-4);
    }

    .punbb .section,
    .punbb .main,
    .punbb .category,
    .punbb .post {
        margin-bottom: var(--space-4);
    }

    .punbb .section h2,
    #pun-main h1,
    #pun-main h2,
    #pun-stats h2,
    #pun-debug h2 {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }

    .punbb .main table,
    .punbb .main tbody,
    .punbb .main tr,
    .punbb .main td,
    .punbb .main th {
        display: block;
        width: 100% !important;
    }

    .punbb .main thead {
        display: none;
    }

    .punbb .main tr {
        margin-bottom: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
    }

    .punbb .main td {
        border: none;
        padding: var(--space-4);
    }

    .punbb .main .tc2,
    .punbb .main .tc3 {
        display: inline-block;
        width: auto !important;
        padding-top: 0;
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .punbb tbody.hasicon td.tcl {
        padding-left: 68px;
    }

    .punbb div.icon {
        width: 36px;
        height: 36px;
        left: var(--space-4);
    }

    .punbb .post .container {
        flex-direction: column;
    }

    .punbb .post-author {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-default);
        padding: var(--space-4);
    }

    .punbb .post-author ul {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2-5);
    }

    .punbb .post-author li {
        order: 10;
        width: auto;
    }

    .punbb .post-author li.pa-author,
    .punbb .post-author li.pa-avatar,
    .punbb .post-author li.pa-title {
        margin-bottom: 0;
    }

    .punbb .post-author li.pa-author {
        width: 100%;
        margin-bottom: var(--space-2);
    }

    .punbb .post-body {
        padding: var(--space-4);
    }

    .punbb .post-links {
        padding: var(--space-3) var(--space-4);
    }

    .punbb .post-links ul {
        justify-content: center;
        gap: var(--space-3);
    }

    #pun-navlinks .container {
        padding: var(--space-2);
        flex-direction: column;
        align-items: stretch;
    }

    #pun-navlinks ul,
    #pun-navlinks .nav-right-group,
    #pun-ulinks ul {
        justify-content: center;
        margin-left: 0;
        width: 100%;
    }

    #pun-navlinks li a {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }

    .punbb .linkst,
    .punbb .linksb {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .punbb fieldset {
        padding: var(--space-4);
    }
}

@media screen and (max-width: 480px) {
    #pun {
        padding: var(--space-2);
    }

    .punbb .post h3 {
        padding: var(--space-2-5) var(--space-4);
        font-size: var(--text-xs);
        flex-direction: column;
        gap: var(--space-1);
        align-items: flex-start;
    }

    .punbb .main td {
        padding: var(--space-3);
    }

    #pun-navlinks ul {
        gap: var(--space-1);
    }

    #pun-navlinks li a {
        padding: var(--space-1-5) var(--space-2-5);
        font-size: var(--text-xs);
    }

    #pun-pagelinks a,
    #pun-pagelinks span.active {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }

    .punbb .post-author {
        padding: var(--space-3);
    }

    .punbb .post-body {
        padding: var(--space-3);
    }

    .punbb fieldset {
        padding: var(--space-3);
    }

    #pun-announcement .container {
        padding: var(--space-4);
    }
}

@media screen and (max-width: 360px) {
    .punbb .post-author li.pa-author {
        font-size: var(--text-md);
    }

    .punbb .post-links ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .punbb .quote-box,
    .punbb .code-box {
        padding: var(--space-3);
    }
}

@media screen and (min-width: 1920px) {
    #pun {
        max-width: 1600px;
        padding: var(--space-10) var(--space-8);
    }

    .punbb .post-author {
        width: 280px;
    }
}

/* =========================================================
   Y — PRINT STYLES
   ========================================================= */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    #pun-navlinks,
    #pun-ulinks,
    #pun-status,
    #pun-pagelinks,
    .punbb .post-links,
    #pun-announcement,
    .punbb .linkst,
    .punbb .linksb {
        display: none !important;
    }

    .punbb .post .container {
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .punbb .post-author {
        background: #f5f5f5 !important;
        border-right: 1px solid #ccc;
    }

    .punbb .post-body {
        background: #fff !important;
    }
}