/* ─────────  Nav user (logged in)  ───────── */

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.nav-user-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--rule);
    border-radius: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 120ms ease, background 120ms ease;
}
.nav-user-link:hover {
    border-color: var(--rule-strong);
    background: rgba(255, 255, 255, 0.04);
}
.nav-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
}
.nav-logout-form { margin: 0; }
.nav-logout {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--muted);
    width: 32px; height: 32px;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    transition: border-color 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-logout:hover { color: var(--text); border-color: var(--rule-strong); }

/* ─────────  Forum index (GommeHD-style categorized layout)  ───────── */

.forum-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 32px;
    align-items: flex-start;
}

.forum-grid-side {
    position: sticky;
    top: 80px;
    padding: 22px 24px;
    border: 1px solid var(--rule);
    background: var(--surface);
}
/* Last widget: no trailing border/padding so the parent's padding handles
   the bottom gap cleanly. Prevents a dangling rule under the final block. */
.forum-grid-side > *:last-child,
.forum-grid-side > *:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.side-title {
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.side-title::before {
    content: '●';
    color: var(--accent);
    font-size: 0.55em;
    transform: translateY(-2px);
}
.side-recent {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.side-recent li {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.side-recent li:last-child { border-bottom: 0; }
.side-recent-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 4px;
    transition: color 120ms ease;
}
.side-recent-title:hover { color: var(--accent); }
.side-recent-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}
.side-recent-forum {
    color: var(--text);
    border-bottom: 1px solid var(--rule);
}
.side-recent-forum:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* GommeHD-style category card: solid colored band header + clean white-ish forum rows */
.forum-cat {
    --cat-color: #c79026;
    --cat-color-deep: #a87217;
    margin: 0 0 28px;
    border: 1px solid var(--rule-strong);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 6px 18px rgba(0,0,0,0.22);
}
.forum-cat-banner {
    margin: 0;
    padding: 16px 24px 14px;
    background: var(--cat-color);
    border-bottom: 1px solid var(--cat-color-deep);
    color: #fff;
}
.forum-cat-banner-title {
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}
.forum-cat-banner-desc {
    margin: 0;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
}
.forum-cat-banner-desc strong {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: #fff;
}
/* Desaturated earth-toned category bands. Dark-mode best-practice — high
   saturation flickers / vibrates on dark bg; we drop to muted earthy palette
   that still differentiates sections without screaming. All chosen so white
   text passes WCAG AA (≥4.5:1) on the banner background. */
.forum-cat:nth-child(1) { --cat-color: #8c6520; --cat-color-deep: #604617; }  /* gold */
.forum-cat:nth-child(2) { --cat-color: #4d6a35; --cat-color-deep: #354a25; }  /* forest */
.forum-cat:nth-child(3) { --cat-color: #8c3a2c; --cat-color-deep: #672a20; }  /* terracotta */
.forum-cat:nth-child(4) { --cat-color: #3e5a73; --cat-color-deep: #2c4156; }  /* slate-blue */
.forum-cat:nth-child(5) { --cat-color: #5e4578; --cat-color-deep: #432f55; }  /* dusk-purple */
.forum-cat:nth-child(6) { --cat-color: #2d5a61; --cat-color-deep: #1d3f45; }  /* teal */

/* Forum row tile icon: light surface square with chat-bubble SVG */
.forum-row-icon {
    width: 48px; height: 48px;
    border: 1px solid var(--rule);
    background: var(--surface-2);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.forum-row:hover .forum-row-icon { color: var(--cat-color); border-color: color-mix(in srgb, var(--cat-color) 40%, var(--rule)); }

/* ─────────  Forum status strip (front of /forum/)  ───────── */

.forum-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 40px;
    padding: 10px 14px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.forum-strip-dot {
    width: 8px; height: 8px;
    border-radius: 0;
    background: var(--muted-2);
}
.forum-strip-dot.online  { background: var(--ok); }
.forum-strip-dot.offline { background: #c84030; }
.forum-strip-host {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease;
}
.forum-strip-host:hover { color: var(--accent); }
.forum-strip-sep { color: var(--muted-2); }
.forum-strip-stat { color: var(--text); font-weight: 500; }
.forum-strip-stat .forum-strip-label {
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
}
.forum-strip-cta {
    margin-left: auto;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.forum-strip-cta:hover { color: var(--text); border-bottom-color: var(--text); }
.forum-strip-cta[hidden] { display: none; }

/* ─────────  Thread feed (frontpage feel)  ───────── */

.thread-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.thread-feed-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    transition: padding 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.thread-feed-item:hover { padding-left: 12px; }
.thread-feed-item.is-pinned { background: linear-gradient(90deg, rgba(245, 200, 66, 0.04), transparent 50%); }

.thread-feed-title {
    margin: 0 0 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.thread-feed-title a {
    color: var(--text);
    transition: color 120ms ease;
}
.thread-feed-title a:hover { color: var(--accent); }

.thread-feed-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}
.thread-feed-forum {
    color: var(--text);
    border-bottom: 1px solid var(--rule);
    transition: border-color 120ms ease, color 120ms ease;
}
.thread-feed-forum:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.thread-feed-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    text-align: right;
    justify-content: center;
}
.thread-feed-stats .mono {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.thread-feed-num {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.thread-feed-stat-label {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 400;
}
.thread-feed-last {
    margin: 0;
    font-size: 0.78rem;
}

@media (max-width: 760px) {
    .forum-strip {
        font-size: 0.7rem;
        margin-bottom: 36px;
    }
    .forum-strip-cta { margin-left: 0; flex-basis: 100%; }
    .thread-feed-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .thread-feed-stats {
        flex-direction: row;
        align-items: baseline;
        gap: 16px;
        text-align: left;
        justify-content: flex-start;
    }
    .thread-feed-num { font-size: 1.1rem; }
    .thread-feed-item:hover { padding-left: 6px; }
}

/* ─────────  Forum  ───────── */

.forum-main {
    min-height: calc(100vh - 90px);
}

.forum-container {
    max-width: 1080px;
    padding: 60px 24px 80px;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
    font-size: 0.85rem;
    color: var(--muted);
}
.breadcrumbs a { color: var(--muted); transition: color 0.15s ease; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumb-sep { color: rgba(255,255,255,0.2); }

/* Page head — product-feel: small, calm, no display drama.
   Consistent across forum-page-head, profile-name, thread-title. */
.forum-page-head {
    margin: 0 0 32px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--rule);
}
.forum-page-head h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text);
}
.forum-page-head .lede {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 60ch;
}
.forum-page-actions {
    margin-top: 20px;
    display: flex;
    gap: 14px;
    align-items: center;
}

/* Flash messages */
.flash {
    padding: 10px 16px;
    border-left: 3px solid;
    margin: 0 0 24px;
    font-size: 0.92rem;
    font-weight: 500;
}
.flash-success {
    background: rgba(48, 209, 88, 0.05);
    border-left-color: #30d158;
    color: #30d158;
}
.flash-error {
    background: rgba(255, 69, 58, 0.05);
    border-left-color: #ff6961;
    color: #ff6961;
}

/* Empty state */
.empty-state {
    padding: 48px 24px 56px;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    margin: 32px 0;
}
.empty-state p { margin: 0 0 12px; }
.empty-state-icon {
    width: 38px; height: 38px;
    margin: 0 auto 14px;
    color: var(--muted-2);
}
.empty-state-title {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--text);
    margin: 0 0 6px;
}

/* Info-callout — hairline-bordered note above forms (used in unban requests) */
.info-callout {
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent);
    padding: 14px 18px;
    margin: 24px 0;
    background: rgba(245, 200, 66, 0.04);
    color: var(--text);
}
.info-callout strong {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 600;
}
.info-callout p { margin: 0; font-size: 0.95rem; line-height: 1.55; }

/* Styled 404/403 page — replaces bare text exits */
.error-page {
    max-width: 480px;
    margin: 60px auto;
    padding: 40px 24px;
    text-align: center;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.error-page-code {
    margin: 0 0 8px;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
}
.error-page-title {
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
}
.error-page-message {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.error-page-link {
    color: var(--text);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 160ms ease;
}
.error-page-link:hover { color: var(--accent); }

/* ─────────  Index: categories + forums  ───────── */

.forum-cat {
    margin: 0 0 48px;
}
.forum-cat-head {
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}
.forum-cat-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.forum-cat-title::before {
    content: '●';
    color: var(--accent);
    font-size: 0.55em;
    transform: translateY(-2px);
}

.forum-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
.forum-row {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1.6fr) 92px 92px minmax(220px, 1.4fr);
    gap: 18px;
    padding: 16px 22px;
    align-items: center;
    min-height: 76px;
    border-bottom: 1px solid var(--rule);
    transition: background 160ms ease;
}
.forum-row:hover {
    background: rgba(245, 200, 66, 0.04);
}
/* Stretched-link pattern: the title's ::after fills the entire row so the
   whole tile is clickable, while nested links (last-post-title, avatar)
   stay clickable via z-index. Keyboard focus still lands on the title. */
.forum-row-title {
    position: static;
}
.forum-row-title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
.forum-row-last-avatar,
.forum-row-last-title,
.forum-row-last-meta a,
.forum-row-icon {
    position: relative;
    z-index: 1;
}
.forum-row:focus-within {
    background: rgba(245, 200, 66, 0.06);
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}
.forum-row:last-child { border-bottom: 0; }

.forum-row-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}
.forum-row-title:hover { color: var(--cat-color); }
.forum-row-desc {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Stats: vertical pair (label on top, big number below) — separated by a thin divider */
.forum-row-stats {
    display: contents;
}
.forum-row-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
    border-left: 1px solid var(--rule);
    padding: 0 8px;
}
.forum-row-stats dt {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    color: rgba(236, 234, 216, 0.5);
    font-weight: 400;
    letter-spacing: 0.005em;
    order: 1;
}
.forum-row-stats dd {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    order: 2;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Last-post: avatar tile + title (with optional Wichtig pill) + date · author */
.forum-row-last {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border-left: 1px solid var(--rule);
    padding-left: 14px;
    min-width: 0;
}
.forum-row-last-avatar {
    display: block;
    width: 36px; height: 36px;
    border: 1px solid var(--rule);
    background: var(--surface-2);
    overflow: hidden;
}
.forum-row-last-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    display: block;
}
.forum-row-last-body { min-width: 0; }
.forum-row-last-title {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}
.forum-row-last-title:hover { color: var(--cat-color); }
.forum-row-last-pill {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 6px;
    background: rgba(200, 64, 48, 0.18);
    color: #ff8c80;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 0;
    vertical-align: 1px;
}
.forum-row-last-meta {
    margin: 3px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.forum-row-last-empty {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(236, 234, 216, 0.32);
    grid-column: 1 / -1;
    text-align: center;
    padding: 4px 0;
}

/* ─────────  Forum view: thread list  ───────── */

.thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.thread-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.6fr) minmax(0, 1fr);
    gap: 28px;
    padding: 18px 22px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s ease;
}
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--surface-2); }
.thread-row.is-pinned { background: rgba(255, 214, 10, 0.03); }

.thread-row-title {
    display: block;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text);
}
.thread-row-title:hover { color: var(--accent); }
.thread-row-meta {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.thread-row-stats {
    display: flex;
    gap: 22px;
}
.thread-row-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.thread-row-stats dt {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
}
.thread-row-stats dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.thread-row-last-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text);
}

.thread-tag {
    --tag-color: var(--accent);
    display: inline-block;
    padding: 2px 9px;
    margin-right: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--tag-color) 12%, transparent);
    color: var(--tag-color);
    border: 1px solid color-mix(in srgb, var(--tag-color) 28%, transparent);
    border-radius: 0;
    vertical-align: middle;
}
.thread-tag-pinned { --tag-color: #f5c842; }
.thread-tag-locked { --tag-color: #8a8780; }

/* ─────────  Forum view: tabs + rich rows  ───────── */

.forum-view-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 28px;
    margin-bottom: 20px;
}
.forum-view-head-actions { display: flex; gap: 12px; align-items: center; }
.forum-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 4px;
    min-height: 44px;
    border-bottom: 1px solid var(--accent);
    transition: color 160ms ease;
    white-space: nowrap;
}
.forum-action-link:hover { color: var(--accent); }
.forum-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin: 0 4px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─────────  Reports admin queue + report-dialog  ───────── */

