.modern-discussions-container {
    /* Pixel-identical outer width with .capMenu / .modern-user-login /
       .modern-post-container: border-box + 95% / max 1400px. */
    box-sizing: border-box;
    max-width: 1400px;
    width: 95%;
    margin: 24px auto 0 auto;
    padding: 0;
    min-height: 500px;
    /* Prevent CLS */
    contain: content;
}

.modern-discussions-container-topics {
    max-width: 1400px;
    width: 95%; /* match table.forums above so cards align with the header breadcrumb left edge */
    margin: 24px auto 0 auto;
    padding: 0;
}

/* Discussions Header */
.discussions-header {
    border: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    padding: 10px 20px;
    margin-bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.discussions-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.discussions-icon-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--link-color);
    flex-shrink: 0;
}

.discussions-title-header {
    flex: 1;
}

/* Site name where the dedicated wordmark used to be. Takes the tan
   accent + uppercase tracking treatment so it reads like a mast
   rather than a link. */
.discussions-sitename {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--link-color, #D8A063);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.discussions-sitename:hover {
    opacity: 0.85;
    text-decoration: none;
    color: var(--link-color, #D8A063);
}

.discussions-main-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--link-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.discussions-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modern-refresh-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 6px;
    color: var(--button-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.modern-refresh-btn:hover {
    background: var(--menu-hover);
    border-color: var(--link-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.modern-refresh-btn svg {
    transition: transform 0.3s ease;
}

/* Icon-only variant used when the ticker needs the horizontal space. */
.modern-refresh-btn--icon {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    gap: 0;
}
.modern-refresh-btn--icon svg {
    width: 14px;
    height: 14px;
}

.modern-refresh-btn:hover svg {
    transform: rotate(180deg);
}

.discussions-sort {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    text-align: right;
}

.sort-text {
    color: var(--secondary-text);
    font-weight: 500;
}

.sort-link {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.sort-link:hover {
    color: var(--button-hover);
    text-decoration: underline;
}

/* Header ticker — 4 rotating fun stats inline in the discussions header.
   Pill tabs double as the "eyebrow label" for the visible slide. All data
   sits as data-* attrs on the pills; JS swaps DOM on click, no fetch. */
/* Ticker anchors flush-left; the right-side controls get auto-margin so
   they hug the right edge regardless of viewport width. */
.discussions-header-content > .discussions-controls { margin-left: auto; }
.tk-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    flex-shrink: 0;
}
.tk-tabs {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.tk-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-text);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
}
.tk-pill:hover {
    color: var(--link-color);
    background: color-mix(in srgb, var(--link-color) 8%, transparent);
}
.tk-pill.is-active {
    background: var(--link-color);
    color: #fff;
}
[data-theme="dark"] .tk-pill.is-active {
    color: var(--bg-color);
    background: #D8A063;
}
.tk-topic {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.tk-slide {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}
.tk-slide.is-active { display: inline-flex; }
.tk-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: color-mix(in srgb, #D8A063 18%, transparent);
    color: #D8A063;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tk-ico svg { width: 13px; height: 13px; }
.tk-title {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tk-title:visited { color: var(--text-color); }
.tk-title:hover { color: var(--link-color); }
.tk-meta {
    font-size: 11.5px;
    color: var(--secondary-text);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Ticker modal — same visual DNA as the forums-modal in default.css,
   but wider and with post-row items instead of a tree. One modal per
   slide that has data; all hidden by default, the matching one gets
   .is-open on title-link click. */
.tk-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;
}
.tk-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s ease;
}
.tk-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1001;
    width: 92vw;
    max-width: 640px;
    max-height: 80vh;
    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;
}
.tk-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"] .tk-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);
}
.tk-modal-header {
    padding: 14px 40px 10px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--link-color, #D8A063);
    border-bottom: 1px solid rgba(215, 160, 99, 0.14);
}
.tk-modal-close {
    position: absolute;
    top: 8px;
    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);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tk-modal-close:hover {
    opacity: 1;
    color: var(--link-color, #D8A063);
    background: rgba(215, 160, 99, 0.12);
}
.tk-modal-body {
    padding: 4px 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.tk-modal-empty {
    padding: 20px;
    text-align: center;
    color: var(--secondary-text);
    font-size: 13px;
}
.tk-modal-item {
    display: block;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(215, 160, 99, 0.1);
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.12s ease;
}
.tk-modal-item:hover {
    background: rgba(215, 160, 99, 0.08);
    color: var(--text-color);
}
.tk-modal-item:last-child { border-bottom: 0; }
.tk-modal-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.tk-modal-item-author {
    font-weight: 600;
    font-size: 13px;
    color: var(--link-color);
}
.tk-modal-item-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #D8A063 18%, transparent);
    color: #D8A063;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.tk-modal-item-when {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--secondary-text);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tk-modal-item-sub {
    font-size: 11.5px;
    color: var(--secondary-text);
    margin-bottom: 2px;
}
.tk-modal-item-excerpt {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.tk-modal-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .tk-meta { display: none; }
    .tk-divider--right { display: none; }
}
@media (max-width: 760px) {
    .tk-divider { display: none; }
    .tk-tabs {
        order: 5;
        flex: 1 1 100%;
        /* Parent .discussions-header-content is align-items: flex-start
           on mobile, so without explicit cross-axis sizing this nav would
           bloat to its content's intrinsic width (431px from the nowrap
           pills) and burst past the viewport. align-self: stretch +
           min-width: 0 makes it match the parent's width, and then the
           overflow-x: auto below actually engages so "Некромант" is
           reachable via horizontal swipe instead of clipping off-screen. */
        align-self: stretch;
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-top: 8px;
        border-top: 1px dashed var(--border-color);
    }
    .tk-tabs::-webkit-scrollbar { height: 3px; }
    .tk-tabs::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }
    .tk-topic {
        order: 4;
        flex: 1 0 100%;
    }
}

/* Discussions Stats Header */
.discussions-stats-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-text);
}

.stat-column {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-column:first-child {
    justify-content: flex-start;
}

.stat-column:nth-child(2) {
    justify-content: center;
}

.stat-column:last-child {
    justify-content: flex-end;
}

.stat-column svg {
    opacity: 0.7;
}

/* Discussions Grid */
.discussions-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom: none;
    overflow: hidden;
}

/* Pages that render the grid without the header + footer chrome
   (currently /forums/2/ and beyond) get the full border box so the
   card group still reads as a unified container. */
.discussions-grid.standalone {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.modern-discussions-container-topics .discussions-grid {
    border: 1px solid var(--border-color);
}

/* Modern Discussion Card */
.modern-discussion-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.modern-discussion-card:hover {
    z-index: 2;
}

.modern-discussion-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-discussion-card:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

/* Discussion Card Content - Compact Single Row Layout.
   3-column grid: icon | title+author | last-preview (now also
   carries the inline view/reply counts, so the dedicated stats
   column was dropped and preview extends to the card's right
   edge). */
.discussion-card-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(320px, 2fr);
    align-items: center;
    padding: 2px 20px;
    gap: 20px;
    min-height: 88px;
}

/* Compact variant used only on section (vtopic) pages so the main
   page's recent-discussions list keeps its original breathing room. */
.modern-discussions-container-topics .discussion-card-content {
    padding: 6px 16px;
    gap: 14px;
    min-height: 56px;
}

/* Discussion Icon Container - Smaller Size */
.discussion-icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    align-self: center;
}

