/* Force the HTML hidden attribute to actually hide elements.
   Several UI pieces (reply target, emoji dropdowns, disclosure panels)
   rely on [hidden]. If this is not enforced explicitly, flex/grid rules
   can leave them visible by default in some deployments. */
[hidden] { display: none !important; }


:root {
    --bg: #08090d;
    --bg-2: #0f1117;
    --panel: rgba(16, 19, 27, 0.9);
    --panel-2: rgba(22, 26, 37, 0.95);
    --panel-3: rgba(30, 35, 50, 0.95);
    --line: rgba(203, 170, 92, 0.18);
    --line-strong: rgba(203, 170, 92, 0.35);
    --text: #f4f1e8;
    --muted: #b4ac98;
    --muted-2: #8f8879;
    --accent: #cbaa5c;
    --accent-2: #9e7f3a;
    --accent-soft: rgba(203, 170, 92, 0.12);
    --success: #94d6aa;
    --danger: #f1b0a5;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;
}

/*
 * Rich editor styles
 *
 * The toolbar is inserted above any textarea with the data-rich-editor attribute.
 * It provides simple buttons for inserting hyperlinks and emoji. Colors and
 * sizing are derived from existing CSS variables to blend with the dark theme.
 */
.editor-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    align-items: center;
}
.editor-toolbar .editor-btn {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.editor-toolbar .editor-btn:hover {
    background: var(--panel);
}
.editor-toolbar .emoji-picker {
    position: relative;
    display: inline-block;
}
.editor-toolbar .emoji-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--panel-3);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px;
    z-index: 200;
}
.editor-toolbar .emoji-dropdown button.emoji {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}
.editor-toolbar .emoji-dropdown button.emoji:hover {
    transform: scale(1.25);
}

/*
 * Reaction bar styles
 * Each post displays a bar of reaction buttons. The `.reacted` class
 * indicates the current user has already added that reaction and
 * highlights the button.
 */
.reactions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.reaction-btn .icon {
    font-size: 18px;
    line-height: 1;
}

.reaction-btn .count {
    font-size: 13px;
}

.reaction-btn:hover {
    background: var(--panel);
}

.reaction-btn.reacted {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-2);
}

/*
 * Pagination controls
 * Display simple page navigation used across thread lists and post lists. The
 * active page uses accent colours while disabled buttons are dimmed.
 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}
.page-link {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.page-link:hover {
    background: var(--panel);
}
.page-link.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-2);
    cursor: default;
}
.page-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* User list styles for followers/following pages */
.user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}
.user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.user-row:last-child {
    border-bottom: none;
}
.user-row-left {
    display: flex;
    gap: 10px;
    align-items: center;
}
.user-row-left .avatar-shell.small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    color: var(--accent);
    font-weight: bold;
}
.user-row-left img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}
.user-row-left .user-name {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.user-row-left .user-name:hover {
    text-decoration: underline;
}
.user-row-right {
    display: flex;
    align-items: center;
}

/* Hidden posts appear dimmed for moderators */
.hidden-post {
    background: var(--panel-3);
    opacity: 0.75;
}

/*
 * Leaderboard table styles
 */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
.leaderboard-table th,
.leaderboard-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.leaderboard-table th {
    color: var(--muted);
    font-weight: 600;
}
.leaderboard-table tbody tr:nth-child(even) {
    background: var(--panel-2);
}

/* Mention links are highlighted with the accent colour */
.mention {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.mention:hover {
    text-decoration: underline;
}

/* Tag badges displayed on thread heroes */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tag-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--accent);
    font-size: 12px;
    text-transform: capitalize;
}

.tag-badge:hover {
    background: var(--panel);
}

/* Bookmark / save buttons */
.bookmark-btn {
    white-space: nowrap;
}

/* Light mode palette overrides. These variables provide a
   complementary colour palette suitable for daylight viewing. */
:root.light-mode {
    --bg: #faf7ef;
    --bg-2: #f4f1e7;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-2: rgba(246, 243, 233, 0.95);
    --panel-3: rgba(240, 237, 226, 0.95);
    --line: rgba(203, 170, 92, 0.26);
    --line-strong: rgba(203, 170, 92, 0.5);
    --text: #2a2a2a;
    --muted: #6f6650;
    --muted-2: #8f8879;
    --accent: #876531;
    --accent-2: #b58e49;
    --accent-soft: rgba(135, 101, 49, 0.12);
    --success: #3a8f5a;
    --danger: #b65c52;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(203,170,92,0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(152,122,55,0.10), transparent 22%),
        linear-gradient(180deg, #06070a 0%, #0a0c12 35%, #08090d 100%);
    color: var(--text);
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; color: #e6c979; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

.shell-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(203,170,92,0.025), transparent 24%, transparent 76%, rgba(203,170,92,0.02));
}