.reports-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.report-row {
    padding: 18px 4px;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.report-row:last-child { border-bottom: 0; }
.report-row-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.report-kind {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 0;
    letter-spacing: 0.04em;
}
.report-kind-user { background: rgba(245, 200, 66, 0.14); color: var(--accent); }
.report-kind-post { background: rgba(149, 181, 110, 0.14); color: var(--ok); }
.report-time {
    color: var(--muted);
    font-size: 0.85rem;
    margin-left: auto;
}
.report-row-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.report-line {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.report-target {
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease;
}
.report-target:hover { border-bottom-color: currentColor; }
.report-context {
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
}
.report-context:hover { color: var(--text); border-bottom-color: var(--accent); }
.report-reason {
    margin: 8px 0 0;
    padding: 12px 16px;
    border-left: 2px solid var(--accent);
    background: rgba(245, 200, 66, 0.04);
    color: var(--text);
    font-style: italic;
    line-height: 1.5;
    font-size: 0.95rem;
}
.report-actions {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
}
.report-note {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 8px 0;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 160ms ease;
}
.report-note::placeholder { color: var(--muted-2); }
.report-note:focus { border-bottom-color: var(--accent); }
.report-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--text);
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    min-height: 36px;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.report-btn-resolve { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); }
.report-btn-resolve:hover { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.report-btn-dismiss { color: var(--muted); }
.report-btn-dismiss:hover { color: var(--text); border-color: var(--rule-strong); }

.report-dialog .ban-form { gap: 14px; }
.report-dialog textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--rule);
    padding: 12px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 160ms ease;
}
.report-dialog textarea:focus { border-color: var(--accent); }

.forum-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 24px;
}
.forum-tab {
    padding: 14px 18px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.forum-tab:hover {
    color: var(--text);
    background: rgba(245, 200, 66, 0.04);
}
.forum-tab:focus-visible {
    outline: none;
    color: var(--text);
    background: rgba(245, 200, 66, 0.08);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.forum-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(245, 200, 66, 0.06);
    font-weight: 600;
}
.forum-tabs-spacer { flex: 1; }
.forum-tabs-count {
    font-size: 0.82rem;
    color: var(--muted);
    padding: 14px 0;
    font-variant-numeric: tabular-nums;
}

.thread-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.thread-rows .thread-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 70px 70px 170px;
    gap: 18px;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
    margin-left: -8px;
    padding-left: 8px;
    transition: border-color 160ms ease, background 160ms ease;
}
.thread-rows .thread-row:last-child { border-bottom: 0; }
.thread-rows .thread-row:hover {
    background: rgba(245, 200, 66, 0.04);
    border-left-color: var(--accent);
}
.thread-rows .thread-row.is-pinned {
    background: linear-gradient(90deg, rgba(245, 200, 66, 0.06), transparent 60%);
}
.thread-rows .thread-row.is-pinned:hover {
    background: linear-gradient(90deg, rgba(245, 200, 66, 0.1), transparent 60%);
    border-left-color: var(--accent);
}
.thread-row-avatar {
    width: 40px; height: 40px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    border: 1px solid var(--rule);
    border-radius: 0;
}
.thread-row-avatar-link {
    display: block;
    width: 40px; height: 40px;
}
.thread-rows .thread-row-stats {
    display: contents;
}
.thread-rows .thread-row-stats > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
}
.thread-rows .thread-row-stats dt {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--muted);
}
.thread-rows .thread-row-stats dd {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.thread-rows .thread-row-last {
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}
.thread-rows .thread-row-last .thread-row-last-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.3;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.thread-rows .thread-row-last .thread-row-last-meta .muted {
    color: var(--muted);
}
.thread-rows .thread-row-last .muted.small {
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    font-size: 0.78rem;
}
.thread-rows .thread-row-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.thread-rows .thread-row-meta {
    margin: 3px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

/* ─────────  Thread page: rich post sidebar  ───────── */

.thread-page-head {
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}
.thread-page-head-meta { margin-bottom: 12px; }
.thread-page-head-forum {
    color: var(--muted);
    font-size: 0.85rem;
    transition: color 120ms ease;
}
.thread-page-head-forum:hover { color: var(--accent); }
.thread-page-head-forum strong { color: var(--text); font-weight: 600; }

.thread-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--text);
}

.thread-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: post;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
    overflow: hidden;
}

.post-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 18px;
    background: var(--surface-2);
    border-right: 1px solid var(--rule);
    text-align: center;
}
.post-author-avatar-link {
    position: relative;
    display: block;
    width: 96px; height: 96px;
}
.post-avatar {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    image-rendering: pixelated;
}
.post-author-presence {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px; height: 14px;
    border-radius: 0;
    border: 2px solid var(--surface-2);
    background: var(--muted-2);
    box-shadow: 0 0 0 1px var(--rule);
}
.post-author-presence.is-online {
    background: var(--ok);
}
.post-author-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: -0.005em;
    word-break: break-word;
    text-decoration: none;
    transition: opacity 120ms ease;
}
.post-author-name:hover { opacity: 0.85; }

.post-author-presence-text {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--muted);
}
.post-author-dot {
    width: 7px; height: 7px;
    border-radius: 0;
    background: var(--muted-2);
}
.post-author-dot.is-online { background: var(--ok); }
.post-author-dot.is-offline { background: var(--muted-2); }

.post-author-stats {
    margin: 8px 0 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--rule);
}
.post-author-stats > div {
    padding: 8px 0;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.post-author-stats > div:last-child { border-right: 0; }
.post-author-stats dt {
    font-size: 0.74rem;
    color: var(--muted);
    margin: 0;
    font-weight: 400;
}
.post-author-stats dd {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

.post-body-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.82rem;
}
.post-num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.post-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.post-anchor {
    margin-left: auto;
    color: var(--muted);
    transition: color 120ms ease;
}
.post-anchor:hover { color: var(--accent); }
.post-edited { font-style: italic; }

.post-body {
    padding: 24px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex: 1;
}

.post-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 8px 24px;
    border-top: 1px solid var(--rule);
    min-height: 52px;
}
.post-reactions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.post-react-form { margin: 0; display: inline-flex; }

