html {
    scroll-behavior: smooth;
    /* Always reserve space for the vertical scrollbar so pages
       without scroll (pm_simple, short action pages) don't shift
       the centered layout by ~15 px when the user navigates to/from
       scrollable pages (forum index, topics). */
    overflow-y: scroll;
}

/* Post Action Icons - matching thread-watch-btn style */
.mnblnk.post-action-icon {
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin: 0 2px;
}

.mnblnk.post-action-icon:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    /* Neutralize the global A.mnblnk:hover translateX + underline —
       icons should just tint, not slide or underline. */
    transform: none;
    text-decoration: none;
}

.mnblnk.post-action-icon svg {
    display: block;
}

/* Admin Action Icons - white color to signal privileged actions */
a.mnblnk.admin-action-icon,
a.mnblnk.admin-action-icon:link,
a.mnblnk.admin-action-icon:visited,
a.mnblnk.admin-action-icon:active {
    opacity: 0.8 !important;
    color: #FFFFFF !important;
    transition: opacity 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin: 0 2px;
}

a.mnblnk.admin-action-icon:hover {
    opacity: 1 !important;
    color: #FFFFFF !important;
    transform: none !important;
    text-decoration: none !important;
}

.mnblnk.admin-action-icon svg {
    display: block;
}

/* Light theme: admin icons should be dark (white doesn't work on light bg) */
html:not([data-theme="dark"]) a.mnblnk.admin-action-icon,
html:not([data-theme="dark"]) a.mnblnk.admin-action-icon:link,
html:not([data-theme="dark"]) a.mnblnk.admin-action-icon:visited,
html:not([data-theme="dark"]) a.mnblnk.admin-action-icon:active {
    color: #1a1a1a !important;
}

html:not([data-theme="dark"]) a.mnblnk.admin-action-icon:hover {
    color: #000000 !important;
}

/* Copy notification modal */
.copy-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #2C2C2C, #1A1A1A);
    border: 1px solid #D8A063;
    border-radius: 8px;
    padding: 16px 24px;
    color: #FFFFFF;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    z-index: 10001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translate(-50%, -50%) scale(0.8);
}

.copy-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.copy-notification::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(145deg, #D8A063, #E4B876);
    border-radius: 8px;
    z-index: -1;
    opacity: 0.1;
}

/* Cryptocurrency Tooltip Styles */
.crypto-symbol {
    color: #D8A063;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: color 0.2s ease;
}

.crypto-symbol:hover {
    color: #E4B876;
}

.crypto-tooltip {
    position: absolute;
    background: linear-gradient(145deg, #2C2C2C, #1A1A1A);
    border: 1px solid #D8A063;
    border-radius: 8px;
    padding: 12px;
    min-width: 280px;
    max-width: 350px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: 'Roboto', Arial, sans-serif;
    color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* pointer-events: none; Removed to allow hovering over tooltip */
}

.crypto-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.crypto-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}

.crypto-tooltip-symbol {
    font-size: 16px;
    font-weight: bold;
    color: #D8A063;
}

.crypto-tooltip-price {
    font-size: 18px;
    font-weight: bold;
    color: #4CAF50;
}

.crypto-tooltip-price.negative {
    color: #F44336;
}

.crypto-tooltip-change {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.crypto-tooltip-change-value {
    font-size: 14px;
    font-weight: bold;
}

.crypto-tooltip-change-value.positive {
    color: #4CAF50;
}

.crypto-tooltip-change-value.negative {
    color: #F44336;
}

.crypto-tooltip-chart {
    height: 80px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
}

.crypto-tooltip-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #333;
}

.crypto-tooltip-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #999;
}

.crypto-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #333;
    border-top: 2px solid #D8A063;
    border-radius: 50%;
    animation: cryptoSpin 1s linear infinite;
    margin-right: 8px;
}

@keyframes cryptoSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .crypto-tooltip {
    background: linear-gradient(145deg, #1A1A1A, #0F0F0F);
    border-color: #D8A063;
    color: #FFFFFF;
}

[data-theme="dark"] .crypto-tooltip-chart {
    background: rgba(255, 255, 255, 0.03);
}

.gbody,
table.forums,
table.forumsmb,
.tbTransparent,
.tbTransparentmb,
.txtNr,
.txtSm,
.navCell,
.navCellSel,
.selectTxt,
.inputButton,
.textForm,
table.forumCol,
.hl,
.warning,
.captionTop,
td.tbClCp,
.headingTitle,
.capMenu {
    font-family: 'Roboto', Arial, Helvetica, 'Trebuchet MS', sans-serif, Geneva, 'Lucida Grande', Verdana, Tahoma, 'Lucida Sans Unicode';
}

EM,
I {
    font-family: 'Roboto', Georgia, 'Trebuchet MS', Geneva, Tahoma, Verdana, sans-serif, Arial, 'Lucida Sans Unicode', sans-serif;
}

table.forums,
table.forumsmb,
.tbTransparent,
.tbTransparentmb,
table.capMenu {
    width: 95%;
    max-width: 1400px;
}

table.forumsmb,
table.tbTransparentmb,
table.capMenu {
    margin-bottom: 20px;
}

table.forumsmbmob,
table.tbTransparentmbmob {
    margin-top: 5px;
    margin-bottom: 5px;
}

.tbTransparent,
.tbTransparentmb,
.txtNr,
.limbb,
UL,
.navCell,
.navCellSel,
.selectTxt,
.inputButton,
.textForm,
td.caption1,
td.caption3,
td.tbClCp,
td.caption5,
.groupTitle,
.caption2,
td.forumTitle,
.username,
.postedText,
td.pauthor,
.hl,
.warning,
.capMenu,
td.author,
td.latest,
.captionTop {
    font-size: calc(15px + 0.1vw);
}

.txtSm,
.quote,
.fdesc,
.fdescNum {
    font-size: 14px;
}

.txtSsm {
    font-size: 12px;
}

.headingTitle {
    font-size: 22px;
}

.tbTransparentCell,
.limbb,
UL,
td.caption1,
td.caption3,
td.tbClCp,
td.caption5,
td.author,
td.latest,
td.forumTitle,
.postedText,
td.pauthor,
.warning,
.warningLnk,
.tcell {
    line-height: 24px;
}

.prfW1 {
    width: 25%;
}

.prfW2 {
    width: 75%;
}

.prfFld {
    width: 250px;
}

/* Colors */

.gbody {
    background-color: #FAF9F6;
    color: #000000;
}

.txtSm,
.txtSsm,
.views,
.fdescNum,
.quote,
.quoting,
.captionTop {
    text-decoration: none;
    color: #707070;
}

.selectTxt,
.textForm {
    background: #FFFFFF;
}

.tbCel1 {
    background-color: #FEFFF9;
}

.tbCel2 {
    background-color: #F6F8ED;
}

.warning {
    color: #FF0000;
}

/* color 1 */

A.mnblnk:link,
A.mnblnk:active,
A.mnblnk:visited,
A.mnblnk:hover,
A.txtSm:link,
A.txtSm:active,
A.txtSm:visited,
.capMenu A:link,
.capMenu A:visited,
.capMenu A:active,
.groupTitle A:link,
.groupTitle A:active,
.groupTitle A:visited,
.postedText A:link,
.postedText A:active,
.postedText A:visited,
.postedText A:hover,
.fdesc A:link,
.fdesc A:active,
.fdesc A:visited,
.fdesc A:hover,
.headingTitle,
.groupTitle,
td.caption3,
.sepr,
.replies {
    color: #775454;
}

/* color 2 */

A.username:hover,
A.groupTitle:hover,
.capMenu A:hover,
.tbStBar,
td.forumTitle,
td.tbClCp,
.navCell,
.quote,
.sayings {
    background-color: #faf8f6;
}

/* color 3 */

.textForm,
.navCell,
.navCellSel,
.capMenu,
.scroll-to-top,
.scroll-to-btm,
.scroll-reload {
    border: 1px solid var(--post-border-color);
}

.hl {
    border-left: 4px solid #dadada;
}

td.tbClCp {
    border: 1px #dadada solid;
}

/* color 4 */

.postedTextCell,
.postedTextCellLeft {
    /* border-left removed — cleaner, no visual "cell divider" line */
}

.scroll-to-top,
.scroll-to-btm,
.scroll-reload,
.scroll-home,
A.scroll-to-btm:hover,
.pages {
    background-color: #DDDDDD;
}

/* color 5 */

.groupTitle,
.capMenu {
    background-color: #FFFFFF;
}

.quote {
    border-left: 7px solid #FFE25B;
}

.tbStBar {
    border: 1px solid #B7D395;
}

/******************/

A.username:hover,
A.groupTitle:hover,
.capMenu A:hover,
.postedText A:hover,
.fdesc A:hover,
.tbStBar {
    text-decoration: none;
}

A.mnblnk:link,
A.mnblnk:active {
    text-decoration: underline;
    transition: all 0.3s ease;
}

A.mnblnk:hover {
    text-decoration: underline;
    transform: translateX(2px);
    transition: all 0.3s ease;
}

/* Remove text-decoration for discussion title links that have custom underline */
.discussion-title-link.mnblnk:hover {
    text-decoration: none !important;
}

/* Also catch any mnblnk elements inside discussion-title-link */
.discussion-title-link:hover .mnblnk,
.discussion-title-link:hover A.mnblnk {
    text-decoration: none !important;
}

A.mnblnk:visited {
    text-decoration: none;
}

A.mnblnkn:link,
A.mnblnk:active,
A.mnblnk:visited,
A.mnblnk:hover,
.capMenu A:link,
.capMenu A:visited,
.capMenu A:active,
.capMenu A:hover {
    text-decoration: none;
}

.postedText A:link,
.postedText A:active,
.postedText A:visited,
.postedText A:hover {
    font-weight: bold;
}

.groupTitle {
    font-weight: bold;
    padding: 5px;
}

.groupTitle A:link,
.groupTitle A:active,
.groupTitle A:visited {
    font-weight: bold;
}

.navCell,
.navCellSel,
.textForm,
.tbStBar,
.scroll-to-top,
.scroll-to-btm,
.scroll-reload {
    border-radius: 3px;
}

.tcelllast A:link,
.tcelllast A:visited,
.tcelllast A:active,
.tcelllast A:hover {
    text-decoration: none;
    border: 1px #ccc solid;
    border-radius: 3px;
    padding: 2px;
    padding-top: 0px;
    padding-left: 3px;
    padding-bottom: 1px;
}

.tcelllastm A:link,
.tcelllastm A:visited,
.tcelllastm A:active,
.tcelllastm A:hover {
    text-decoration: none;
}

.navCellSel {
    background-color: transparent;
}

/******************/

* {
    margin: 0;
    padding: 0;
}

.popUp {
    padding: 10px;
}

.fPopUp {
    margin: 0px;
    overflow: hidden;
}


/* Block-style rules for CONTENT images only. The `:not([src*=".gif"])`
   excludes all GIFs (historically used for animated images), and the
   additional :not() on /smilies paths excludes smiley GIFs whose src
   may not end in .gif in all cases (e.g. dark-theme swaps). Smilies
   must stay inline — they're glyphs, not block media. */
.popUp img:not([src*=".gif" i]):not([data-src*="/smilies"]):not([src*="/smilies"]),
.postedText img:not([src*=".gif" i]):not([data-src*="/smilies"]):not([src*="/smilies"]),
.fPopUp img:not([src*=".gif" i]):not([data-src*="/smilies"]):not([src*="/smilies"]) {
    max-width: 100%;
    max-height: 650px;
    width: auto;
    height: auto;
    /* No `object-fit: contain` here: with both max-width + max-height
       applied to an <img>, Chrome sometimes sizes the element's box
       at the full max-width while the image content gets contained
       inside — leaving empty padding on one side (image appears
       off-center). object-fit is only meaningful when the element
       has an explicit size that differs from the intrinsic image
       aspect ratio, which isn't the case here (width/height are auto). */
    display: block;
    /* Block + margin-right: auto pins the image flush-left regardless
       of the parent's inline flow. Previously `inline-block` let the
       element box expand and text wrap around it visually.
       10px top/bottom gives breathing room now that the surrounding
       <br>s are hidden (see inner_posts.css). */
    margin: 10px auto 10px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* In-post image hover effect removed — the lift + shadow pop
   felt fidgety when scrolling past image-heavy threads. */

.formStyle {
    margin: 0px;
}

td {
    text-align: left;
}

img {
    border: 0px;
}

abbr {
    text-decoration: none;
    cursor: help;
}

.gbody {
    margin-top: 0px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
}

.navCell,
.navCellSel {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: 2px;
}

.warning {
    font-weight: bold;
    padding-top: 11px;
    padding-bottom: 11px;
}

table.forums,
table.forumsmb,
table.capMenu {
    display: table;

    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.tbTransparent,
.tbTransparentmb {
    border-collapse: collapse;
    background: transparent;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
}

/* Modern styling for tbTransparent subforum blocks - Complete redesign */
.tbTransparent.clps {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 16px auto;
    max-width: 1400px;
    width: 92%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.tbTransparent.clps:hover {
    border-color: var(--link-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.tbTransparentCell {
    text-align: left;
    vertical-align: top;
}

/* Modern subforum header - matches forum header style */
.tbTransparent.clps .tbTransparentCell:first-child {
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--cell-bg-2) 100%);
    border-bottom: none;
    padding: 20px 24px;
    font-weight: 700;
    color: var(--link-color);
    text-align: left;
    position: relative;
    overflow: hidden;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tbTransparent.clps .tbTransparentCell:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--link-color) 0%, var(--button-hover) 100%);
}

.tbTransparent.clps .tbTransparentCell:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(119, 84, 84, 0.05) 100%);
    pointer-events: none;
}

/* Modern subforum grid container */
.tbTransparent.clps .tbTransparentCell:not(:first-child) {
    background: var(--bg-color);
    border-bottom: none;
    padding: 12px 16px;
    position: relative;
}

/* Enhanced subforum text styling with block formatting */
.tbTransparent.clps .tbTransparentCell:not(:first-child) {
    display: block;
    padding: 16px 20px;
    line-height: 1.8;
}

/* Style each subforum link with enhanced block formatting */
.tbTransparent.clps .tbTransparentCell:not(:first-child) a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cell-bg-1);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    color: var(--link-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    min-height: 60px;
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a:hover {
    background: var(--cell-bg-2);
    border-color: var(--link-color);
    color: var(--button-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--link-color) 0%, var(--button-hover) 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

/* Enhanced subforum icon and title container */
.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--menu-bg) 0%, var(--cell-bg-2) 100%);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--link-color);
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a:hover .subforum-icon {
    background: linear-gradient(135deg, var(--link-color) 0%, var(--button-hover) 100%);
    color: white;
    border-color: var(--link-color);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(119, 84, 84, 0.3);
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--text-color);
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a:hover .subforum-title {
    color: var(--link-color);
    transform: translateX(4px);
}

/* Enhanced modern stats badge */
.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--menu-bg) 0%, var(--cell-bg-2) 100%);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color);
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    min-width: 60px;
    text-align: center;
}

.tbTransparent.clps .tbTransparentCell:not(:first-child) a:hover .subforum-stats {
    background: linear-gradient(135deg, var(--link-color) 0%, var(--button-hover) 100%);
    border-color: var(--link-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(119, 84, 84, 0.3);
}

/* Add subtle animation for better visual feedback */
.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-title,
.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-icon,
.tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-stats {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive design for subforums */
@media (max-width: 768px) {
    .tbTransparent.clps {
        width: 95%;
        margin: 12px auto;
        border-radius: 8px;
    }

    .tbTransparent.clps .tbTransparentCell:first-child {
        padding: 12px 16px;
        font-size: 14px;
    }

    .tbTransparent.clps .tbTransparentCell:not(:first-child) {
        padding: 10px 16px;
    }

    .tbTransparent.clps .tbTransparentCell:not(:first-child) a {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-stats {
        align-self: flex-end;
        font-size: 12px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .tbTransparent.clps .tbTransparentCell:first-child {
        padding: 10px 12px;
        font-size: 13px;
    }

    .tbTransparent.clps .tbTransparentCell:not(:first-child) {
        padding: 8px 12px;
    }

    .tbTransparent.clps .tbTransparentCell:not(:first-child) a {
        font-size: 13px;
    }

    .tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-stats {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* Dark theme enhancements for subforums */
[data-theme="dark"] .tbTransparent.clps {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tbTransparent.clps:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tbTransparent.clps .tbTransparentCell:first-child {
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--cell-bg-2) 100%);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tbTransparent.clps .tbTransparentCell:not(:first-child) {
    background: var(--cell-bg-2);
}

[data-theme="dark"] .tbTransparent.clps .tbTransparentCell:not(:first-child):hover {
    background: var(--cell-bg-1);
}

[data-theme="dark"] .tbTransparent.clps .tbTransparentCell:not(:first-child) a .subforum-stats {
    background: var(--cell-bg-1);
    border-color: var(--border-color);
}

[data-theme="dark"] .tbTransparent.clps .tbTransparentCell:not(:first-child) a:hover .subforum-stats {
    background: var(--cell-bg-2);
}

[data-theme="dark"] .subforums-container {
    border-color: var(--border-color);
    background-color: var(--cell-bg-1);
}

[data-theme="dark"] .subforums-header {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
    background-color: var(--cell-bg-2);
}

[data-theme="dark"] .subforum-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .subforum-icon {
    color: var(--text-color);
}

table.clps {
    border-collapse: separate;
}

table.forumCol {
    display: table;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.txtNr {
    text-decoration: none;
}

.limbb,
UL,
OL {
    padding-left: 13px;
    margin: 2px;
    margin-top: 0px;
}

UL {
    list-style: circle;
}

.inputButton {
    border: #775454 1px solid;
    background-image: linear-gradient(#775454, #775454);
    color: #FEFDFF;
    border-radius: 2px;
    font-weight: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    transition: transform 0.1s ease;
}

.inputButton:hover {
    border: #D8A063 1px solid;
    color: #FFFFFF;
    cursor: pointer;
    transition: border 0.3s;
}

.inputButton:active {
    transform: translateY(2px);
}

.textForm {
    padding: 2px;
}

td.caption1 {
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    text-align: left;
}

td.caption3 {
    width: 100%;
    font-weight: bold;
    padding: 3px;
}

td.icon {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.noWrap {
    white-space: nowrap;
}

.tbClCp,
td.caption5 {
    padding: 5px;
}

td.caption5 {
    padding-bottom: 6px;
}

.headingTitle {
    font-weight: bold;
}

td.rdficon {
    text-align: center;
    vertical-align: middle;
    padding-right: 3px;
    padding-left: 3px;
    border: 0px;
}

td.forumTitle,
td.captionTitle {
    padding: 5px;
}

.fdesc,
.fdescNum {
    padding: 3px;
    padding-bottom: 10px;
    line-height: 20px;
    vertical-align: top;
}

.username {
    font-weight: bold;
}

.post-source-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    margin-top: 3px;
    border-radius: 3px;
    background: rgba(0, 150, 136, 0.12);
    color: #009688;
    border: 1px solid rgba(0, 150, 136, 0.25);
    line-height: 1.4;
}

[data-theme="dark"] .post-source-badge {
    background: rgba(0, 150, 136, 0.2);
    color: #4db6ac;
    border-color: rgba(0, 150, 136, 0.35);
}

.postedText {
    padding-top: 8px;
    padding-bottom: 8px;
}

.postedLeftCell {
    vertical-align: top;
    padding-left: 5px;
    padding-top: 29px;
}

/* Hide the postedLeftCell column */
.postedLeftCell {
    display: none;
}

/* Modern td.pauthor Avatar Styling - Fixed Layout */
td.pauthor {
    padding: 16px 12px;
    vertical-align: top;
    width: 15%;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Wall Street Theme Avatar Effects */
td.pauthor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #32a852, #FFD700, #32a852);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

.pauthor img,
.pauthor-avatar {
    width: 56px;
    height: 56px;
    border-radius: 10%;
    object-fit: cover;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--cell-bg-1);
    display: block;
    margin: 0 auto;
    position: relative;
}

.pauthor img:hover,
.pauthor-avatar:hover {
    transform: scale(1.05);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.12);
    border-color: #32a852;
    filter: brightness(1.05);
}

.quote {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 3px;
    width: 90%;
}

.quoting {
    font-weight: bold;
    border-top: 0px;
    margin-left: 5px;
    width: 90%;
}

.hl {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 5px;
    width: 90%;
}

#newreply:hover,
#newtopic:hover {
    text-decoration: none;
    background-color: transparent;
}

.postingForm,
.topicTitle {
    width: 99%;
}

.postingForm {
    height: 250px;
    margin-bottom: 3px;
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Roboto', Arial, sans-serif;
}

.postingForm:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* Enhanced Formatting Help Styles */
#formatHelp {
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

#formatHelp strong {
    color: #495057;
}

#formatHelp span[style*="color"] {
    font-weight: bold;
}

/* Improved BB button spacing and hover effects */
.bb-svg-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.bb-svg-btn:active {
    transform: translateY(0);
}

.tbStBar,
td.caption5 td {
    padding: 2px;
    padding-left: 5px;
}

.tbStBar {
    margin: 9px;
}

.capMenu {
    vertical-align: middle;
    line-height: 24px;
}

.captionTop {
    padding: 5px;
}

.tcell {
    padding-top: 13px;
    padding-left: 5px;
    padding-right: 4px;
    padding-bottom: 2px;
}

.tcelllast,
.tcelllastm {
    padding-top: 7px;
    padding-bottom: 7px;
}

.tcellpn {
    padding-left: 25px;
}

.fcell {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 4px;
    padding-bottom: 2px;
}

.replies {
    font-weight: bold;
}

abbr.accr {
    border-bottom-width: 0px;
}

.subjectPad {
    padding-top: 4px;
    padding-bottom: 4px;
}

.pformBottom {
    padding-bottom: 13px;
}

.vTop {
    vertical-align: top;
}

.vmiddle {
    vertical-align: middle;
}

td.txtC {
    text-align: center;
}

td.txtL {
    text-align: left;
}

td.txtR {
    text-align: right;
}

.icon img.forumIcon {
    width: 35px;
    height: 35px;
    vertical-align: middle;
    border: 0px;
}

.headingTitle img.forumIcon {
    width: 30px;
    height: 30px;
    padding: 0 0 5px 0;
}


img.forumIcon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: 0px;
}

img.authorIcon {
    width: 12px;
    height: 9px;
    vertical-align: bottom;
    border: 0px;
    padding-bottom: 5px;
}

table.searchmb {
    margin-bottom: 5px;
}

.search-panel {
    background: var(--cell-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 auto 24px auto;
    width: 92%;
    max-width: 1400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-panel__form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.search-panel__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
    min-width: 200px;
}

.search-panel__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.search-panel__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--secondary-text);
}

.search-panel__option input[type="radio"] {
    margin: 0;
}

.search-panel__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    align-self: flex-end;
}

.search-panel__note {
    font-size: 12px;
    color: var(--secondary-text);
    margin: 0 0 6px;
}

.search-panel__status {
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--secondary-text);
}

.search-panel__status[data-state="error"] {
    color: #d32f2f;
}

.search-panel__status[data-state="loading"] {
    color: #1976d2;
}

.search-panel__status[data-state="hint"] {
    color: #455a64;
}

.search-panel__status[data-state="ready"] {
    color: #388e3c;
}