.wrap { width: min(1320px, calc(100% - 32px)); margin: 0 auto; }
.main-wrap { padding: 28px 0 56px; }
.narrow { max-width: 920px; margin-inline: auto; }
.stack-col { display: grid; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 20px; }
.home-grid { align-items: start; }
.profile-grid { align-items: start; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.field-grow { flex: 1 1 400px; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(20px);
    background: rgba(8, 10, 15, 0.82);
    border-bottom: 1px solid rgba(203,170,92,0.14);
}
.top-strip {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    color: var(--muted-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.top-strip a { color: var(--muted); }
.top-strip-left, .top-strip-right { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.header-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    /* Reduce top/bottom padding to tighten the header */
    padding: 12px 0 12px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark {
    /* Reduce size of the brand mark to save space */
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #111;
    background: linear-gradient(135deg, #f0d68f 0%, #cbaa5c 45%, #8e6e30 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 24px rgba(0,0,0,0.25);
}
.brand-text {
    display: block;
    /* Slightly smaller logo text */
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.sub-brand {
    display: block;
    color: var(--muted);
    margin-top: 4px;
    max-width: 720px;
}
.top-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.top-nav a {
    color: var(--text);
    /* Smaller nav link padding and subtle borders */
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
}
.top-nav a:hover {
    border-color: var(--line);
    background: rgba(255,255,255,0.03);
}
.top-nav .nav-cta {
    background: linear-gradient(135deg, #d7b567 0%, #a07c38 100%);
    color: #13100a;
    font-weight: 700;
}
.nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #111;
    font-size: 11px;
    font-weight: 800;
}

.card {
    position: relative;
    background: linear-gradient(180deg, rgba(18,21,30,0.96) 0%, rgba(12,14,20,0.98) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 20%);
}
.small-card { padding: 18px; }
.glass {
    background: linear-gradient(180deg, rgba(30,35,50,0.62), rgba(17,19,27,0.8));
    backdrop-filter: blur(10px);
}
.hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
    gap: 18px;
    margin-bottom: 18px;
    padding: 24px;
}
.hero-card::after,
.thread-hero.has-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(203,170,92,0.12), transparent 38%, rgba(203,170,92,0.04) 100%);
    pointer-events: none;
}
.hero-copy,
.thread-hero-content { position: relative; z-index: 1; }
.hero-stats,
.thread-stats-grid { position: relative; z-index: 1; align-content: start; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    font-weight: 800;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
}
.hero-text,
.thread-hero-excerpt,
.thread-excerpt,
.post-body {
    color: #ece6d6;
    line-height: 1.72;
}
.hero-card h1,
.thread-hero h1,
.category-shell h1,
.form-shell h1,
.profile-card h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}
.hero-card p,
.category-shell p,
.profile-bio,
.subtle-copy { margin-bottom: 0; }
.search-toolbar,
.toolbar-panel {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(203,170,92,0.12);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #dfbe74 0%, #ac8742 100%);
    color: #17130c;
    box-shadow: 0 12px 24px rgba(0,0,0,0.24);
}
.button:hover { filter: brightness(1.03); color: #17130c; }
.button.secondary {
    background: rgba(255,255,255,0.045);
    color: var(--text);
    border: 1px solid rgba(203,170,92,0.18);
    box-shadow: none;
}

/* Smaller variants of buttons for compact controls. Apply the ``tiny``
   class to shrink padding and font size; the ``small`` class is
   intermediary and used for follow/unfollow actions. */
.button.small {
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: none;
}
.button.tiny {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 8px;
    box-shadow: none;
}
.text-link {
    color: var(--muted);
    font-size: 14px;
}

.stack-form { display: grid; gap: 12px; }
label { font-weight: 700; color: #f0eadb; }
input, textarea, select {
    width: 100%;
    background: rgba(5,7,11,0.72);
    border: 1px solid rgba(203,170,92,0.18);
    color: var(--text);
    border-radius: 14px;
    padding: 14px 16px;
    outline: none;
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(203,170,92,0.65);
    box-shadow: 0 0 0 4px rgba(203,170,92,0.12);
}
textarea { resize: vertical; min-height: 140px; }
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
.checkbox-row input { width: auto; }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
    margin-bottom: 18px;
}
.section-head.tight { margin-bottom: 14px; }
.section-head h1,
.section-head h2 { margin: 0; }
.section-head p { margin-top: 8px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.small-strong { font-size: 14px !important; }
.empty-state {
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(203,170,92,0.24);
    color: var(--muted);
    background: rgba(255,255,255,0.02);
}

.category-grid,
.category-list,
.thread-list,
.post-stack { display: grid; gap: 14px; }
.thread-list.roomy { gap: 16px; }
.category-card,
.thread-card,
.category-item,
.thread-item {
    display: grid;
    gap: 16px;
    align-items: center;
    color: var(--text);
    text-decoration: none;
    background: linear-gradient(180deg, rgba(22,26,37,0.92), rgba(13,15,21,0.96));
    border: 1px solid rgba(203,170,92,0.12);
    border-radius: 20px;
    padding: 18px;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.category-card:hover,
.thread-card:hover,
.category-item:hover,
.thread-item:hover {
    transform: translateY(-1px);
    border-color: rgba(203,170,92,0.36);
    background: linear-gradient(180deg, rgba(28,33,46,0.96), rgba(15,17,24,0.98));
}
.category-card {
    grid-template-columns: auto minmax(0,1fr) auto;
}
.category-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(203,170,92,0.14);
    color: var(--accent);
    font-size: 24px;
    font-weight: 800;
}
.category-title,
.thread-title {
    font-weight: 800;
    font-size: 19px;
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.category-topline,
.thread-card-top,
.post-meta {
    display: flex;
    gap: 12px;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.category-count,
.thread-card-side,
.stat-stack {
    display: grid;
    gap: 4px;
    justify-items: end;
}
.thread-card {
    grid-template-columns: minmax(0,1fr) auto;
}
.compact-card { padding: 16px; border-radius: 18px; }
.thread-meta { margin-top: 7px; }
.thread-excerpt {
    margin-top: 10px;
    color: #d7cfbb;
}
.mini-stat {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(203,170,92,0.1);
    text-align: right;
}
.mini-stat strong { display: block; font-size: 19px; }
.mini-stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background: rgba(203,170,92,0.12);
    border: 1px solid rgba(203,170,92,0.18);
    color: #e6cf97;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.large-flags { margin-top: 18px; }
.stats-row, .toolbar-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.stat-box {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(203,170,92,0.14);
    border-radius: 18px;
    padding: 16px 18px;
    min-width: 120px;
    display: grid;
    gap: 8px;
}
.stat-box strong { font-size: 30px; }

.thread-shell { display: grid; gap: 18px; }
.thread-hero {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(240px,0.65fr);
    gap: 24px;
    overflow: hidden;
}
.thread-hero.has-cover {
    background:
        linear-gradient(90deg, rgba(10,12,18,0.95), rgba(10,12,18,0.86) 50%, rgba(10,12,18,0.8) 100%),
        var(--thread-cover) center/cover no-repeat;
}
.thread-toolbar { align-items: center; }
.source-link-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.post-panel {
    display: grid;
    grid-template-columns: 220px minmax(0,1fr);
    gap: 16px;
    align-items: start;
}
.post-author-rail {
    position: sticky;
    top: 122px;
}
.avatar-shell {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(203,170,92,0.28), rgba(158,127,58,0.16));
    color: var(--accent);
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 14px;
}
.avatar-shell.large { width: 72px; height: 72px; font-size: 28px; }
.avatar-shell img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-weight: 800; }
.signature {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(203,170,92,0.12);
}
.post-main { display: grid; gap: 12px; }
.post-meta-left,
.post-meta-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reply-context {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(203,170,92,0.55);
}
.post-actions { margin-top: 4px; }
.reply-form-shell { gap: 12px; }
.reply-target {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(203,170,92,0.08);
    border: 1px solid rgba(203,170,92,0.18);
}

/* Make the clear button inside the reply target small and unobtrusive */
.reply-target button {
    font-size: 14px;
    padding: 4px 10px;
    white-space: nowrap;
}

.profile-card,
.form-shell,
.category-shell { overflow: visible; }
.profile-head {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}
.profile-bio { margin-bottom: 20px; }

.flash-stack { display: grid; gap: 10px; margin-bottom: 18px; }
.flash {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--panel);
}
.flash-error { border-color: rgba(220,122,100,0.28); color: var(--danger); }
.flash-success { border-color: rgba(114,188,133,0.25); color: var(--success); }
.flash-info { border-color: rgba(203,170,92,0.22); color: #e6d8b5; }
.notification-unread { border-color: rgba(203,170,92,0.38); }

.table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.01);
    border-radius: 18px;
    overflow: hidden;
}
.table th, .table td {
    border-bottom: 1px solid rgba(203,170,92,0.12);
    padding: 14px 10px;
    text-align: left;
    vertical-align: top;
}
.inline-form { display: inline-block; margin-right: 8px; margin-bottom: 8px; }

@media (max-width: 1080px) {
    .hero-card,
    .thread-hero,
    .grid-2,
    .header-grid,
    .post-panel {
        grid-template-columns: 1fr;
    }
    .post-author-rail {
        position: relative;
        top: auto;
    }
    .category-card,
    .thread-card {
        grid-template-columns: 1fr;
    }
    .category-count,
    .thread-card-side,
    .stat-stack {
        justify-items: start;
    }
    .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .wrap { width: min(100% - 20px, 1320px); }
    .main-wrap { padding-top: 18px; }
    .card { padding: 18px; border-radius: 20px; }
    .brand-text { font-size: 22px; }
    .top-strip { display: none; }
    .top-nav { justify-content: flex-start; }
    .hero-card h1,
    .thread-hero h1,
    .category-shell h1,
    .form-shell h1,
    .profile-card h1 { font-size: 1.9rem; }
    .search-toolbar,
    .toolbar-panel,
    .reply-target { align-items: stretch; }
    .reply-target { flex-direction: column; }
}


/* 2026-04-03 compatibility patch for older templates / partial deploys */
.post-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(22,26,37,0.92), rgba(13,15,21,0.96));
    border: 1px solid rgba(203,170,92,0.12);
}
.thread-flags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.site-header .brand {
    max-width: 900px;
}
.top-nav a[href$="/login"] {
    background: linear-gradient(135deg, #d7b567 0%, #a07c38 100%);
    color: #13100a;
    font-weight: 700;
}
@media (max-width: 900px) {
    .site-header { position: static; }
    .top-strip { display: none; }
    .brand-text { font-size: 22px; }
    .sub-brand { font-size: 14px; }
    .thread-card,
    .category-card,
    .thread-item,
    .category-item,
    .thread-hero,
    .hero-card,
    .post-panel,
    .grid-2,
    .header-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/* Tip system */
.tip-list {
    display: grid;
    gap: 14px;
}
.tip-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--panel-2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.tip-card-top,
.tip-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.tip-card-footer {
    align-items: center;
    margin-top: 14px;
}
.tip-card-side {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tip-excerpt {
    margin: 12px 0 8px;
    color: var(--text);
}
.detail-list {
    display: grid;
    gap: 10px;
}
.detail-list div {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.detail-list dt {
    color: var(--muted);
    font-size: 13px;
}
.detail-list dd {
    margin: 0;
    color: var(--text);
}
.link-stack {
    display: grid;
    gap: 8px;
}
.link-stack a {
    color: var(--accent);
    word-break: break-word;
}

/* ======================================================================
   Pattern Nexus Community — Main Site / Trade Theme Alignment Pass
   2026-05-24

   Front-end-only layer. Existing template classes and JS hooks stay intact.
   This block intentionally overrides earlier theme rules instead of removing
   them, so older partial deploys and existing community hooks keep working.
   ====================================================================== */

:root {
    --pn-blue-950: #07101d;
    --pn-blue-900: #0a1323;
    --pn-blue-850: #0d182a;
    --pn-blue-800: #101e33;
    --pn-blue-700: #162b49;
    --pn-gold: #d7b86a;
    --pn-gold-2: #b88d3f;
    --pn-gold-3: #806221;
    --pn-cyan: #7bbcff;
    --pn-green: #85d0a2;
    --pn-red: #ee9f91;
    --pn-ink: #f6f0df;
    --pn-ink-2: #d8cfb9;
    --pn-muted: #a99f88;
    --pn-muted-2: #7f8795;
    --pn-border: rgba(215, 184, 106, 0.18);
    --pn-border-strong: rgba(215, 184, 106, 0.38);
    --pn-blue-border: rgba(123, 188, 255, 0.18);
    --pn-panel: rgba(12, 20, 34, 0.88);
    --pn-panel-2: rgba(15, 27, 47, 0.92);
    --pn-panel-3: rgba(19, 35, 59, 0.88);
    --pn-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --pn-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);

    --bg: var(--pn-blue-950);
    --bg-2: var(--pn-blue-900);
    --panel: var(--pn-panel);
    --panel-2: var(--pn-panel-2);
    --panel-3: var(--pn-panel-3);
    --line: var(--pn-border);
    --line-strong: var(--pn-border-strong);
    --text: var(--pn-ink);
    --muted: var(--pn-muted);
    --muted-2: var(--pn-muted-2);
    --accent: var(--pn-gold);
    --accent-2: var(--pn-gold-2);
    --accent-soft: rgba(215, 184, 106, 0.12);
    --success: var(--pn-green);
    --danger: var(--pn-red);
    --shadow: var(--pn-shadow);
    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius-md: 14px;
}

:root.light-mode {
    --pn-blue-950: #f6f1e6;
    --pn-blue-900: #fffaf0;
    --pn-blue-850: #f4ebdc;
    --pn-blue-800: #eee3d1;
    --pn-blue-700: #e1d0b5;
    --pn-gold: #8a6527;
    --pn-gold-2: #b58d3f;
    --pn-gold-3: #d8b66c;
    --pn-cyan: #245c90;
    --pn-green: #2e8050;
    --pn-red: #a54f42;
    --pn-ink: #161b25;
    --pn-ink-2: #2c3140;
    --pn-muted: #655d4c;
    --pn-muted-2: #7b7160;
    --pn-border: rgba(138, 101, 39, 0.24);
    --pn-border-strong: rgba(138, 101, 39, 0.42);
    --pn-blue-border: rgba(36, 92, 144, 0.18);
    --pn-panel: rgba(255, 252, 244, 0.94);
    --pn-panel-2: rgba(251, 246, 235, 0.96);
    --pn-panel-3: rgba(245, 237, 222, 0.94);
    --pn-shadow: 0 20px 52px rgba(62, 44, 16, 0.14);
    --pn-shadow-soft: 0 12px 30px rgba(62, 44, 16, 0.10);

    --bg: var(--pn-blue-950);
    --bg-2: var(--pn-blue-900);
    --panel: var(--pn-panel);
    --panel-2: var(--pn-panel-2);
    --panel-3: var(--pn-panel-3);
    --line: var(--pn-border);
    --line-strong: var(--pn-border-strong);
    --text: var(--pn-ink);
    --muted: var(--pn-muted);
    --muted-2: var(--pn-muted-2);
    --accent: var(--pn-gold);
    --accent-2: var(--pn-gold-2);
    --accent-soft: rgba(138, 101, 39, 0.11);
    --success: var(--pn-green);
    --danger: var(--pn-red);
    --shadow: var(--pn-shadow);
}

html {
    background: var(--bg);
}

body.pn-community-shell,
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 8% -10%, rgba(215, 184, 106, 0.18), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(75, 134, 205, 0.16), transparent 28%),
        radial-gradient(circle at 50% 115%, rgba(215, 184, 106, 0.07), transparent 32%),
        linear-gradient(180deg, var(--pn-blue-900) 0%, var(--pn-blue-950) 54%, #050912 100%);
    color: var(--text);
    letter-spacing: -0.006em;
}

:root.light-mode body.pn-community-shell,
:root.light-mode body {
    background:
        radial-gradient(circle at 8% -10%, rgba(216, 182, 108, 0.34), transparent 31%),
        radial-gradient(circle at 88% 0%, rgba(36, 92, 144, 0.14), transparent 26%),
        linear-gradient(180deg, #fffaf0 0%, #f7f1e6 48%, #eee2cf 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 72%);
    z-index: -1;
}

.shell-bg {
    background:
        linear-gradient(135deg, rgba(215,184,106,0.055), transparent 36%),
        linear-gradient(220deg, rgba(123,188,255,0.07), transparent 33%);
    opacity: 0.9;
}

.wrap {
    width: min(1440px, calc(100% - 34px));
}

.main-wrap {
    padding: 18px 0 56px;
}

a {
    color: var(--accent);
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

a:hover {
    color: #f0d690;
}

:root.light-mode a:hover {
    color: #6e4f1f;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: linear-gradient(180deg, rgba(7, 12, 22, 0.92), rgba(7, 12, 22, 0.76));
    border-bottom: 1px solid rgba(215,184,106,0.16);
    box-shadow: 0 18px 48px rgba(0,0,0,0.24);
    backdrop-filter: blur(18px) saturate(125%);
}

:root.light-mode .site-header {
    background: linear-gradient(180deg, rgba(255,250,240,0.94), rgba(255,250,240,0.82));
    box-shadow: 0 16px 40px rgba(62,44,16,0.10);
}

.top-strip {
    min-height: 34px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(215,184,106,0.10);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.11em;
}

.top-strip-left,
.top-strip-right {
    gap: 10px;
}

.top-strip span,
.top-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.top-strip span {
    color: var(--muted-2);
}

.top-strip a {
    border: 1px solid rgba(215,184,106,0.12);
    background: rgba(255,255,255,0.025);
    color: var(--pn-ink-2);
    border-radius: 999px;
    padding: 4px 10px;
}

.top-strip a:hover {
    border-color: var(--line-strong);
    background: rgba(215,184,106,0.08);
    color: var(--accent);
}

.header-grid {
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
    gap: 18px;
    padding: 12px 0;
}

.brand-cluster,
.brand {
    min-width: 0;
}

.brand {
    gap: 12px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #11151f;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92), transparent 18%),
        linear-gradient(135deg, #f4d78a 0%, #cda34e 48%, #7c5b20 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 14px 28px rgba(0,0,0,0.32),
        0 0 0 1px rgba(215,184,106,0.22);
    font-size: 14px;
}

.brand-text {
    font-size: clamp(18px, 2vw, 23px);
    letter-spacing: -0.045em;
}

.sub-brand {
    color: var(--muted);
    max-width: 720px;
    font-size: 13px;
    line-height: 1.35;
}

.top-nav {
    gap: 7px;
    align-items: center;
}

.top-nav a,
.theme-toggle,
.top-nav .button.secondary {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(215,184,106,0.14);
    background: rgba(255,255,255,0.035);
    color: var(--pn-ink-2);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
    box-shadow: none;
    white-space: nowrap;
}

.top-nav a:hover,
.theme-toggle:hover,
.top-nav .button.secondary:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    background: rgba(215,184,106,0.10);
    color: var(--text);
}

.top-nav .nav-cta,
.top-nav a[href$="/login"] {
    border-color: rgba(215,184,106,0.52);
    background: linear-gradient(135deg, #ecd58e 0%, #d0a34f 48%, #9b7330 100%);
    color: #11151e;
}

.nav-badge {
    background: var(--accent);
    color: #11151e;
}

.card,
.category-card,
.thread-card,
.category-item,
.thread-item,
.post-card,
.tip-card,
.notification-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 16%),
        linear-gradient(145deg, rgba(19, 35, 59, 0.88), rgba(9, 15, 27, 0.94));
    border: 1px solid rgba(215,184,106,0.15);
    box-shadow: var(--pn-shadow-soft);
}

:root.light-mode .card,
:root.light-mode .category-card,
:root.light-mode .thread-card,
:root.light-mode .category-item,
:root.light-mode .thread-item,
:root.light-mode .post-card,
:root.light-mode .tip-card,
:root.light-mode .notification-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.66), transparent 20%),
        linear-gradient(145deg, rgba(255,252,244,0.96), rgba(246,239,226,0.94));
}