/* Reaction buttons — quiet, no boxes. Emoji first, count tucked behind */
.post-react {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    min-height: 36px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 0;
    transition: background 160ms ease, color 160ms ease;
}
.post-react:hover {
    background: rgba(245, 200, 66, 0.08);
    color: var(--text);
}
.post-react.is-active {
    background: rgba(245, 200, 66, 0.14);
    color: var(--accent);
}
.post-react.is-static { cursor: default; padding: 6px 8px; }
.post-react-emoji {
    font-size: 1.05rem;
    line-height: 1;
    filter: saturate(1);
}
.post-react-count {
    font-size: 0.82rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.post-react.is-active .post-react-count { color: var(--accent); }

/* Post action links — same aesthetic as .thread-action-link, unified heights */
.post-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}
.post-action-btn,
button.post-action-btn,
a.post-action-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    min-height: 36px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: color 160ms ease, background 160ms ease;
    text-decoration: none;
}
.post-action-btn:hover {
    color: var(--text);
    background: rgba(245, 200, 66, 0.06);
}
.post-action-btn.post-menu-trigger { padding: 8px 12px; font-size: 1.05rem; }

/* ─────────  Profile page (banner + avatar + stats)  ───────── */

/* Profile card — editorial, no boxed surface, banner sits flush with hairline below */
.profile-card {
    margin: 0 0 32px;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--rule);
}
.profile-card-banner {
    width: 100%;
    height: 120px;
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    margin-bottom: 18px;
}

.profile-head {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    padding: 0 4px;
}
.profile-avatar {
    width: 88px;
    height: 88px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    image-rendering: pixelated;
}
.profile-id { min-width: 0; padding-top: 2px; }
.profile-name {
    margin: 0 0 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}
.profile-meta {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.5;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.profile-rank {
    color: var(--text);
    font-weight: 500;
}
.profile-mc {
    color: rgba(236, 234, 216, 0.78);
}
.profile-meta-sep {
    color: rgba(236, 234, 216, 0.22);
    margin: 0 8px;
}

.profile-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}
.profile-presence-dot {
    width: 6px; height: 6px;
    border-radius: 0;
    background: var(--muted-2);
}
.profile-presence.is-online .profile-presence-dot { background: var(--ok); }
.profile-presence.is-online { color: var(--ok); }

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.profile-action-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    font: inherit;
    color: var(--muted);
    font-size: 0.88rem;
    border-bottom: 1px solid var(--rule);
    transition: color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.profile-action-link:hover {
    color: var(--text);
    border-bottom-color: var(--text);
}
.profile-action-link.profile-action-danger {
    color: #ff8c80;
}
.profile-action-link.profile-action-danger:hover {
    color: #ff5555;
    border-bottom-color: #ff5555;
}

@media (max-width: 600px) {
    .profile-head {
        grid-template-columns: 64px 1fr;
        padding: 18px 16px;
    }
    .profile-avatar { width: 64px; height: 64px; }
    .profile-actions { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; }
}

/* Markdown-rendered bio: subtle prose, not screaming */
.profile-bio {
    margin: 12px 0 0;
    font-size: 1rem;
    color: var(--text);
    max-width: 60ch;
    line-height: 1.6;
}
.profile-bio p { margin: 0 0 10px; }
.profile-bio p:last-child { margin-bottom: 0; }
.profile-bio strong { color: var(--text); font-weight: 600; }
.profile-bio em { color: var(--accent); font-style: italic; }
.profile-bio a {
    color: var(--accent);
    border-bottom: 1px solid rgba(245, 200, 66, 0.3);
}
.profile-bio a:hover { border-bottom-color: var(--accent); }
.profile-bio code {
    font-family: var(--mono);
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 5px;
    border: 1px solid var(--rule);
}
.profile-bio blockquote {
    margin: 0 0 10px;
    padding: 4px 12px;
    border-left: 2px solid var(--accent);
    color: var(--muted);
}
.profile-edit-btn {
    align-self: end;
    padding-bottom: 16px;
}

.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin: 0 0 36px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.profile-stat {
    padding: 14px 18px;
    border-right: 1px solid var(--rule);
}
.profile-stat:last-child { border-right: 0; }
.profile-stat-num {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.profile-stat-label {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: rgba(236, 234, 216, 0.5);
    font-weight: 400;
    letter-spacing: 0;
}

.profile-recent { margin-top: 24px; }
.profile-thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.profile-thread-list li {
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule);
    transition: padding 200ms ease;
}
.profile-thread-list li:hover { padding-left: 12px; }
.profile-thread-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.98rem;
    color: var(--text);
}
.profile-thread-title:hover { color: var(--accent); }
.profile-thread-meta {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.profile-thread-meta a { color: var(--text); border-bottom: 1px solid var(--rule); }

/* ─────────  Settings page  ───────── */

/* ───────── Entbannungsantrag panel (top of thread.php for entbannung threads) ───────── */

.unban-panel {
    margin: 24px 0 32px;
    border: 1px solid var(--rule-strong);
    background: var(--surface);
}
.unban-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
}
.unban-panel-mark {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.7rem;
}
.unban-panel-title {
    margin: 0;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    letter-spacing: -0.01em;
}
.unban-panel-state {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid;
}
.unban-panel-state-pending {
    color: #d39851;
    border-color: rgba(211, 152, 81, 0.4);
    background: rgba(211, 152, 81, 0.08);
}
.unban-panel-state-accepted {
    color: var(--ok);
    border-color: rgba(149, 181, 110, 0.45);
    background: rgba(149, 181, 110, 0.08);
}
.unban-panel-state-rejected {
    color: #ff8c80;
    border-color: rgba(200, 64, 48, 0.45);
    background: rgba(200, 64, 48, 0.08);
}

.unban-panel-body {
    margin: 0;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.unban-panel-body > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    /* center, not baseline — the status pill has its own padding+border, so
       the pill's text baseline sits below the dt label baseline by a few px,
       which made the pill look misaligned. center keeps both blocks on the
       same horizontal axis. */
    align-items: center;
}
.unban-panel-body dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.unban-panel-body dd {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.5;
}
.unban-panel-clean { color: var(--ok); font-weight: 500; }

.unban-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    /* Eckig statt rounded — Pille bleibt visuell als Status erkennbar durch
       Background+Color, ohne pill-shape. Konsistent mit anderen Tags. */
    border-radius: 0;
    border: 1px solid currentColor;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
}
.unban-panel-status-dot {
    width: 7px;
    height: 7px;
    /* Square dot — matches eckig design rule. The status is communicated
       via color + label, the dot is just a visual marker. */
    border-radius: 0;
    background: currentColor;
}
.unban-panel-status-banned {
    background: rgba(200, 64, 48, 0.14);
    color: #ff8c80;
}
.unban-panel-status-clean {
    background: rgba(149, 181, 110, 0.14);
    color: var(--ok);
}

.unban-panel-actions {
    border-top: 1px solid var(--rule);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.unban-panel-note {
    appearance: none;
    background: var(--bg);
    border: 1px solid var(--rule);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    padding: 10px 14px;
    transition: border-color 120ms ease;
}
.unban-panel-note:focus {
    outline: 0;
    border-color: var(--accent);
}
.unban-panel-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.unban-btn {
    appearance: none;
    border: 1px solid;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.unban-btn-accept {
    border-color: rgba(149, 181, 110, 0.5);
    color: var(--ok);
}
.unban-btn-accept:hover {
    background: var(--ok);
    color: var(--bg);
    border-color: var(--ok);
}
.unban-btn-reject {
    border-color: rgba(200, 64, 48, 0.5);
    color: #ff8c80;
}
.unban-btn-reject:hover {
    background: #c84030;
    color: #fff;
    border-color: #c84030;
}
.unban-panel-hint {
    margin: 0;
    padding: 10px 18px;
    border-top: 1px solid var(--rule);
}
.unban-panel-actions + .unban-panel-hint { border-top: 0; padding-top: 0; }

@media (max-width: 600px) {
    .unban-panel-body > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ───────── Active sessions list (Settings page) ───────── */

.settings-sessions {
    margin: 48px 0 0;
}
.settings-sessions-head {
    margin: 0 0 18px;
}
.settings-sessions-head .sec-name { margin-bottom: 6px; }

.sessions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
}
.session-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    align-items: center;
}
.session-row:last-child { border-bottom: 0; }
.session-row.is-current {
    background: rgba(245, 200, 66, 0.04);
    border-left: 3px solid var(--accent);
    padding-left: 15px;
}
.session-title {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
}
.session-current-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: rgba(245, 200, 66, 0.18);
    border: 1px solid rgba(245, 200, 66, 0.3);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    vertical-align: 1px;
}
.session-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.session-meta-data {
    font-family: 'Inter', sans-serif;
    color: rgba(236, 234, 216, 0.55);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.session-meta-sep { color: rgba(236, 234, 216, 0.18); }
.session-revoke-form { margin: 0; }
.session-revoke {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}
.session-revoke:hover {
    border-color: #c84030;
    color: #ff8c80;
}
.sessions-revoke-all {
    margin: 18px 0 0;
    text-align: right;
}

/* Single-column settings — no boxed cards, stack with hairlines (XenForo-style) */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 720px;
}
.settings-card {
    padding: 24px 0;
    border: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-card:first-child { border-top: 0; padding-top: 0; }
.settings-card-head { margin: 0; }
.settings-card-head h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
    color: var(--text);
}
.settings-card-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.settings-card-hint code {
    font-family: var(--mono);
    font-size: 0.92em;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    padding: 0 4px;
}

.settings-avatar-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}
.settings-avatar-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--rule);
}

.settings-banner-preview {
    width: 100%;
    height: 140px;
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-card textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    padding: 14px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 120ms ease;
}
.settings-card textarea:focus { border-color: var(--accent); }