.discussion-icon-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--link-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-discussion-card:hover .discussion-icon-container {
    border-color: var(--link-color);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(119, 84, 84, 0.2);
}

.modern-discussion-card:hover .discussion-icon-container::before {
    opacity: 0.1;
}

.discussion-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.discussion-icon-link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.modern-discussion-card:hover .discussion-icon-link img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Discussion Main Content - Inline Layout */
.discussion-main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.discussion-title-and-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.discussion-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.modern-discussions-container-topics .discussion-title {
    font-size: 15px;
    line-height: 1.25;
}

.discussion-title-link {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.discussion-title-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--link-color);
    transition: width 0.3s ease;
}

.discussion-title-link:hover {
    color: var(--button-hover);
    transform: translateX(2px);
}

.discussion-title-link:hover::after {
    width: 100%;
}

.discussion-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--secondary-text);
}

.modern-discussions-container-topics .discussion-author {
    font-size: 12.5px;
}

.discussion-author svg {
    opacity: 0.7;
}

.author-name {
    font-weight: 400;
    color: var(--text-color);
}

.post-date {
    opacity: 0.8;
}

.discussion-last-excerpt {
    font-size: 13px;
    color: var(--secondary-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discussion-last-excerpt:not(:empty) {
    margin-top: 2px;
}

.discussion-last-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    align-self: stretch;
}

.modern-discussions-container-topics .discussion-last-preview {
    gap: 6px;
    padding: 6px 12px;
}


.last-post-snippet {
    color: var(--link-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* iOS Safari font-boosting (text autosizing) inflates the font of a
       block it deems wide — a preview holding a long unbreakable URL
       (e.g. m57245) gets singled out and renders larger than its
       siblings on iPhone. Pin the adjust to 100% to disable boosting,
       and let long URLs wrap so the snippet never becomes "wide". */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.last-post-snippet:hover {
    color: var(--button-hover);
}

/* Rich snippet formatting — injected by richifySnippets() in common.js.
   The server emits the preview as plain text (strip_tags + collapse);
   the JS pass picks out quote attributions and media placeholders and
   wraps them so the preview reads as structured content, not a wall
   of text. */
.last-post-snippet .preview-quote {
    color: var(--secondary-text);
    border-left: 2px solid var(--border-color);
    padding-left: 6px;
    margin-right: 4px;
}
.last-post-snippet .preview-quote-author {
    color: var(--link-color);
    font-weight: 500;
    margin-right: 2px;
}
.last-post-snippet .preview-pill {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 1px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.5;
    background: rgba(119, 84, 84, 0.12);
    color: var(--link-color);
    white-space: nowrap;
    vertical-align: 1px;
    letter-spacing: 0.01em;
}
[data-theme="dark"] .last-post-snippet .preview-pill {
    background: rgba(215, 160, 99, 0.16);
}

.last-post-divider {
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.last-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--secondary-text);
}

/* Bullet separator — only between DIRECT children of
   .last-post-meta. Without the `>` combinator the rule would
   also fire between the avatar <span> and the name <span>
   nested inside .last-post-author, putting an unwanted dot
   between them. */
.last-post-meta > span + span::before {
    content: '\2022';
    margin: 0 6px;
    color: inherit;
}

.last-post-meta span.unread-mark::before {
    content: none;
    margin: 0;
}

/* Inline view/reply stats inside .last-post-meta — icon + number
   with tabular digits. The span+span::before rule above already
   drops a • bullet between them. */
.last-post-meta .last-post-meta-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.last-post-meta .last-post-meta-stat svg {
    flex: 0 0 auto;
    opacity: 0.75;
}

/* Author chip: small round avatar + name, tight gap, single
   span wrapper so the bullet-separator rule above treats the
   pair as one token. */
.last-post-meta .last-post-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.last-post-author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cell-bg-2);
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}
/* Placeholder (first letter) variant — used when a user has
   no avatar uploaded. */