.card {
    border-radius: 22px;
    padding: 22px;
    overflow: hidden;
}

.card::before,
.thread-card::before,
.category-card::before,
.post-card::before,
.tip-card::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 22%),
        linear-gradient(90deg, rgba(215,184,106,0.06), transparent 44%, rgba(123,188,255,0.045));
}

.glass {
    background:
        linear-gradient(180deg, rgba(20, 38, 65, 0.66), rgba(8, 15, 27, 0.78));
    border-color: rgba(123,188,255,0.12);
    backdrop-filter: blur(14px) saturate(125%);
}

:root.light-mode .glass {
    background: rgba(255,252,244,0.68);
}

.hero-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(275px, 0.65fr);
    gap: 20px;
    margin-bottom: 20px;
    min-height: 0;
    background:
        radial-gradient(circle at 4% 0%, rgba(215,184,106,0.20), transparent 34%),
        radial-gradient(circle at 92% 6%, rgba(123,188,255,0.14), transparent 30%),
        linear-gradient(140deg, rgba(20,38,65,0.95), rgba(7,13,24,0.96));
}

:root.light-mode .hero-card {
    background:
        radial-gradient(circle at 4% 0%, rgba(215,184,106,0.28), transparent 36%),
        radial-gradient(circle at 92% 6%, rgba(36,92,144,0.12), transparent 30%),
        linear-gradient(140deg, rgba(255,252,244,0.98), rgba(242,233,216,0.96));
}