.file-input { display: inline-block; }
.file-input input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.file-input span {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.file-input:hover span { border-color: var(--accent); background: rgba(255, 214, 10, 0.06); }

.settings-action-hint {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}
.settings-action-hint code {
    font-family: var(--mono);
    color: var(--text);
}

.settings-card-foot {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
}

.settings-card-readonly {
    background: rgba(0, 0, 0, 0.3);
}
.settings-meta {
    margin: 0;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}
.settings-meta > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    gap: 12px;
}
.settings-meta > div:last-child { border-bottom: 0; }
.settings-meta dt {
    color: var(--muted);
    font-size: 0.85rem;
}
.settings-meta dd {
    margin: 0;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: right;
    word-break: break-all;
}
.settings-meta-uuid {
    font-family: var(--mono) !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
    letter-spacing: 0;
}

/* ─────────  Mod-badge in nav  ───────── */

.nav-mod-badge {
    display: inline-block;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

/* ─────────  Banned banner  ───────── */

.ban-banner {
    margin: 0 0 28px;
    padding: 16px 20px;
    border: 1px solid #c84030;
    border-left: 4px solid #c84030;
    background: linear-gradient(90deg, rgba(200, 64, 48, 0.12), rgba(200, 64, 48, 0.04) 50%, transparent);
    color: #ff8c80;
    font-size: 0.95rem;
    line-height: 1.5;
}
.ban-banner strong { color: #ff5555; font-weight: 600; margin-right: 6px; }
.ban-banner em { color: var(--text); font-style: italic; }
.ban-banner-target { margin-top: 24px; }

/* Minecraft-account ban (separate from forum-ban; shown only to self + mods) */
.ban-banner-mc {
    margin-top: 12px;
    border-color: #d39851;
    border-left-color: #d39851;
    background: linear-gradient(90deg, rgba(211, 152, 81, 0.10), rgba(211, 152, 81, 0.03) 50%, transparent);
    color: #ffc88a;
}
.ban-banner-mc strong { color: #d39851; }

/* Settings-page account-status card */
.account-status {
    margin: 0 0 28px;
    padding: 16px 20px;
    border: 1px solid var(--rule-strong);
    background: var(--surface);
}
.account-status.is-banned {
    border-color: #c84030;
    border-left: 4px solid #c84030;
    background: linear-gradient(90deg, rgba(200, 64, 48, 0.08), var(--surface) 50%);
}
.account-status.is-clean {
    border-left: 4px solid var(--ok);
}
.account-status-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 16px;
    align-items: center;
}
.account-status-dot {
    width: 10px; height: 10px;
    /* Eckig statt rounded — konsistent mit forum-strip-dot, post-author-dot etc. */
    border-radius: 0;
    background: var(--ok);
    margin-top: 6px;
}
.account-status.is-banned .account-status-dot { background: #c84030; }
.account-status-label {
    margin: 0 0 4px;
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 500;
}
.account-status-value {
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
}
.account-status.is-banned .account-status-value { color: #ff8c80; }
.account-status-cta { white-space: nowrap; }

@media (max-width: 600px) {
    .account-status-row { grid-template-columns: 14px 1fr; gap: 12px; }
    .account-status-cta { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}

/* Private forum hint */
.private-forum-notice {
    margin: 8px 0 0;
    padding: 6px 10px;
    border-left: 2px solid var(--accent);
    background: rgba(245, 200, 66, 0.04);
    color: var(--muted);
    font-size: 0.85rem;
}
.private-forum-notice strong { color: var(--accent); }

/* ─────────  Thread + post actions  ───────── */

.thread-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    align-items: baseline;
}
.thread-action-link,
.inline-form button.thread-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    min-height: 44px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}
.thread-action-link:hover {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.thread-action-link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.inline-form { margin: 0; display: inline-flex; }

/* Moderation dropdown — collapses Pin / Sperren / Löschen behind one trigger */
.thread-mod-menu {
    position: relative;
    margin-left: auto;
}
.thread-mod-trigger[aria-expanded="true"] {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.thread-mod-pop {
    right: 0;
    left: auto;
    top: calc(100% + 4px);
    min-width: 200px;
}
.thread-mod-pop[hidden] { display: none; }

/* Kebab menu on posts — actual styling lives on .post-action-btn.post-menu-trigger */
.post-menu {
    position: relative;
}
.post-menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 4px;
}
.post-menu-pop[hidden] { display: none; }
.post-menu-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    text-decoration: none;
}
.post-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}
.post-menu-pop form { margin: 0; }
.post-menu-danger:hover { color: #ff5555; background: rgba(200, 64, 48, 0.12); }

/* ─────────  Profile head: actions  ───────── */

.profile-head-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: end;
    padding-bottom: 6px;
}

/* ─────────  Tag picker — pill chips, used in new-thread + ban-dialog  ───────── */

.tag-picker {
    border: 0;
    margin: 0 0 22px;
    padding: 0;
}
.tag-picker legend {
    margin: 0 0 10px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
}
.tag-picker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-pick {
    --tag-color: var(--muted);
    cursor: pointer;
    user-select: none;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
.tag-pick input[type=radio] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.tag-pick span {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--tag-color) 30%, var(--rule));
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    background: transparent;
    border-radius: 0;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tag-pick:hover span {
    color: var(--tag-color);
    border-color: color-mix(in srgb, var(--tag-color) 50%, var(--rule));
}
.tag-pick input[type=radio]:checked + span {
    background: color-mix(in srgb, var(--tag-color) 14%, transparent);
    color: var(--tag-color);
    border-color: var(--tag-color);
    font-weight: 600;
}
.tag-pick input[type=radio]:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─────────  Ban dialog  ───────── */

.ban-dialog {
    border: 1px solid var(--rule-strong);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    max-width: 480px;
    width: 92vw;
}
.ban-dialog::backdrop {
    background: rgba(0, 0, 0, 0.78);
}
.ban-form {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ban-form h2 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ban-form p { margin: 0; }
.ban-form input[type=text] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    padding: 12px 14px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    outline: none;
}
.ban-form input[type=text]:focus { border-color: var(--accent); }

/* ─────────  Nav: search bar + notification bell — quiet, unboxed  ───────── */

.nav-search {
    margin: 0;
    flex: 0 1 220px;
    min-width: 0;
    position: relative;
}
.nav-search::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    background: currentColor;
    color: rgba(236, 234, 216, 0.32);
    transition: color 160ms ease;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='m21 21-5-5'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='m21 21-5-5'/></svg>") center / contain no-repeat;
    pointer-events: none;
}
.nav-search:focus-within::before { color: var(--accent); }
.nav-search input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--rule);
    padding: 7px 10px 7px 28px;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease;
}
.nav-search input::placeholder { color: var(--muted-2); }
.nav-search input:focus {
    border-color: var(--accent);
    background: rgba(245, 200, 66, 0.04);
}
.nav-search::before {
    left: 9px;
}

.nav-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    color: rgba(236, 234, 216, 0.5);
    transition: color 160ms ease;
    text-decoration: none;
}
.nav-bell:hover { color: var(--text); }
.nav-bell-icon {
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.nav-bell--mail .nav-bell-icon {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='1.5'/><path d='m3 7 9 6 9-6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='1.5'/><path d='m3 7 9 6 9-6'/></svg>");
}
.nav-bell--notif .nav-bell-icon {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6'/><path d='M10 19a2 2 0 0 0 4 0'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6'/><path d='M10 19a2 2 0 0 0 4 0'/></svg>");
}
.nav-bell.has-unread { color: var(--accent); }
/* Subtle pulse on unread bell — gentle attention without being annoying.
   3.5s interval = one slow heartbeat, not a panic alarm. */
.nav-bell.has-unread .nav-bell-icon {
    animation: nav-bell-pulse 3.5s ease-in-out infinite;
}
@keyframes nav-bell-pulse {
    0%, 100% { transform: scale(1)   rotate(0); }
    50%      { transform: scale(1.08) rotate(-4deg); }
    55%      { transform: scale(1.08) rotate(4deg); }
    60%      { transform: scale(1)   rotate(0); }
}
.nav-bell-count {
    position: absolute;
    top: -2px; right: -6px;
    background: var(--accent);
    color: var(--bg);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    line-height: 1.2;
    border-radius: 0;
    min-width: 14px;
    text-align: center;
    /* Same heartbeat phase as the icon — count nudges along with the bell */
    animation: nav-bell-count-pulse 3.5s ease-in-out infinite;
}
@keyframes nav-bell-count-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 200, 66, 0.22); }
}

/* ─────────  Markdown rendering inside .post-body  ───────── */

.post-body strong { color: var(--text); font-weight: 700; }
.post-body em { color: var(--text); font-style: italic; }
.post-body code {
    font-family: var(--mono);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rule);
    padding: 1px 6px;
    font-size: 0.92em;
    color: var(--accent);
}
.post-body a {
    color: var(--accent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transition: border-color 120ms ease;
}
.post-body a:hover { border-bottom-color: var(--accent); }
.post-body blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 3px solid var(--rule-strong);
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted);
    font-style: italic;
}
.post-body ul {
    margin: 10px 0;
    padding-left: 20px;
}
.post-body ul li { margin-bottom: 4px; }

/* @mention pill */
.mention {
    display: inline-block;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 500;
    font-size: 0.94em;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
    text-decoration: none;
    transition: background 120ms ease;
}
.mention:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent) !important;
}