.search-panel__count {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-result {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--cell-bg-2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-result__title {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: inherit;
}

.search-result__meta {
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 8px;
}

.search-result__snippet {
    font-size: 13px;
    line-height: 1.5;
}

.search-result__snippet mark {
    background: #fff59d;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.inputButton.ghost {
    background: transparent;
    color: inherit;
    border: 1px solid var(--border-color);
}

@media (max-width:640px) {
    .search-panel__form {
        grid-template-columns: 1fr;
    }

    .search-panel {
        padding: 12px 14px;
        width: 95%;
        margin-bottom: 16px;
    }
}

@media (max-width:480px) {
    .search-panel {
        width: 100%;
        margin-bottom: 12px;
    }
}

.w100 {
    width: 100%;
}

.vmTP {
    padding-top: 10px;
}

.vmBT {
    padding-bottom: 10px;
}

wbr:after {
    content: "\00200B";
}

.watchIcon {
    padding-right: 4px;
}

.scroll-to-top,
.scroll-to-btm,
.scroll-reload {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
}

/* Give scroll-to-top (<a>), scroll-to-bottom (<a>) and reload (<button>)
   identical flex boxes so text arrows and SVGs line up in the same
   dimensions. */
.scroll-to-top,
.scroll-to-btm,
.scroll-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    min-width: 54px;
    box-sizing: border-box;
}

/* #reloadPageBtn is a <button> — reset UA defaults so it matches the
   sibling <a id="scrolltop"> in size/look. */
button.scroll-reload,
a.scroll-home {
    font: inherit;
    color: inherit;
    line-height: 1;
    background: inherit;
}

button.scroll-reload svg {
    width: 18px;
    height: 18px;
    display: block;
}

.scroll-controls {
    /* Anchored to the right edge of the main content column.
       Containers (modern-post-container / modern-discussions-container)
       cap at 1400px centred, so on wide viewports there's a gutter
       outside their right edge where these controls live. `left:
       calc(50% + 700px)` puts the left edge of this stack at the
       right edge of a 1400px-wide container; the transform nudges
       it 12px further out so it doesn't touch the content box. */
    position: fixed;
    left: calc(50% + 700px + 12px);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    z-index: 10;
}

/* Narrow viewports where the content fills the width — no gutter
   for the controls, so fall back to bottom-centre floating. */
@media (max-width: 1440px) {
    .scroll-controls {
        left: auto;
        right: 12px;
        top: auto;
        bottom: 20px;
        transform: none;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .scroll-controls {
        right: 8px;
        bottom: 12px;
        gap: 6px;
    }
}

.scroll-to-top,
.scroll-to-btm,
.scroll-reload {
    display: none;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Floating scroll/reload controls — transparent ghost buttons,
   just icons showing. Opacity bumped from 0.55 → 0.9 so the glyphs
   are clearly visible against page content without needing a pill
   background. Tan hover tint for feedback. */
.scroll-to-top,
.scroll-to-btm,
.scroll-reload,
.scroll-home,
A.scroll-to-btm:hover,
button.scroll-reload,
a.scroll-home {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--text-color, inherit);
    opacity: 0.9;
    transition: opacity 0.15s ease, color 0.15s ease,
                background 0.15s ease, transform 0.12s ease;
}

.scroll-to-top:hover,
.scroll-to-btm:hover,
.scroll-reload:hover,
.scroll-home:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.1) !important;
    transform: translateY(-1px);
}

.pages {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
}

/* Dark mode support for scroll-to buttons */
[data-theme="dark"] .scroll-to-top,
[data-theme="dark"] .scroll-to-btm,
[data-theme="dark"] .scroll-reload {
    background-color: var(--cell-bg-1);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] a.scroll-to-top:hover,
[data-theme="dark"] a.scroll-to-btm:hover,
[data-theme="dark"] .scroll-reload:hover,
[data-theme="dark"] .scroll-home:hover {
    background-color: var(--menu-hover, rgba(255, 255, 255, 0.08));
}

/* Hide the Home button when already on the forum index (action=""
   or "index") — pointless to offer a link to the page you're on. */
body[data-page-action=""] #scrollHome,
body[data-page-action="index"] #scrollHome {
    display: none;
}

.authtxtSm {
    display: block;
    font-family: 'Roboto', Arial, Helvetica, 'Trebuchet MS', sans-serif, Geneva, 'Lucida Grande', Verdana, Tahoma, 'Lucida Sans Unicode';
    font-size: 14px;
    text-decoration: none;
    color: #707070;
}

/* Moderator Badge */
.mod-badge {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #d4a017, #b8860b);
    padding: 2px 8px;
    border-radius: 3px;
    margin: 4px auto 2px auto;
    width: fit-content;
}

/* Modern Typography for User Info */
.pauthor .username,
.pauthor-username {
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    margin: 8px 0 4px 0;
    color: var(--text-color);
    line-height: 1.2;
    display: block;
}

.pauthor .authtxtSm,
.pauthor-meta {
    font-size: 14px;
    color: var(--secondary-text);
    text-align: center;
    line-height: 1.3;
    margin: 4px 0 0 0;
    display: block;
}

/* Responsive Design for Modern Avatars */
@media (max-width: 768px) {

    /* Make the post container display as block for vertical stacking */
    .modern-post-container table.forums {
        display: block !important;
        width: 100% !important;
    }

    .modern-post-container table.forums tbody {
        display: block !important;
    }

    .modern-post-container table.forums tr {
        display: block !important;
        width: 100% !important;
    }

    /* First row contains author info and post meta - make it horizontal */
    .modern-post-container table.forums tr:first-child {
        display: flex !important;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 8px;
        align-items: center;
        gap: 8px;
        /* Keep the 8 px padding INSIDE the 100 % row width so this
           header strip stays the same box width as the post-text
           row below (which uses border-box). Without this the row
           was 16 px wider than the content row and overflowed the
           viewport by 8 px on each side. */
        box-sizing: border-box;
    }

    /* Hide the left cell with the icon */
    .modern-post-container table.forums tr:first-child td.postedLeftCell {
        display: none !important;
    }

    /* Author info styling */
    .modern-post-container table.forums tr:first-child td.pauthor {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 0 !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        flex-shrink: 0;
    }

    .modern-post-container table.forums tr:first-child .pauthor img,
    .modern-post-container table.forums tr:first-child .pauthor-avatar {
        width: 32px;
        height: 32px;
        margin: 0;
        display: block;
        border-radius: 50%;
    }

    .modern-post-container table.forums tr:first-child .pauthor .username,
    .modern-post-container table.forums tr:first-child .pauthor-username {
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
    }

    .modern-post-container table.forums tr:first-child .pauthor .authtxtSm,
    .modern-post-container table.forums tr:first-child .pauthor-meta {
        font-size: 11px;
        margin: 2px 0 0 0;
        line-height: 1.1;
        color: #666;
        white-space: nowrap;
    }

    /* Post meta and actions - take remaining space */
    .modern-post-container table.forums tr:first-child td.txtSm {
        flex: 1;
        font-size: 11px;
        display: block !important;
        text-align: left;
        padding: 0 !important;
    }

    .modern-post-container table.forums tr:first-child td.txtSm.txtR {
        text-align: right;
        margin-top: 4px;
    }

    /* Second row contains the post content */
    .modern-post-container table.forums tr:last-child {
        display: block !important;
    }

    .modern-post-container table.forums tr:last-child td.postedTextCell {
        display: block !important;
        /* Match the 100 %-wide first row (header strip). 95 % here
           was leaving a visible 5 % offset that made the author
           row look wider than the post-content row on mobile. */
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        background: #fff;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    /* Make the post text more readable */
    .modern-post-container .postedText {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (min-width: 1024px) {
    td.pauthor {
        padding: 20px 16px;
        width: 18%;
    }

    .pauthor img,
    .pauthor-avatar {
        width: 64px;
        height: 64px;
    }

    .pauthor .username,
    .pauthor-username {
        margin: 10px 0 5px 0;
    }

    .pauthor .authtxtSm,
    .pauthor-meta {
        margin: 5px 0 0 0;
    }
}

/* Dark Theme Enhancements */
[data-theme="dark"] td.pauthor {
    border-color: var(--border-color);
}

[data-theme="dark"] .pauthor img,
[data-theme="dark"] .pauthor-avatar {
    border-color: var(--cell-bg-2);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .pauthor img:hover,
[data-theme="dark"] .pauthor-avatar:hover {
    transform: scale(1.05);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2);
    border-color: #32a852;
    filter: brightness(1.05);
}

/* Dark mode support for post content elements */
[data-theme="dark"] .caption1,
[data-theme="dark"] td.caption1 {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .caption5,
[data-theme="dark"] td.caption5 {
    background: var(--cell-bg-1);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .tbStBar,
[data-theme="dark"] td.tbStBar {
    background: var(--cell-bg-1);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .tbCel1,
[data-theme="dark"] td.tbCel1 {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .postedTextCell,
[data-theme="dark"] td.postedTextCell {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .postedText {
    color: var(--text-color);
}

/* Mobile dark mode enhancements for the new vertical layout */
@media (max-width: 768px) {
    [data-theme="dark"] .modern-post-container table.forums tr:first-child {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-color);
    }

    [data-theme="dark"] .modern-post-container table.forums tr:last-child td.postedTextCell {
        background: var(--cell-bg-1);
        border: 1px solid var(--border-color);
        color: var(--text-color);
    }

    [data-theme="dark"] .modern-post-container .postedText {
        color: var(--text-color);
    }
}

/* Rest of your existing CSS... */

/* Theme variables */
:root {
    --bg-color: #FAF9F6;
    --text-color: #000000;
    --cell-bg-1: #FEFFF9;
    --cell-bg-2: #F6F8ED;
    --link-color: #775454;
    --border-color: #dadada;
    --input-bg: #FFFFFF;
    --quote-bg: #FFEBC8;
    --quote-border: #FFE25B;
    --button-bg: #FFFFFF;
    --button-color: #775454;
    --secondary-text: #707070;
    --highlight-bg: #DDDDDD;
    --button-hover: #8a6565;
    --menu-bg: #FFFFFF;
    --menu-border: #dadada;
    --menu-hover: #FFEBC8;
    --post-border-color: #DDDDDD;
    --button-border: #775454;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #cac4c4;
    --cell-bg-1: #2d2d2d;
    --cell-bg-2: #333333;
    --link-color: #bb8f8f;
    --border-color: #404040;
    --input-bg: #404040;
    --quote-bg: #3d3629;
    --quote-border: #665024;
    --button-bg: #775454;
    --button-color: #FFFFFF;
    --secondary-text: #a0a0a0;
    --highlight-bg: #404040;
    --button-hover: #966b6b;
    --menu-bg: #2d2d2d;
    --menu-border: #404040;
    --menu-hover: #3d3629;
    --post-border-color: #404040;
}

/* Unified Menu Utility Buttons - Icon-only style */
.capMenu .menu-utility-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 4px !important;
    background: var(--cell-bg-2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-color);
    box-sizing: border-box;
    vertical-align: middle;
}

.capMenu .menu-utility-btn:hover {
    background: var(--hover-bg);
    border-color: var(--text-color);
    transform: scale(1.05);
    text-decoration: none;
}

.capMenu .menu-utility-btn svg {
    width: 16px;
    height: 16px;
    color: var(--text-color);
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.capMenu .menu-utility-btn:hover svg {
    color: var(--text-color);
}

/* Active state for toggle buttons */
.capMenu .menu-utility-btn[aria-pressed="true"] {
    background: var(--menu-hover);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Theme toggle icons - show sun in light mode (to switch to dark), moon in dark mode (to switch to light) */
.themeToggle .theme-icon-dark {
    display: none;
}

.themeToggle .theme-icon-light {
    display: block;
}

[data-theme="dark"] .themeToggle .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .themeToggle .theme-icon-light {
    display: none;
}

/* Add transitions for smooth theme switching */
body,
input,
textarea,
select,
.tbCel1,
.tbCel2,
.quote,
.navCell,
.navCellSel,
.textForm,
.inputButton {
    transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;
}

/* Update color properties to use variables */
.gbody {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin-top: 0px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
}

.txtSm,
.txtSsm,
.views,
.fdescNum,
.quote,
.quoting,
.captionTop {
    color: var(--secondary-text);
}

.selectTxt,
.textForm {
    background: var(--input-bg);
    color: var(--text-color);
}

.tbCel1 {
    background-color: var(--cell-bg-1);
}

.tbCel2 {
    background-color: var(--cell-bg-2);
}

/* Links */
A.mnblnk:link,
A.mnblnk:active,
A.mnblnk:visited,
A.mnblnk:hover,
A.txtSm:link,
A.txtSm:active,
A.txtSm:visited,
.capMenu A:link,
.capMenu A:visited,
.capMenu A:active,
.groupTitle A:link,
.groupTitle A:active,
.groupTitle A:visited,
.postedText A:link,
.postedText A:active,
.postedText A:visited,
.postedText A:hover,
.fdesc A:link,
.fdesc A:active,
.fdesc A:visited,
.fdesc A:hover,
.headingTitle,
.groupTitle,
td.caption3,
.sepr,
.replies {
    color: var(--link-color);
}

/* Update other elements to use theme variables */
.inputButton {
    border: 1px solid var(--button-border);
    background-image: linear-gradient(var(--button-bg), var(--button-bg));
    color: var(--button-color);
    border-radius: 5px;
    font-weight: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    transition: transform 0.1s ease;
}

.inputButton:hover {
    border: 1px solid var(--button-hover);
    color: var(--button-color);
    cursor: pointer;
    transition: border 0.3s;
}

.inputButton:active {
    transform: translateY(2px);
}

.quote {
    background-color: var(--quote-bg);
    border-left: 7px solid var(--quote-border);
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 3px;
    width: 90%;
}

/* Modern capMenu styles - aligned with .modern-user-login */
.capMenu {
    background: var(--cell-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 2px;
    margin: 15px auto 24px auto;
    max-width: 1400px;
    width: 95%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    vertical-align: middle;
    line-height: 24px;
}

.capMenu:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.capMenu a {
    color: var(--link-color) !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    padding: 4px 4px;
    border-radius: 4px;
}

.capMenu a:hover {
    background-color: var(--menu-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

/* If you need to adjust the separator color */
.capMenu .l_sepr {
    color: var(--secondary-text);
}

/* Additional styles for better visibility */
.capMenu td {
    color: var(--text-color);
    padding: 4px;
}

/* If you have a mobile menu switch, ensure it's visible */
.capMenu .mobileSwitch {
    color: var(--text-color);
}

/* Responsive design for capMenu */
@media (max-width: 768px) {
    .capMenu {
        width: 95%;
        padding: 12px;
        margin-bottom: 16px;
    }

    .capMenu td {
        padding: 2px;
        font-size: 14px;
    }

    .capMenu .menu-utility-btn {
        width: 28px;
        height: 28px;
        margin: 2px 3px !important;
    }

    .capMenu .menu-utility-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .capMenu {
        padding: 10px;
        margin-bottom: 12px;
    }

    .capMenu td {
        padding: 1px;
        font-size: 13px;
    }

    .capMenu a {
        padding: 2px 4px;
        font-size: 13px;
    }

    .capMenu .menu-utility-btn {
        width: 26px;
        height: 26px;
        margin: 2px !important;
    }

    .capMenu .menu-utility-btn svg {
        width: 13px;
        height: 13px;
    }
}

/* Dark theme enhancements for capMenu */
[data-theme="dark"] .capMenu {
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .capMenu:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Dark theme enhancements for navCell */
[data-theme="dark"] .navCell {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .navCell:hover {
    background-color: var(--cell-bg-1);
}

[data-theme="dark"] .navCell a {
    color: var(--link-color);
}

[data-theme="dark"] .navCell a:hover {
    color: var(--button-hover);
}

[data-theme="dark"] .navCellSel {
    background-color: var(--cell-bg-1);
    border-color: var(--link-color);
    color: var(--text-color);
}

/* Dark theme enhancements for txtSm pages noWrap block */
[data-theme="dark"] .txtSm {
    color: var(--secondary-text);
}

[data-theme="dark"] .txtSm.noWrap {
    color: var(--secondary-text);
    padding: 2px 4px;
    border-radius: 3px;
    background: var(--bg-color);
}

[data-theme="dark"] .txtSm a {
    color: var(--link-color);
}

[data-theme="dark"] .txtSm a:hover {
    color: var(--button-hover);
}

.upload-image-btn {
    display: inline-block;
    cursor: pointer;
    margin: 0 6px 0 0;
    padding: 0;
}

.upload-image-btn img {
    width: 22px;
    height: 22px;
}

/* Rest of your existing CSS... */

input[type="checkbox"] {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: #775454;
    border-color: #775454;
}

/* Notification table header styling */
table.forums .caption2 th {
    border: 1px solid var(--border-color);
    padding: 4px;
    background-color: var(--cell-bg-2);
    color: var(--text-color);
    font-weight: bold;
}

table.forums tbody tr.forums td {
    padding: 4px;
}

/* Code BBCode styling */
.code-container {
    position: relative;
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 40px 10px 10px; /* Extra right padding for copy button */
    margin: 1em 0;
    box-sizing: border-box;
    white-space: pre;
    overflow-x: auto;
    max-width: 100%;
    min-width: 80px; /* Minimum width to accommodate copy button */
}

.code-container pre {
    margin: 0;
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}

/* Dark theme support for code containers */
[data-theme="dark"] .code-container {
    background: #2d2d2d;
    border: 1px solid #555;
    color: #e0e0e0;
}

[data-theme="dark"] .code-container pre {
    color: #e0e0e0;
}

/* Spoiler styling */
.spoiler-container {
    margin: 1em 0;
}

.spoiler-toggle {
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0.5em;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.spoiler-toggle:hover {
    background-color: #e6e6e6;
    border-color: #bbb;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* Content collapsed: no border, no padding, no background */
.spoiler-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1em;
    /* Add horizontal padding for transition */
    border: 1px solid transparent;
    /* Change from dashed and set initial border */
    border-radius: 4px;
    /* Add radius to match content */
    background-color: transparent;
    transition:
        max-height 0.35s ease-in-out,
        padding-top 0.35s ease-in-out,
        padding-bottom 0.35s ease-in-out,
        background-color 0.35s ease-in-out,
        border-color 0.35s ease-in-out;
}

/* Content expanded: restore padding, border and background */
.spoiler-content.open {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: stable;
    padding: 1em;
    /* Restore padding */
    border-color: #e0e0e0;
    /* Restore border */
    background-color: #fdfdfd;
}

/* Button press effect for menu buttons */
.mnblnkn {
    display: inline-block;
    transition: transform 0.1s ease;
}

.mnblnkn:active {
    transform: translateY(2px);
}

/* Smaller link for original post inside quotes */
.quote a[href*="/msg.php"] {
    font-size: 0.75em;
    color: #666;
    margin-left: 0.5em;
    text-decoration: none;
}

/* Dark theme: dark background for spoilers */
[data-theme="dark"] .spoiler-toggle {
    background-color: #3a3a3a;
    border-color: #555;
    color: #eee;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .spoiler-toggle:hover {
    background-color: #444;
    border-color: #666;
}

[data-theme="dark"] .spoiler-content.open {
    background-color: transparent;
    border-color: #404040;
}

/* Dark theme: user profile page */
[data-theme="dark"] .forumsmb,
[data-theme="dark"] .forumsmb td,
[data-theme="dark"] .tbTransparentCell {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .forumsmb td.prfW1 {
    background-color: var(--cell-bg-1);
}

.avatar-winner {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.avatar-winner img {
    display: block;
}

.avatar-winner::after {
    content: '🏆';
    position: absolute;
    bottom: -5%;
    right: -5%;
    font-size: 1.5em;
    pointer-events: none;
    color: #ffcf4a;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    display: block !important;
    animation: trophy-glow 30s ease-in-out infinite;
    will-change: text-shadow;
}

@keyframes trophy-glow {

    0%,
    100% {
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.45), 0 0 0 rgba(255, 223, 0, 0.25);
    }

    35% {
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 240, 167, 0.55), 0 0 26px rgba(255, 255, 255, 0.35);
    }

    65% {
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.45), 0 0 9px rgba(255, 231, 122, 0.4), 0 0 18px rgba(255, 253, 220, 0.25);
    }
}

/* Copy Button */
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    text-indent: -9999px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.1s ease, opacity 0.3s ease;
}

.copy-btn::before,
.copy-btn::after {
    content: '';
    position: absolute;
    border: 2px solid #333;
    border-radius: 2px;
}

.copy-btn::before {
    top: 0;
    right: 0;
    width: 14px;
    height: 16px;
}

.copy-btn::after {
    top: 3px;
    right: 3px;
    width: 14px;
    height: 16px;
}

/* hover state */
.copy-btn:hover {
    opacity: 0.8;
}

.copy-btn:active {
    transform: scale(0.8);
    opacity: 0.6;
}

/* Custom: Hide <br> tags immediately following spoiler containers */
.spoiler-container+br {
    display: none;
}

/* Embedded Smilies Styles */
.smilies-basic {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.smilies-basic img {
    margin: 0 3px;
    vertical-align: middle;
    transition: transform 0.1s ease;
}

.smilies-basic img:hover {
    transform: scale(1.1);
}

.smilies-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1;
}

.smilies-more-link {
    font-size: 12px;
    transition: color 0.15s ease;
}

/* Override the global A.mnblnk:hover translateX + underline for
   chrome links that shouldn't shift sideways on hover. Kept as
   one grouped selector for future additions — just add your
   selector to the list. */
a.mnblnk.smilies-more-link:hover,
a.navCell.mnblnk:hover,
a.navCell.mnblnkn:hover {
    transform: none !important;
    text-decoration: none;
    color: var(--text-color);
}

.smilies-disable-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    transition: color 0.15s ease;
}

.smilies-disable-toggle:hover {
    color: var(--link-color, #D8A063);
}

.smilies-disable-toggle input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    accent-color: var(--link-color, #D8A063);
    cursor: pointer;
    flex: 0 0 auto;
}

.smilies-disable-toggle span {
    line-height: 1;
}

/* Smilies panel — modal window aligned with the rest of the refactor:
   thin tan hairline, soft layered shadow, backdrop blur, clean X
   button. Centering uses the CSS `translate` property so the open
   animation (which drives `transform: scale`) doesn't fight the
   centering offset. */
.smilies-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1001;
    width: 92vw;
    max-width: 520px;
    height: 72vh;
    max-height: 480px;
    padding: 18px 16px 16px;
    border-radius: 14px;
    background: var(--menu-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(215, 160, 99, 0.22);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .smilies-panel {
    border-color: rgba(215, 160, 99, 0.28);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 16px 48px rgba(0, 0, 0, 0.45);
}

.smilies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    align-items: flex-start;
    /* Aligns items to the top */
}

.smilies-row {
    display: contents;
}

.smiley-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.smiley-link:hover {
    background-color: var(--menu-hover);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.smiley-link:active {
    transform: scale(0.95);
}

.smiley-link img {
    vertical-align: middle;
    border: none;
}

/* Tooltip for smiley codes - REMOVED */

/* Modern toggle button styling */
#smilies-toggle {
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 13px;
    background-color: transparent;
}

#smilies-toggle:hover {
    background-color: var(--menu-hover);
    text-decoration: none;
}

/* Scrollbar styling for the panel */
.smilies-panel::-webkit-scrollbar {
    width: 6px;
}

.smilies-panel::-webkit-scrollbar-track {
    background: transparent;
}

.smilies-panel::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.smilies-panel::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-text);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .smilies-panel {
        width: 95vw;
        height: 75vh;
        max-height: 500px;
        padding: 12px;
    }

    .smiley-link {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
}

/* Medium screens (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .smilies-panel {
        max-width: 600px;
        max-height: 500px;
        border-radius: 10px;
    }

    .smiley-link {
        width: 36px;
        height: 36px;
        padding: 6px;
    }

    .smiley-link img {
        width: 20px;
        height: 20px;
    }
}

/* Dark theme support for smilies (panel handled above) */
[data-theme="dark"] .smiley-link:hover {
    background-color: var(--menu-hover);
}

[data-theme="dark"] #smilies-toggle:hover {
    background-color: var(--menu-hover);
}

[data-theme="dark"] .smiley-link::after {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
}

/* Smilies backdrop — dim + blur behind the panel */
.smilies-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(12, 8, 6, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.18s ease;
    will-change: opacity;
}
.smilies-backdrop.show { opacity: 1; }

/* Container positioning */
.smilies-container {
    display: inline-block;
    position: relative;
}

.smilies-panel .smilies-close-btn {
    position: absolute;
    top: 32px;
    right: 20px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--cell-bg-1);
    color: var(--secondary-text, #888);
    cursor: pointer;
    opacity: 0.45;
    z-index: 2;
    transition: opacity 0.15s ease, color 0.15s ease,
                background 0.15s ease;
    user-select: none;
}

[data-theme="dark"] .smilies-panel .smilies-close-btn {
    background: var(--cell-bg-2);
}

.smilies-panel .smilies-close-btn:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.12);
}

.smilies-panel .smilies-close-btn svg { display: block; }

/* Open animation — only drives transform:scale (and opacity). The
   -50%,-50% centering lives on the separate CSS `translate` property
   so this doesn't fight it and the panel no longer jumps into place
   after the zoom finishes. */
.smilies-panel {
    right: auto;
    transform: scale(0.94);
    opacity: 0;
    animation: smiliesOpen 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    will-change: transform, opacity;
}

@keyframes smiliesOpen {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 600px) {
    .smilies-panel {
        -webkit-user-select: none;
        user-select: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .smiley-link:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }

    #smilies-toggle {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }
    #smilies-toggle:active { transform: scale(0.95); }
}

/* Dark theme support for backdrop is removed as it's no longer needed */

[data-theme="dark"] #smilies-toggle:hover {
    background-color: var(--menu-hover);
}

/* Preview Modal Styles */
.preview-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: opacity;
}

.preview-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.preview-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: calc(100vw - 40px);
    max-width: 900px;
    max-height: calc(100vh - 40px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: opacity;
}

.preview-modal.show {
    opacity: 1;
    visibility: visible;
}

.preview-modal-content {
    background-color: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--cell-bg-1);
}

.preview-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
}

.preview-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--secondary-text);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
}

.preview-close:hover {
    background-color: var(--menu-hover);
    color: var(--text-color);
}

.preview-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    position: relative;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    /* Enhanced scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    /* Prevent horizontal scrolling */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Enhanced scrollbar styling for preview modal */
.preview-body::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

.preview-body::-webkit-scrollbar-track {
    background: var(--cell-bg-1);
    border-radius: 6px;
    margin: 4px 0;
}

.preview-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
    border: 2px solid var(--cell-bg-1);
    transition: background-color 0.2s ease;
}