.hero-card::after,
.thread-hero.has-cover::after,
.thread-hero::after {
    background:
        linear-gradient(120deg, rgba(215,184,106,0.14), transparent 32%, rgba(123,188,255,0.08) 100%);
}

.eyebrow {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 0.14em;
}

.hero-card h1,
.thread-hero h1,
.category-shell h1,
.form-shell h1,
.profile-card h1 {
    font-size: clamp(1.75rem, 3.15vw, 3.05rem);
    letter-spacing: -0.06em;
}

.hero-text,
.thread-hero-excerpt,
.thread-excerpt,
.post-body,
.tip-excerpt {
    color: var(--pn-ink-2);
    line-height: 1.7;
}

.search-toolbar,
.toolbar-panel,
.reply-target {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(215,184,106,0.14);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.search-toolbar input,
.search-toolbar select,
.toolbar-panel input,
.toolbar-panel select {
    min-height: 42px;
}

.button {
    border-radius: 14px;
    background: linear-gradient(135deg, #ecd58e 0%, #d0a34f 48%, #9b7330 100%);
    color: #11151e;
    box-shadow: 0 14px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.35);
}

.button.secondary,
.editor-toolbar .editor-btn,
.page-link,
.reaction-btn {
    border: 1px solid rgba(215,184,106,0.16);
    background: rgba(255,255,255,0.045);
    color: var(--text);
}

.button:hover,
.page-link:hover,
.reaction-btn:hover,
.editor-toolbar .editor-btn:hover {
    transform: translateY(-1px);
}

.button.tiny,
.button.small {
    border-radius: 999px;
}

input,
textarea,
select {
    background: rgba(5, 10, 19, 0.76);
    border: 1px solid rgba(215,184,106,0.16);
    color: var(--text);
    border-radius: 14px;
}

:root.light-mode input,
:root.light-mode textarea,
:root.light-mode select {
    background: rgba(255,255,255,0.72);
    color: var(--text);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(215,184,106,0.64);
    box-shadow: 0 0 0 4px rgba(215,184,106,0.12), 0 0 0 1px rgba(123,188,255,0.08);
}

label {
    color: var(--pn-ink-2);
}

.section-head h1,
.section-head h2,
.card h2,
.card h3 {
    color: var(--text);
    letter-spacing: -0.035em;
}

.category-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.category-card {
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    min-height: 150px;
}

.category-count {
    grid-column: 1 / -1;
    justify-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(215,184,106,0.18), rgba(123,188,255,0.08));
    border: 1px solid rgba(215,184,106,0.18);
    color: var(--accent);
}