/* ─────────  Notifications page  ───────── */

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
}
.notif {
    border-bottom: 1px solid var(--rule);
    transition: background 120ms ease;
}
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--surface-2); }
.notif.is-unread {
    background: linear-gradient(90deg, rgba(245, 200, 66, 0.05), transparent 30%);
}
.notif-link {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    padding: 16px 20px;
    align-items: start;
    text-decoration: none;
    color: var(--text);
}
.notif-avatar {
    width: 48px; height: 48px;
    border-radius: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
}
.notif-body { min-width: 0; }
.notif-headline {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}
.notif-headline strong { font-weight: 600; }
.notif-accent-ok  { color: var(--ok); font-weight: 500; }
.notif-accent-bad { color: #ff8c80; font-weight: 500; }
.notif-thread {
    color: var(--text);
    font-weight: 500;
    border-bottom: 1px solid var(--rule);
}
.notif-preview {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
    font-style: italic;
}
.notif-time {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}
.notif-dot {
    width: 8px; height: 8px;
    border-radius: 0;
    background: var(--accent);
    margin-top: 8px;
}

/* ─────────  Search forms — inline-underline (members + search page)  ───────── */

.search-form,
.search-inline {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 0 0 24px;
}
.search-form input[type=search],
.search-inline input[type=search] {
    flex: 1;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 8px 8px 8px 0;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 160ms ease;
}
/* WebKit native search-clear "×" — give it breathing room and tone it down */
.search-form input[type=search]::-webkit-search-cancel-button,
.search-inline input[type=search]::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
    height: 14px; width: 14px;
    margin-left: 8px;
    cursor: pointer;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23a09a8c' stroke-width='1.6' stroke-linecap='round'><line x1='3' y1='3' x2='11' y2='11'/><line x1='11' y1='3' x2='3' y2='11'/></svg>") center/contain no-repeat;
    opacity: 0.7;
}
.search-form input[type=search]::-webkit-search-cancel-button:hover,
.search-inline input[type=search]::-webkit-search-cancel-button:hover { opacity: 1; }
.search-form input[type=search]::placeholder,
.search-inline input[type=search]::placeholder {
    color: rgba(236, 234, 216, 0.32);
}
.search-form input[type=search]:focus,
.search-inline input[type=search]:focus { border-bottom-color: var(--accent); }
.search-form button[type=submit],
.search-inline button[type=submit] {
    background: none;
    border: 0;
    padding: 8px 0;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 1px solid var(--accent);
    transition: color 160ms ease;
    white-space: nowrap;
}
.search-form button[type=submit]:hover,
.search-inline button[type=submit]:hover { color: var(--accent); }

.forum-page-head-count {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}

.search-section { margin-bottom: 36px; }

.search-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.search-post {
    border-bottom: 1px solid var(--rule);
}
.search-post-link {
    display: block;
    padding: 16px 0;
    color: var(--text);
    text-decoration: none;
    transition: padding 200ms ease;
}
.search-post-link:hover { padding-left: 12px; }
.search-post-snippet {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.55;
    font-style: italic;
}
.search-post-meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.search-post-meta strong { color: var(--text); font-weight: 500; }

/* ─────────  Online users widget (sidebar)  ───────── */

.side-online {
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}
.side-online-count {
    color: var(--ok);
    font-weight: 700;
    margin-left: 6px;
}
.side-online-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.side-online-list li img {
    width: 36px; height: 36px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    border: 1px solid var(--rule);
    transition: border-color 160ms ease;
}
.side-online-list li img:hover {
    border-color: var(--accent);
}

/* ─────────  Admin layout: persistent left sidebar + content  ───────── */

.admin-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin: 0 0 32px;
}
.admin-sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
    padding: 0;
    border-right: 1px solid var(--rule);
    padding-right: 24px;
}
.admin-sidebar-kicker {
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.admin-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0 10px 12px;
    margin-left: -12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
    border-left: 2px solid transparent;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
    min-height: 40px;
}
.admin-sidebar-link:hover {
    color: var(--text);
    background: rgba(245, 200, 66, 0.04);
}
.admin-sidebar-link.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(245, 200, 66, 0.07);
    font-weight: 600;
}
.admin-sidebar-link.is-active:hover {
    background: rgba(245, 200, 66, 0.1);
}
.admin-sidebar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.admin-content {
    min-width: 0;
}

/* Per-section header with filter on the right */
.admin-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}
.admin-section-head .sec-name { margin: 0; flex: 1; }
.admin-section-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
}
.admin-section-filter input[type="search"],
.admin-section-filter select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 6px 0;
    color: var(--text);
    font: inherit;
    outline: none;
    min-width: 140px;
    transition: border-color 160ms ease;
}
.admin-section-filter input[type="search"]::placeholder { color: var(--muted-2); }
.admin-section-filter input[type="search"]:focus,
.admin-section-filter select:focus { border-bottom-color: var(--accent); }
.admin-section-filter select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23bfbcb6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6 10.5,1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 12px 8px;
    padding-right: 24px;
    cursor: pointer;
}
.admin-section-filter select:hover {
    border-bottom-color: var(--rule-strong);
}
.admin-section-clear {
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px 8px;
    transition: color 160ms ease;
}
.admin-section-clear:hover { color: var(--accent); }

.admin-table-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.forum-tab-count {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.forum-tab.is-active .forum-tab-count { color: var(--accent); }

@media (max-width: 880px) {
    .admin-layout { grid-template-columns: 1fr; gap: 24px; }
    .admin-sidebar {
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding: 0 0 18px;
    }
    .admin-sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .admin-sidebar-link {
        padding: 8px 12px;
        margin: 0;
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .admin-sidebar-link.is-active {
        border-left: 0;
        border-bottom-color: var(--accent);
    }
}

/* ─────────  Admin: Player-Lookup card  ───────── */

.player-card {
    margin: 0 0 32px;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--rule);
}
.player-card-head {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
}
.player-card-avatar {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    image-rendering: pixelated;
}
.player-card-id { min-width: 0; }
.player-card-name {
    margin: 0 0 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.player-card-meta {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--muted);
}
.player-card-meta-sep {
    color: rgba(236, 234, 216, 0.22);
}
.player-card-uuid {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--muted-2);
}

.player-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 28px;
}
.player-stats > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    align-items: baseline;
}
.player-stats > div:last-child { border-bottom: 0; }
.player-stats dt {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
}
.player-stats dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.player-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
}
.player-stat-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: currentColor;
}
.player-stat-pill-ok {
    background: rgba(149, 181, 110, 0.14);
    color: var(--ok);
}
.player-stat-pill-bad {
    background: rgba(200, 64, 48, 0.16);
    color: #ff8c80;
}
.player-stat-pill-none {
    background: rgba(236, 234, 216, 0.06);
    color: var(--muted);
}

.player-banlog {
    margin: 0 0 28px;
}
.player-banlog-table {
    margin: 14px 0 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.player-banlog-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 2.6fr) minmax(120px, 1fr) minmax(110px, auto);
    gap: 0;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.92rem;
}
.player-banlog-row > * {
    padding: 12px 14px 12px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    min-width: 0;
}
.player-banlog-row > *:first-child { padding-left: 8px; }
.player-banlog-row > *:last-child  { border-right: 0; padding-right: 4px; }
.player-banlog-head {
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}
.player-banlog-head > * { padding-top: 9px; padding-bottom: 9px; }
.player-banlog-reason {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-banlog-when { font-variant-numeric: tabular-nums; }
.player-banlog-row:last-child { border-bottom: 0; }
.player-banlog-action {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 0;
    background: rgba(236, 234, 216, 0.06);
    color: var(--muted);
    text-align: center;
}
.player-banlog-action-ban    { background: rgba(200, 64, 48, 0.16); color: #ff8c80; }
.player-banlog-action-unban  { background: rgba(149, 181, 110, 0.14); color: var(--ok); }
.player-banlog-action-edit   { background: rgba(245, 200, 66, 0.14); color: var(--accent); }

.player-rank-edit {
    margin: 0 0 24px;
}
.player-rank-form {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 14px 0 8px;
    flex-wrap: wrap;
}
.player-rank-form select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    padding: 8px 24px 8px 0;
    min-height: 40px;
    min-width: 220px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round'><polyline points='1,1 6,6 11,1'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    cursor: pointer;
}
.player-rank-form select:focus {
    outline: 0;
    border-bottom-color: var(--accent);
}

/* ─────────  Admin panel  ───────── */

.nav-admin-link {
    color: var(--accent) !important;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 0 0 40px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.admin-stat {
    padding: 18px 18px;
    border-right: 1px solid var(--rule);
    transition: background 140ms ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
    gap: 4px;
}
.admin-stat:hover { background: rgba(245, 200, 66, 0.04); }
.admin-stat:last-child { border-right: 0; }
.admin-stat dt {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-stat dd {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.admin-stat-warn dd { color: #ff8c80; }
.admin-stat-ok dd { color: var(--ok); }

.admin-section {
    margin: 0 0 40px;
}

/* Pending unban-request rows on the admin dashboard */
.admin-unban-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.admin-unban-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
    margin-left: -8px;
    padding-left: 8px;
    transition: border-color 160ms ease, background 160ms ease;
}
.admin-unban-row:last-child { border-bottom: 0; }
.admin-unban-row:hover {
    background: rgba(245, 200, 66, 0.04);
    border-left-color: var(--accent);
}
.admin-unban-row.is-pending {
    border-left-color: var(--accent);
    background: rgba(245, 200, 66, 0.03);
}
.admin-unban-avatar {
    display: block;
    width: 48px; height: 48px;
    border: 1px solid var(--rule);
    background: var(--surface-2);
    overflow: hidden;
}
.admin-unban-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}
.admin-unban-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 4px;
}
.admin-unban-title:hover { color: var(--accent); }
.admin-unban-pill {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 1px;
    border-radius: 0;
}
.admin-unban-pill-new { background: rgba(245, 200, 66, 0.16); color: var(--accent); }
.admin-unban-meta {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: var(--text);
}
.admin-unban-banstate {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}
.admin-unban-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0;
}
.admin-unban-badge-banned { background: rgba(200, 64, 48, 0.15); color: #ff8c80; }
.admin-unban-badge-clean  { background: rgba(149, 181, 110, 0.15); color: var(--ok); }
.admin-unban-go {
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.admin-unban-go:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 600px) {
    .admin-unban-row { grid-template-columns: 40px minmax(0, 1fr); }
    .admin-unban-go { grid-column: 1 / -1; justify-self: end; padding-top: 4px; }
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
}
.admin-table th {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--rule);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
}
.admin-table td {
    padding: 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: rgba(245, 200, 66, 0.03); }
.admin-table .muted.small { display: block; font-size: 0.78rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

.admin-log {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.admin-log-row {
    display: grid;
    grid-template-columns: 160px 140px auto auto 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.95rem;
    transition: background 160ms ease;
}
.admin-log-row:hover { background: rgba(245, 200, 66, 0.03); }
.admin-log-row:last-child { border-bottom: 0; }
.admin-log-time { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-log-actor { font-weight: 600; }
.admin-log-action { color: var(--text); }
.admin-log-target { color: var(--muted); font-size: 0.88rem; }
.admin-log-reason { font-style: italic; color: var(--muted); }

.admin-signups {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.admin-signup-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    transition: border-color 120ms ease, background 120ms ease;
}
.admin-signup-link:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.admin-signup-avatar {
    width: 40px; height: 40px;
    border-radius: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    flex-shrink: 0;
}
.admin-signup-link strong { display: block; font-weight: 600; }
.admin-signup-link .muted { display: block; }


/* ─────────  Markdown toolbar + preview  ───────── */

.md-wrap {
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.02);
}
.md-tabs {
    display: flex;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-2);
}
.md-tab {
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 10px 16px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.md-tab:hover { color: var(--text); }
.md-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--rule);
    background: rgba(0, 0, 0, 0.2);
}
.md-toolbar button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    width: 34px;
    height: 34px;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    opacity: 0.78;
    transition: background 120ms ease, opacity 120ms ease, border-color 120ms ease;
}
.md-toolbar button:hover,
.md-toolbar button:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--rule-strong);
    opacity: 1;
    outline: none;
}
.md-toolbar button em { font-style: italic; font-weight: 600; }