.last-post-author-avatar.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--link-color);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

.last-post-author {
    font-weight: 600;
    color: var(--text-color);
}

.last-post-author:empty::before {
    content: '---';
    color: var(--secondary-text);
}

.last-post-date {
    color: var(--secondary-text);
    opacity: 0.85;
}

/* Discussion Stats - Two Card Layout */
.discussion-stats {
    display: flex;
    gap: 5px;
    align-items: stretch;
}

.discussion-stats .stat-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 80px;
    padding: 12px 16px;
    background: transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.modern-discussions-container-topics .discussion-stats .stat-item {
    gap: 8px;
    min-width: 64px;
    padding: 6px 10px;
    border-radius: 8px;
}

.discussion-stats .stat-item:hover {
    border-color: var(--link-color);
    transform: translateY(-2px);
    background: var(--cell-bg-1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.discussion-stats .stat-divider {
    display: none;
}

.discussion-stats .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    margin-bottom: 0;
    opacity: 0.8;
}

.discussion-stats .stat-icon svg {
    width: 16px;
    height: 16px;
}

.discussion-stats .stat-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

.discussion-stats .stat-number.highlight {

    /* Reddish highlight color */
}

.discussion-stats .stat-label {
    display: none;
}

/* Discussions Footer */
.discussions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.discussions-pagination {
    display: flex;
    align-items: center;
}

.pagination-info {
    font-size: 13px;
    color: var(--secondary-text);
    font-weight: 500;
}

.discussions-search {
    display: flex;
    align-items: center;
}

/* Responsive Design for Discussions */
@media (max-width: 768px) {
    .modern-discussions-container {
        /* page-content already sits at 95 % on mobile; this container
           fills that column rather than nesting 95 % inside 95 %
           (which shrinks it below capMenu's footprint). */
        width: 100%;
    }

    .discussions-header {
        padding: 16px 20px;
        border-radius: 8px 8px 0 0;
    }

    .discussions-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .discussions-icon-header {
        display: none;
    }

    .discussions-main-title {
        font-size: 16px;
    }

    .discussions-controls {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .modern-refresh-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .discussions-sort {
        font-size: 11px;
    }

    .discussions-stats-header {
        padding: 8px 12px;
        font-size: 11px;
        flex-direction: column;
        gap: 8px;
    }

    .stat-column {
        justify-content: flex-start !important;
    }

    .discussions-grid {
        border-radius: 0 0 8px 8px;
    }

    .discussion-card-content {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon main"
            "preview preview"
            "stats stats"
            "select select";
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 16px;
    }

    .discussion-icon-container {
        grid-area: icon;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        align-self: center;
        /* Center vertically with title */
        margin-right: 4px;
        order: unset;
    }

    .discussion-main-content {
        grid-area: main;
        width: 100%;
        gap: 4px;
        /* Tighter gap between title and author */
        order: unset;
    }

    .discussion-last-preview {
        grid-area: preview;
        order: unset;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px;
    }

    .last-post-snippet {
        -webkit-line-clamp: 3;
    }

    .last-post-meta {
        font-size: 11px;
        gap: 6px;
    }

    .discussion-stats {
        grid-area: stats;
        order: unset;
        display: flex;
        width: 100%;
        gap: 8px;
        padding: 0;
        border-radius: 0;
        margin-top: 4px;
    }

    .discussion-stats .stat-item {
        align-items: flex-start;
    }

    /* Replaced with icon-only on narrow viewports — see rule
       in css/default.css mobile refactor. */
    .discussion-stats .stat-label {
        display: none;
    }

    .discussion-stats .stat-divider {
        display: none;
    }

    .discussion-select {
        grid-area: select;
        order: unset;
        justify-self: end;
    }

    .modern-discussions-container-topics .discussion-card-content {
        display: flex;
        flex-direction: column;
    }

    .modern-discussions-container-topics .discussion-last-preview,
    .modern-discussions-container-topics .discussion-stats {
        width: 100%;
        max-width: none;
    }

    .discussions-footer {
        padding: 8px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .discussions-header {
        padding: 8px 12px;
    }

    .discussion-card-content {
        padding: 4px 12px;
        gap: 2px;
        border-radius: 14px;
    }

    .discussion-icon-container {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .discussion-icon-link img {
        width: 16px;
        height: 16px;
    }

    .discussion-title-row,
    .discussion-title {
        font-size: 14px;
    }

    .discussion-author,
    .discussion-meta {
        font-size: 10px;
        gap: 4px;
    }

    .discussion-last-preview {
        padding: 12px 0;
    }

    .last-post-snippet {
        font-size: 14px;
        -webkit-line-clamp: 3;
    }

    .last-post-meta {
        font-size: 10px;
        gap: 5px;
    }

    .discussion-stats {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-height: auto;
    }

    .discussion-stats .stat-item {
        align-items: center;
        gap: 4px;
        flex: 1;
        padding: 4px;
        min-width: 0;
        border-radius: 8px;
    }

    .discussion-stats .stat-number {
        font-size: 13px;
        line-height: 1;
    }

    .discussion-stats .stat-number.highlight {
        font-size: 13px;
    }

    .discussion-stats .stat-label {
        font-size: 9px;
        letter-spacing: 0.3px;
        line-height: 1;
    }

    .modern-discussions-container-topics .discussion-card-content {
        gap: 12px;
    }
}

/* Dark Theme Enhancements for Discussions */
[data-theme="dark"] .discussions-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .discussions-grid {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .discussion-icon-container {
    background: transparent;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .modern-discussion-card:hover .discussion-icon-container {
    box-shadow: 0 2px 8px rgba(187, 143, 143, 0.3);
}

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

[data-theme="dark"] .discussion-stats {
    background: transparent;
    border: none;
}

[data-theme="dark"] .discussions-footer {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .modern-refresh-btn {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .modern-refresh-btn:hover {
    background: var(--menu-hover);
    border-color: var(--link-color);
}

/* ========================================
   FORUM TOPICS - MODERN DISCUSSION CARD ENHANCEMENTS
   ======================================== */

/* Unread Topic Indicator */
.unread-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #bb8f8f;
    border-radius: 50%;
    margin-left: 8px;
    margin-top: 1px;
    /* Visual alignment */
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(255, 68, 68, 0.4);
}

/* Dark mode adjustment */
[data-theme="dark"] .unread-mark {
    background-color: #bb8f8f;
    box-shadow: 0 0 6px rgba(255, 85, 85, 0.4);
}

/* Topic-specific styling for discussion cards */
.discussion-info {
    flex: 1;
    min-width: 0;
}

.discussion-title-row {
    margin-bottom: 4px;
}

.discussion-title {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    transition: all 0.3s ease;
    position: relative;
}

.discussion-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--link-color);
    transition: width 0.3s ease;
}

.discussion-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--secondary-text);
    margin-top: 4px;
}

.discussion-author {
    display: flex;
    align-items: center;
    gap: 4px;
}

.discussion-author img {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.discussion-date {
    opacity: 0.8;
}

/* Last Post Information */
.discussion-last-preview {
    align-items: flex-start;
    text-align: left;
}

/* Topic-specific stats styling */
.modern-discussion-card .discussion-stats .stat-label {
    font-size: 9px;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

/* Hover effects for topics */
.modern-discussion-card:hover .discussion-title {
    color: var(--button-hover);
    transform: translateX(2px);
}

.modern-discussion-card:hover .discussion-author img {
    opacity: 1;
    transform: scale(1.1);
}

.modern-discussion-card:hover .last-post-author {
    color: var(--link-color);
}

/* Page navigation in topics */
.discussion-title-row .pageNav {
    display: inline-block;
    margin-left: 8px;
}

/* Minimal layout refinements for forum topics.
   Stats/select columns are fixed widths so the preview column's
   left edge lines up identically across every card (different stat
   numbers like "7.1K" vs "1.9K" used to push the preview column
   sideways row-to-row). */
.modern-discussions-container-topics .discussion-card-content {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) minmax(240px, 1fr) 180px 28px;
    grid-template-areas: "icon main preview stats select";
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.modern-discussions-container-topics .discussion-stats {
    grid-area: stats;
    justify-self: stretch;
    justify-content: flex-end;
}

.modern-discussions-container-topics .discussion-select {
    grid-area: select;
    justify-self: end;
}

.modern-discussions-container-topics .discussion-icon-container {
    grid-area: icon;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--cell-bg-1);
    box-shadow: none;
}

.modern-discussions-container-topics .discussion-main-content {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.modern-discussions-container-topics .discussion-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modern-discussions-container-topics .discussion-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.modern-discussions-container-topics .discussion-title-main {
    flex: 1 1 auto;
    min-width: 0;
}

.modern-discussions-container-topics .discussion-title {
    font-size: 16px;
    font-weight: 600;
}

.modern-discussions-container-topics .discussion-meta {
    font-size: 11px;
    gap: 8px;
    color: var(--secondary-text);
}

.modern-discussions-container-topics .discussion-last-preview {
    grid-area: preview;
    justify-self: stretch;
    align-self: stretch;
    /* Let the preview column use its full grid slot on wide screens
       (the 1fr from grid-template-columns); a fixed max-width left
       acres of empty space to the right of the snippet. */
    min-width: 0;
}

.modern-discussions-container-topics .discussion-page-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0;
}

.modern-discussions-container-topics .discussion-page-nav:empty {
    display: none;
}

.modern-discussions-container-topics .discussion-page-nav>* {
    font-size: 11px;
}

.modern-discussions-container-topics .discussion-page-nav img {
    display: none;
}

.modern-discussions-container-topics .discussion-page-nav .navCell,
.modern-discussions-container-topics .discussion-page-nav .navCellSel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    color: var(--text-color);
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.modern-discussions-container-topics .discussion-page-nav .navCell:hover {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #ffffff;
}

.modern-discussions-container-topics .discussion-page-nav .navCell:hover a {
    color: inherit;
}

.modern-discussions-container-topics .discussion-page-nav .navCellSel {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #ffffff;
}

.modern-discussions-container-topics .discussion-page-nav .navCellSel strong {
    font-weight: 600;
    color: inherit;
}

.modern-discussions-container-topics .discussion-stats {
    grid-area: stats;
    background: transparent;
    border: none;
    padding: 0;
    gap: 12px;
    margin-left: auto;
}

.modern-discussions-container-topics .discussion-stats .stat-item {
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.modern-discussions-container-topics .discussion-stats .stat-number {
    font-size: 14px;
}

.modern-discussions-container-topics .discussion-stats .stat-label {
    font-size: 10px;
    letter-spacing: 0.2px;
}

.modern-discussions-container-topics .discussion-stats .stat-divider {
    display: none;
}

.modern-discussions-container-topics .discussion-select {
    grid-area: select;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12px;
    color: var(--secondary-text);
}

.modern-discussions-container-topics .discussion-select:empty {
    display: none;
}

.modern-discussions-container-topics .discussion-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.topics-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    font-size: 0;
}

.topics-pagination>* {
    font-size: 12px;
}

.topics-pagination img {
    display: none;
}

.topics-pagination .noWrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--secondary-text);
}

.topics-pagination .navCell,
.topics-pagination .navCellSel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    color: var(--text-color);
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.topics-pagination .navCell:hover {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #ffffff;
}

.topics-pagination .navCell:hover a {
    color: inherit;
}

.topics-pagination .navCellSel {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #ffffff;
}

.topics-pagination .navCellSel strong {
    color: inherit;
    font-weight: 600;
}

/* Mobile responsiveness for topics */
@media (max-width: 768px) {
    .modern-discussions-container-topics .discussion-card-content {
        grid-template-columns: 42px 1fr;
        grid-template-areas:
            "icon main"
            "icon preview"
            "icon stats"
            "icon select";
        padding: 12px 16px;
        gap: 12px;
        align-items: start;
    }

    .modern-discussions-container-topics .discussion-icon-container {
        width: 40px;
        height: 40px;
    }

    .modern-discussions-container-topics .discussion-main-content {
        gap: 12px;
    }

    .modern-discussions-container-topics .discussion-title-row {
        gap: 6px;
    }

    .modern-discussions-container-topics .discussion-meta {
        gap: 5px;
    }

    .modern-discussions-container-topics .discussion-last-preview {
        grid-area: preview;
        text-align: left;
    }

    .modern-discussions-container-topics .discussion-stats {
        grid-area: stats;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 8px 12px;
        margin: 0;
    }

    .modern-discussions-container-topics .discussion-stats .stat-item {
        align-items: flex-start;
    }

    .modern-discussions-container-topics .discussion-select {
        grid-area: select;
        justify-self: flex-end;
        align-self: flex-start;
        padding-top: 0;
    }

    .modern-discussions-container-topics .discussion-page-nav {
        justify-content: flex-start;
        gap: 3px;
    }

    .modern-discussions-container-topics .discussion-page-nav .navCell,
    .modern-discussions-container-topics .discussion-page-nav .navCellSel {
        min-width: 24px;
        height: 24px;
        padding: 0 8px;
    }

    .topics-pagination {
        justify-content: center;
        padding: 6px 0;
        gap: 4px;
    }
}

/* ========================================