.category-title,
.thread-title {
    font-size: 18px;
    letter-spacing: -0.035em;
}

.thread-list,
.post-stack,
.tip-list,
.category-grid {
    gap: 12px;
}

.thread-card,
.thread-item {
    position: relative;
    grid-template-columns: minmax(0,1fr) auto;
    border-radius: 18px;
    padding: 16px;
}

.thread-card:hover,
.category-card:hover,
.thread-item:hover,
.category-item:hover,
.tip-card:hover {
    transform: translateY(-2px);
    border-color: rgba(215,184,106,0.36);
    box-shadow: 0 18px 46px rgba(0,0,0,0.34);
}

:root.light-mode .thread-card:hover,
:root.light-mode .category-card:hover,
:root.light-mode .thread-item:hover,
:root.light-mode .category-item:hover,
:root.light-mode .tip-card:hover {
    box-shadow: 0 18px 42px rgba(62,44,16,0.14);
}

.thread-card-side,
.stat-stack {
    align-content: start;
}

.mini-stat,
.stat-box {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
    border: 1px solid rgba(215,184,106,0.12);
    border-radius: 16px;
}

.stat-box strong,
.mini-stat strong {
    color: var(--accent);
    letter-spacing: -0.045em;
}

.pill,
.tag-badge {
    background: rgba(215,184,106,0.12);
    border: 1px solid rgba(215,184,106,0.18);
    color: #ecd58e;
}