.md-textarea {
    border: 0 !important;
    background: transparent !important;
    width: 100%;
    display: block;
    padding: 14px 16px !important;
}
.md-textarea:focus {
    border: 0 !important;
    background: transparent !important;
}

.md-preview {
    padding: 16px;
    min-height: 120px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
}
.md-preview strong { color: var(--text); font-weight: 700; }
.md-preview em { color: var(--text); font-style: italic; }
.md-preview code {
    font-family: var(--mono);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rule);
    padding: 1px 6px;
    color: var(--accent);
}
.md-preview blockquote {
    margin: 12px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--rule-strong);
    color: var(--muted);
    font-style: italic;
}
.md-preview ul {
    margin: 10px 0;
    padding-left: 20px;
}
.md-preview a {
    color: var(--accent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ─────────  Post history page  ───────── */

.post-history-current { border-color: var(--accent); }
.post-history-current .post-num { color: var(--accent); }
.post-history-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.post-history-old { opacity: 0.85; }
.post-history-old .post-num { color: var(--muted); }

/* ─────────  Forum stats widget (sidebar)  ───────── */

/* Flat — the parent .forum-grid-side already has the box (border + bg).
   Each widget is a flat section with hairline below for rhythm, no
   nested padding/border (would create box-in-box visual noise). */
.side-stats {
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}
.side-stats-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.side-stats-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.88rem;
    gap: 10px;
}
.side-stats-list > div:last-child { border-bottom: 0; }
.side-stats-list dt { color: var(--muted); }
.side-stats-list dd { margin: 0; color: var(--text); font-weight: 600; }
.side-stats-list dd a { color: var(--accent); }
.side-stats-link {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    color: var(--muted);
    transition: color 120ms ease;
}
.side-stats-link:hover { color: var(--accent); }

/* ─────────  Member directory — row-based, scannable  ───────── */

.member-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.member-row {
    border-bottom: 1px solid var(--rule);
}
/* Banned-marker (mod-only): subtle red left border + low-contrast row */
.member-row.is-banned .member-row-link {
    opacity: 0.72;
    border-left-color: rgba(200, 64, 48, 0.4);
}
.member-row-ban-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ff8c80;
    border: 1px solid rgba(200, 64, 48, 0.5);
    background: rgba(200, 64, 48, 0.1);
    vertical-align: middle;
}
.member-row-link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    padding: 12px 4px;
    color: var(--text);
    border-left: 2px solid transparent;
    margin-left: -8px;
    padding-left: 8px;
    transition: border-color 160ms ease, background 160ms ease;
}
.member-row-link:hover {
    background: rgba(245, 200, 66, 0.04);
    border-left-color: var(--accent);
}
.member-row-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
}
.member-row-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    border: 1px solid var(--rule);
}
.member-row-presence {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: var(--ok);
    border: 2px solid var(--bg);
}
.member-row-id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.member-row-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: -0.005em;
}
.member-row-rank {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.85;
}
.member-row-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 64px;
}
.member-row-stat-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.member-row-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    color: var(--muted);
}

@media (max-width: 540px) {
    .member-row-link { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
    .member-row-link > .member-row-stat:nth-child(4) { display: none; }
}

/* ─────────  Best answer styling  ───────── */

.post-best {
    border: 1px solid color-mix(in srgb, var(--ok) 50%, var(--rule)) !important;
    background: color-mix(in srgb, var(--ok) 4%, var(--surface)) !important;
}
.post-best-banner {
    grid-column: 1 / -1;
    padding: 6px 24px;
    background: color-mix(in srgb, var(--ok) 14%, transparent);
    color: var(--ok);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
}

/* ─────────  Visual upgrade pass: depth + transitions  ───────── */

.thread-row,
.forum-row,
.thread-feed-item,
.connect-list a,
.notif,
.search-post-link {
    will-change: transform;
}

/* Subtle hover transitions */
@media (prefers-reduced-motion: no-preference) {
    .thread-row,
    .forum-row,
    .post-react,
    .thread-action-link,
    .post-menu-trigger {
        transition: all 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }
}

/* Forum-row hover: faint background tint */
.forum-row:hover {
    background: var(--surface-2);
}

/* Tags: hover state */
.thread-tag {
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Polish on copy/share button feedback */
[data-share-thread]:active,
[data-copy-ip]:active {
    transform: scale(0.97);
}

/* ─────────  Trending widget  ───────── */

.side-trending {
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}
.side-trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: trending;
}
.side-trending-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}
.side-trending-list li:last-child { border-bottom: 0; }
.side-trending-rank {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}
.side-trending-title {
    display: block;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 2px;
}
.side-trending-title:hover { color: var(--accent); }
.side-trending-meta {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted);
}

/* ─────────  Top Users widget  ───────── */

.side-topusers {
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}
.side-topusers-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-topusers-list li {
    border-bottom: 1px solid var(--rule);
}
.side-topusers-list li:last-child { border-bottom: 0; }
.side-topusers-list a {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    color: var(--text);
}
.side-topusers-list img {
    width: 32px; height: 32px;
    border-radius: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    border: 1px solid var(--rule);
}
.side-topusers-name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}

/* ─────────  PM (Direct Messages)  ───────── */

/* Empty state when user has zero conversations — single-column starter,
   no two-column waste, MC chat-style accents */
.pm-blank {
    max-width: 520px;
    margin: 8px 0 32px;
    padding: 28px 0 32px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.pm-blank-kicker {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--muted);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pm-blank-kicker .sec-mark {
    color: var(--accent);
    font-size: 0.55em;
    transform: translateY(-2px);
}
.pm-blank-headline {
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--text);
}
.pm-blank-headline em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}
.pm-blank-sub {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 0.95rem;
}
.pm-blank-form {
    display: flex;
    align-items: baseline;
    gap: 18px;
}
.pm-blank-form input {
    flex: 1;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 8px 0;
    color: var(--text);
    font: inherit;
    font-size: 1.05rem;
    outline: none;
    transition: border-color 160ms ease;
}
.pm-blank-form input::placeholder { color: rgba(236, 234, 216, 0.32); }
.pm-blank-form input:focus { border-bottom-color: var(--accent); }
.pm-blank-form button {
    background: none;
    border: 0;
    padding: 8px 0;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 1px solid var(--accent);
    transition: color 160ms ease;
    white-space: nowrap;
}
.pm-blank-form button:hover { color: var(--accent); }