.preview-body::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-text);
}

.preview-body::-webkit-scrollbar-thumb:active {
    background: var(--link-color);
}

/* Firefox scrollbar styling */
.preview-body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--cell-bg-1);
}

.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--secondary-text);
}

.preview-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--link-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.preview-content {
    padding: 0;
}

.preview-topic-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--cell-bg-1);
}

.preview-topic-title .headingTitle {
    margin: 0;
    color: var(--link-color);
}

.preview-post-section {
    padding: 20px;
    /* Ensure content doesn't overflow horizontally */
    max-width: 100%;
    box-sizing: border-box;
}

.preview-post-text .postedText {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-color);
    /* Prevent horizontal overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    /* Ensure images and other content fit */
    max-width: 100%;
}

/* Enhanced content scrolling for long posts */
.preview-post-text .postedText>* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure code blocks scroll horizontally if needed */
.preview-post-text .postedText .code-container {
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Ensure quotes don't overflow */
.preview-post-text .postedText .quote {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.preview-files-section {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--cell-bg-2);
}

.preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.preview-error-message {
    color: var(--secondary-text);
    margin-bottom: 16px;
    font-size: 16px;
}

.preview-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--cell-bg-1);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.preview-footer .inputButton {
    min-width: 80px;
    white-space: nowrap;
}