:root.light-mode .pill,
:root.light-mode .tag-badge {
    color: #7a571f;
}

.thread-shell {
    gap: 16px;
}

.thread-hero {
    position: relative;
    grid-template-columns: minmax(0, 1.26fr) minmax(240px, 0.74fr);
    background:
        radial-gradient(circle at 6% 4%, rgba(215,184,106,0.16), transparent 30%),
        linear-gradient(140deg, rgba(20,38,65,0.95), rgba(7,13,24,0.96));
}

.thread-hero.has-cover {
    background:
        linear-gradient(90deg, rgba(6, 10, 18, 0.97), rgba(9, 16, 29, 0.90) 48%, rgba(7, 12, 22, 0.70) 100%),
        var(--thread-cover) center/cover no-repeat;
}

.post-panel {
    grid-template-columns: minmax(170px, 210px) minmax(0,1fr);
    gap: 15px;
}

.post-author-rail {
    top: 110px;
}

.avatar-shell {
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgba(215,184,106,0.20), rgba(123,188,255,0.08));
    border: 1px solid rgba(215,184,106,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.post-body {
    font-size: 1rem;
}

.post-body a,
.tip-excerpt a,
.thread-excerpt a {
    border-bottom: 1px solid rgba(215,184,106,0.35);
}

.post-body blockquote,
.reply-context {
    background: rgba(215,184,106,0.075);
    border-left: 3px solid rgba(215,184,106,0.62);
    color: var(--pn-ink-2);
}

.reply-form-shell textarea {
    min-height: 175px;
}

.reaction-btn.reacted,
.page-link.active {
    background: rgba(215,184,106,0.14);
    border-color: rgba(215,184,106,0.40);
    color: var(--accent);
}

.editor-toolbar {
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(215,184,106,0.10);
}

.editor-toolbar .editor-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    padding: 0 9px;
}