.pm-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    min-height: 600px;
}
.pm-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--rule);
    padding-right: 32px;
    gap: 0;
}
.pm-sidebar-head {
    padding: 0 0 14px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.pm-sidebar-head h2 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pm-sidebar-head h2::before {
    content: '●';
    color: var(--accent);
    font-size: 0.55em;
    transform: translateY(-2px);
}
.pm-sidebar-count {
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.pm-list-time {
    color: var(--muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}
.pm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
}
.pm-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 120ms ease;
}
.pm-list-item:last-child { border-bottom: 0; }
.pm-list-item:hover { background: rgba(255, 255, 255, 0.025); }
.pm-list-item.is-active { background: rgba(245, 200, 66, 0.06); }
.pm-list-item.is-unread .pm-list-name { font-weight: 600; color: var(--text); }
.pm-list-item a {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 8px;
    color: var(--text);
    border-left: 2px solid transparent;
    margin-left: -10px;
    padding-left: 10px;
}
.pm-list-item.is-active a { border-left-color: var(--accent); }
.pm-avatar {
    width: 40px; height: 40px;
    border-radius: 0;
    border: 1px solid var(--rule);
    object-fit: cover;
    background: var(--surface-2);
    image-rendering: pixelated;
}
.pm-list-meta { min-width: 0; }
.pm-list-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
}
.pm-list-preview {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-list-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pm-list-unread {
    background: var(--accent);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 0;
    line-height: 1.3;
}
.pm-empty {
    padding: 24px 4px;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
}
/* "+ Neue Nachricht" — collapsed by default, expands to input + autocomplete.
   Eckig (border 0), hairline-only, fits the rest of the conversation list. */
.pm-new {
    margin-top: auto;
    padding: 14px 0 0;
    border-top: 1px solid var(--rule);
    position: relative;
}
.pm-new-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, background 140ms ease;
}
.pm-new-toggle:hover,
.pm-new-toggle:focus-visible {
    outline: none;
    border-color: var(--accent);
    background: rgba(245, 200, 66, 0.04);
}
.pm-new.is-open .pm-new-toggle {
    border-color: var(--accent);
    background: rgba(245, 200, 66, 0.06);
}
.pm-new-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}
/* Idle pulse — gentle accent-glow + border shimmer to show the button is
   interactive. Only when collapsed (open state has its own visual). */
.pm-new:not(.is-open) .pm-new-toggle-icon {
    animation: pm-plus-pulse 2.4s ease-in-out infinite;
}
@keyframes pm-plus-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 200, 66, 0.12); }
}
.pm-new.is-open .pm-new-toggle-icon {
    transform: rotate(135deg); /* "+" → "×" with overshoot from spring easing */
    animation: none;
}
.pm-new-toggle:hover .pm-new-toggle-icon {
    box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.18);
}
.pm-new-toggle-label { flex: 1; }

.pm-new-panel {
    margin-top: 10px;
}
.pm-new-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.pm-new-form input {
    grid-column: 1;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent);
    padding: 8px 4px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    outline: none;
    min-width: 0;
}
.pm-new-form input::placeholder { color: var(--muted-2); }
.pm-new-go {
    grid-column: 2;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--text);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}
.pm-new-go:hover,
.pm-new-go:focus-visible {
    outline: none;
    border-color: var(--accent);
    color: var(--accent);
}

/* Autocomplete dropdown — flat list, hairline separators, square avatars */
.pm-new-suggestions {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--surface-2, var(--surface));
    max-height: 280px;
    overflow-y: auto;
    /* slide-in when revealed */
    animation: pm-dropdown-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top;
}
.pm-new-suggestions[hidden] { display: none; }
@keyframes pm-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scaleY(0.96); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
.pm-new-suggestion {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 140ms ease, transform 140ms ease;
    /* Stagger entrance — each item slides in 40ms after the previous. */
    opacity: 0;
    animation: pm-item-in 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pm-new-suggestion:nth-child(1) { animation-delay: 30ms; }
.pm-new-suggestion:nth-child(2) { animation-delay: 70ms; }
.pm-new-suggestion:nth-child(3) { animation-delay: 110ms; }
.pm-new-suggestion:nth-child(4) { animation-delay: 150ms; }
.pm-new-suggestion:nth-child(5) { animation-delay: 190ms; }
.pm-new-suggestion:nth-child(6) { animation-delay: 230ms; }
@keyframes pm-item-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.pm-new-suggestion:last-child { border-bottom: 0; }
.pm-new-suggestion:hover,
.pm-new-suggestion.is-active {
    background: rgba(245, 200, 66, 0.06);
    transform: translateX(2px);
}
.pm-new-suggestion-avatar {
    width: 28px; height: 28px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    border: 1px solid var(--rule);
}
.pm-new-suggestion-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-new-suggestion-sub {
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.pm-conversation {
    display: flex;
    flex-direction: column;
    min-height: 540px;
}
.pm-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--text);
    padding: 12px 0 0;
}
.pm-empty-headline {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--muted);
    letter-spacing: -0.01em;
}
.pm-empty-headline em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    margin: 0 4px;
}
.pm-conv-head {
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}
.pm-conv-partner {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
    flex: 1;
    min-width: 0;
}
.pm-conv-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 0;
    border: 1px solid var(--rule);
    image-rendering: pixelated;
}
.pm-conv-name {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.25;
}
.pm-conv-status {
    margin: 3px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pm-messages {
    list-style: none;
    margin: 0;
    padding: 4px 0 16px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pm-msg {
    max-width: 75%;
    display: flex;
    flex-direction: column;
}
.pm-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.pm-msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.pm-msg-bubble {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    color: var(--text);
    line-height: 1.5;
    font-size: 0.95rem;
    word-break: break-word;
}
.pm-msg.is-mine .pm-msg-bubble {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pm-msg-meta {
    margin: 4px 6px 0;
    font-size: 0.7rem;
    color: var(--muted);
}
.pm-read { color: var(--ok); }

/* @mention autocomplete dropdown — floats next to caret in any data-md
   textarea (and PM compose). Same square aesthetic, attached to body so
   it can escape any overflow:hidden ancestor. */
.mention-pop {
    position: absolute;
    z-index: 1000;
    min-width: 240px;
    max-width: 320px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--accent);
    background: var(--surface-2, #1a1a1a);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    max-height: 220px;
    overflow-y: auto;
    animation: pm-dropdown-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mention-pop[hidden] { display: none; }
.mention-pop-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 100ms ease;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
}
.mention-pop-item:last-child { border-bottom: 0; }
.mention-pop-item:hover,
.mention-pop-item.is-active {
    background: rgba(245, 200, 66, 0.08);
}
.mention-pop-item img {
    width: 24px; height: 24px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    image-rendering: pixelated;
    border: 1px solid var(--rule);
}
.mention-pop-item-name {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.mention-pop-item-sub {
    color: var(--muted);
    font-size: 0.72rem;
}

/* Newly-arrived message: brief accent-glow that fades. JS adds .pm-msg-new
   when appending; CSS removes the visual after the animation finishes. */
.pm-msg-new .pm-msg-bubble {
    animation: pm-msg-glow 1.4s ease-out;
}
@keyframes pm-msg-glow {
    0%   { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); }
    25%  { box-shadow: 0 0 0 6px rgba(245, 200, 66, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); }
}
.pm-msg-new {
    /* Slide-in from below — feels like "the message just landed" */
    animation: pm-msg-slidein 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pm-msg-slidein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Banned-user hint (replaces send-form) and session-expired banner */
.pm-send-blocked,
.pm-auth-expired {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent);
    background: rgba(245, 200, 66, 0.04);
    color: var(--text);
    font-size: 0.9rem;
}
.pm-auth-expired { border-left-color: #ff8c80; background: rgba(200, 64, 48, 0.06); }
.pm-auth-expired a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* Typing indicator — 3 dots that breathe between visible/dim. Matches the
   muted-on-dark hairline aesthetic; no balloon, no shadow, just text + dots. */
.pm-typing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 6px 0;
    padding: 4px 0;
    font-size: 0.78rem;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    min-height: 18px;
}
.pm-typing-indicator[hidden] { display: none; }
.pm-typing-name { color: var(--text); font-weight: 500; }
.pm-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 2px;
}
.pm-typing-dots span {
    width: 4px; height: 4px;
    background: var(--muted);
    display: inline-block;
    opacity: 0.35;
    animation: pm-typing-bounce 1.2s infinite ease-in-out;
}
.pm-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.pm-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pm-typing-bounce {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .pm-typing-dots span { animation: none; opacity: 0.6; }
}

.pm-send-form {
    padding: 14px 0 0;
    border-top: 1px solid var(--rule);
}
.pm-send-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    padding: 10px 12px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 60px;
    outline: none;
}
.pm-send-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* ─────────  First-post highlight (OP)  ───────── */

.post-op {
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)) !important;
}
.post-op-banner {
    grid-column: 1 / -1;
    padding: 6px 24px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
}

/* ─────────  Markdown additions: code blocks + images  ───────── */

.post-body pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--rule);
    padding: 14px 16px;
    overflow-x: auto;
    margin: 12px 0;
    font-family: var(--mono);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}
.post-body pre code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--text) !important;
}
.post-body .post-img-link {
    display: inline-block;
    margin: 8px 0;
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 120ms ease;
}
.post-body .post-img-link:hover { border-color: var(--accent); }
.post-body .post-img {
    display: block;
    max-width: 100%;
    max-height: 480px;
    height: auto;
    object-fit: contain;
}

/* ─────────  Mobile  ───────── */