/* Hide scroll buttons on mobile if space is limited */
@media (max-width: 480px) {
    .preview-footer {
        gap: 8px;
    }

    .preview-footer .inputButton {
        min-width: 60px;
        font-size: 13px;
        padding: 3px 5px;
    }
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll indicators for better UX */
.preview-body::before,
.preview-body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.preview-body::before {
    top: 0;
    background: linear-gradient(to bottom, var(--menu-bg) 0%, transparent 100%);
    opacity: 0;
}

.preview-body::after {
    bottom: 0;
    background: linear-gradient(to top, var(--menu-bg) 0%, transparent 100%);
    opacity: 0;
}

.preview-body.scrolled-top::before {
    opacity: 1;
}

.preview-body.scrolled-bottom::after {
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .preview-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .preview-modal-content {
        border-radius: 8px;
    }

    .preview-header {
        padding: 12px 16px;
    }

    .preview-title {
        font-size: 16px;
    }

    .preview-topic-section,
    .preview-post-section {
        padding: 16px;
    }

    .preview-footer {
        padding: 12px 16px;
    }

    /* Enhanced mobile scrolling */
    .preview-body {
        /* Better momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        /* Prevent bounce effect */
        overscroll-behavior: contain;
    }

    /* Larger scrollbar on mobile for easier interaction */
    .preview-body::-webkit-scrollbar {
        width: 16px;
    }

    .preview-body::-webkit-scrollbar-thumb {
        border: 3px solid var(--cell-bg-1);
    }
}

@media (max-width: 480px) {
    .preview-modal {
        width: calc(100vw - 10px);
        max-height: calc(100vh - 10px);
    }

    .preview-modal-content {
        border-radius: 6px;
    }

    .preview-header {
        padding: 10px 12px;
    }

    .preview-topic-section,
    .preview-post-section {
        padding: 12px;
    }

    /* Even larger scrollbar on small screens */
    .preview-body::-webkit-scrollbar {
        width: 20px;
    }

    .preview-body::-webkit-scrollbar-thumb {
        border: 4px solid var(--cell-bg-1);
    }
}

/* Dark theme support */
[data-theme="dark"] .preview-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .preview-modal-content {
    background-color: var(--menu-bg);
    border-color: var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .preview-close:hover {
    background-color: var(--menu-hover);
}

[data-theme="dark"] .preview-spinner {
    border-color: var(--border-color);
    border-top-color: var(--link-color);
}

/* Themed confirm dialog — replaces native browser confirm() */
.bb-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.bb-confirm-backdrop.show {
    opacity: 1;
}

.bb-confirm-modal {
    background: var(--menu-bg, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    width: calc(100vw - 40px);
    max-width: 420px;
    padding: 20px 22px 16px;
    transform: scale(0.92);
    transition: transform 0.15s ease-out;
    color: var(--text-color, inherit);
}

.bb-confirm-backdrop.show .bb-confirm-modal {
    transform: scale(1);
}

.bb-confirm-message {
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 18px;
    word-wrap: break-word;
}

.bb-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.bb-confirm-btn {
    font: inherit;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #ccc);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    min-width: 84px;
}

.bb-confirm-btn:hover {
    background: var(--menu-hover, rgba(0, 0, 0, 0.05));
    border-color: var(--text-color, #888);
}

.bb-confirm-btn:active {
    transform: scale(0.97);
}

.bb-confirm-btn-primary {
    background: #D8A063;
    border-color: #D8A063;
    color: #fff;
}

.bb-confirm-btn-primary:hover {
    background: #c78f52;
    border-color: #c78f52;
}

.bb-confirm-btn-danger {
    background: #c9453f;
    border-color: #c9453f;
    color: #fff;
}

.bb-confirm-btn-danger:hover {
    background: #b03a35;
    border-color: #b03a35;
}

[data-theme="dark"] .bb-confirm-modal {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* Ensure modal content is properly styled */
.preview-post-text .postedText img {
    max-width: 100%;
    height: auto;
}

.preview-post-text .postedText .quote {
    background-color: var(--quote-bg);
    border-left: 7px solid var(--quote-border);
    margin: 16px 0;
    padding: 12px;
    border-radius: 4px;
}

.preview-post-text .postedText .code-container {
    background: var(--cell-bg-2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    margin: 16px 0;
    overflow-x: auto;
}

.preview-post-text .postedText a {
    color: var(--link-color);
    font-weight: bold;
}

.preview-post-text .postedText a:hover {
    text-decoration: underline;
}

/* Categorized Smilies Styles */
.smilies-categorized {
    overflow-y: auto;
    padding: 8px 0;
}

.smilies-category {
    margin-bottom: 16px;
}

.smilies-category:last-child {
    margin-bottom: 0;
}

.smilies-category-title {
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    color: var(--link-color);
    margin: 0 0 8px 0;
    padding: 4px 8px;
    background-color: var(--cell-bg-1);
    border-radius: 4px;
    border-left: 3px solid var(--link-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.smilies-category:first-child .smilies-category-title {
    padding-right: 44px;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.smilies-category .smilies-grid {
    padding: 0 4px;
}

/* Enhanced scrollbar for categorized smilies */
.smilies-categorized::-webkit-scrollbar {
    width: 8px;
}

.smilies-categorized::-webkit-scrollbar-track {
    background: var(--cell-bg-1);
    border-radius: 4px;
}

.smilies-categorized::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.smilies-categorized::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-text);
}

/* Firefox scrollbar */
.smilies-categorized {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--cell-bg-1);
}

/* Dark theme support for categorized smilies */
[data-theme="dark"] .smilies-category-title {
    background-color: var(--cell-bg-2);
    color: var(--link-color);
    border-left-color: var(--link-color);
}

[data-theme="dark"] .smilies-categorized::-webkit-scrollbar-track {
    background: var(--cell-bg-2);
}

[data-theme="dark"] .smilies-categorized::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

[data-theme="dark"] .smilies-categorized::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-text);
}

/* Mobile responsive for categorized smilies */
@media (max-width: 600px) {
    .smilies-category-title {
        font-size: 12px;
        padding: 3px 6px;
        margin-bottom: 6px;
    }

    .smilies-category {
        margin-bottom: 12px;
    }

    .smilies-category .smilies-grid {
        padding: 0 2px;
    }
}

/* Modern mobile BB buttons */
@media (max-width: 600px) {
    .mobile-bb-buttons {
        display: flex;
        flex-wrap: wrap;
        /* Removed gap for precise margin control */
        align-items: center;
        justify-content: flex-start;
        padding: 2px;
        /* Adjusted padding for balance */
        margin-bottom: 8px;
        background-color: var(--cell-bg-2);
        border-radius: 8px;
    }

    .mobile-bb-buttons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 2px;
        /* Added margin for consistent spacing */
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background-color: var(--cell-bg-1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .mobile-bb-buttons a:hover {
        background-color: var(--menu-hover);
        border-color: var(--link-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-bb-buttons a:active {
        transform: scale(0.95) translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .mobile-bb-buttons a img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
    }
}

@media (max-width: 600px) {
    .tbTransparent.txtL.vmiddle>table>tbody>tr>td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>a.bb-svg-btn,
    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>.bb-dropdown>a.bb-svg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background-color: var(--cell-bg-1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>a.bb-svg-btn:hover,
    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>.bb-dropdown>a.bb-svg-btn:hover {
        background-color: var(--menu-hover);
        border-color: var(--link-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>a.bb-svg-btn:active,
    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>.bb-dropdown>a.bb-svg-btn:active {
        transform: scale(0.95) translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>a.bb-svg-btn .bb-icon,
    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>.bb-dropdown>a.bb-svg-btn .bb-icon {
        width: 20px;
        height: 20px;
    }

    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>img {
        display: none;
    }

    .tbTransparent.txtL.vmiddle>table>tbody>tr>td>.bb-dropdown {
        display: flex !important;
        align-items: center;
    }
}

/* Special Tags Dropdown Styles */
.bb-dropdown {
    display: inline-block;
    position: relative;
}

.bb-dropdown-toggle {
    cursor: pointer;
    position: relative;
}

.bb-dropdown-menu {
    position: absolute;
    top: 25px;
    left: 0;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 120px;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-dropdown-menu[style*="block"] {
    opacity: 1;
    transform: translateY(0);
}

.bb-dropdown-item {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}

.bb-dropdown-item:last-child {
    border-bottom: none;
}

.bb-dropdown-item:hover {
    background-color: var(--menu-hover);
    color: var(--text-color);
}

/* Mobile dropdown styles */
.bb-dropdown-mobile {
    display: inline-block;
    position: relative;
}

.bb-dropdown-toggle-mobile {
    cursor: pointer;
    position: relative;
}

.bb-dropdown-menu-mobile {
    position: absolute;
    top: 22px;
    left: 0;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 100px;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-dropdown-menu-mobile[style*="block"] {
    opacity: 1;
    transform: translateY(0);
}

.bb-dropdown-item-mobile {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    transition: background-color 0.15s ease;
}

.bb-dropdown-item-mobile:last-child {
    border-bottom: none;
}

.bb-dropdown-item-mobile:hover {
    background-color: var(--menu-hover);
    color: var(--text-color);
}

/* Dark theme support */
[data-theme="dark"] .bb-dropdown-menu,
[data-theme="dark"] .bb-dropdown-menu-mobile {
    background: var(--menu-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .bb-dropdown-item,
[data-theme="dark"] .bb-dropdown-item-mobile {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .bb-dropdown-item:hover,
[data-theme="dark"] .bb-dropdown-item-mobile:hover {
    background-color: var(--menu-hover);
    color: var(--text-color);
}

/* SVG Button Styles */
.bb-svg-btn {
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bb-svg-btn:hover .bb-icon rect:first-child {
    fill: var(--menu-hover);
    stroke: var(--link-color);
}

.bb-svg-btn:active {
    transform: translateY(1px);
}

.bb-icon {
    display: block;
    transition: all 0.2s ease;
}

/* Mobile SVG Button Styles */
.bb-svg-btn-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bb-svg-btn-mobile:hover .bb-icon-mobile rect:first-child {
    fill: var(--menu-hover);
    stroke: var(--link-color);
}

.bb-svg-btn-mobile:active {
    transform: scale(0.95);
}

.bb-icon-mobile {
    display: block;
    transition: all 0.2s ease;
}

/* Update mobile button container to work with SVG */
@media (max-width: 600px) {
    .mobile-bb-buttons .bb-svg-btn-mobile {
        width: 36px;
        height: 36px;
        margin: 2px;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background-color: var(--cell-bg-1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .mobile-bb-buttons .bb-svg-btn-mobile:hover {
        background-color: var(--menu-hover);
        border-color: var(--link-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-bb-buttons .bb-svg-btn-mobile:active {
        transform: scale(0.95) translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .mobile-bb-buttons .bb-svg-btn-mobile .bb-icon-mobile {
        width: 20px;
        height: 20px;
    }
}

/* Ensure SVG buttons work with existing mobile styles */
.mobile-bb-buttons a.bb-svg-btn-mobile {
    display: inline-flex !important;
}

/* ========================================
   MODERN FORUM DESIGN STYLES
   ======================================== */

/* Modern User Login Container */
.modern-user-login {
    background: transparent;
    border: 1px solid rgba(215, 160, 99, 0.14);
    border-radius: 10px;
    margin: 0 auto 16px auto;
    /* Pixel-identical outer width with .capMenu + .modern-post-container:
       border-box + 95% / max 1400px. */
    box-sizing: border-box;
    max-width: 1400px;
    width: 95%;
    padding: 6px 10px;
    box-shadow: none;
    transition: border-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.modern-user-login:hover {
    border-color: rgba(215, 160, 99, 0.28);
}

[data-theme="dark"] .modern-user-login {
    border-color: rgba(215, 160, 99, 0.18);
}
[data-theme="dark"] .modern-user-login:hover {
    border-color: rgba(215, 160, 99, 0.32);
}

.user-login-content {
    padding: 0;
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

/* Username chip — tan pill with a live status dot.
   Replaces the bare <b>username</b> with a proper identity badge. */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(215, 160, 99, 0.22);
    background: rgba(215, 160, 99, 0.06);
    color: var(--link-color, #D8A063);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease,
                transform 0.12s ease;
}

.user-chip:hover {
    background: rgba(215, 160, 99, 0.14);
    border-color: rgba(215, 160, 99, 0.45);
    text-decoration: none;
    transform: translateY(-1px);
}

.user-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22);
    flex: 0 0 auto;
}

.user-chip-name { line-height: 1; }

/* Forums show/hide toggle — compact ghost button, tan hover.
   Chevron-up when expanded, chevron-down when collapsed. */
.forums-toggle-btn {
    background: rgba(215, 160, 99, 0.08);
    border: 1px solid rgba(215, 160, 99, 0.35);
    border-radius: 7px;
    height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--link-color, #D8A063);
    opacity: 1;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease,
                border-color 0.15s ease, transform 0.12s ease,
                box-shadow 0.15s ease;
}

.forums-toggle-btn:hover,
.forums-toggle-btn:focus-visible {
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.18);
    border-color: rgba(215, 160, 99, 0.6);
    box-shadow: 0 2px 6px rgba(215, 160, 99, 0.18);
    transform: translateY(-1px);
    outline: none;
}

.forums-toggle-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.forums-toggle-btn svg { display: block; }

.forums-toggle-text {
    line-height: 1;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
}

/* Login / register auth buttons — height/typography match .forums-toggle-btn
   for visual consistency across the top-bar row. */
.login-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-auth {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    font: 600 14px/1 'Roboto', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.02em;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 160ms ease,
                background-color 160ms ease, border-color 160ms ease,
                color 160ms ease;
    user-select: none;
}
.btn-auth:focus-visible {
    outline: 2px solid var(--link-color, #775454);
    outline-offset: 2px;
}
.btn-auth-primary {
    background: #775454;
    border-color: #775454;
    color: #fff;
    box-shadow: 0 1px 2px rgba(119, 84, 84, 0.25),
                0 1px 1px rgba(0, 0, 0, 0.04);
}
.btn-auth-primary:hover {
    background: #8a6161;
    border-color: #8a6161;
    box-shadow: 0 3px 8px rgba(119, 84, 84, 0.28),
                0 1px 2px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.btn-auth-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(119, 84, 84, 0.22);
}
.btn-auth-secondary {
    background: transparent;
    border-color: rgba(119, 84, 84, 0.35);
    color: #775454;
}
.btn-auth-secondary:hover {
    background: rgba(119, 84, 84, 0.08);
    border-color: #775454;
    color: #775454;
    transform: translateY(-1px);
}
.btn-auth-secondary:active {
    transform: translateY(0);
    background: rgba(119, 84, 84, 0.12);
}
[data-theme="dark"] .btn-auth-primary {
    background: #bb8f8f;
    border-color: #bb8f8f;
    color: #1a1a1a;
}
[data-theme="dark"] .btn-auth-primary:hover {
    background: #cda0a0;
    border-color: #cda0a0;
}
[data-theme="dark"] .btn-auth-secondary {
    border-color: rgba(187, 143, 143, 0.4);
    color: #bb8f8f;
}
[data-theme="dark"] .btn-auth-secondary:hover {
    background: rgba(187, 143, 143, 0.12);
    border-color: #bb8f8f;
}

/* Diary Button - extends menu-utility-btn */
.diary-btn {
    margin-left: 8px;
}

/* Chaos Button — transparent ghost with an amber border + fire icon.
   Quietly warm, not shouting. */
.chaos-btn {
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 6px;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease,
                border-color 0.15s ease;
    flex-shrink: 0;
    padding: 0 8px;
    gap: 6px;
    text-decoration: none;
    color: #F59E0B;
    box-shadow: none;
}

.chaos-btn:hover {
    background: rgba(245, 158, 11, 0.1);
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.9);
    color: #FBBF24;
}

.chaos-btn:active {
    transform: translateY(0);
}

.chaos-btn svg {
    color: currentColor;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.chaos-btn:hover svg {
    transform: scale(1.08);
}

.chaos-btn-text {
    color: currentColor;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

/* Chaos Effects */
@keyframes burnEffect {
    0% {
        box-shadow: 0 0 0 rgba(255, 68, 68, 0);
        background: var(--cell-bg-1);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 0.8), inset 0 0 20px rgba(255, 68, 68, 0.3);
        background: linear-gradient(45deg, #ff4444, #ff6666, #ff4444);
    }

    100% {
        box-shadow: 0 0 30px rgba(255, 68, 68, 1), inset 0 0 30px rgba(255, 68, 68, 0.5);
        background: linear-gradient(45deg, #ff6666, #ff8888, #ff6666);
    }
}

@keyframes fireFlicker {

    0%,
    100% {
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        filter: hue-rotate(10deg) brightness(1.2);
    }

    50% {
        filter: hue-rotate(-10deg) brightness(0.9);
    }

    75% {
        filter: hue-rotate(15deg) brightness(1.1);
    }
}

@keyframes fallDown {
    0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(1000px);
        opacity: 0.3;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-1deg);
    }

    75% {
        transform: translateX(5px) rotate(1deg);
    }
}

@keyframes glitchText {
    0% {
        text-shadow: 0 0 0 transparent;
    }

    10% {
        text-shadow: 2px 0 0 #ff4444, -2px 0 0 #4444ff;
    }

    20% {
        text-shadow: 0 0 0 transparent;
    }

    30% {
        text-shadow: -2px 0 0 #ff4444, 2px 0 0 #4444ff;
    }

    40% {
        text-shadow: 0 0 0 transparent;
    }
}

@keyframes particle {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.chaos-burning {
    animation: burnEffect 0.8s ease-in-out, fireFlicker 0.3s infinite alternate;
    position: relative;
    z-index: 999;
}

.chaos-falling {
    animation: fallDown 3s ease-in forwards;
    position: relative;
    z-index: 1000;
}

.chaos-shaking {
    animation: shake 0.5s infinite;
}

.chaos-glitch {
    animation: glitchText 0.2s infinite;
}

.chaos-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ff4444, #ff6666);
    border-radius: 50%;
    pointer-events: none;
    animation: particle 2s ease-out forwards;
}

.chaos-active body {
    animation: shake 0.2s infinite;
    overflow: hidden;
}

/* INSANE CHAOS EFFECTS 🤯 */
@keyframes explode {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }

    50% {
        transform: scale(3) rotate(180deg);
        opacity: 0.7;
        filter: blur(2px) hue-rotate(360deg);
        box-shadow: 0 0 100px rgba(255, 68, 68, 1);
    }

    100% {
        transform: scale(0.1) rotate(720deg);
        opacity: 0;
        filter: blur(10px) hue-rotate(720deg);
    }
}

@keyframes rainbowChaos {
    0% {
        filter: hue-rotate(0deg) saturate(1);
    }

    25% {
        filter: hue-rotate(90deg) saturate(2) brightness(1.5);
    }

    50% {
        filter: hue-rotate(180deg) saturate(3) brightness(2);
    }

    75% {
        filter: hue-rotate(270deg) saturate(2) brightness(1.5);
    }

    100% {
        filter: hue-rotate(360deg) saturate(1);
    }
}

@keyframes matrixRain {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes tornado {
    0% {
        transform: rotate(0deg) scale(1) translateX(0);
    }

    100% {
        transform: rotate(1440deg) scale(0.2) translateX(200px);
    }
}

@keyframes lightning {

    0%,
    90%,
    100% {
        background: transparent;
        box-shadow: none;
    }

    5%,
    10%,
    15%,
    20% {
        background: linear-gradient(45deg, #fff, #ffff00, #fff);
        box-shadow: 0 0 50px #ffff00, inset 0 0 50px rgba(255, 255, 255, 0.8);
    }
}

@keyframes multiply {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }

    100% {
        transform: scale(2);
        opacity: 0.3;
    }
}

@keyframes psychedelic {
    0% {
        filter: contrast(1) brightness(1) hue-rotate(0deg) blur(0px);
        transform: skew(0deg) scale(1);
    }

    20% {
        filter: contrast(2) brightness(1.5) hue-rotate(72deg) blur(1px);
        transform: skew(5deg) scale(1.1);
    }

    40% {
        filter: contrast(3) brightness(2) hue-rotate(144deg) blur(2px);
        transform: skew(-5deg) scale(0.9);
    }

    60% {
        filter: contrast(2) brightness(1.8) hue-rotate(216deg) blur(1px);
        transform: skew(3deg) scale(1.2);
    }

    80% {
        filter: contrast(1.5) brightness(1.2) hue-rotate(288deg) blur(0.5px);
        transform: skew(-3deg) scale(0.95);
    }

    100% {
        filter: contrast(1) brightness(1) hue-rotate(360deg) blur(0px);
        transform: skew(0deg) scale(1);
    }
}

@keyframes screenCrack {
    0% {
        background: transparent;
        opacity: 0;
    }

    10% {
        background: linear-gradient(45deg, transparent 40%, #000 42%, #000 43%, transparent 45%);
        opacity: 0.8;
    }

    100% {
        background: linear-gradient(45deg, transparent 40%, #000 42%, #000 43%, transparent 45%);
        opacity: 0;
    }
}

@keyframes melt {
    0% {
        transform: scaleY(1) scaleX(1);
        border-radius: 0;
    }

    100% {
        transform: scaleY(0.1) scaleX(1.5);
        border-radius: 50px 50px 0 0;
        margin-top: 200px;
    }
}

.chaos-exploding {
    animation: explode 2s ease-out forwards;
}

.chaos-rainbow {
    animation: rainbowChaos 0.5s infinite;
}

.chaos-tornado {
    animation: tornado 3s ease-in-out forwards;
}

.chaos-lightning {
    animation: lightning 0.3s ease-in-out forwards;
}

.chaos-multiplying {
    animation: multiply 1s ease-out forwards;
}

.chaos-psychedelic {
    animation: psychedelic 1s infinite;
}

/* ULTIMATE CHAOS CLEANUP - NUCLEAR OPTION */
.chaos-restored *,
.chaos-restored *::before,
.chaos-restored *::after {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    background: inherit !important;
    box-shadow: none !important;
    border-radius: inherit !important;
    opacity: inherit !important;
}

/* Emergency override - stops ALL chaos immediately */
.chaos-emergency-stop * {
    animation: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 0 !important;
    transform: translate(0, 0) rotate(0deg) scale(1) !important;
    filter: none !important;
    transition: none !important;
    background: var(--cell-bg-1) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    position: static !important;
}

body.chaos-emergency-stop {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.chaos-melting {
    animation: melt 2s ease-in forwards;
}

/* 🔥💥 ULTIMATE VISUAL CHAOS - BURNING, FLYING, EXPLODING MADNESS! 💥🔥 */

/* INTENSE BURNING FIRE EFFECTS */
@keyframes superFire {
    0% {
        background: var(--cell-bg-1);
        box-shadow: 0 0 0 transparent;
        filter: hue-rotate(0deg) brightness(1) contrast(1);
    }

    25% {
        background: linear-gradient(45deg, #ff4400, #ff6600, #ff8800, #ffaa00);
        box-shadow:
            0 0 20px #ff4400,
            0 0 40px #ff6600,
            0 0 60px #ff8800,
            inset 0 0 20px #ff4400;
        filter: hue-rotate(30deg) brightness(1.5) contrast(2);
    }

    50% {
        background: linear-gradient(90deg, #ff0000, #ff4400, #ff8800, #ffcc00);
        box-shadow:
            0 0 30px #ff0000,
            0 0 60px #ff4400,
            0 0 90px #ff8800,
            0 0 120px #ffcc00,
            inset 0 0 30px #ff0000;
        filter: hue-rotate(60deg) brightness(2) contrast(3);
        transform: scale(1.2) rotate(5deg);
    }

    75% {
        background: linear-gradient(135deg, #cc0000, #ff3300, #ff6600, #ff9900);
        box-shadow:
            0 0 40px #cc0000,
            0 0 80px #ff3300,
            0 0 120px #ff6600,
            0 0 160px #ff9900,
            inset 0 0 40px #cc0000;
        filter: hue-rotate(90deg) brightness(1.8) contrast(2.5);
        transform: scale(1.1) rotate(-5deg);
    }

    100% {
        background: linear-gradient(180deg, #990000, #ff2200, #ff5500, #ff8800);
        box-shadow:
            0 0 50px #990000,
            0 0 100px #ff2200,
            0 0 150px #ff5500,
            0 0 200px #ff8800,
            inset 0 0 50px #990000;
        filter: hue-rotate(120deg) brightness(1.3) contrast(2);
        transform: scale(1) rotate(0deg);
    }
}

@keyframes flameDance {
    0% {
        transform: scaleY(1) scaleX(1) skewX(0deg) rotate(0deg);
    }

    10% {
        transform: scaleY(1.3) scaleX(0.8) skewX(5deg) rotate(2deg);
    }

    20% {
        transform: scaleY(0.7) scaleX(1.2) skewX(-3deg) rotate(-1deg);
    }

    30% {
        transform: scaleY(1.4) scaleX(0.9) skewX(8deg) rotate(3deg);
    }

    40% {
        transform: scaleY(0.8) scaleX(1.1) skewX(-5deg) rotate(-2deg);
    }

    50% {
        transform: scaleY(1.2) scaleX(0.85) skewX(6deg) rotate(1deg);
    }

    60% {
        transform: scaleY(0.9) scaleX(1.15) skewX(-4deg) rotate(-3deg);
    }

    70% {
        transform: scaleY(1.35) scaleX(0.95) skewX(7deg) rotate(2deg);
    }

    80% {
        transform: scaleY(0.75) scaleX(1.05) skewX(-6deg) rotate(-1deg);
    }

    90% {
        transform: scaleY(1.25) scaleX(0.9) skewX(4deg) rotate(1deg);
    }

    100% {
        transform: scaleY(1) scaleX(1) skewX(0deg) rotate(0deg);
    }
}

/* DRAMATIC FLIP EFFECTS */
@keyframes megaFlip {
    0% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: perspective(1000px) rotateX(180deg) rotateY(90deg) scale(1.5);
    }

    50% {
        transform: perspective(1000px) rotateX(360deg) rotateY(180deg) scale(0.5);
    }

    75% {
        transform: perspective(1000px) rotateX(540deg) rotateY(270deg) scale(2);
    }

    100% {
        transform: perspective(1000px) rotateX(720deg) rotateY(360deg) scale(1);
    }
}

@keyframes cardFlip {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }

    50% {
        transform: perspective(1000px) rotateY(90deg) scaleX(0);
    }

    100% {
        transform: perspective(1000px) rotateY(180deg);
    }
}

@keyframes coinFlip {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: rotateX(90deg) rotateY(180deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(360deg);
    }

    75% {
        transform: rotateX(270deg) rotateY(540deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(720deg);
    }
}

/* ELEMENTS FLYING EVERYWHERE */
@keyframes flyingChaos {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    10% {
        transform: translate(200px, -100px) rotate(45deg) scale(1.2);
    }

    20% {
        transform: translate(-150px, -200px) rotate(90deg) scale(0.8);
    }

    30% {
        transform: translate(300px, 50px) rotate(135deg) scale(1.5);
    }

    40% {
        transform: translate(-200px, 150px) rotate(180deg) scale(0.6);
    }

    50% {
        transform: translate(100px, -250px) rotate(225deg) scale(1.8);
    }

    60% {
        transform: translate(-300px, -50px) rotate(270deg) scale(0.4);
    }

    70% {
        transform: translate(250px, 200px) rotate(315deg) scale(1.3);
    }

    80% {
        transform: translate(-100px, -150px) rotate(360deg) scale(0.9);
    }

    90% {
        transform: translate(150px, 100px) rotate(405deg) scale(1.1);
    }

    100% {
        transform: translate(0, 0) rotate(450deg) scale(1);
    }
}

@keyframes rocketLaunch {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-500px) rotate(180deg) scale(0.5);
    }

    100% {
        transform: translateY(-1000px) rotate(360deg) scale(0.1);
        opacity: 0;
    }
}

@keyframes boomerang {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(400px) rotate(180deg) scaleY(0.5);
    }

    100% {
        transform: translateX(0) rotate(360deg);
    }
}

/* PAGE REVERSAL EFFECTS */
@keyframes pageFlipVertical {
    0% {
        transform: perspective(2000px) rotateX(0deg);
    }

    50% {
        transform: perspective(2000px) rotateX(90deg) scaleY(0);
    }

    100% {
        transform: perspective(2000px) rotateX(180deg);
    }
}

@keyframes pageFlipHorizontal {
    0% {
        transform: perspective(2000px) rotateY(0deg);
    }

    50% {
        transform: perspective(2000px) rotateY(90deg) scaleX(0);
    }

    100% {
        transform: perspective(2000px) rotateY(180deg);
    }
}

@keyframes upsideDown {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(180deg) scale(-1);
    }
}

@keyframes insideOutFlip {
    0% {
        transform: scale(1, 1);
        filter: invert(0);
    }

    50% {
        transform: scale(-1, 1);
        filter: invert(1);
    }

    100% {
        transform: scale(-1, -1);
        filter: invert(0);
    }
}

/* EXTREME ROTATION CHAOS */
@keyframes spinMadness {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(3600deg) scale(2);
    }

    /* 10 full rotations! */
}

@keyframes tripleSpinChaos {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }

    100% {
        transform: rotateX(1080deg) rotateY(1440deg) rotateZ(1800deg) scale(0.5);
    }
}

@keyframes centrifuge {
    0% {
        transform: rotate(0deg) translateX(0) scale(1);
    }

    100% {
        transform: rotate(1800deg) translateX(200px) scale(3);
    }
}

/* MASSIVE EXPLOSION EFFECTS */
@keyframes nuclearExplosion {
    0% {
        transform: scale(1);
        background: var(--cell-bg-1);
        box-shadow: 0 0 0 transparent;
        border-radius: 0;
    }

    25% {
        transform: scale(5);
        background: radial-gradient(circle, #ffff00, #ff8800, #ff4400);
        box-shadow:
            0 0 100px #ffff00,
            0 0 200px #ff8800,
            0 0 300px #ff4400;
        border-radius: 50%;
    }

    50% {
        transform: scale(10);
        background: radial-gradient(circle, #ffffff, #ffcc00, #ff6600);
        box-shadow:
            0 0 200px #ffffff,
            0 0 400px #ffcc00,
            0 0 600px #ff6600;
        border-radius: 50%;
    }

    75% {
        transform: scale(3);
        background: radial-gradient(circle, #ff6600, #cc3300, #990000);
        box-shadow:
            0 0 150px #ff6600,
            0 0 300px #cc3300,
            0 0 450px #990000;
        border-radius: 30%;
    }

    100% {
        transform: scale(0.1);
        background: transparent;
        box-shadow: none;
        opacity: 0;
        border-radius: 0;
    }
}

@keyframes chainExplosion {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: scale(2) rotate(72deg);
        opacity: 0.8;
    }

    40% {
        transform: scale(0.5) rotate(144deg);
        opacity: 0.6;
    }

    60% {
        transform: scale(3) rotate(216deg);
        opacity: 0.4;
    }

    80% {
        transform: scale(0.3) rotate(288deg);
        opacity: 0.2;
    }

    100% {
        transform: scale(0.1) rotate(360deg);
        opacity: 0;
    }
}

@keyframes superNova {
    0% {
        transform: scale(1);
        background: var(--cell-bg-1);
        box-shadow: none;
        filter: brightness(1) contrast(1);
    }

    50% {
        transform: scale(20);
        background: radial-gradient(circle, #ffffff, #00ffff, #ff00ff, #ffff00);
        box-shadow:
            0 0 500px #ffffff,
            0 0 1000px #00ffff,
            0 0 1500px #ff00ff,
            0 0 2000px #ffff00;
        filter: brightness(5) contrast(3);
    }

    100% {
        transform: scale(0);
        background: transparent;
        box-shadow: none;
        opacity: 0;
        filter: brightness(0) contrast(0);
    }
}

/* 🤯 25+ COMPLETELY ABSURD & UNIQUE EFFECTS - MAXIMUM VISUAL CHAOS! 🤯 */

/* Reality-Breaking Effects */
@keyframes dimensionShift {
    0% {
        transform: rotateX(0deg) rotateY(0deg) perspective(1000px);
    }

    25% {
        transform: rotateX(90deg) rotateY(180deg) perspective(100px) scaleZ(5);
    }

    50% {
        transform: rotateX(180deg) rotateY(360deg) perspective(2000px) scaleZ(0.1);
    }

    75% {
        transform: rotateX(270deg) rotateY(540deg) perspective(50px) scaleZ(10);
    }

    100% {
        transform: rotateX(360deg) rotateY(720deg) perspective(1000px);
    }
}

@keyframes insideOut {
    0% {
        transform: scale(1);
        clip-path: inset(0% 0% 0% 0%);
    }

    50% {
        transform: scale(-1, 1);
        clip-path: inset(20% 20% 20% 20%);
    }

    100% {
        transform: scale(-1, -1);
        clip-path: inset(50% 0% 0% 50%);
    }
}

@keyframes paperShredder {
    0% {
        transform: scaleY(1) skewX(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    25% {
        transform: scaleY(0.8) skewX(45deg);
        clip-path: polygon(0% 0%, 90% 10%, 100% 80%, 10% 100%);
    }

    50% {
        transform: scaleY(0.1) skewX(90deg);
        clip-path: polygon(0% 50%, 20% 60%, 80% 40%, 100% 50%);
    }

    75% {
        transform: scaleY(0.05) skewX(180deg);
        clip-path: polygon(10% 50%, 30% 50%, 70% 50%, 90% 50%);
    }

    100% {
        transform: scaleY(0.01) skewX(360deg);
        clip-path: polygon(45% 50%, 50% 50%, 55% 50%, 50% 50%);
    }
}

@keyframes accordion {
    0% {
        transform: scaleX(1) scaleY(1);
    }

    25% {
        transform: scaleX(0.1) scaleY(5);
        margin: 0 50px;
    }

    50% {
        transform: scaleX(5) scaleY(0.1);
        margin: 50px 0;
    }

    75% {
        transform: scaleX(0.1) scaleY(8);
        margin: 0 100px;
    }

    100% {
        transform: scaleX(1) scaleY(1);
        margin: 0;
    }
}

@keyframes origami {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    20% {
        transform: rotateX(90deg) rotateY(45deg);
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }

    40% {
        transform: rotateX(180deg) rotateY(90deg);
        clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
    }

    60% {
        transform: rotateX(270deg) rotateY(135deg);
        clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
    }

    80% {
        transform: rotateX(360deg) rotateY(180deg);
        clip-path: polygon(50% 25%, 75% 50%, 50% 75%, 25% 50%);
    }

    100% {
        transform: rotateX(450deg) rotateY(225deg);
        clip-path: polygon(40% 40%, 60% 40%, 60% 60%, 40% 60%);
    }
}

/* Text Chaos Effects */
@keyframes wordSalad {
    0% {
        letter-spacing: 0;
        word-spacing: 0;
        line-height: 1;
    }

    25% {
        letter-spacing: 20px;
        word-spacing: 50px;
        line-height: 3;
        font-size: 200%;
    }

    50% {
        letter-spacing: -5px;
        word-spacing: -20px;
        line-height: 0.5;
        font-size: 50%;
        transform: rotateZ(180deg);
    }

    75% {
        letter-spacing: 15px;
        word-spacing: 30px;
        line-height: 5;
        font-size: 300%;
        transform: rotateZ(360deg);
    }

    100% {
        letter-spacing: 0;
        word-spacing: 0;
        line-height: 1;
        font-size: 100%;
    }
}

@keyframes typewriter {
    0% {
        width: 0;
        overflow: hidden;
        border-right: 3px solid #fff;
    }

    50% {
        width: 100%;
        overflow: hidden;
        border-right: 3px solid #fff;
    }

    100% {
        width: 100%;
        overflow: visible;
        border-right: none;
    }
}

@keyframes glitchText {
    0% {
        text-shadow: 0 0 0 transparent;
        transform: translate(0);
    }

    10% {
        text-shadow: 5px 0 #ff0000, -5px 0 #00ffff;
        transform: translate(2px, 1px);
    }

    20% {
        text-shadow: -3px 0 #ff0000, 3px 0 #00ff00;
        transform: translate(-1px, 2px);
    }

    30% {
        text-shadow: 2px 0 #ff00ff, -2px 0 #ffff00;
        transform: translate(3px, -1px);
    }

    40% {
        text-shadow: -4px 0 #00ffff, 4px 0 #ff0000;
        transform: translate(-2px, 3px);
    }

    100% {
        text-shadow: 0 0 0 transparent;
        transform: translate(0);
    }
}

/* Physics-Defying Effects */
@keyframes liquidMetal {
    0% {
        border-radius: 0;
        background: var(--cell-bg-1);
        transform: scale(1);
    }

    25% {
        border-radius: 50% 20% 60% 40%;
        background: linear-gradient(45deg, silver, gold);
        transform: scale(1.2, 0.8);
    }

    50% {
        border-radius: 20% 80% 30% 70%;
        background: linear-gradient(90deg, chrome, copper);
        transform: scale(0.7, 1.5);
    }

    75% {
        border-radius: 80% 10% 90% 5%;
        background: linear-gradient(135deg, platinum, bronze);
        transform: scale(1.5, 0.6);
    }

    100% {
        border-radius: 40% 60% 10% 90%;
        background: linear-gradient(180deg, mercury, titanium);
        transform: scale(1);
    }
}

@keyframes quantumTunneling {
    0% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0px);
    }

    25% {
        opacity: 0.3;
        transform: translateX(200px);
        filter: blur(5px);
        background: rgba(255, 0, 255, 0.5);
    }

    26% {
        opacity: 0;
        transform: translateX(-300px);
        filter: blur(10px);
    }

    27% {
        opacity: 0.3;
        transform: translateX(-200px);
        filter: blur(5px);
        background: rgba(0, 255, 255, 0.5);
    }

    50% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0px);
        background: rgba(255, 255, 0, 0.3);
    }

    75% {
        opacity: 0.5;
        transform: translateY(-150px) rotateZ(360deg);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0px);
    }
}

@keyframes magneticField {
    0% {
        transform: scale(1);
        filter: blur(0px);
    }

    20% {
        transform: scale(1.5, 0.5) skewX(30deg);
        filter: blur(2px) hue-rotate(90deg);
    }

    40% {
        transform: scale(0.5, 2) skewY(-30deg);
        filter: blur(1px) hue-rotate(180deg);
    }

    60% {
        transform: scale(2, 0.3) skewX(-45deg);
        filter: blur(3px) hue-rotate(270deg);
    }

    80% {
        transform: scale(0.3, 3) skewY(45deg);
        filter: blur(2px) hue-rotate(360deg);
    }

    100% {
        transform: scale(1);
        filter: blur(0px);
    }
}

/* Completely Absurd Humor Effects */
@keyframes rubberbanding {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1.2, 0.8);
    }

    20% {
        transform: scale(0.8, 1.2);
    }

    30% {
        transform: scale(1.3, 0.7);
    }

    40% {
        transform: scale(0.7, 1.3);
    }

    50% {
        transform: scale(1.4, 0.6);
    }

    60% {
        transform: scale(0.6, 1.4);
    }

    70% {
        transform: scale(1.1, 0.9);
    }

    80% {
        transform: scale(0.9, 1.1);
    }

    90% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes hamsterWheel {
    0% {
        transform: rotateZ(0deg);
        border-radius: 0;
    }

    25% {
        transform: rotateZ(90deg);
        border-radius: 25%;
    }

    50% {
        transform: rotateZ(180deg);
        border-radius: 50%;
    }

    75% {
        transform: rotateZ(270deg);
        border-radius: 75%;
    }

    100% {
        transform: rotateZ(3600deg);
        border-radius: 50%;
    }

    /* 10 full spins! */
}

@keyframes cookieCrumble {
    0% {
        transform: scale(1);
        clip-path: circle(50% at 50% 50%);
    }

    20% {
        transform: scale(1.1);
        clip-path: polygon(80% 20%, 100% 60%, 60% 100%, 20% 80%, 0% 40%, 40% 0%);
    }

    40% {
        transform: scale(0.9) rotateZ(45deg);
        clip-path: polygon(70% 10%, 90% 30%, 90% 70%, 70% 90%, 30% 90%, 10% 70%, 10% 30%, 30% 10%);
    }

    60% {
        transform: scale(0.7) rotateZ(90deg);
        clip-path: polygon(60% 0%, 100% 40%, 100% 60%, 60% 100%, 40% 100%, 0% 60%, 0% 40%, 40% 0%);
    }

    80% {
        transform: scale(0.4) rotateZ(135deg);
        clip-path: polygon(50% 0%, 80% 30%, 80% 70%, 50% 100%, 20% 70%, 20% 30%);
    }

    100% {
        transform: scale(0.1) rotateZ(180deg);
        opacity: 0;
        clip-path: polygon(45% 45%, 55% 45%, 55% 55%, 45% 55%);
    }
}

@keyframes tornadoSpin {
    0% {
        transform: rotateZ(0deg) scale(1) skewX(0deg);
        filter: blur(0px);
    }

    25% {
        transform: rotateZ(180deg) scale(1.5, 0.5) skewX(30deg);
        filter: blur(2px) hue-rotate(90deg);
    }

    50% {
        transform: rotateZ(360deg) scale(0.5, 2) skewX(-30deg);
        filter: blur(4px) hue-rotate(180deg);
    }

    75% {
        transform: rotateZ(540deg) scale(2, 0.3) skewX(60deg);
        filter: blur(6px) hue-rotate(270deg);
    }

    100% {
        transform: rotateZ(720deg) scale(0.1, 5) skewX(-60deg);
        filter: blur(8px) hue-rotate(360deg);
        opacity: 0;
    }
}

@keyframes impossible {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) perspective(1000px);
    }

    25% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) perspective(100px) scaleZ(5);
    }

    50% {
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg) perspective(2000px) scaleZ(-2);
    }

    75% {
        transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg) perspective(50px) scaleZ(10);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) perspective(1000px) scaleZ(-1);
    }
}

/* More Edge Cases */
@keyframes pixelDisintegrate {
    0% {
        filter: blur(0px) pixelate(1px);
        transform: scale(1);
        opacity: 1;
    }

    20% {
        filter: blur(1px) pixelate(2px);
        transform: scale(1.1);
    }

    40% {
        filter: blur(3px) pixelate(4px);
        transform: scale(1.2);
        opacity: 0.8;
    }

    60% {
        filter: blur(5px) pixelate(8px);
        transform: scale(1.3);
        opacity: 0.6;
    }

    80% {
        filter: blur(8px) pixelate(16px);
        transform: scale(1.4);
        opacity: 0.4;
    }

    100% {
        filter: blur(15px) pixelate(32px);
        transform: scale(2);
        opacity: 0.1;
    }
}

@keyframes infiniteZoom {
    0% {
        transform: scale(1) translateZ(0px);
        filter: blur(0px);
    }

    50% {
        transform: scale(50) translateZ(1000px);
        filter: blur(10px);
        opacity: 0.1;
    }

    100% {
        transform: scale(0.01) translateZ(-1000px);
        filter: blur(5px);
        opacity: 0.3;
    }
}

@keyframes kaleidoscope {
    0% {
        transform: rotate(0deg) scale(1);
        filter: hue-rotate(0deg) saturate(1);
    }

    16% {
        transform: rotate(60deg) scale(0.8) skewX(30deg);
        filter: hue-rotate(60deg) saturate(2);
    }

    32% {
        transform: rotate(120deg) scale(1.2) skewY(-30deg);
        filter: hue-rotate(120deg) saturate(3);
    }

    48% {
        transform: rotate(180deg) scale(0.6) skewX(60deg);
        filter: hue-rotate(180deg) saturate(4);
    }

    64% {
        transform: rotate(240deg) scale(1.4) skewY(-60deg);
        filter: hue-rotate(240deg) saturate(3);
    }

    80% {
        transform: rotate(300deg) scale(0.4) skewX(90deg);
        filter: hue-rotate(300deg) saturate(2);
    }

    100% {
        transform: rotate(360deg) scale(1);
        filter: hue-rotate(360deg) saturate(1);
    }
}

/* NEW INSANE EFFECTS FOR 30-SECOND CHAOS! 🤯 */
@keyframes antigravity {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-300px) rotate(720deg) scale(0.5);
    }
}

@keyframes portal {
    0% {
        transform: scale(1) rotate(0deg);
        border-radius: 0;
        box-shadow: 0 0 0 transparent;
    }

    50% {
        transform: scale(0.1) rotate(360deg);
        border-radius: 50%;
        box-shadow: 0 0 100px #00ffff, inset 0 0 50px #ff00ff;
    }

    100% {
        transform: scale(2) rotate(720deg);
        border-radius: 0;
        box-shadow: 0 0 200px #ffff00;
    }
}

@keyframes teleport {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    25% {
        opacity: 0;
        transform: translateX(-200px) scale(0.1);
    }

    26% {
        opacity: 0;
        transform: translateX(200px) scale(0.1);
    }

    50% {
        opacity: 1;
        transform: translateX(0) scale(1.2);
    }

    75% {
        opacity: 0.3;
        transform: translateX(100px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bubble {
    0% {
        transform: scale(1);
        background: var(--cell-bg-1);
        border-radius: 0;
    }

    50% {
        transform: scale(1.5);
        background: radial-gradient(circle, #ffff00, #ff00ff, #00ffff);
        border-radius: 50%;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }

    100% {
        transform: scale(0);
        background: transparent;
        border-radius: 50%;
    }
}

@keyframes dizzy {
    0% {
        transform: rotate(0deg) scale(1);
        filter: blur(0px);
    }

    25% {
        transform: rotate(90deg) scale(1.2);
        filter: blur(2px);
    }

    50% {
        transform: rotate(180deg) scale(0.8);
        filter: blur(4px);
    }

    75% {
        transform: rotate(270deg) scale(1.1);
        filter: blur(2px);
    }

    100% {
        transform: rotate(360deg) scale(1);
        filter: blur(0px);
    }
}

@keyframes ghostly {
    0% {
        opacity: 1;
        filter: grayscale(0);
    }

    50% {
        opacity: 0.3;
        filter: grayscale(1) blur(3px);
    }

    100% {
        opacity: 0.7;
        filter: grayscale(0.5) blur(1px);
    }
}

@keyframes laser {
    0% {
        box-shadow: 0 0 0 transparent;
        background: var(--cell-bg-1);
    }

    50% {
        box-shadow: 0 0 100px #ff0000, inset 0 0 50px #ff0000;
        background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    }

    100% {
        box-shadow: 0 0 200px #ffffff;
        background: #ffffff;
    }
}

@keyframes jello {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1.25, 0.75);
    }

    40% {
        transform: scale(0.75, 1.25);
    }

    50% {
        transform: scale(1.15, 0.85);
    }

    65% {
        transform: scale(0.95, 1.05);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes pixelate {
    0% {
        filter: blur(0px) pixelated(1px);
        transform: scale(1);
    }

    50% {
        filter: blur(5px) contrast(3);
        transform: scale(1.2);
    }

    100% {
        filter: blur(0px);
        transform: scale(1);
    }
}

@keyframes neon {
    0% {
        color: var(--text-color);
        text-shadow: none;
        background: var(--cell-bg-1);
    }

    50% {
        color: #00ffff;
        text-shadow: 0 0 20px #00ffff, 0 0 40px #ff00ff, 0 0 60px #ffff00;
        background: radial-gradient(circle, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
    }

    100% {
        color: #ff00ff;
        text-shadow: 0 0 30px #ff00ff;
        background: var(--cell-bg-1);
    }
}

.chaos-antigravity {
    animation: antigravity 3s ease-out forwards;
}

.chaos-portal {
    animation: portal 2s ease-in-out infinite;
}

.chaos-teleport {
    animation: teleport 1.5s ease-in-out infinite;
}

.chaos-bubble {
    animation: bubble 2s ease-in forwards;
}

.chaos-dizzy {
    animation: dizzy 1s ease-in-out infinite;
}

.chaos-ghostly {
    animation: ghostly 2s ease-in-out infinite;
}

.chaos-laser {
    animation: laser 1s ease-in-out;
}

.chaos-jello {
    animation: jello 1s ease-in-out;
}

.chaos-pixelate {
    animation: pixelate 1.5s ease-in-out infinite;
}

.chaos-neon {
    animation: neon 0.8s ease-in-out infinite;
}

/* 🤯 ALL THE NEW INSANE EFFECT CLASSES! 🤯 */
.chaos-dimension {
    animation: dimensionShift 2s ease-in-out infinite;
}

.chaos-inside-out {
    animation: insideOut 1.5s ease-in-out infinite;
}

.chaos-shredder {
    animation: paperShredder 3s ease-in forwards;
}

.chaos-accordion {
    animation: accordion 2s ease-in-out infinite;
}

.chaos-origami {
    animation: origami 3s ease-in-out infinite;
}

.chaos-word-salad {
    animation: wordSalad 2s ease-in-out infinite;
}

.chaos-typewriter {
    animation: typewriter 2s ease-in-out infinite;
}

.chaos-glitch-text {
    animation: glitchText 0.5s ease-in-out infinite;
}

.chaos-liquid-metal {
    animation: liquidMetal 2s ease-in-out infinite;
}

.chaos-quantum {
    animation: quantumTunneling 3s ease-in-out infinite;
}

.chaos-magnetic {
    animation: magneticField 1.5s ease-in-out infinite;
}

.chaos-rubber {
    animation: rubberbanding 1s ease-in-out infinite;
}

.chaos-hamster {
    animation: hamsterWheel 2s ease-in forwards;
}

.chaos-cookie {
    animation: cookieCrumble 3s ease-in forwards;
}

.chaos-tornado-spin {
    animation: tornadoSpin 4s ease-in forwards;
}

.chaos-impossible {
    animation: impossible 2s ease-in-out infinite;
}

.chaos-pixel-break {
    animation: pixelDisintegrate 3s ease-in forwards;
}

.chaos-zoom {
    animation: infiniteZoom 2s ease-in-out infinite;
}

.chaos-kaleidoscope {
    animation: kaleidoscope 1.5s ease-in-out infinite;
}

/* 🔥💥 ULTIMATE INTENSITY EFFECT CLASSES! 💥🔥 */
.chaos-super-fire {
    animation: superFire 1s ease-in-out infinite, flameDance 0.3s ease-in-out infinite;
}

.chaos-mega-flip {
    animation: megaFlip 2s ease-in-out infinite;
}

.chaos-card-flip {
    animation: cardFlip 1s ease-in-out infinite;
}

.chaos-coin-flip {
    animation: coinFlip 1.5s ease-in-out infinite;
}

.chaos-flying {
    animation: flyingChaos 3s ease-in-out infinite;
}

.chaos-rocket {
    animation: rocketLaunch 2s ease-in forwards;
}

.chaos-boomerang {
    animation: boomerang 2s ease-in-out infinite;
}

.chaos-page-flip-v {
    animation: pageFlipVertical 1.5s ease-in-out infinite;
}

.chaos-page-flip-h {
    animation: pageFlipHorizontal 1.5s ease-in-out infinite;
}

.chaos-upside-down {
    animation: upsideDown 1s ease-in-out infinite;
}

.chaos-inside-out-flip {
    animation: insideOutFlip 1.5s ease-in-out infinite;
}

.chaos-spin-madness {
    animation: spinMadness 3s ease-in forwards;
}

.chaos-triple-spin {
    animation: tripleSpinChaos 2s ease-in-out infinite;
}

.chaos-centrifuge {
    animation: centrifuge 3s ease-in forwards;
}

.chaos-nuclear {
    animation: nuclearExplosion 3s ease-in forwards;
}

.chaos-chain-explosion {
    animation: chainExplosion 2s ease-in forwards;
}

.chaos-supernova {
    animation: superNova 4s ease-in forwards;
}

.matrix-char {
    position: absolute;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    animation: matrixRain 3s linear infinite;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 0 10px #0f0;
}

.screen-crack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
    animation: screenCrack 2s ease-out;
}

.chaos-clone {
    position: absolute;
    pointer-events: none;
    z-index: 999;
    opacity: 0.6;
    filter: hue-rotate(120deg);
}

/* Dark mode — same transparent ghost, slightly brighter amber border. */
[data-theme="dark"] .chaos-btn {
    background: transparent;
    border-color: rgba(245, 158, 11, 0.55);
    color: #FBBF24;
}

[data-theme="dark"] .chaos-btn:hover {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.85);
    color: #FCD34D;
}

/* On the forum index ONLY, hide the big forum-card grid — the
   Разделы modal is the primary UI there. Kept in DOM for SEO.
   main_topics.html reuses this class as its topic-list wrapper,
   so don't hide it globally. */
body[data-page-action=""] .modern-forums-container,
body[data-page-action="index"] .modern-forums-container {
    display: none !important;
}

/* =================================================================
   Forums modal — compact tree popup triggered from the Разделы btn
   in .modern-user-login. Replaces the giant accordion cards.
   ================================================================= */
.forums-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 8, 6, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.forums-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s ease;
}

.forums-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1001;
    width: 92vw;
    max-width: 420px;
    max-height: 78vh;
    background: var(--menu-bg, #fff);
    border: 1px solid rgba(215, 160, 99, 0.22);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22,0.61,0.36,1),
                visibility 0s linear 0.18s;
}
.forums-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22,0.61,0.36,1);
}
[data-theme="dark"] .forums-modal {
    border-color: rgba(215, 160, 99, 0.28);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 16px 48px rgba(0,0,0,0.45);
}

.forums-modal-header {
    padding: 14px 18px 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--link-color, #D8A063);
    border-bottom: 1px solid rgba(215, 160, 99, 0.14);
}

.forums-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary-text, #888);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.forums-modal-close:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.12);
}
.forums-modal-close svg { display: block; }

.forums-modal-body {
    padding: 8px 6px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Tree list — plain <ul> with icon + name rows */
.forums-tree,
.forums-tree-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.forums-tree-group {
    padding: 10px 14px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted, #7a6f68);
    opacity: 0.7;
}

.forums-tree-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    color: var(--text-color, inherit);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.forums-tree-item > a:hover {
    background: rgba(215, 160, 99, 0.1);
    color: var(--link-color, #D8A063);
}

.forums-tree-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 3px;
}

.forums-tree-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.forums-tree-sub {
    padding-left: 22px;
    border-left: 1px solid rgba(215, 160, 99, 0.14);
    margin: 2px 0 6px 20px;
}
.forums-tree-sub .forums-tree-name {
    font-size: 13px;
    font-weight: 400;
}
.forums-tree-sub .forums-tree-icon {
    width: 16px;
    height: 16px;
}

/* Forums Header */
.forums-header {
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--cell-bg-2) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    padding: 16px 24px;
    margin-bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.forums-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.forum-icon-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--link-color);
    border-radius: 10px;
    color: white;
    box-shadow: 0 2px 8px rgba(119, 84, 84, 0.3);
}

.forum-icon-header svg {
    animation: slow-rotate 20s linear infinite;
}

@keyframes slow-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.forum-title-header {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--link-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forum-stats-header {
    display: flex;
    gap: 32px;
    font-size: 14px;
    color: var(--secondary-text);
    font-weight: 600;
}

.stat-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Hide only discussion stat labels (Views/Replies) */
.discussion-stat-label {
    display: none;
}

/* Show forum stat labels (Topics/Posts) */
.forum-stat-label {
    font-size: 11px;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Forums Grid */
.forums-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Modern Forum Card */
.modern-forum-card {
    background: var(--cell-bg-1);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.forum-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.forum-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.forum-card-link:focus {
    outline: 2px solid var(--link-color);
    outline-offset: -2px;
}

.modern-forum-card:last-child {
    border-bottom: none;
}

.modern-forum-card:hover {
    background: var(--cell-bg-2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.modern-forum-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--link-color) 0%, transparent 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.modern-forum-card:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

/* Forum Card Content - Compact Single Row */
.forum-card-content {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 16px;
    min-height: 60px;
}

/* Forum Icon Container - Smaller Size */
.forum-icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--menu-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.forum-icon-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--link-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-forum-card:hover .forum-icon-container {
    border-color: var(--link-color);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(119, 84, 84, 0.2);
}

.modern-forum-card:hover .forum-icon-container::before {
    opacity: 0.1;
}

.forum-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.modern-forum-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(1.1);
}

.forum-card-link:hover .modern-forum-icon {
    transform: scale(1.1);
    filter: brightness(1.2) saturate(1.2);
}

/* Forum Info - Inline Layout */
.forum-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.forum-title-and-desc {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-color);
}

.forum-title-text {
    color: var(--link-color);
    transition: all 0.3s ease;
    position: relative;
}

.forum-title-text::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--link-color);
    transition: width 0.3s ease;
}

.forum-card-link:hover .forum-title-text {
    color: var(--button-hover);
    transform: translateX(2px);
}

.forum-card-link:hover .forum-title-text::after {
    width: 100%;
}

.forum-description {
    display: flex;
    align-items: center;
}

.forum-desc-text {
    font-size: 12px;
    color: var(--secondary-text);
    line-height: 1.3;
    margin: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-forum-card:hover .forum-desc-text {
    opacity: 1;
    color: var(--text-color);
}

/* Forum Stats - Compact Version */
.forum-stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modern-forum-card:hover .forum-stats {
    background: var(--cell-bg-2);
    border-color: var(--link-color);
    transform: scale(1.02);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 36px;
}

/* Clickable stat items - minimal and subtle */
.stat-item.clickable-stat {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
    border-radius: 3px;
    padding: 2px;
    cursor: pointer;
}

.stat-item.clickable-stat:hover {
    background-color: rgba(var(--link-color-rgb, 0, 123, 255), 0.05);
}

.stat-item.clickable-stat:active {
    background-color: rgba(var(--link-color-rgb, 0, 123, 255), 0.1);
}

.stat-item.clickable-stat .stat-number {
    transition: color 0.2s ease;
}

.stat-item.clickable-stat:hover .stat-number {
    color: var(--link-color);
}

.stat-item.clickable-stat:hover .stat-icon svg {
    stroke: var(--link-color);
}

/* Simple focus indicator */
.stat-item.clickable-stat:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 1px;
}

/* Touch device optimizations */
@media (pointer: coarse) {
    .stat-item.clickable-stat {
        padding: 4px;
        min-height: 36px;
        /* Adequate touch target */
        min-width: 36px;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    .stat-item.clickable-stat,
    .stat-item.clickable-stat .stat-number {
        transition: none;
    }
}

.stat-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.stat-number.highlight {
    color: var(--link-color);
    font-size: 17px;
}

.modern-forum-card:hover .stat-number {
    transform: scale(1.05);
}

.modern-forum-card:hover .stat-number.highlight {
    color: var(--button-hover);
}

.forum-stats .stat-label {
    font-size: 10px;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.forum-stats .forum-stat-label {
    font-size: 10px;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.stat-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    transition: background-color 0.3s ease;
}

.modern-forum-card:hover .stat-divider {
    background: var(--link-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-forums-container {
        /* page-content already holds the 95 % column at this width.
           Fill it (100 %) so the grid lines up with capMenu and
           forum-presence instead of nesting 95 % inside 95 %. */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .forums-header {
        padding: 16px 20px;
        border-radius: 8px 8px 0 0;
    }

    .forums-header-content {
        gap: 12px;
    }

    .forum-icon-header {
        width: 32px;
        height: 32px;
    }

    .forum-title-header {
        font-size: 16px;
    }

    .forum-stats-header {
        gap: 20px;
        font-size: 12px;
    }

    .forums-grid {
        border-radius: 0 0 8px 8px;
    }

    .forum-card-content {
        padding: 12px 16px;
        gap: 12px;
        flex-direction: row;
        align-items: center;
        min-height: 50px;
        flex-wrap: wrap;
    }

    .forum-icon-container {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .modern-forum-icon {
        width: 18px;
        height: 18px;
    }

    .forum-info {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .forum-title-and-desc {
        flex: 1;
        min-width: 0;
    }

    .forum-title {
        font-size: 15px;
    }

    .forum-desc-text {
        font-size: 12px;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    .forum-stats {
        flex-shrink: 0;
        padding: 6px 12px;
        gap: 8px;
    }

    .stat-item {
        min-width: 32px;
    }

    .stat-number {
        font-size: 14px;
    }

    .stat-number.highlight {
        font-size: 16px;
    }

    .forum-stats .stat-label {
        font-size: 9px;
    }

    .forum-stats .forum-stat-label {
        font-size: 9px;
    }

    .stat-divider {
        height: 20px;
    }
}

/* Mobile login strip (.modern-user-login on the forum index).
   Collapses the legacy <form><table><tr><td> + .user-login-content
   wrappers with display:contents so inputs, auth buttons, ∅/?
   helpers, and the Разделы toggle all participate in ONE flex row
   (wrapping as needed). All controls share the same compact button
   height — the row reads as "two inputs + several small buttons",
   not the oversized desktop treatment the user reported as ugly. */
@media (max-width: 600px) {
    .forums-toggle-text {
        display: none;
    }

    .modern-user-login {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
        align-items: center;
        /* Override the desktop space-between so the compact mobile
           buttons pack tightly instead of drifting apart. */
        justify-content: flex-start;
    }

    /* Promote every wrapper between .modern-user-login and the
       actual form controls so they become direct flex items.
       !important needed to beat the global `.tbTransparentCell
       { display: table-cell !important }` rule later in this file. */
    .modern-user-login .user-login-content,
    .modern-user-login .formStyle,
    .modern-user-login .tbTransparent,
    .modern-user-login .tbTransparent tbody,
    .modern-user-login .tbTransparent tr,
    .modern-user-login .tbTransparentCell,
    .modern-user-login .login-actions {
        display: contents !important;
    }

    /* Inputs share the row and shrink to fit */
    .modern-user-login .textForm {
        flex: 1 1 130px;
        min-width: 0;
        height: 30px;
        box-sizing: border-box;
        font-size: 14px;
        padding: 4px 8px;
    }

    /* Reveal-password (∅) and forgot-password (?) links become
       tiny square icon buttons that match .btn-auth height. */
    .modern-user-login .navCellSel {
        margin: 0;
        padding: 0;
    }
    .modern-user-login a.mnblnk.mnblnkn,
    .modern-user-login a.mnblnk.mnblnkn:link,
    .modern-user-login a.mnblnk.mnblnkn:visited,
    .modern-user-login a.mnblnk.mnblnkn:hover,
    .modern-user-login a.mnblnk.mnblnkn:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: none;
        border-radius: 6px;
        background: rgba(215, 160, 99, 0.06);
        color: var(--link-color, #775454);
        font-size: 14px;
        line-height: 1;
        text-decoration: none;
    }
    .modern-user-login a.mnblnk.mnblnkn:hover {
        background: rgba(215, 160, 99, 0.18);
    }

    /* Uniform small button size across the whole strip */
    .modern-user-login .btn-auth,
    .modern-user-login .forums-toggle-btn {
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
        letter-spacing: 0.02em;
    }

    .user-chip {
        font-size: 13px;
        padding: 3px 10px 3px 8px;
    }
}


@media (max-width: 480px) {
    .modern-user-login {
        padding: 6px;
        margin-bottom: 16px;
        gap: 6px;
    }

    /* Sub-480 screens: shrink one more notch so two inputs + the
       helper ∅/? still fit above the button row without wrapping
       awkwardly. */
    .modern-user-login .textForm {
        flex: 1 1 110px;
        height: 28px;
        font-size: 13px;
    }
    .modern-user-login a.mnblnk.mnblnkn,
    .modern-user-login .btn-auth,
    .modern-user-login .forums-toggle-btn {
        height: 28px;
    }
    .modern-user-login a.mnblnk.mnblnkn {
        width: 28px;
    }

    .forums-header {
        padding: 12px 16px;
    }

    .forum-card-content {
        padding: 10px 12px;
        gap: 10px;
        min-height: 45px;
    }

    .forum-icon-container {
        width: 32px;
        height: 32px;
    }

    .modern-forum-icon {
        width: 16px;
        height: 16px;
    }

    .forum-info {
        gap: 4px;
    }

    .forum-title {
        font-size: 14px;
    }

    .forum-desc-text {
        font-size: 11px;
    }

    .forum-stats {
        padding: 5px 10px;
        gap: 6px;
    }

    .stat-item {
        min-width: 28px;
    }

    .stat-number {
        font-size: 13px;
    }

    .stat-number.highlight {
        font-size: 15px;
    }

    .forum-stats .stat-label {
        font-size: 8px;
    }

    .forum-stats .forum-stat-label {
        font-size: 8px;
    }

    .stat-divider {
        height: 18px;
    }
}

/* Dark theme — user-chip + forums-toggle-btn tokens */
[data-theme="dark"] .user-chip {
    background: rgba(215, 160, 99, 0.09);
    border-color: rgba(215, 160, 99, 0.28);
}
[data-theme="dark"] .user-chip:hover {
    background: rgba(215, 160, 99, 0.18);
    border-color: rgba(215, 160, 99, 0.55);
}

[data-theme="dark"] .forums-header {
    background: linear-gradient(135deg, var(--cell-bg-2) 0%, var(--cell-bg-1) 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .forums-grid {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .modern-forum-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .forum-icon-container {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .modern-forum-card:hover .forum-icon-container {
    box-shadow: 0 4px 12px rgba(187, 143, 143, 0.3);
}

[data-theme="dark"] .forum-stats {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
}

/* Animation Enhancements */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-forum-card {
    animation: slideInUp 0.4s ease-out;
}

.modern-forum-card:nth-child(1) {
    animation-delay: 0.1s;
}

.modern-forum-card:nth-child(2) {
    animation-delay: 0.2s;
}

.modern-forum-card:nth-child(3) {
    animation-delay: 0.3s;
}

.modern-forum-card:nth-child(4) {
    animation-delay: 0.4s;
}

.modern-forum-card:nth-child(5) {
    animation-delay: 0.5s;
}

.modern-forum-card:nth-child(n+6) {
    animation-delay: 0.6s;
}

/* Accessibility Improvements */
.forum-card-link:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .modern-forum-card,
    .forum-icon-container,
    .modern-forum-icon,
    .forum-title-link,
    .stat-number,
    .forum-stats {
        transition: none;
        animation: none;
    }

    .modern-forum-card:hover {
        transform: none;
    }

    .modern-forum-card:hover .forum-icon-container {
        transform: none;
    }

    .modern-forum-card:hover .modern-forum-icon {
        transform: none;
    }

    .forum-title-link:hover {
        transform: none;
    }

    .modern-forum-card:hover .stat-number {
        transform: none;
    }

    .modern-forum-card:hover .forum-stats {
        transform: none;
    }
}

/* ========================================
   MODERN DISCUSSIONS DESIGN STYLES
   ======================================== */

/* ========================================
   MODERN SUBFORUM DESIGN STYLES
   ======================================== */

/* Reset subforum table structure to normal */
.tbTransparent.clps tr {
    display: table-row !important;
}

.tbTransparent.clps tr:first-child {
    display: table-row !important;
}

/* Container for subforum links */
.tbTransparentCell {
    display: table-cell !important;
    vertical-align: middle !important;

}

/* Modern styling for subforum links ONLY INSIDE POSTS */
.postedText a[href*="tokeny-"],
.postedText a[href*="defi-"],
.postedText a[href*="nft-"],
.postedText a[href*="seti-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cell-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4px 12px;
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 11px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin: 2px 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    min-height: 22px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.postedText a[href*="tokeny-"]:hover,
.postedText a[href*="defi-"]:hover,
.postedText a[href*="nft-"]:hover,
.postedText a[href*="seti-"]:hover {
    background: var(--link-color);
    border-color: var(--link-color);
    color: white;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 3px 8px rgba(119, 84, 84, 0.3);
}

.postedText a[href*="tokeny-"]::before,
.postedText a[href*="defi-"]::before,
.postedText a[href*="nft-"]::before,
.postedText a[href*="seti-"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--link-color) 0%, var(--button-hover) 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.postedText a[href*="tokeny-"]:hover::before,
.postedText a[href*="defi-"]:hover::before,
.postedText a[href*="nft-"]:hover::before,
.postedText a[href*="seti-"]:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

/* Restore subforum internal structure */
.subforum-info {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.subforum-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--link-color);
    border-radius: 4px;
    color: white;
    font-size: 10px;
}

.subforum-title {
    display: inline !important;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.subforum-stats {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--cell-bg-2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-color);
    min-width: 24px;
}

/* Responsive design for subforum links ONLY INSIDE POSTS */
@media (max-width: 768px) {

    .postedText a[href*="tokeny-"],
    .postedText a[href*="defi-"],
    .postedText a[href*="nft-"],
    .postedText a[href*="seti-"] {
        padding: 12px 16px;
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: auto;
    }

    .subforum-info {
        gap: 12px;
        width: 100%;
    }

    .subforum-icon {
        width: 36px;
        height: 36px;
    }

    .subforum-icon svg {
        width: 18px;
        height: 18px;
    }

    .subforum-title {
        font-size: 14px;
    }

    .subforum-stats {
        align-self: flex-end;
        font-size: 12px;
        padding: 6px 12px;
        min-width: 50px;
    }
}

@media (max-width: 480px) {

    .postedText a[href*="tokeny-"],
    .postedText a[href*="defi-"],
    .postedText a[href*="nft-"],
    .postedText a[href*="seti-"] {
        padding: 10px 12px;
        font-size: 13px;
        gap: 10px;
    }

    .subforum-info {
        gap: 10px;
    }

    .subforum-icon {
        width: 32px;
        height: 32px;
    }

    .subforum-icon svg {
        width: 16px;
        height: 16px;
    }

    .subforum-title {
        font-size: 13px;
    }

    .subforum-stats {
        font-size: 11px;
        padding: 4px 8px;
        min-width: 40px;
    }
}

/* Dark theme support for subforum links ONLY INSIDE POSTS */
[data-theme="dark"] .postedText a[href*="tokeny-"],
[data-theme="dark"] .postedText a[href*="defi-"],
[data-theme="dark"] .postedText a[href*="nft-"],
[data-theme="dark"] .postedText a[href*="seti-"] {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .postedText a[href*="tokeny-"]:hover,
[data-theme="dark"] .postedText a[href*="defi-"]:hover,
[data-theme="dark"] .postedText a[href*="nft-"]:hover,
[data-theme="dark"] .postedText a[href*="seti-"]:hover {
    background: var(--cell-bg-1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .subforum-icon {
    background: var(--cell-bg-1);
    border-color: var(--border-color);
}

[data-theme="dark"] .subforum-stats {
    background: var(--cell-bg-1);
    border-color: var(--border-color);
}


/* Modern Subforum Dropdown */
.modern-subforum-dropdown {
    margin: 12px 0;
    background: var(--cell-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.modern-subforum-dropdown:hover {
    border-color: var(--link-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-subforum-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--cell-bg-2) 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.modern-subforum-header:hover {
    background: linear-gradient(135deg, var(--cell-bg-2) 0%, var(--menu-hover) 100%);
    border-bottom-color: var(--border-color);
}

.subforum-toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modern-subforum-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--link-color);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.modern-subforum-toggle:hover {
    background: var(--button-hover);
    transform: scale(1.1);
}

.subforum-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--link-color);
    transition: all 0.3s ease;
}

.modern-subforum-header:hover .subforum-icon {
    background: var(--link-color);
    color: white;
    border-color: var(--link-color);
}

.subforum-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.subforum-count {
    font-size: 13px;
    color: var(--secondary-text);
    font-weight: 500;
    background: var(--menu-bg);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.modern-subforum-header:hover .subforum-count {
    background: var(--cell-bg-2);
    border-color: var(--link-color);
    color: var(--link-color);
}

.subforum-expand-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--secondary-text);
    transition: all 0.3s ease;
}

.modern-subforum-header:hover .subforum-expand-hint {
    color: var(--link-color);
    transform: scale(1.1);
}

.modern-subforum-content {
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.subforum-grid {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Modern Subforum Card */
.modern-subforum-card {
    background: var(--cell-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.modern-subforum-card:hover {
    background: var(--cell-bg-2);
    border-color: var(--link-color);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-subforum-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--link-color);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.modern-subforum-card:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

.subforum-card-content {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 12px;
    min-height: 44px;
}

.subforum-indicator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.subforum-bullet {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--link-color);
    transition: all 0.3s ease;
}

.modern-subforum-card:hover .subforum-bullet {
    color: var(--button-hover);
    transform: scale(1.2);
}

.subforum-info {
    flex: 1;
    min-width: 0;
}

.subforum-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.subforum-title-link {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.subforum-title-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--link-color);
    transition: width 0.3s ease;
}

.subforum-title-link:hover {
    color: var(--button-hover);
}

.subforum-title-link:hover::after {
    width: 100%;
}

.subforum-stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.modern-subforum-card:hover .subforum-stats {
    background: var(--cell-bg-2);
    border-color: var(--link-color);
    transform: scale(1.02);
}

.subforum-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 28px;
}

.subforum-stat-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.subforum-stat-number.highlight {
    color: var(--link-color);
    font-size: 13px;
}

.modern-subforum-card:hover .subforum-stat-number {
    transform: scale(1.05);
}

.modern-subforum-card:hover .subforum-stat-number.highlight {
    color: var(--button-hover);
}

.subforum-stat-label {
    display: none;
}

.subforum-stat-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    transition: background-color 0.3s ease;
}

.modern-subforum-card:hover .subforum-stat-divider {
    background: var(--link-color);
}

/* Responsive Design for Subforums */
@media (max-width: 768px) {
    .modern-subforum-dropdown {
        margin: 8px 0;
        border-radius: 6px;
    }

    .modern-subforum-header {
        padding: 10px 12px;
    }

    .subforum-toggle-container {
        gap: 8px;
    }

    .modern-subforum-toggle {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .subforum-icon {
        width: 20px;
        height: 20px;
    }

    .subforum-title {
        font-size: 13px;
    }

    .subforum-count {
        font-size: 12px;
        padding: 1px 6px;
    }

    .subforum-expand-hint {
        width: 20px;
        height: 20px;
    }

    .subforum-grid {
        padding: 6px;
        gap: 3px;
    }

    .subforum-card-content {
        padding: 8px 10px;
        gap: 10px;
        min-height: 40px;
    }

    .subforum-indicator {
        width: 20px;
        height: 20px;
    }

    .subforum-title {
        font-size: 13px;
    }

    .subforum-stats {
        gap: 6px;
        padding: 3px 6px;
    }

    .subforum-stat-item {
        min-width: 24px;
    }

    .subforum-stat-number {
        font-size: 11px;
    }

    .subforum-stat-number.highlight {
        font-size: 12px;
    }

    .subforum-stat-label {
        display: none;
    }

    .subforum-stat-divider {
        height: 14px;
    }
}

@media (max-width: 480px) {
    .modern-subforum-header {
        padding: 8px 10px;
    }

    .subforum-toggle-container {
        gap: 6px;
    }

    .modern-subforum-toggle {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .subforum-icon {
        width: 18px;
        height: 18px;
    }

    .subforum-title {
        font-size: 12px;
    }

    .subforum-count {
        font-size: 11px;
        padding: 1px 4px;
    }

    .subforum-card-content {
        padding: 6px 8px;
        gap: 8px;
        min-height: 36px;
    }

    .subforum-indicator {
        width: 18px;
        height: 18px;
    }

    .subforum-title {
        font-size: 12px;
    }

    .subforum-stats {
        gap: 4px;
        padding: 2px 4px;
    }

    .subforum-stat-item {
        min-width: 20px;
    }

    .subforum-stat-number {
        font-size: 10px;
    }

    .subforum-stat-number.highlight {
        font-size: 11px;
    }

    .subforum-stat-label {
        display: none;
    }

    .subforum-stat-divider {
        height: 12px;
    }
}

/* Dark Theme Enhancements for Subforums */
[data-theme="dark"] .modern-subforum-dropdown {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .modern-subforum-dropdown:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .modern-subforum-header {
    background: linear-gradient(135deg, var(--cell-bg-2) 0%, var(--cell-bg-1) 100%);
}

[data-theme="dark"] .modern-subforum-header:hover {
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--menu-hover) 100%);
}

[data-theme="dark"] .subforum-icon {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .subforum-count {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .modern-subforum-content {
    background: var(--cell-bg-1);
}

[data-theme="dark"] .modern-subforum-card {
    background: var(--cell-bg-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .modern-subforum-card:hover {
    background: var(--cell-bg-1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .subforum-stats {
    background: var(--cell-bg-1);
    border-color: var(--border-color);
}

[data-theme="dark"] .modern-subforum-card:hover .subforum-stats {
    background: var(--cell-bg-2);
}

/* Animation Enhancements for Subforums */
.modern-subforum-card {
    animation: slideInLeft 0.3s ease-out;
}

.modern-subforum-card:nth-child(1) {
    animation-delay: 0.05s;
}

.modern-subforum-card:nth-child(2) {
    animation-delay: 0.1s;
}

.modern-subforum-card:nth-child(3) {
    animation-delay: 0.15s;
}

.modern-subforum-card:nth-child(4) {
    animation-delay: 0.2s;
}

.modern-subforum-card:nth-child(n+5) {
    animation-delay: 0.25s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accessibility Improvements for Subforums */
.subforum-title-link:focus,
.modern-subforum-header:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced Motion Support for Subforums */
@media (prefers-reduced-motion: reduce) {

    .modern-subforum-dropdown,
    .modern-subforum-header,
    .modern-subforum-toggle,
    .subforum-icon,
    .subforum-count,
    .subforum-expand-hint,
    .modern-subforum-card,
    .subforum-bullet,
    .subforum-title-link,
    .subforum-stats,
    .subforum-stat-number {
        transition: none;
        animation: none;
    }

    .modern-subforum-card:hover,
    .modern-subforum-toggle:hover,
    .subforum-bullet:hover,
    .subforum-stats:hover,
    .subforum-stat-number:hover {
        transform: none;
    }
}

/* Modern styling for actual subforum HTML structure */
.tbTransparent.clps .subforum-dropdown-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--cell-bg-2) 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    font-weight: 700;
    color: var(--link-color);
    border-radius: 12px 12px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tbTransparent.clps .subforum-dropdown-header:hover {
    background: linear-gradient(135deg, var(--cell-bg-2) 0%, var(--menu-hover) 100%);
    color: var(--button-hover);
}

/* Integrated subforum dropdown within forum cards */
.modern-forum-card .modern-subforum-dropdown {
    margin: 0;
    border: none;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.modern-forum-card .modern-subforum-dropdown:hover {
    border-color: var(--border-color);
    box-shadow: none;
    transform: none;
}

.modern-forum-card .modern-subforum-header {
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--cell-bg-2) 0%, var(--menu-bg) 100%);
    border-radius: 0;
    border-bottom: none;
}

.modern-forum-card .modern-subforum-header:hover {
    background: linear-gradient(135deg, var(--menu-hover) 0%, var(--cell-bg-2) 100%);
}

.modern-forum-card .subforum-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--link-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modern-forum-card .subforum-count {
    font-size: 13px;
    color: var(--link-color);
    font-weight: 600;
    background: var(--cell-bg-1);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--link-color);
}

.modern-forum-card .modern-subforum-content {
    background: var(--cell-bg-1);
    border-top: 1px solid var(--border-color);
}

/* Integrated subforum cards within forum cards */
.modern-forum-card .modern-subforum-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    margin: 4px 8px;
    border-radius: 6px;
}

.modern-forum-card .modern-subforum-card:hover {
    background: var(--cell-bg-1);
    border-color: var(--link-color);
    transform: translateX(2px);
}

.modern-forum-card .subforum-title-link {
    color: var(--link-color);
    font-weight: 600;
}

.modern-forum-card .subforum-title-link:hover {
    color: var(--button-hover);
}

/* Subforum toggle arrow */
.tbTransparent.clps .subforum-toggle {
    display: inline-block;
    width: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    color: var(--accent-color);
    font-weight: bold;
    margin-right: 8px;
}

.tbTransparent.clps .subforum-toggle.expanded {
    transform: rotate(90deg);
}

/* Subforum dropdown content */
.tbTransparent.clps .subforum-dropdown-content {
    padding: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
}

.tbTransparent.clps .subforum-dropdown-content .tbTransparent {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.tbTransparent.clps .subforum-dropdown-content .tbTransparent td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

.tbTransparent.clps .subforum-dropdown-content .tbTransparent tr:last-child td {
    border-bottom: none;
}

.tbTransparent.clps .subforum-dropdown-content .tbTransparent tr:hover td {
    background: rgba(74, 144, 226, 0.05);
}

/* Subforum item styling */
.tbTransparent.clps .subforum-dropdown-content .rdficon.fcell {
    width: 40px;
    text-align: center;
    color: var(--accent-color);
    font-size: 18px;
    font-weight: bold;
}

.tbTransparent.clps .subforum-dropdown-content strong a {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tbTransparent.clps .subforum-dropdown-content strong a:hover {
    color: var(--accent-color);
}

/* Stats columns */
.tbTransparent.clps .subforum-dropdown-content .txtC {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.tbTransparent.clps .subforum-dropdown-content .txtC strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* First row (header) specific styling */
.tbTransparent.clps>tbody>tr:first-child td {
    padding: 0;
}

.tbTransparent.clps>tbody>tr:first-child .rdficon.fcell {
    padding: 16px 12px;
    width: 40px;
}

/* Icon in header */
.tbTransparent.clps .rdficon.fcell {
    text-align: center;
    vertical-align: middle;
}

/* Override the main container styling to match the actual structure */
.tbTransparent.clps {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    width: 100% !important;
}

.tbTransparent.clps:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--accent-color) !important;
}

.tbTransparent.clps td {
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* Responsive design for subforums */
@media (max-width: 768px) {
    .tbTransparent.clps .subforum-dropdown-header {
        padding: 12px 16px;
        font-size: 15px;
    }

    .tbTransparent.clps .subforum-dropdown-content .tbTransparent td {
        padding: 10px 16px;
    }

    .tbTransparent.clps .subforum-dropdown-content strong a {
        font-size: 14px;
    }

    .tbTransparent.clps .subforum-dropdown-content .txtC {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tbTransparent.clps .subforum-dropdown-header {
        padding: 10px 12px;
        font-size: 14px;
    }

    .tbTransparent.clps .subforum-dropdown-content .tbTransparent td {
        padding: 8px 12px;
    }

    .tbTransparent.clps .subforum-dropdown-content strong a {
        font-size: 13px;
    }

    .tbTransparent.clps .subforum-dropdown-content .txtC {
        font-size: 12px;
    }
}

/* Dark theme enhancements for subforums */
[data-theme="dark"] .tbTransparent.clps .subforum-dropdown-header {
    background: linear-gradient(135deg, var(--cell-bg-2) 0%, var(--cell-bg-1) 100%);
}

[data-theme="dark"] .tbTransparent.clps .subforum-dropdown-header:hover {
    background: linear-gradient(135deg, var(--cell-bg-1) 0%, var(--menu-hover) 100%);
}

[data-theme="dark"] .tbTransparent.clps .subforum-dropdown-content {
    background: var(--cell-bg-1);
}

[data-theme="dark"] .tbTransparent.clps .subforum-dropdown-content .tbTransparent tr:hover td {
    background: rgba(74, 144, 226, 0.1);
}

/* Dark mode styles for registration form fields */
[data-theme="dark"] td.tbClCp {
    border: 1px solid #444;
    background: #2a2a2a;
    color: #e0e0e0;
}

[data-theme="dark"] td.tbClCp.vTop {
    background: #2a2a2a;
    color: #e0e0e0;
}

[data-theme="dark"] td.txtR {
    color: #e0e0e0;
}

[data-theme="dark"] A.username:hover {
    background-color: var(--cell-bg-2);
}

/* Subforums styling */
.subforums-container {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto 20px;
    border: 1px solid #dadada;
    border-radius: 3px;
    background-color: #FFFFFF;
}

.subforums-header {
    display: flex;
    padding: 10px;
    font-weight: bold;
    color: #775454;
    border-bottom: 1px solid #dadada;
    background-color: #F6F8ED;
}

.subforum-heading {
    flex: 1;
}

.subforum-heading.txtC {
    flex: 0 0 100px;
    text-align: center;
}

.subforums-list {
    display: flex;
    flex-direction: column;
}

.subforum-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #dadada;
}

.subforum-item:last-child {
    border-bottom: none;
}

.subforum-icon {
    margin-right: 10px;
    color: #775454;
}

.subforum-info {
    flex: 1;
}

.subforum-title {
    font-weight: bold;
    color: #775454;
    text-decoration: none;
}

.subforum-title:hover {
    text-decoration: underline;
}

.subforum-description {
    font-size: 14px;
    color: #707070;
}

.subforum-stats {
    display: flex;
    flex: 0 0 200px;
    text-align: center;
}

.subforum-topics,
.subforum-posts {
    width: 50%;
}

@media (max-width: 768px) {
    .subforums-header {
        display: none;
    }

    .subforum-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .subforum-stats {
        display: flex;
        width: 100%;
        margin-top: 10px;
        justify-content: space-around;
        text-align: left;
    }

    .subforum-topics::before {
        content: "Topics: ";
        font-weight: bold;
    }

    .subforum-posts::before {
        content: "Posts: ";
        font-weight: bold;
    }

    /* General rule - any GIF */

    /* Mobile menu and post layout modifications for 430px width resolution */
    @media (max-width: 430px) {

        /* Compact main menu for narrow mobile screens */
        .capMenu {
            width: 98%;
            padding: 8px;
            margin: 0 auto 12px auto;
            border-radius: 8px;
            font-size: 12px;
            line-height: 20px;
        }

        /* Stack menu items vertically or make them more compact */
        .capMenu td {
            padding: 2px 4px;
            font-size: 12px;
            vertical-align: middle;
        }

        /* Make menu links more touch-friendly */
        .capMenu a {
            padding: 4px 6px;
            font-size: 12px;
            border-radius: 4px;
            display: inline-block;
            min-height: 24px;
            line-height: 16px;
        }

        /* Adjust utility buttons for mobile */
        .capMenu .menu-utility-btn {
            width: 24px;
            height: 24px;
            margin: 2px !important;
            border-radius: 4px;
        }

        .capMenu .menu-utility-btn svg {
            width: 12px;
            height: 12px;
        }

        /* Navigation cells compact layout */
        .navCell,
        .navCellSel {
            padding: 2px 4px;
            font-size: 12px;
            margin: 1px;
            min-height: 24px;
            line-height: 20px;
        }

        /* Make separator more compact */
        .capMenu .l_sepr {
            font-size: 10px;
            padding: 0 2px;
        }

        /* Adjust table layout for mobile menu */
        .capMenu table {
            width: 100%;
        }

        /* If menu needs to be horizontal, use flexbox */
        .capMenu tr {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 2px;
        }

        .capMenu td {
            flex: 1 1 auto;
            text-align: center;
        }

        /* Post author block layout for mobile 430px */
        .modern-post-container table.forums tr:first-child {
            display: block !important;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            margin-bottom: 6px;
            padding: 8px;
        }

        /* Hide the left icon cell on mobile */
        .modern-post-container table.forums tr:first-child td.postedLeftCell {
            display: none !important;
        }

        /* Author info block - make it horizontal compact */
        .modern-post-container table.forums tr:first-child td.pauthor {
            display: flex !important;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            width: 95% !important;
            padding: 4px !important;
            margin-bottom: 6px;
        }

        /* Avatar in author block */
        .modern-post-container table.forums tr:first-child td.pauthor img {
            width: 40px !important;
            height: 40px !important;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* On phone widths bump the avatar up so it reads as an avatar
           rather than a tiny badge next to the username. Only the
           .user-avatar wrapper — mood icons, profile chips, etc. are
           sibling <div>s and keep their own sizing. */
        @media (max-width: 430px) {
            .modern-post-container table.forums tr:first-child {
                margin-bottom: 0px;
                padding: 0px 8px;
            }
            .modern-post-container table.forums tr:first-child td.pauthor div.user-avatar img {
                width: 40px !important;
                height: 40px !important;
            }
        }

        /* Username and rank text */
        .modern-post-container table.forums tr:first-child td.pauthor .username {
            font-size: 13px;
            font-weight: bold;
            margin-right: 6px;
        }

        .modern-post-container table.forums tr:first-child td.pauthor .authtxtSm {
            font-size: 11px;
            color: var(--secondary-text);
            margin-left: 4px;
        }

        /* Mood icon */
        .modern-post-container table.forums tr:first-child td.pauthor div img {
            width: 20px !important;
            height: 20px !important;
            margin-left: auto;
        }

        /* Post metadata and action links */
        .modern-post-container table.forums tr:first-child td.txtSm {
            display: block !important;
            width: 95% !important;
            padding: 4px !important;
            font-size: 11px;
            border-top: 1px solid var(--border-color);
            margin-top: 6px;
            padding-top: 6px;
        }

        /* Right-aligned action links */
        .modern-post-container table.forums tr:first-child td.txtR {
            display: block !important;
            width: 95% !important;
            text-align: left !important;
            margin-top: 4px;
            padding: 2px 4px;
            font-size: 11px;
        }

        /* Make action links compact */
        .modern-post-container table.forums tr:first-child td.txtR a {
            font-size: 11px;
            padding: 2px 4px;
            margin-right: 6px;
            display: inline-block;
        }
    }


}

/* Hide reCAPTCHA v3 badge since we use it invisibly */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Sticky Menu */
.capMenu {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.capMenu.no-sticky {
    position: static;
    top: auto;
    z-index: auto;
}

/* Fragment-navigation offset: land the post-container's top flush
   against the sticky stack — no cosmetic gap. Uses the live CSS
   vars that syncStickyMenuHeight() in common.js keeps up to date,
   with a static fallback for the first paint before JS runs. */
a[id^="msg"],
.modern-post-container {
    scroll-margin-top: calc(var(--sticky-menu-height, 48px) + var(--sticky-breadcrumb-height, 0px));
}

/* Spaceship-game captcha: show a Start button instead of auto-booting
   the game iframe the moment the page loads. User clicks → iframe's
   src is populated from data-src and the intro panel is swapped out. */
.spaceship-captcha {
    width: 470px;
    max-width: 100%;
}

.spaceship-captcha-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 470px;
    max-width: 100%;
    height: 250px;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid var(--border-color, #ccc);
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--cell-bg-1, #FEFFF9) 0%, var(--cell-bg-2, #F6F8ED) 100%);
    color: var(--text-color, inherit);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.spaceship-captcha-intro:hover {
    border-color: var(--link-color, #D8A063);
}

.spaceship-captcha-intro svg {
    color: var(--link-color, #D8A063);
}

.spaceship-captcha-copy {
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.82;
}

.spaceship-captcha-start {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--link-color, #D8A063);
    border-radius: 6px;
    background: var(--link-color, #D8A063);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.spaceship-captcha-start:hover {
    background: var(--button-hover, #c78f52);
    border-color: var(--button-hover, #c78f52);
}

.spaceship-captcha-start:active {
    transform: scale(0.97);
}

.spaceship-captcha.started .spaceship-captcha-intro {
    display: none;
}

.spaceship-captcha.started .spaceship-captcha-frame {
    display: block;
    border: 2px solid var(--border-color, #ccc);
    border-radius: 0.5rem;
}

/* Hide the form's "Продолжить" submit button until the captcha game is
   in play — clicking it before doing anything just produced a blank no-op.
   JS flips the wrapper's `.captcha-active` class when Start is pressed. */
.captcha-submit {
    display: none;
}

body.captcha-active .captcha-submit {
    display: inline-block;
}

[data-theme="dark"] .spaceship-captcha-start {
    color: #1a1a1a;
}

/* Compact forum/topic header (table.forums at the top of vtopic /
   vthread pages only — main page / ldisc must NOT inherit this).
   Upstream markup uses <br><br> and .vmTP/.vmBT (10px each) which
   adds a lot of empty space above the H1 and around the pagination
   — tighten it here without touching the templates. */
body[data-page-action="vtopic"] #page-content > table.forums,
body[data-page-action="vthread"] #page-content > table.forums {
    margin-bottom: 6px;
}

body[data-page-action="vtopic"] #page-content > table.forums .vmTP,
body[data-page-action="vthread"] #page-content > table.forums .vmTP {
    padding-top: 2px;
}

body[data-page-action="vtopic"] #page-content > table.forums .vmBT,
body[data-page-action="vthread"] #page-content > table.forums .vmBT {
    padding-bottom: 2px;
}

body[data-page-action="vtopic"] #page-content > table.forums h1.headingTitle,
body[data-page-action="vthread"] #page-content > table.forums h1.headingTitle {
    font-size: 19px;
    margin: 0;
    line-height: 1.25;
}

/* Kill the hard-coded <br><br> vertical gaps inside the pagination row */
body[data-page-action="vtopic"] #page-content > table.forums > tbody > tr > td > br,
body[data-page-action="vthread"] #page-content > table.forums > tbody > tr > td > br {
    display: none;
}

/* Compact pagination strip for forum topic pages.
   Replaces the old <tr><td>&nbsp;</td><td><br>…<br><br></td></tr>
   scaffold + .tbTransparent wrapper below the list. A ruled label +
   pill row on the page background — not a card, so it doesn't compete
   visually with the discussion cards. Same component reused above and
   below the topic list. */
.topics-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    width: 95%;
    max-width: 1400px;
    margin: 8px auto 10px;
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 12.5px;
    line-height: 1;
    color: var(--text-color);
}

/* "Страница N из M" — the first <span class="noWrap txtNr"> the PHP
   emits. Dimmed, with a thin right rule acting as a separator. */
.topics-pagination > .noWrap.txtNr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    margin-right: 4px;
    border-right: 1px solid var(--border-color);
    color: var(--secondary-text, var(--text-color));
    font-size: 11.5px;
    letter-spacing: 0.3px;
    opacity: 0.78;
    white-space: nowrap;
}
.topics-pagination > .noWrap.txtNr img {
    width: 10px;
    height: 14px;
    opacity: 0.7;
}

/* Tighten pill rhythm. Only overrides the global margins on
   .navCell/.navCellSel INSIDE .topics-pagination so other pagers
   (admin, groupTitle) keep their spacing. */
.topics-pagination .navCell,
.topics-pagination .navCellSel {
    margin: 0;
    min-width: 26px;
    text-align: center;
}

/* "Дальше »" — trailing bare .mnblnk link. Subtle by default, soft
   terracotta on hover. */
.topics-pagination > a.mnblnk:not(.navCell):last-child {
    padding: 3px 10px;
    margin-left: 4px;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.topics-pagination > a.mnblnk:not(.navCell):last-child:hover {
    background: var(--cell-bg-2);
    color: var(--link-color);
}

/* Narrow-viewport fallback — label wraps above the pills. */
@media (max-width: 560px) {
    .topics-pagination {
        gap: 3px 4px;
        padding: 4px 6px;
        font-size: 12px;
    }
    .topics-pagination > .noWrap.txtNr {
        flex-basis: 100%;
        justify-content: center;
        padding: 0 0 4px;
        margin: 0 0 4px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* Compact sticky breadcrumb under .capMenu — always-available nav so
   users don't have to scroll to the bottom .forums table to jump
   back to the section index. */
/* Fade .localtime in once the JS converter has formatted it into the
   viewer's locale. Server-rendered text is in server time / raw
   format; JS rewrites to local time. Start at opacity:0 so the pre-
   conversion text never flashes, transition up to 1 when the
   data-converted attribute flips. Element stays in layout the whole
   time, so no reflow. */
.localtime {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}
.localtime:not([data-converted]) {
    opacity: 0;
}

.page-breadcrumb {
    /* Static — only shown near the top of the page, scrolls away with
       the rest of the content. Was position:sticky, un-pinned per UX
       feedback. */
    position: static;
    font-size: 11.5px;
    line-height: 1.35;
    text-align: center;
    color: var(--text-color, inherit);
    background: transparent;
    border: 0;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    white-space: nowrap;
    scrollbar-width: none;
    /* Collapsed state — used whenever the breadcrumb has no content (main
       page, or any page where we hide it). */
    opacity: 0;
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
}

/* Smooth collapse/expand ONLY after the initial page load settles.
   On first paint the transition caused posts to visibly jump when the
   breadcrumb scraped its content and max-height animated from 0 → 25px,
   pushing anchored posts down inside `pinAnchorScroll`'s 800ms window.
   The transition is still useful on AJAX nav swaps between pages, hence
   it's re-enabled once .animated is flipped on after load. */
.page-breadcrumb.animated {
    transition:
        max-height 0.22s ease,
        opacity 0.18s ease,
        padding 0.22s ease;
}

.page-breadcrumb.has-content {
    opacity: 0.7;
    max-height: 80px; /* generous ceiling; actual height is ~22px, more if wrapped */
    padding: 3px 12px;
    overflow-x: auto; /* allow horizontal scroll for long chains, now that the collapse is done */
}

.page-breadcrumb::-webkit-scrollbar {
    display: none;
}

.page-breadcrumb.has-content {
    display: block;
}

.page-breadcrumb:hover,
.page-breadcrumb:focus-within {
    opacity: 1;
}

/* Sort toggle — two-icon segmented control replacing the verbose
   "Выборка по новым X / Отбор по новым Y" pair. Left icon = new
   replies first, right icon = new topics first. Active has a tan
   accent background + border; inactive is ghosty and tints on hover. */
.sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(120, 85, 85, 0.25));
    background: transparent;
    line-height: 0;
}

.sort-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-color, inherit);
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease,
                color 0.15s ease, transform 0.12s ease;
    text-decoration: none;
}

.sort-toggle-btn:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.08);
    text-decoration: none;
}

.sort-toggle-btn.active {
    opacity: 1;
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.16);
}

.sort-toggle-btn.active:hover {
    background: rgba(215, 160, 99, 0.22);
}

.sort-toggle-btn svg {
    display: block;
}

/* Home icon as the first crumb — replaces repeating the site name,
   which is already carried by the top-of-page wordmark. */
.page-breadcrumb .crumb-home {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.page-breadcrumb .crumb-home:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    text-decoration: none;
}

.page-breadcrumb .crumb-home-icon {
    display: block;
}

.page-breadcrumb .crumb {
    color: inherit;
    text-decoration: none;
}

.page-breadcrumb a.crumb:hover {
    text-decoration: underline;
    color: var(--link-color, #c78f52);
}

.page-breadcrumb .crumb.current {
    font-weight: 600;
    opacity: 0.85;
}

.page-breadcrumb .sepr {
    opacity: 0.4;
    margin: 0 6px;
}

[data-theme="dark"] .page-breadcrumb {
    background: transparent;
    border: 0;
}

/* Mobile Sticky Menu Wrapper */
#mnbl_headmenu {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-color, #FAF9F6);
}

#mnbl_headmenu.no-sticky {
    position: static;
    top: auto;
}

iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}
/* Guest login block in dark mode */
[data-theme="dark"] table.forums .groupTitle .textForm {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #555;
}
[data-theme="dark"] table.forums .groupTitle .navCellSel {
    background-color: #333;
    border-color: #555;
}
[data-theme="dark"] table.forums .groupTitle .navCellSel a {
    color: #ccc;
}

/* Guest login block - full dark mode */
[data-theme="dark"] .groupTitle {
    background-color: #1e1e1e;
    color: #ccc;
}

/* @mention links in posts */
.mention-link {
    color: #007bff;
    font-weight: 500;
    text-decoration: none;
}
.mention-link:hover {
    text-decoration: underline;
}
[data-theme="dark"] .mention-link {
    color: #5ba3f5;
}

/* Pre-wysiwyg skeleton — an empty frame that reserves the exact
   space the mounted wysiwyg (toolbar + editor) will occupy, so
   there's no layout jump on page load. The script inserts the real
   wysiwyg-container before the shell and hides it. */
.wysiwyg-shell {
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-color, #fff);
    min-height: 280px;
}

/* Hide the entire reply form until the page has settled (images
   loaded, WYSIWYG mounted, fonts swapped). Once the reveal script
   flips the `form-revealed` class, everything inside fades in.
   Scoped to `.form-fade-reveal` (opt-in) so other forms using the
   same #postMsg id — tools_edit_post.html, tools_send_password.html,
   login form — don't inherit the fade and stay visible.
   Uses opacity only — NO filter/transform here, because those
   create a stacking context that traps position:fixed descendants
   (e.g. .smilies-panel and .forums-modal). */
form.form-fade-reveal {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity;
}

form.form-fade-reveal.form-revealed {
    opacity: 1;
}

/* CLS fix — lazy post images render a 1×1 base64 placeholder while
   class="lazy" is on; when the real image loads (IntersectionObserver
   in js/lazy-loading.js swaps data-src → src and removes .lazy) the
   box pops from ~1px tall to hundreds of pixels, shoving every post
   and the reply form below it. Reserving a sane default aspect ratio
   on the placeholder keeps vertical space steady. Once .lazy is
   stripped post-load, the image renders at its own intrinsic ratio.
   Only scoped to .postedText images so small avatars (.authorIcon)
   keep their explicit width/height. */
.postedText img.lazy,
.postedText figure.post-embed img.lazy {
    aspect-ratio: 3 / 2;
    background: var(--cell-bg-1, rgba(0, 0, 0, 0.03));
}

.wysiwyg-toolbar-skeleton {
    padding: 8px;
    background: var(--button-bg, #f9f9f9);
    border-bottom: 1px solid var(--border-color, #eee);
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Fake buttons render the same text/labels as the real toolbar so
   the first paint already shows the final look. When JS mounts the
   real toolbar the swap happens over the same content — no pop. */
.wysiwyg-btn-fake {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #ddd);
    background: var(--button-bg, #fff);
    color: var(--text-color, #333);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 14px;
    min-width: 24px;
    line-height: 1.2;
    user-select: none;
    pointer-events: none;
}

[data-theme="dark"] .wysiwyg-btn-fake {
    background: var(--button-bg, #2a2a2a);
    border-color: var(--border-color, #444);
    color: var(--text-color, #eee);
}

/* Editor body skeleton — MUST render at the exact same total height
   as the real .wysiwyg-editor so the mount doesn't snap 20px on
   flip. Real .wysiwyg-editor (defined in the JS-injected <style>
   block) uses default content-box: min-height 200 + padding 10+10
   = 220px. Drop box-sizing:border-box here to match. */
.wysiwyg-editor-skeleton {
    min-height: 200px;
    padding: 10px;
    background: var(--bg-color, #fff);
}

/* Raw textarea hides by default so the skeleton stands in for it
   until the JS mounts. The script then flips wysiwyg-mounted on the
   shell, at which point the skeletons hide and the real container
   takes over. A <noscript> override below keeps the textarea usable
   if JS is disabled. */
.wysiwyg-pre {
    display: none;
}

/* Once the JS flips .wysiwyg-mounted on the shell, the shell's own
   frame (border + background) steps aside so the real container
   owns the visible chrome. Skeleton toolbar hidden. */
.wysiwyg-shell.wysiwyg-mounted {
    border: 0;
    background: transparent;
    overflow: visible;
}
.wysiwyg-shell.wysiwyg-mounted .wysiwyg-toolbar-skeleton,
.wysiwyg-shell.wysiwyg-mounted .wysiwyg-editor-skeleton {
    display: none;
}

/* Skeleton already shows the final labels, so the swap to the
   real container doesn't need a fade — it just replaces like-with-
   like. (No animation kept here intentionally.) */

/* ------------------------------------------------------------------
   Compact thread footer
   Consolidates pagination, breadcrumb, forum switcher and mod tools
   into a tight, responsive block. Replaces the old stack of loose
   tables with generous vertical whitespace between them.
   ------------------------------------------------------------------ */
.thread-footer {
    max-width: 1400px;
    width: 95%;
    margin: 20px auto 24px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
}

/* Wraps pagination + Разделы button on the same flex row so the
   footer mirrors the thread header's layout (page numbers with the
   grid button next to them). The pagination <nav> defaults to
   display:block → takes full row width and pushes the button below.
   Force both children to inline-flex so they sit shoulder-to-
   shoulder and the pair is centred as a group. */
.thread-footer-pages-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.thread-footer-pages-row .thread-footer-pagination {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    gap: 2px;
}
.thread-footer-pages-row .thread-forums-btn {
    flex: 0 0 auto;
}

/* --- Pagination row -----------------------------------------------
   Matches the header's inline pagination look: tight, tabular, muted.
   Centered in the footer (vs. inline in the header). */
.thread-footer-pagination {
    text-align: center;
    padding: 2px 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    line-height: 1.2;
}

.thread-footer-pagination .noWrap {
    font-size: inherit;
}

.thread-footer-pagination a,
.thread-footer-pagination .navCell,
.thread-footer-pagination .navCellSel {
    padding: 1px 4px;
}

.thread-footer-pagination:empty {
    display: none;
}

/* --- Unified footer row -------------------------------------------
   Merged: icon + breadcrumb on the left, pagination + Разделы button
   on the right. Breadcrumb has flex:1 so it consumes the middle space
   and the pagination block sits flush-right. When the row can't fit,
   flex-wrap kicks in: breadcrumb takes the full first line, pagination
   drops below. */
.thread-footer-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 2px 0;
}
/* Pagination + Разделы button travel together as one group so they
   wrap to a new line as a pair (never splitting the button alone). */
.thread-footer-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;  /* push right of the breadcrumb on a wide row */
}

.thread-footer-icon-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

.thread-footer-icon-link:hover {
    opacity: 1;
}

.thread-footer-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.thread-footer-breadcrumb {
    flex: 0 1 auto;  /* shrink-but-don't-grow so .thread-footer-nav stays right of it on wide rows */
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color, inherit);
}

.thread-footer-breadcrumb a {
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.thread-footer-breadcrumb a:hover {
    /* Override the global `A.mnblnk:hover { transform: translateX(2px) }`
       so breadcrumb links don't shift right on hover — a subtle
       colour deepening is all we want. */
    transform: none !important;
    text-decoration: none;
    color: var(--text-color);
}

.thread-footer-sep {
    opacity: 0.45;
    user-select: none;
}

.thread-footer-current {
    font-weight: 500;
    opacity: 0.85;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Switcher: tight inline form ---------------------------------- */
.thread-footer-switcher {
    flex: 0 0 auto;
    margin-left: auto;
}

.thread-footer-switcher table,
.thread-footer-switcher .tbTransparentmb,
.thread-footer-switcher .tbTransparent {
    margin: 0;
    width: auto;
    max-width: none;
}

.thread-footer-switcher td {
    padding: 0;
}

.thread-footer-switcher .selectTxt {
    max-width: 220px;
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 0.5rem;
}

.thread-footer-switcher .inputButton {
    margin: 0;
    padding: 2px 5px;
    line-height: 1;
}

/* Forum-switcher submit button — a transparent arrow-only glyph.
   No background, border, or padding; hover draws a subtle color shift
   and nudges the arrow to hint directionality. */
.forum-switcher-go {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color, inherit);
    opacity: 0.6;
    cursor: pointer;
    line-height: 0;
    border-radius: 4px;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.forum-switcher-go:hover,
.forum-switcher-go:focus-visible {
    opacity: 1;
    color: var(--link-color, #D8A063);
    transform: translateX(2px);
    outline: none;
}

.forum-switcher-go:active {
    transform: translateX(3px);
}

.forum-switcher-go svg {
    display: block;
}

/* ------------------------------------------------------------------
   Dark-mode adaptation for topic-status & author SVG icons
   These icons bake in a light-gray gradient disc (#f8f8f8 → #e8e8e8)
   and a dark-gray foreground. In dark mode they glow bright white.
   invert(0.92) + hue-rotate(180deg) flips lightness while preserving
   hue, so grayscale icons land on a dark disc with a light-gray
   foreground. Supersticky is excluded — its red disc is already
   high-contrast on dark and inverting would wash it out.
   ------------------------------------------------------------------ */
[data-theme="dark"] img[src*="/img/topic_"]:not([src*="supersticky"]),
[data-theme="dark"] img[src$="/img/author.svg"] {
    filter: invert(0.92) hue-rotate(180deg);
}

/* ------------------------------------------------------------------
   Forum header — same compact single-row layout as .thread-header,
   but for topic-list pages. Forum icon · title · inline pagination
   · sort-toggle + "Новая тема" pill on the right. Sticky breadcrumb
   above still carries the full path.
   ------------------------------------------------------------------ */
.forum-header {
    max-width: 1400px;
    width: 95%;
    box-sizing: border-box;
    margin: 12px auto 14px;
    padding: 6px 0 12px;
    border-bottom: 1px solid rgba(215, 160, 99, 0.14);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-theme="dark"] .forum-header {
    border-bottom-color: rgba(215, 160, 99, 0.2);
}

/* sr-only — data source for the sticky .page-breadcrumb bar */
.forum-header-breadcrumb {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.forum-header-row {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
}

.forum-header-icon-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.forum-header-icon-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.forum-header-icon {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 4px;
}

.forum-header-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--link-color, #D8A063);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.forum-header-pages {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    line-height: 1.2;
    padding: 2px 0;
}

.forum-header-pages:empty { display: none; }

.forum-header-pages::before {
    content: "·";
    opacity: 0.6;
    padding-right: 2px;
}

.forum-header-pages .noWrap { font-size: inherit; }

.forum-header-pages a,
.forum-header-pages .navCell,
.forum-header-pages .navCellSel {
    padding: 1px 4px;
}

.forum-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* "Новая тема" — pill button wrapping whatever anchor $startNewTopicLink
   emits. Span is just a collapse target when empty. */
.forum-header-new-topic:empty {
    display: none;
}

.forum-header-new-topic a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(215, 160, 99, 0.3);
    background: rgba(215, 160, 99, 0.08);
    color: var(--link-color, #D8A063);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease,
                transform 0.12s ease;
}

.forum-header-new-topic a::before {
    content: "+";
    font-size: 15px;
    line-height: 0.6;
    font-weight: 600;
}

.forum-header-new-topic a:hover {
    background: rgba(215, 160, 99, 0.18);
    border-color: rgba(215, 160, 99, 0.6);
    color: var(--link-color, #D8A063);
    transform: translateY(-1px);
    text-decoration: none;
}

@media (max-width: 680px) {
    .forum-header {
        width: 100%;
        margin: 8px auto 10px;
        padding: 6px 10px 10px;
    }

    .forum-header-row {
        gap: 6px 10px;
    }

    .forum-header-title {
        flex-basis: 100%;
        order: 2;
        font-size: clamp(16px, 4.5vw, 20px);
    }

    .forum-header-pages {
        order: 3;
        flex-basis: 100%;
        font-size: 12px;
    }

    .forum-header-pages::before { display: none; }

    .forum-header-actions {
        order: 1;
    }
}

/* ------------------------------------------------------------------
   Thread header — compact, trading-terminal aesthetic.
   Replaces the old 3-row table (breadcrumb / h1 / pagination) with
   one dense flex row: forum icon · topic title · inline pagination
   · bell button. The sticky page-breadcrumb already tells the user
   where they are, so this row focuses on the topic, its position,
   and the subscribe action.
   ------------------------------------------------------------------ */
.thread-header {
    max-width: 1400px;
    width: 95%;
    margin: 12px auto 14px;
    padding: 6px 0 12px;
    border-bottom: 1px solid rgba(215, 160, 99, 0.14);
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Required so `width: 100%` + horizontal padding on mobile
       doesn't push the total box past the viewport. Desktop path
       has 0 horizontal padding so was unaffected — mobile adds
       10px each side and overflowed without border-box. */
    box-sizing: border-box;
    min-width: 0;
}

/* Any descendant that contains nowrap content (pagination strip)
   needs to be scrollable rather than pushing the parent past the
   viewport on narrow screens. */
.thread-header,
.thread-header * {
    min-width: 0;
}

[data-theme="dark"] .thread-header {
    border-bottom-color: rgba(215, 160, 99, 0.2);
}

/* Hidden data source for the sticky .page-breadcrumb bar — scraped by
   updateBreadcrumb() in common.js. Kept in the DOM (not display:none
   on the contents, but visually hidden) so screen readers can still
   read it as the page's semantic breadcrumb while the sticky bar is
   the sole visible one. */
.thread-header-breadcrumb {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.thread-header-row {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
}

.thread-header-icon-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.thread-header-icon-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.thread-header-icon {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 4px;
}

.thread-header-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--link-color, #D8A063);
    overflow: hidden;
    text-overflow: ellipsis;
    /* Keep the title readable on wrap without pushing the row too tall. */
    word-break: break-word;
}

.thread-header-title a {
    color: inherit;
}

/* Inline pagination — small, muted, tabular numerals.
   A leading "·" separator visually links it to the title. */
.thread-header-pages {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    line-height: 1.2;
    padding: 2px 0;
}

.thread-header-pages:empty {
    display: none;
}

.thread-header-pages .noWrap {
    font-size: inherit;
}

.thread-header-pages a,
.thread-header-pages .navCell,
.thread-header-pages .navCellSel {
    padding: 1px 4px;
}

/* Subscribe / watch bell — ghost button, accent on hover/active. */
.thread-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.thread-watch-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-color, inherit);
    opacity: 0.55;
    padding: 5px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: opacity 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease;
}

.thread-watch-btn:hover,
.thread-watch-btn:focus-visible {
    opacity: 1;
    color: var(--link-color, #D8A063);
    border-color: rgba(215, 160, 99, 0.35);
    outline: none;
}

.thread-watch-btn:active {
    transform: scale(0.94);
}

.thread-watch-btn svg {
    display: block;
}

/* Compact icon-only forums-modal trigger, sibling of .thread-watch-btn.
   Same ghost-button chrome so the two sit visually balanced. */
.thread-forums-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-color, inherit);
    opacity: 0.55;
    padding: 5px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: opacity 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease;
}
.thread-forums-btn:hover,
.thread-forums-btn:focus-visible {
    opacity: 1;
    color: var(--link-color, #D8A063);
    border-color: rgba(215, 160, 99, 0.35);
    outline: none;
}
.thread-forums-btn:active { transform: scale(0.94); }
.thread-forums-btn svg { display: block; }

/* Responsive: on narrow widths, let pagination drop to a second row
   below the title while the bell stays pinned to the right edge. */
@media (max-width: 680px) {
    .thread-header {
        width: 100%;
        margin: 8px auto 10px;
        padding: 6px 10px 10px;
    }

    .thread-header-row {
        gap: 6px 10px;
        width: 100%;
        min-width: 0;
    }

    .thread-header-title {
        flex-basis: 100%;
        order: 2;
        font-size: clamp(16px, 4.5vw, 20px);
        /* Very long words (e.g. URL pasted as a title) would
           otherwise extend past the viewport on narrow screens. */
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .thread-header-pages {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
        font-size: 12px;
        /* Long pagination strips (20+ pages) wrapped .noWrap would
           overflow the viewport. Allow wrapping on narrow widths
           while keeping individual page-number groups intact via
           the inner .noWrap spans. */
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .thread-header-pages .noWrap {
        white-space: normal;
    }

    .thread-header-pages::before {
        display: none;
    }

    .thread-header-actions {
        order: 1;
    }
}

/* --- Reply form (mainPostArea) ------------------------------------
   Nested tables default to width:95% which, inside the already-95%
   footer, would make the editor ~90% of viewport — narrower than
   .modern-post-container. Force it to fill the footer so outer edges
   line up pixel-perfect with the posts list above. */
.thread-footer > form#postMsg {
    width: 100%;
    margin: 0;
}

.thread-footer > form#postMsg > .tbTransparent,
.thread-footer > form#postMsg > .tbTransparentmb {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Zero out default table/cell padding on the reply form so the editor
   bleeds to the footer's edges. */
.thread-footer > form#postMsg > .tbTransparent > tbody > tr > td,
.thread-footer > form#postMsg > .tbTransparent > tr > td {
    padding-left: 0;
    padding-right: 0;
}

/* --- Post actions row (email toggle + submit + preview) --------
   Single compact row under the editor. Email notify collapses to
   just an envelope icon (text is retained for screen readers and
   as the label's tooltip). */
.post-actions-cell {
    padding-top: 10px !important;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.email-notify-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: transparent;
    color: var(--text-color, inherit);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
    line-height: 1;
}

.email-notify-toggle:hover {
    color: var(--link-color, #D8A063);
}

.email-notify-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--link-color, #D8A063);
    cursor: pointer;
}

.email-notify-toggle input[type="checkbox"]:checked ~ .email-notify-icon {
    color: var(--link-color, #D8A063);
}

.email-notify-icon {
    display: block;
    flex: 0 0 auto;
    opacity: 0.85;
}

.email-notify-toggle:hover .email-notify-icon {
    opacity: 1;
}

/* Visually-hidden label text (SR-only) — preserves the localized
   string for screen readers while the icon conveys meaning visually. */
.email-notify-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Modern post buttons -------------------------------------- */
.btn-post {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.15s ease,
                background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
}

.btn-post:active {
    transform: translateY(1px);
}

.btn-post:focus-visible {
    outline: 2px solid var(--link-color, #D8A063);
    outline-offset: 2px;
}

.btn-post-primary {
    background: linear-gradient(180deg, #8a6363 0%, #775454 100%);
    color: #FEFDFF;
    border-color: #5c3f3f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.btn-post-primary:hover {
    background: linear-gradient(180deg, #a07777 0%, #8a6363 100%);
    border-color: var(--link-color, #D8A063);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.btn-post-ghost {
    background: transparent;
    color: var(--text-color, inherit);
    border-color: var(--border-color, rgba(120, 85, 85, 0.35));
}

.btn-post-ghost:hover {
    background: rgba(215, 160, 99, 0.08);
    border-color: var(--link-color, #D8A063);
    color: var(--link-color, #D8A063);
}

/* --- Mod tools row (collapses when empty) ------------------------- */
.thread-footer-tools {
    text-align: center;
    font-size: 14px;
    opacity: 0.85;
    padding: 2px 0;
}

/* All mod-tool variables ({$closeTopic} etc.) render as <a> links when
   the viewer is a moderator. For regular users they're empty strings
   and the wrapper contains only whitespace text — hide in that case. */
.thread-footer-tools:not(:has(a)):not(:has(button)):not(:has(form)) {
    display: none;
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 680px) {
    .thread-footer {
        width: 100%;
        margin: 14px auto 18px;
        padding: 10px 10px 0;
        gap: 8px;
        /* Without border-box, the 10 px horizontal padding pushes the
           footer 20 px past the edge of page-content — visible as a
           horizontal scroll and misaligned strip on phones. */
        box-sizing: border-box;
    }

    /* Forum icon before the footer breadcrumb — redundant on narrow
       widths where the breadcrumb text already names the forum and
       every pixel of horizontal space matters. */
    .thread-footer-icon-link {
        display: none;
    }

    .thread-footer-row {
        gap: 4px 8px;
    }

    .thread-footer-switcher {
        margin-left: 0;
        width: 100%;
    }

    .thread-footer-switcher form {
        width: 100%;
    }

    .thread-footer-switcher .selectTxt {
        flex: 1 1 auto;
        max-width: none;
    }

    .thread-footer-breadcrumb {
        font-size: 14px;
    }

    .thread-footer-current {
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .thread-footer-icon {
        width: 18px;
        height: 18px;
    }

    .thread-footer {
        font-size: 13px;
    }
}


/* ==============================================================
   .capMenu — unified button strip (header top menu)
   Every text link and icon button shares one visual treatment:
   same height, radius, border, hover. Pipe separators are hidden
   (the button chrome already delineates items). On mobile the
   text labels stay but buttons shrink; search gets its own row.
   This section intentionally supersedes the older .capMenu rules
   above via CSS cascade — kept there to avoid collateral damage
   if the layout needs to be reverted quickly.
   ============================================================== */
.capMenu {
    background: var(--cell-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px !important;
    margin: 12px auto 20px !important;
    max-width: 1400px;
    width: 95%;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    line-height: 1;
    border-collapse: separate;
}
.capMenu:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Flatten the primary <td> so every link/button/search sits in
   one flex row and wraps cleanly on narrow viewports. The
   second <td class="txtR"> (mobile-switch) keeps its table-cell
   semantics and trails on the right. */
.capMenu > tbody > tr > td:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    vertical-align: middle;
    /* Collapse the "&nbsp;" and whitespace text nodes between the
       PHP-emitted anchors so the flex `gap` is the only spacing
       between buttons. Without this, each nbsp rendered as a
       ~4 px anonymous flex item and doubled the visible gap. */
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Restore typographic defaults on actual content. */
.capMenu > tbody > tr > td > a,
.capMenu #top-menu-dynamic a,
.capMenu > tbody > tr > td > button,
.capMenu .header-search-input {
    font-size: 13px;
    line-height: 1;
}

/* `<span id="watchCnt">` wraps the subscription-count link
   (genWatchAmounts in index.php). When the user has no
   subscriptions it renders empty but still becomes a flex item
   that consumes `gap`, inflating the space between Главная and
   Новое by 6 px. Collapse it when empty. */
#watchCnt:empty {
    display: none;
}

/* #top-menu-dynamic wraps the text-link cluster with surrounding
   &nbsp; + .sepr pipes. Promote it so its anchors become direct
   flex items, then fully suppress the pipes. */
.capMenu #top-menu-dynamic {
    display: contents;
}
.capMenu .sepr { display: none !important; }

/* Unified pill button for every text link + non-utility button. */
.capMenu > tbody > tr > td > a,
.capMenu #top-menu-dynamic a,
.capMenu > tbody > tr > td > button:not(.menu-utility-btn):not(.diary-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--cell-bg-2);
    color: var(--text-color) !important;
    font: 500 13px/1 inherit;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 160ms ease, border-color 160ms ease,
                color 160ms ease, box-shadow 160ms ease;
}
.capMenu > tbody > tr > td > a:hover,
.capMenu #top-menu-dynamic a:hover {
    /* Border-only hover. Avoid the `background` shorthand
       (wipes the button's `background-image` icon, causing a
       flicker that looked like a phantom SVG). Keep
       background-color/image/position stable. */
    border-color: var(--text-color);
    text-decoration: none;
    transform: none;
}
.capMenu > tbody > tr > td > a:active,
.capMenu #top-menu-dynamic a:active {
    border-color: var(--text-color);
}

/* .menu-utility-btn keeps its icon-only square identity but gets
   re-sized/re-radiused to match the text buttons exactly. !important
   needed on margin to beat the older `.capMenu .menu-utility-btn
   { margin: 0 4px !important }` rule at ~L2014 that was adding 4 px
   to each side of every utility icon (causing 4+6+4=14 px visible
   gap between siblings instead of the 6 px mock spacing). */
.capMenu > tbody > tr > td > button.menu-utility-btn,
.capMenu > tbody > tr > td > a.menu-utility-btn {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--cell-bg-2);
}
.capMenu .menu-utility-btn:hover {
    /* Border-only hover — same reasoning as the text-link rule. */
    border-color: var(--text-color);
    transform: none;
    background-color: var(--cell-bg-2);
}
.capMenu .menu-utility-btn svg { width: 16px; height: 16px; }

/* Diary button (existing identity chip) — match the height and
   use its own tan tint so it's visually distinct like in the mock. */
.capMenu .diary-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Header search — same shell as the buttons. On desktop its
   width is bounded (no flex-grow) so the auto-margin on the
   first utility link can absorb free space and push the icon
   cluster + search to the right edge. On mobile (≤720 px)
   search takes full row width via the mobile override. */
.capMenu .header-search-wrapper {
    flex: 0 1 240px;
    min-width: 160px;
    margin: 0;
    position: relative;
}
.capMenu .header-search-input {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--cell-bg-2);
    color: var(--text-color);
    font: 500 13px/1 inherit;
    box-sizing: border-box;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.capMenu .header-search-input:focus {
    outline: none;
    border-color: var(--link-color, #775454);
    background: var(--cell-bg-1);
}

/* Pressed-state for toggle buttons keeps inset shadow + subtle fill. */
.capMenu .menu-utility-btn[aria-pressed="true"] {
    background: var(--hover-bg);
    border-color: var(--text-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .capMenu {
        padding: 5px !important;
        margin: 8px auto 12px !important;
        border-radius: 8px;
    }
    .capMenu > tbody > tr > td:first-child {
        gap: 4px;
    }
    .capMenu > tbody > tr > td > a,
    .capMenu #top-menu-dynamic a,
    .capMenu > tbody > tr > td > button:not(.menu-utility-btn):not(.diary-btn),
    .capMenu .menu-utility-btn,
    .capMenu .diary-btn,
    .capMenu .header-search-input {
        height: 28px;
        font-size: 12px;
    }
    .capMenu > tbody > tr > td > a,
    .capMenu #top-menu-dynamic a,
    .capMenu .diary-btn {
        padding: 0 8px;
    }
    /* Uniform 28 px width for every icon-only chip on mobile.
       High-specificity selectors needed to beat the href-scoped
       icon-only rules above (which set width: 32 px). Without
       this the utility icons (Поиск/Стата/Выход/1.0/Сайт) and
       the .menu-utility-btn group stayed 32 px while the text
       nav became 28 px — resulting in mixed heights on a wrapped
       row and the lone "TV" icon orphaned on its own row because
       11 items at 32 px didn't fit in 354 px viewport minus gaps. */
    .capMenu > tbody > tr > td > button.menu-utility-btn,
    .capMenu > tbody > tr > td > a.menu-utility-btn,
    .capMenu #top-menu-dynamic a[href*="action=search"],
    .capMenu #top-menu-dynamic a[href*="action=stats"],
    .capMenu #top-menu-dynamic a[href*="action=prefs"],
    .capMenu #top-menu-dynamic a[href*="mode=logout"],
    .capMenu #top-menu-dynamic a[href*="forum.binguru.net"],
    .capMenu #top-menu-dynamic a[href="https://binguru.net"],
    .capMenu #top-menu-dynamic a[href="https://binguru.net/"],
    .capMenu #top-menu-dynamic a[href*="action=pfcheck"],
    .capMenu #top-menu-dynamic a[href*="action=premodpanel"] {
        width: 28px;
    }
    .capMenu .menu-utility-btn svg { width: 14px; height: 14px; }
    /* Centre any wrapped icons so a lone orphan (e.g. 11th icon
       wrapping alone) sits centred rather than at the far left
       with a huge empty strip on its right. */
    .capMenu > tbody > tr > td:first-child {
        justify-content: center;
    }
    /* Search drops to its own line, full width. */
    .capMenu .header-search-wrapper {
        flex-basis: 100%;
        order: 99;
    }
}

@media (max-width: 430px) {
    .capMenu > tbody > tr > td > a,
    .capMenu #top-menu-dynamic a,
    .capMenu > tbody > tr > td > button:not(.menu-utility-btn):not(.diary-btn),
    .capMenu .menu-utility-btn,
    .capMenu .diary-btn,
    .capMenu .header-search-input {
        height: 26px;
        font-size: 12px;
    }
    .capMenu .menu-utility-btn { width: 26px; }
    .capMenu > tbody > tr > td > a,
    .capMenu #top-menu-dynamic a,
    .capMenu .diary-btn {
        padding: 0 7px;
    }
}

/* ==============================================================
   .capMenu — icon injection for text-link buttons
   Each known-href anchor gets a 15px inline-SVG icon on the left,
   matching the mock. On mobile (≤720px), the label is hidden and
   the icon centers so the button becomes an icon-only square.
   Unknown hrefs just render as text (no icon) — safe fallback.
   ============================================================== */
.capMenu #top-menu-dynamic a {
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 15px 15px;
}
/* Главная — home */
.capMenu #top-menu-dynamic a[href$="/forums/"],
.capMenu #top-menu-dynamic a[href$="/forums"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z'/></svg>");
}
/* Опросы */
.capMenu #top-menu-dynamic a[href*="action=polls"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 17V9'/><path d='M12 17V5'/><path d='M17 17v-6'/></svg>");
}
/* Регистрация */
.capMenu #top-menu-dynamic a[href*="action=registernew"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' y1='8' x2='19' y2='14'/><line x1='22' y1='11' x2='16' y2='11'/></svg>");
}
/* Поиск */
.capMenu #top-menu-dynamic a[href*="action=search"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
/* Стата */
.capMenu #top-menu-dynamic a[href*="action=stats"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10'/><path d='M12 20V4'/><path d='M20 20v-7'/></svg>");
}
/* Выход — logout arrow */
.capMenu #top-menu-dynamic a[href*="mode=logout"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}
/* Профиль */
.capMenu #top-menu-dynamic a[href*="action=prefs"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
/* Уведомления */
.capMenu #top-menu-dynamic a[href*="action=notifications"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
}
/* Личные сообщения / Ящик */
.capMenu #top-menu-dynamic a[href*="pm_simple"],
.capMenu #top-menu-dynamic a[href*="pmView"],
.capMenu #top-menu-dynamic a[href*="mnbl_pm"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
/* forum.binguru.net — legacy "1.0" forum. History icon (circular
   arrow + clock hands) conveys "previous version / archive". */
.capMenu #top-menu-dynamic a[href*="forum.binguru.net"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v5h5'/><path d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/><path d='M12 7v5l4 2'/></svg>");
}
/* binguru.net — main site (external) */
.capMenu #top-menu-dynamic a[href="https://binguru.net"],
.capMenu #top-menu-dynamic a[href="https://binguru.net/"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>");
}
/* Подписки / Watching list */
.capMenu #top-menu-dynamic a[href*="action=subscriptions"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
}
/* Новое / Checker — clock icon */
.capMenu #top-menu-dynamic a[href*="action=checker"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
}

/* Dark theme: swap stroke colour on the data-URI icons by using
   the CSS filter (hue-rotate + brightness) so we don't need to
   duplicate every data-URI. */
[data-theme="dark"] .capMenu #top-menu-dynamic a {
    filter: none;
}
[data-theme="dark"] .capMenu #top-menu-dynamic a {
    --icon-tint: invert(79%) sepia(26%) saturate(358%) hue-rotate(347deg) brightness(95%) contrast(89%);
}

/* Dark theme: emit grey icons via re-stated rules with a lighter
   stroke. Same set, stroke = #D8A063 (link tan). */
[data-theme="dark"] .capMenu #top-menu-dynamic a[href$="/forums/"],
[data-theme="dark"] .capMenu #top-menu-dynamic a[href$="/forums"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=polls"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 17V9'/><path d='M12 17V5'/><path d='M17 17v-6'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=registernew"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' y1='8' x2='19' y2='14'/><line x1='22' y1='11' x2='16' y2='11'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=search"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=stats"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10'/><path d='M12 20V4'/><path d='M20 20v-7'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="mode=logout"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=prefs"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=notifications"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="pm_simple"],
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="pmView"],
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="mnbl_pm"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="forum.binguru.net"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v5h5'/><path d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/><path d='M12 7v5l4 2'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href="https://binguru.net"],
[data-theme="dark"] .capMenu #top-menu-dynamic a[href="https://binguru.net/"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=subscriptions"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=checker"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8A063' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
}

/* Mobile: collapse every text link to an icon-only square.
   `font-size: 0` reliably hides the label inside the flex item
   (text-indent fails on inline-flex). The element still carries
   its label for screen readers via the DOM text content and
   title attribute. */
@media (max-width: 720px) {
    .capMenu #top-menu-dynamic a {
        width: 28px;
        padding: 0 !important;
        font-size: 0 !important;
        background-position: center;
        background-size: 14px 14px;
    }
}

/* ==============================================================
   .capMenu — desktop icon-only utility cluster
   Mock shows the right-side cluster (Поиск, Стата, Выход, Профиль,
   1.0, Сайт) as icon-only 32 px squares, separate from the left
   nav links (Главная, Новое, Опросы, Увед., Ящик) which keep
   labels. Matched by href pattern because the markup doesn't
   encode the distinction. The first icon-only link gets
   margin-left: auto to push the whole cluster against the search
   field. `!important` beats the broader text-link rule above.
   ============================================================== */
.capMenu #top-menu-dynamic a[href*="action=search"],
.capMenu #top-menu-dynamic a[href*="action=stats"],
.capMenu #top-menu-dynamic a[href*="action=prefs"],
.capMenu #top-menu-dynamic a[href*="mode=logout"],
.capMenu #top-menu-dynamic a[href*="forum.binguru.net"],
.capMenu #top-menu-dynamic a[href="https://binguru.net"],
.capMenu #top-menu-dynamic a[href="https://binguru.net/"] {
    width: 32px;
    padding: 0 !important;
    font-size: 0 !important;
    background-position: center;
    background-size: 15px 15px;
}

/* Reorder the icon cluster to match the mock. Mock lists the
   built-in .menu-utility-btn group (theme, sticky, radio, TV)
   BEFORE the external-link icons (1.0, Сайт). The live DOM
   puts 1.0/Сайт inside #top-menu-dynamic (earlier in source)
   and themeToggle etc. after. Use `order:` so the visible
   sequence matches the mock without a template change.

   Order legend:
     -1: text-label nav buttons (Главная, Новое, Опросы, Увед.,
         Ящик) — default order 0 would still work, but -1 makes
         the intent explicit and keeps them leftmost regardless
         of any future utility-link additions.
      1: icon-only utility triad that sits next to the nav:
         Поиск, Стата, Выход, Профиль (tucked right side of nav).
      3: external-link icons (1.0, Сайт).
      5: the existing menu-utility-btn group (theme, sticky,
         radio, TV) — placed IMMEDIATELY left of the search
         input per the latest design: theme/pin/radio/TV cluster
         right up against the search field.
     99: header search — always last. */
.capMenu #top-menu-dynamic a[href*="action=search"],
.capMenu #top-menu-dynamic a[href*="action=stats"],
.capMenu #top-menu-dynamic a[href*="action=prefs"],
.capMenu #top-menu-dynamic a[href*="mode=logout"] {
    order: 1;
}
.capMenu #top-menu-dynamic a[href*="forum.binguru.net"],
.capMenu #top-menu-dynamic a[href="https://binguru.net"],
.capMenu #top-menu-dynamic a[href="https://binguru.net/"] {
    order: 3;
}
.capMenu > tbody > tr > td > button.menu-utility-btn,
.capMenu > tbody > tr > td > a.menu-utility-btn {
    order: 5;
}
.capMenu .header-search-wrapper {
    order: 99;
}

/* Push the utility cluster + search to the right edge on
   desktop. The left-most order:1 link (Поиск in the emitted
   order) gets margin-left:auto. !important beats the broader
   .capMenu > tbody > tr > td > a reset (which sets margin: 0). */
@media (min-width: 721px) {
    .capMenu #top-menu-dynamic a[href*="action=search"] {
        margin-left: auto !important;
    }
}

/* Keep mobile behaviour intact: on mobile every text link is
   already icon-only (font-size:0, 28px). The desktop rules
   above only apply at ≥721px implicitly because the mobile
   media query overrides width/size later in the cascade. The
   width set for desktop (32px) is fine since mobile media
   query re-sets it to 28px. */

/* Notification count — the anchor reads like "Увед. (3)". We
   can't wrap the parenthesised count in CSS, so tint the whole
   label red when count ≠ (0) using a visual nudge: the
   parentheses become a coloured pill-style accent. Fallback
   styling: keep the label readable either way. */
.capMenu #top-menu-dynamic a[href*="action=notifications"] {
    position: relative;
}
/* If the notification link ends in "(0)" there are no new
   items — strip the count to just the bell icon label. For
   any other count (1+), the label stays with its number. This
   avoids the noisy "(0)" when nothing is new. Pure CSS can't
   easily parse, so we settle for a subtle letter-spacing that
   keeps "(N)" visible without extra chrome. */

/* ==============================================================
   .capMenu — admin-only buttons (Чек Профилей, Премодерация)
   $pfverifyView and $premodLink from bb_plugins.php are only
   emitted for admins. Give them a distinctive amber-gold tint
   so they read as privileged controls separate from the normal
   nav, and collapse to icon-only squares (a shield for profile
   verification, a clipboard-check for premoderation).
   ============================================================== */
.capMenu #top-menu-dynamic a[href*="action=pfcheck"],
.capMenu #top-menu-dynamic a[href*="action=premodpanel"] {
    /* icon-only on all viewports */
    width: 32px;
    padding: 0 !important;
    font-size: 0 !important;
    background-position: center;
    background-size: 15px 15px;
    /* admin accent — amber border + amber icon tint on hover */
    border-color: rgba(180, 120, 40, 0.55) !important;
    color: #b47828 !important;
    /* Order: sit between the icon utilities (1) and the
       external-link icons (3) so they cluster with the other
       admin/utility chips on the right side. */
    order: 2;
}
.capMenu #top-menu-dynamic a[href*="action=pfcheck"]:hover,
.capMenu #top-menu-dynamic a[href*="action=premodpanel"]:hover {
    border-color: #b47828 !important;
}

/* Profile-verify — shield with a checkmark. */
.capMenu #top-menu-dynamic a[href*="action=pfcheck"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b47828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
}
/* Premoderation — clipboard with a check. */
.capMenu #top-menu-dynamic a[href*="action=premodpanel"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b47828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='m9 14 2 2 4-4'/></svg>");
}

/* Premoderation carries inline "[topics / posts]" count in
   red siblings after the <a>. Those text nodes are stripped by
   the inline header script, but if any survive we want them
   visible as a tiny badge. Hide the stray [ ] brackets entirely
   — they render as whitespace after strip anyway. */
.capMenu #top-menu-dynamic a[href*="action=premodpanel"] + span {
    display: none;
}

/* Dark theme admin accent — brighten the amber so it reads on
   dark bg without bleeding. */
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=pfcheck"],
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=premodpanel"] {
    border-color: rgba(225, 175, 90, 0.55) !important;
    color: #e1af5a !important;
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=pfcheck"]:hover,
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=premodpanel"]:hover {
    border-color: #e1af5a !important;
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=pfcheck"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e1af5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
}
[data-theme="dark"] .capMenu #top-menu-dynamic a[href*="action=premodpanel"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e1af5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='m9 14 2 2 4-4'/></svg>");
}

/* ==============================================================
   .forum-presence — footer live-state + peak-record strip
   Single flex row. Left side: live counts + active-user chip.
   Right side: historical peak in muted grey. Replaces the
   two-column <table> layout that stacked vertically.
   ============================================================== */
.forum-presence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1400px;
    width: 95%;
    margin: 0 auto 20px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--cell-bg-1);
    font-size: 13px;
    line-height: 1;
    color: var(--text-color);
    /* Without border-box, the 95% width + 28px horizontal padding + 2px
       border pushed the box past the viewport on narrow screens and
       made the footer wider than capMenu (both 95%). Border-box keeps
       them aligned. */
    box-sizing: border-box;
}
.forum-presence-now {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.forum-presence-peak {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    color: var(--secondary-text, rgba(45, 29, 20, 0.55));
    font-size: 12px;
}
[data-theme="dark"] .forum-presence-peak {
    color: rgba(231, 221, 208, 0.55);
}
.forum-presence-peak time {
    font-variant-numeric: tabular-nums;
}

.presence-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22);
    flex: 0 0 auto;
}

.presence-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--link-color, #775454);
}
[data-theme="dark"] .presence-count {
    color: var(--link-color, #D8A063);
}

.presence-sep {
    opacity: 0.4;
    font-weight: 400;
}

.presence-users {
    color: var(--link-color, #775454);
}
.presence-users a {
    color: inherit;
    text-decoration: none;
}
.presence-users a:hover { text-decoration: underline; }

/* Mobile: let the peak section wrap cleanly under the live
   section, keeping both on their own lines. The flex-wrap
   handles this naturally; just tighten gap. */
@media (max-width: 600px) {
    .forum-presence {
        padding: 8px 12px;
        gap: 6px 12px;
        font-size: 12px;
        /* page-content already centers at 95 %; inside it, take the full
           inner width so presence's outer edge lines up with capMenu. */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .forum-presence-peak {
        font-size: 11px;
    }

    /* Match .capMenu and .forum-presence — all three page-level strips
       share the same 95 % centered footprint at phone widths, so the
       wysiwyg form inside page-content lines up with the header and
       footer edges instead of hanging off the viewport. */
    #page-content {
        width: 95%;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}

/* ==============================================================
   Mobile refactor for category (subforum) page — e.g. /kripta-8/
   The default <=768 px rules stacked each .subforum-item
   vertically with "Topics: / Posts:" labels, producing ~273 px
   tall empty-feeling rows. Switch to a compact single-line
   layout: icon + title/desc stacked tight · stats tucked right.
   Container widens to match the rest of the page strips (95 %).
   ============================================================== */
@media (max-width: 768px) {
    .subforums-container {
        /* .modern-forums-container parent is already 95 % of the
           viewport (matching .capMenu). Nested 95 % shrinks the
           child to 90 % of viewport and misaligns left/right
           edges. 100 % fills the parent so every container edge
           lines up with the capMenu. */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .subforum-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
    }

    .subforum-icon {
        margin-right: 0;
        flex: 0 0 auto;
    }
    .subforum-icon svg {
        width: 20px;
        height: 20px;
    }

    .subforum-info {
        flex: 1 1 auto;
        min-width: 0;
    }
    .subforum-title {
        font-size: 14px;
        line-height: 1.2;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .subforum-description {
        font-size: 11px;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .subforum-stats {
        flex: 0 0 auto;
        width: auto;
        margin-top: 0;
        gap: 10px;
        justify-content: flex-end;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        color: var(--secondary-text, #707070);
    }
    .subforum-topics,
    .subforum-posts {
        width: auto;
        white-space: nowrap;
    }
    /* Drop the "Topics:" / "Posts:" prefixes — numbers alone are
       self-explanatory and save horizontal space. */
    .subforum-topics::before,
    .subforum-posts::before {
        content: none;
    }
}

/* --------------------------------------------------------------
   Mobile-only minimal treatment for the per-discussion stats
   (views / replies / votes) on the forum index and category
   pages. Desktop keeps the bordered card look; mobile strips
   chrome so the numbers float free over the card background.
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .discussion-stats .stat-item {
        /* background-color (longhand) instead of the shorthand —
           the shorthand resets background-image to initial,
           which would wipe the label-replacement icon added by
           the :nth-of-type rules below. */
        background-color: transparent !important;
        border: none !important;
        padding: 2px 4px !important;
        min-width: 0 !important;
        gap: 4px !important;
        border-radius: 0 !important;
    }
    .discussion-stats .stat-item:hover {
        background-color: transparent !important;
        border-color: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .discussion-stats {
        gap: 12px !important;
    }
    .discussion-stats .stat-number {
        font-size: 13px;
    }
}

/* Stats icons on subforum / topic-list cards (.discussion-stats).
   Labels are hidden by modern_discussions.css; this block adds
   the glyph via background-image on the <a>.stat-item. The
   .stat-divider sits between as a <div> and is skipped by
   :nth-of-type, which counts element-type position only.
   Main-index cards use a different DOM (see
   main_last_discuss_cell.html — inline <svg> in .stat-icon)
   and are updated there, not here. */
.discussion-stats .stat-item {
    padding-left: 20px !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 14px 14px !important;
}

/* Views — bullseye: outlined outer ring + filled center dot. */
.discussion-stats .stat-item:nth-of-type(1) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='1.5'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3' fill='%23707070' stroke='none'/></svg>");
}
/* Replies — speech bubble with two content lines. */
.discussion-stats .stat-item:nth-of-type(2) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a4 4 0 0 1-4 4h-3l-4 4v-4H7a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/><line x1='7.5' y1='9' x2='14.5' y2='9'/><line x1='7.5' y1='12' x2='12.5' y2='12'/></svg>");
}
/* Votes / polls — bar chart. */
.discussion-stats .stat-item:nth-of-type(3) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10'/><path d='M12 20V4'/><path d='M20 20v-7'/></svg>");
}

/* Dark-theme tan-grey stroke + fill. */
[data-theme="dark"] .discussion-stats .stat-item:nth-of-type(1) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a79a8c' stroke-width='1.5'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3' fill='%23a79a8c' stroke='none'/></svg>") !important;
}
[data-theme="dark"] .discussion-stats .stat-item:nth-of-type(2) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a79a8c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a4 4 0 0 1-4 4h-3l-4 4v-4H7a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/><line x1='7.5' y1='9' x2='14.5' y2='9'/><line x1='7.5' y1='12' x2='12.5' y2='12'/></svg>") !important;
}
[data-theme="dark"] .discussion-stats .stat-item:nth-of-type(3) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a79a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10'/><path d='M12 20V4'/><path d='M20 20v-7'/></svg>") !important;
}

/* Category-page container alignment (mobile): the nested
   .modern-discussions-container-topics inherits 95 % width from
   its own rule, but its parent .modern-forums-container is
   already 95 % of viewport — 95 % × 95 % shrinks it to 90 % and
   misaligns the grid's edges against capmenu. Force 100 % so
   every container on the page shares one edge. */
@media (max-width: 768px) {
    .modern-forums-container .modern-discussions-container-topics,
    .modern-forums-container .modern-discussions-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    /* .subforums-list sits inside .subforums-container with its
       own default styling. Make sure it fills the container. */
    .subforums-container .subforums-list {
        width: 100%;
    }
}

/* Hide the "Главная" link in capmenu when we're already on the
   forum index — a link to itself adds noise without navigation
   value. body[data-page-action] is set by main_header.html from
   the PHP $action; empty string or "index" = forum index. */
body[data-page-action=""] .capMenu #top-menu-dynamic a[href$="/forums/"],
body[data-page-action="index"] .capMenu #top-menu-dynamic a[href$="/forums/"] {
    display: none;
}

/* Dark theme: .forums-toggle-btn transparent bg. */
[data-theme="dark"] .forums-toggle-btn {
    background: transparent;
}
[data-theme="dark"] .forums-toggle-btn:hover,
[data-theme="dark"] .forums-toggle-btn:focus-visible {
    background: transparent;
}

/* Dark theme: .smilies-disable-toggle — native checkbox renders as a
   bright white square against the dark post form. color-scheme flips
   the browser-native control palette to dark; the explicit color and
   border-color reinforce the wrapper against the darker background. */
[data-theme="dark"] .smilies-disable-toggle,
[data-theme="dark"] .email-notify-toggle {
    color: var(--link-color);
}
/* Custom-paint the checkbox so its border (and fill, when checked)
   share the same --link-color as the wrapper. Drops the native
   browser styling entirely; the ::after draws the checkmark. */
[data-theme="dark"] .smilies-disable-toggle input[type="checkbox"],
[data-theme="dark"] .email-notify-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--link-color);
    border-radius: 2px;
    background: transparent;
    position: relative;
}
[data-theme="dark"] .smilies-disable-toggle input[type="checkbox"]:checked,
[data-theme="dark"] .email-notify-toggle input[type="checkbox"]:checked {
    background: var(--link-color);
}
[data-theme="dark"] .smilies-disable-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 3px;
    height: 7px;
    border: solid var(--bg-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Email-notify checkbox is 14×14 (vs 12×12 for smilies), so the
   checkmark glyph sits one pixel further right and is one taller. */
[data-theme="dark"] .email-notify-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid var(--bg-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}