.editor-toolbar .emoji-dropdown {
    border-radius: 14px;
    background: var(--panel-3);
    border-color: var(--line-strong);
    box-shadow: var(--pn-shadow-soft);
}

.flash,
.empty-state {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
    border-color: rgba(215,184,106,0.18);
}

.flash-info {
    color: #ead9ad;
}

:root.light-mode .flash-info {
    color: #6e4f1f;
}

.table {
    border: 1px solid rgba(215,184,106,0.14);
}

.table th {
    color: var(--muted);
    background: rgba(255,255,255,0.035);
}

.table th,
.table td {
    border-bottom: 1px solid rgba(215,184,106,0.12);
}

.leaderboard-table th,
.leaderboard-table td {
    border-bottom: 1px solid rgba(215,184,106,0.12);
}

.notification-unread,
.hidden-post {
    border-color: rgba(215,184,106,0.38);
}

.mention {
    color: var(--pn-cyan);
    border-bottom: 1px solid rgba(123,188,255,0.34);
}

mark {
    background: rgba(215,184,106,0.28);
    color: var(--text);
    border-radius: 6px;
    padding: 0 3px;
}

code {
    background: rgba(123,188,255,0.10);
    border: 1px solid rgba(123,188,255,0.14);
    color: var(--pn-cyan);
    border-radius: 7px;
    padding: 1px 5px;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.035);
}

::-webkit-scrollbar-thumb {
    background: rgba(215,184,106,0.30);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(215,184,106,0.48);
    border: 3px solid transparent;
    background-clip: padding-box;
}

@media (min-width: 1081px) {
    .top-nav {
        max-width: 820px;
    }
}