@media (max-width: 760px) {
    .forum-grid { grid-template-columns: 1fr; }
    .forum-grid-side { position: static; order: 2; }
    .forum-row { grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 18px; }
    .forum-row-stats { display: flex; grid-column: 1 / -1; padding-left: 54px; gap: 0; }
    .forum-row-stats > div { flex: 1; border-left: 0; border-right: 1px solid var(--rule); padding: 4px 0; }
    .forum-row-stats > div:last-child { border-right: 0; }
    .forum-row-last { grid-column: 1 / -1; padding-left: 54px; border-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; }
    .forum-cat-banner { padding: 14px 18px 12px; }

    .forum-view-head { grid-template-columns: 1fr; }
    .thread-rows .thread-row {
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }
    .thread-row-stats, .thread-row-last { grid-column: 1 / -1; padding-left: 52px; }

    .post {
        grid-template-columns: 1fr;
    }
    .post-author {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 16px 18px;
        gap: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        flex-wrap: wrap;
    }
    .post-author-avatar-link, .post-avatar { width: 64px; height: 64px; }
    .post-author-presence { width: 12px; height: 12px; bottom: 2px; right: 2px; }
    .post-author-stats { width: auto; flex: 1; min-width: 160px; }

    .post-header, .post-body, .post-footer { padding-left: 18px; padding-right: 18px; }

    .profile-head {
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 0 18px;
    }
    .profile-avatar { width: 96px; height: 96px; }
    .profile-edit-btn { grid-column: 1 / -1; padding: 0; }

    .profile-stats-row { grid-template-columns: repeat(2, 1fr); }
    .profile-stat:nth-child(2n) { border-right: 0; }
    .profile-stat { border-bottom: 1px solid var(--rule); }
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 32px 0 0;
}
.pagination-link {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pagination-link:hover {
    color: var(--text);
    border-color: var(--line-strong);
}
.pagination-info {
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ─────────  Thread view: posts  ───────── */

.thread-head {
    border-bottom: 0;
    padding-bottom: 12px;
    margin-bottom: 24px;
}
.thread-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.thread-meta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: post;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.post-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
    border-right: 1px solid var(--line);
}
.post-author-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.post-avatar {
    width: 80px;
    height: 80px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    image-rendering: pixelated;
    object-fit: contain;
}
.post-author-name {
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    letter-spacing: -0.01em;
    word-break: break-all;
}

.post-body-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}
.post-num {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.post-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.post-edited { font-style: italic; }

.post-body {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Rank badge */
.rank-badge {
    --rank-color: #aaaaaa;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rank-color);
    background: color-mix(in srgb, var(--rank-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rank-color) 30%, transparent);
    letter-spacing: 0.02em;
}

/* User links — inline rank-colored */
.user-link {
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.user-link:hover { opacity: 0.85; text-decoration: underline; text-underline-offset: 3px; }

/* ─────────  Reply / new thread forms  ───────── */

.reply-form-wrap {
    margin-top: 40px;
    padding: 24px 0 0;
    border-top: 1px solid var(--rule);
}
.reply-form-title {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.reply-form-title::before {
    content: '●';
    color: var(--accent);
    font-size: 0.55em;
    transform: translateY(-2px);
}
/* ─────────  Coherent form system: thread-form / reply-form / edit-post  ───────── */

/* Field wrapper — block layout, label above input. The .auth-field class is
   reused on these forms but we override the flex behavior here so the label
   `<span>` stacks on top of the input/textarea. */
.thread-form .auth-field,
.reply-form .auth-field,
.thread-form-field {
    display: block;
    border: 0;
    margin: 0 0 22px;
}
.thread-form .auth-field > span,
.reply-form .auth-field > span,
.thread-form-field > span {
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
}
.reply-form textarea,
.thread-form textarea,
.thread-form input[type="text"],
.thread-form-field input[type="text"],
.thread-form-field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 12px 0;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: auto;
    outline: none;
    transition: border-color 160ms ease;
}
.thread-form textarea,
.reply-form textarea {
    min-height: 220px;
    padding: 12px 0;
}
.thread-form input[type="text"]::placeholder,
.thread-form textarea::placeholder,
.reply-form textarea::placeholder {
    color: var(--muted-2);
}
.reply-form textarea:focus,
.thread-form textarea:focus,
.thread-form input[type="text"]:focus {
    border-bottom-color: var(--accent);
}
.thread-form .auth-field:focus-within > span,
.reply-form .auth-field:focus-within > span {
    color: var(--text);
}

.reply-form-foot,
.thread-form-foot {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    align-items: center;
}
.reply-form-foot .muted.small,
.thread-form-foot .muted.small {
    margin: 0;
    margin-right: auto;
    color: var(--muted);
}
.thread-form-foot a.btn-link,
.reply-form-foot a.btn-link {
    color: var(--muted);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 8px 0;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}
.thread-form-foot a.btn-link:hover,
.reply-form-foot a.btn-link:hover {
    color: var(--text);
    border-bottom-color: var(--rule-strong);
    background: transparent;
}

.thread-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Profile recent-threads heading sizing */
.profile-recent h2 {
    font-size: 1.15rem;
    margin: 0 0 16px;
    letter-spacing: -0.015em;
}
.profile-thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
}
.profile-thread-list li {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-thread-list li:last-child { border-bottom: 0; }
.profile-thread-list a { color: var(--text); }
.profile-thread-list a:hover { color: var(--accent); }

/* ─────────  Nav user / logout  ───────── */

.nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-user-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
}
.nav-logout-form { margin: 0; }
.nav-logout {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 6px 14px;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-logout:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

/* ─────────  Responsive  ───────── */

@media (max-width: 760px) {
    .forum-container { padding: 36px 20px 60px; }
    .forum-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .forum-row-stats { gap: 18px; }
    .thread-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .thread-row-stats { gap: 16px; }
    .post {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .post-author {
        flex-direction: row;
        gap: 14px;
        padding-right: 0;
        border-right: 0;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
        align-items: center;
    }
    .post-avatar { width: 56px; height: 56px; }
    .post-author-link { flex-direction: row; gap: 10px; }
    .profile-head {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        align-items: center;
    }
    .profile-stats > div + div { padding-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
}

/* ─────────  Dynamic-feel: subtle motion across the forum  ─────────
   All animations gated by prefers-reduced-motion at the bottom of this
   block — users who opted out of motion get the static state. */

/* Thread-rows entrance — staggered reveal on initial page-load. Only
   first 8 to avoid jank on huge lists; rest just appear normally. */
.thread-rows .thread-row {
    animation: thread-row-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.thread-rows .thread-row:nth-child(1)  { animation-delay:  20ms; }
.thread-rows .thread-row:nth-child(2)  { animation-delay:  60ms; }
.thread-rows .thread-row:nth-child(3)  { animation-delay: 100ms; }
.thread-rows .thread-row:nth-child(4)  { animation-delay: 140ms; }
.thread-rows .thread-row:nth-child(5)  { animation-delay: 180ms; }
.thread-rows .thread-row:nth-child(6)  { animation-delay: 220ms; }
.thread-rows .thread-row:nth-child(7)  { animation-delay: 260ms; }
.thread-rows .thread-row:nth-child(8)  { animation-delay: 300ms; }
.thread-rows .thread-row:nth-child(n+9) { animation: none; opacity: 1; }
@keyframes thread-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Forum-row hover: gold left-border slides in (was instant border-color
   swap). Adds depth to the hover state. */
.thread-rows .thread-row {
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.thread-rows .thread-row:hover {
    transform: translateX(2px);
}

/* Avatars: subtle border-glow on hover. Works for every avatar in the
   forum without needing per-class CSS. */
.thread-row-avatar,
.post-avatar,
.member-row-avatar,
.notif-avatar,
.pm-avatar,
.player-card-avatar,
.admin-signup-avatar {
    transition: border-color 200ms ease, transform 200ms ease;
}
a:hover > .thread-row-avatar,
a:hover > .post-avatar,
a:hover > .member-row-avatar,
a:hover > .notif-avatar,
a:hover > .pm-avatar,
.member-row-link:hover .member-row-avatar,
.post-author-avatar-link:hover .post-avatar,
.notif-link:hover .notif-avatar,
.pm-list-item:hover .pm-avatar {
    border-color: var(--accent);
    transform: scale(1.04);
}

/* Reaction buttons: subtle bounce when activated (your reaction registers) */
.post-react.is-active {
    animation: react-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes react-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Thread-action-link active state (Subscribed / Bookmarked) — quick check-flash */
.thread-action-link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.thread-action-link {
    transition: color 160ms ease, border-bottom-color 160ms ease, transform 100ms ease;
}
.thread-action-link:active { transform: translateY(1px); }

/* Forum-cat banner — subtle entrance. Static after load. */
.forum-cat {
    animation: forum-cat-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.forum-cat:nth-child(1) { animation-delay:   0ms; }
.forum-cat:nth-child(2) { animation-delay:  60ms; }
.forum-cat:nth-child(3) { animation-delay: 120ms; }
.forum-cat:nth-child(4) { animation-delay: 180ms; }
.forum-cat:nth-child(5) { animation-delay: 240ms; }
.forum-cat:nth-child(6) { animation-delay: 300ms; }
@keyframes forum-cat-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flash messages — slide down from top + auto-fade after 5s */
.flash {
    animation: flash-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Buttons get a slight depress on click — tactile feedback */
.btn,
.btn-primary,
.thread-action-link,
.profile-action-link,
.post-action-btn,
.report-btn,
.unban-btn {
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 80ms ease;
}
.btn:active,
.btn-primary:active,
.thread-action-link:active,
.profile-action-link:active,
.post-action-btn:active,
.report-btn:active,
.unban-btn:active {
    transform: translateY(1px) scale(0.99);
}

/* Empty-state icon: gentle float */
.empty-state-icon {
    animation: empty-float 4.5s ease-in-out infinite;
}
@keyframes empty-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ── Respect prefers-reduced-motion: kill all motion for users who opted out ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}