@media (max-width: 1180px) {
    .header-grid {
        grid-template-columns: 1fr;
    }
    .top-nav {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .site-header {
        position: sticky;
    }
    .header-grid {
        gap: 10px;
        padding: 10px 0;
    }
    .top-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 4px 0 8px;
        scrollbar-width: thin;
        justify-content: flex-start;
    }
    .top-nav a,
    .theme-toggle,
    .top-nav .button.secondary {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 7px 11px;
        font-size: 12.5px;
    }
    .sub-brand {
        max-width: 100%;
    }
    .hero-card,
    .thread-hero,
    .post-panel,
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .post-author-rail {
        position: relative;
        top: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .avatar-shell {
        margin-bottom: 0;
    }
}

@media (max-width: 720px) {
    .wrap {
        width: min(100% - 18px, 1440px);
    }
    .main-wrap {
        padding-top: 14px;
    }
    .card {
        border-radius: 18px;
        padding: 16px;
    }
    .brand {
        gap: 10px;
    }
    .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }
    .brand-text {
        font-size: 18px;
    }
    .sub-brand {
        font-size: 12.5px;
    }
    .hero-card h1,
    .thread-hero h1,
    .category-shell h1,
    .form-shell h1,
    .profile-card h1 {
        font-size: 1.75rem;
    }
    .search-toolbar,
    .toolbar-panel {
        align-items: stretch;
    }
    .search-toolbar > *,
    .toolbar-panel > * {
        width: 100%;
    }
    .thread-card,
    .thread-item,
    .category-card {
        grid-template-columns: 1fr;
    }
    .thread-card-side,
    .category-count,
    .stat-stack {
        justify-items: start;
    }
    .stats-row,
    .toolbar-row,
    .post-meta-left,
    .post-meta-right {
        gap: 8px;
    }
    .pill,
    .tag-badge {
        font-size: 11px;
        padding: 5px 8px;
    }
}

@media (max-width: 420px) {
    .top-strip {
        display: none;
    }
    .hero-card,
    .thread-hero {
        padding: 15px;
    }
    .button {
        width: 100%;
    }
    .inline-form .button,
    .post-actions .button,
    .toolbar-row .button,
    .source-link-row .button,
    .thread-toolbar .button {
        width: auto;
    }
}

/* PN ad + admin control layer */
.content-ad-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.content-ad-grid.no-ad-rail {
    display: block;
}

.content-main {
    min-width: 0;
}

.ad-rail {
    position: sticky;
    top: 118px;
    display: grid;
    gap: 14px;
}

.pn-ad-slot {
    margin: 18px 0;
    display: grid;
    gap: 12px;
}

.pn-ad-placement-top {
    margin-top: 0;
}

.pn-ad-placement-sidebar {
    margin: 0;
}

.pn-ad-card {
    overflow: hidden;
    border: 1px solid rgba(215, 184, 106, 0.24);
    border-radius: 20px;
    background:
        radial-gradient(circle at 12% 0%, rgba(215, 184, 106, 0.16), transparent 32%),
        linear-gradient(145deg, rgba(11, 18, 34, 0.94), rgba(9, 14, 26, 0.82));
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.22);
    color: var(--text);
}

body.light .pn-ad-card {
    background:
        radial-gradient(circle at 12% 0%, rgba(215, 184, 106, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(242,246,252,0.88));
}

.pn-ad-label {
    padding: 9px 14px 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pn-ad-html,
.pn-ad-copy,
.pn-ad-text-copy {
    display: grid;
    gap: 7px;
    padding: 13px 14px 15px;
}

.pn-ad-text-link,
.pn-ad-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pn-ad-text-copy strong,
.pn-ad-copy strong {
    color: var(--text);
    font-size: 1rem;
}

.pn-ad-text-copy span,
.pn-ad-copy span {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.pn-ad-card img {
    display: block;
    width: 100%;
    height: auto;
}

.pn-ad-placement-top .pn-ad-card,
.pn-ad-placement-footer .pn-ad-card,
.pn-ad-placement-inline .pn-ad-card,
.pn-ad-placement-thread .pn-ad-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.admin-panel .table-wrap {
    overflow-x: auto;
}

.admin-table td,
.admin-table th {
    vertical-align: top;
}

.admin-note-card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 16px;
    padding: 13px 14px;
    border: 1px solid rgba(215, 184, 106, 0.22);
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    color: var(--muted);
}

.admin-note-card strong {
    color: var(--text);
}

.admin-note-card span,
code {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    padding: 3px 8px;
    color: var(--text);
    font-size: 12px;
}

.status-live {
    border-color: rgba(72, 211, 138, 0.38);
    background: rgba(72, 211, 138, 0.12);
}

.status-off {
    opacity: 0.72;
}

.button.danger {
    border-color: rgba(255, 110, 110, 0.28);
    background: rgba(255, 110, 110, 0.10);
    color: #ffb8b8;
}

.admin-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 4px;
}

.form-grid-tight {
    gap: 14px;
}

.compact-actions {
    gap: 6px;
}

@media (max-width: 1120px) {
    .content-ad-grid {
        grid-template-columns: 1fr;
    }
    .ad-rail {
        position: static;
        top: auto;
    }
}

@media (max-width: 720px) {
    .admin-checkbox-grid,
    .form-grid-tight {
        grid-template-columns: 1fr;
    }
    .pn-ad-slot {
        margin: 14px 0;
    }
    .pn-ad-card {
        border-radius: 17px;
    }
}