/* ============================================================================
   RG DARK THEME v3 — Premium XenForo 2.x Dark Theme
   A world-class glassmorphism dark theme with cyan/purple accents.
   
   LAYOUT SAFETY: This file NEVER touches display, width, or table-layout
   on XenForo table elements (.node-body, .structItem, .node-icon, .node-main,
   .node-stats, .node-extra, .structItem-cell--*).
   
   SCOPE: Content area only. Does NOT style .rg-sidebar or .rg-header.
   ============================================================================ */


/* ============================================================================
   SECTION 0: CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */

:root {
    /* ── Base Palette ── */
    --rg-bg-deepest: #0a0c12;
    --rg-bg-base: #0f1117;
    --rg-bg-raised: #151823;
    --rg-bg-surface: #1a1e2e;
    --rg-bg-elevated: #1f2437;

    /* ── Glass Effect ── */
    --rg-glass-bg: rgba(255, 255, 255, 0.04);
    --rg-glass-bg-hover: rgba(255, 255, 255, 0.06);
    --rg-glass-bg-active: rgba(255, 255, 255, 0.08);
    --rg-glass-border: rgba(255, 255, 255, 0.08);
    --rg-glass-border-hover: rgba(255, 255, 255, 0.12);
    --rg-glass-border-focus: rgba(0, 229, 255, 0.4);
    --rg-glass-blur: blur(16px);

    /* ── Accent: Cyan ── */
    --rg-cyan: #00e5ff;
    --rg-cyan-dim: rgba(0, 229, 255, 0.7);
    --rg-cyan-subtle: rgba(0, 229, 255, 0.15);
    --rg-cyan-glow: 0 0 20px rgba(0, 229, 255, 0.15);

    /* ── Accent: Purple ── */
    --rg-purple: #a78bfa;
    --rg-purple-dim: rgba(167, 139, 250, 0.7);
    --rg-purple-subtle: rgba(167, 139, 250, 0.15);
    --rg-purple-glow: 0 0 20px rgba(167, 139, 250, 0.15);

    /* ── Gradients ── */
    --rg-gradient-purple: linear-gradient(135deg, #a78bfa, #7c3aed);
    --rg-gradient-cyan: linear-gradient(135deg, #00e5ff, #06b6d4);
    --rg-gradient-header: linear-gradient(135deg, #a78bfa, #818cf8);
    --rg-gradient-btn-primary: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    --rg-gradient-btn-hover: linear-gradient(135deg, #b49dfc 0%, #8b5cf6 100%);

    /* ── Text ── */
    --rg-text-primary: rgba(255, 255, 255, 0.92);
    --rg-text-secondary: rgba(255, 255, 255, 0.6);
    --rg-text-muted: rgba(255, 255, 255, 0.4);
    --rg-text-faint: rgba(255, 255, 255, 0.25);

    /* ── Borders ── */
    --rg-border: rgba(255, 255, 255, 0.06);
    --rg-border-subtle: rgba(255, 255, 255, 0.04);
    --rg-border-medium: rgba(255, 255, 255, 0.10);
    --rg-border-strong: rgba(255, 255, 255, 0.15);

    /* ── Shadows ── */
    --rg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --rg-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
    --rg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --rg-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.5);

    /* ── Radius ── */
    --rg-radius-sm: 6px;
    --rg-radius-md: 8px;
    --rg-radius-lg: 12px;
    --rg-radius-xl: 16px;

    /* ── Transitions ── */
    --rg-transition-fast: 150ms ease;
    --rg-transition-base: 200ms ease;
    --rg-transition-slow: 300ms ease;

    /* ── Status Colors ── */
    --rg-success: #34d399;
    --rg-warning: #fbbf24;
    --rg-error: #f87171;
    --rg-info: #60a5fa;
}


/* ============================================================================
   SECTION 1: GLOBAL RESETS (Colors Only)
   ============================================================================ */

/* ── Page Background ── */
html {
    background-color: var(--rg-bg-deepest);
}

body {
    background-color: var(--rg-bg-base);
    color: var(--rg-text-primary);
}

.p-body {
    background-color: var(--rg-bg-base);
    color: var(--rg-text-primary);
}

.p-body-inner {
    background-color: transparent;
}

.p-body-main {
    background-color: transparent;
}

.p-body-content {
    background-color: transparent;
}

.p-body-pageContent {
    background-color: transparent;
    color: var(--rg-text-primary);
}

/* ── Global Link Colors ── */
a {
    color: var(--rg-cyan);
    transition: color var(--rg-transition-fast);
}

a:hover {
    color: #33ebff;
}

a:active {
    color: var(--rg-cyan-dim);
}

/* ── Global Text Defaults ── */
h1, h2, h3, h4, h5, h6 {
    color: var(--rg-text-primary);
}

p {
    color: var(--rg-text-primary);
}

.muted {
    color: var(--rg-text-muted);
}

/* ── Global Border Color Overrides ── */
hr {
    border-color: var(--rg-border);
}

/* ── Selection Style ── */
::selection {
    background-color: rgba(0, 229, 255, 0.25);
    color: #ffffff;
}

::-moz-selection {
    background-color: rgba(0, 229, 255, 0.25);
    color: #ffffff;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
    background-color: var(--rg-bg-deepest);
}

::-webkit-scrollbar-track {
    background-color: var(--rg-bg-deepest);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ── Footer ── */
.p-footer {
    background-color: var(--rg-bg-deepest);
    color: var(--rg-text-muted);
    border-top: 1px solid var(--rg-border);
}

.p-footer a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast);
}

.p-footer a:hover {
    color: var(--rg-cyan);
}

.p-footer-inner {
    background-color: transparent;
}

.p-footer-row {
    color: var(--rg-text-muted);
}

.p-footer-linkList a {
    color: var(--rg-text-secondary);
}

.p-footer-linkList a:hover {
    color: var(--rg-cyan);
}

.p-footer-copyright {
    color: var(--rg-text-faint);
}


/* ============================================================================
   SECTION 2: CATEGORY BLOCKS (.block--category)
   ============================================================================ */

/* ── Base Block Styling ── */
.block {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
    margin-bottom: 20px;
    backdrop-filter: var(--rg-glass-blur);
    -webkit-backdrop-filter: var(--rg-glass-blur);
    transition: box-shadow var(--rg-transition-base);
}

.block:hover {
    box-shadow: var(--rg-shadow-lg);
}

/* ── Category Block ── */
.block--category {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
    backdrop-filter: var(--rg-glass-blur);
    -webkit-backdrop-filter: var(--rg-glass-blur);
}

/* ── Category Headers ── */
.block-header {
    background-color: rgba(167, 139, 250, 0.06);
    border-bottom: 1px solid var(--rg-border);
    color: var(--rg-purple);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
}

.block--category .block-header {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04));
    border-bottom: 1px solid rgba(167, 139, 250, 0.12);
    border-radius: var(--rg-radius-lg) var(--rg-radius-lg) 0 0;
}

.block-header a {
    color: var(--rg-purple);
    transition: color var(--rg-transition-fast);
}

.block-header a:hover {
    color: #c4b5fd;
}

/* ── Block Body ── */
.block-body {
    background-color: transparent;
}

/* ── Block Footer ── */
.block-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--rg-border);
    color: var(--rg-text-muted);
}

.block-footer a {
    color: var(--rg-text-secondary);
}

.block-footer a:hover {
    color: var(--rg-cyan);
}

/* ── Block Min Header ── */
.block-minHeader {
    color: var(--rg-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
}

/* ── Block Outer ── */
.block-outer {
    color: var(--rg-text-muted);
}

.block-outer .block-outer-main {
    color: var(--rg-text-muted);
}

.block-outer a {
    color: var(--rg-text-secondary);
}

.block-outer a:hover {
    color: var(--rg-cyan);
}


/* ============================================================================
   SECTION 3: NODE ROWS (Forum List Items)
   ============================================================================ */

/* ── Node List Container ── */
.node-list {
    background-color: transparent;
}

/* ── Individual Node ── */
.node {
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.node:last-child {
    border-bottom: none;
}

.node:hover {
    background-color: var(--rg-glass-bg-hover);
}

/* ── Node Body — DO NOT set display, width, table-layout, padding ── */
/* .node-body is a table element: only color/visual properties */
.node-body {
    background-color: transparent;
    border-color: var(--rg-border-subtle);
}

/* ── Node Icon ── */
/* .node-icon is a table-cell: do NOT set display or width */
.node-icon i {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.node--unread .node-icon i {
    color: var(--rg-cyan);
}

.node-icon .fa,
.node-icon .fas,
.node-icon .far,
.node-icon .fab {
    color: var(--rg-text-muted);
}

.node--unread .node-icon .fa,
.node--unread .node-icon .fas,
.node--unread .node-icon .far {
    color: var(--rg-cyan);
}

/* ── Node Main ── */
/* .node-main is a table-cell: do NOT set display or width */
.node-title a {
    color: var(--rg-text-primary);
    font-weight: 500;
    transition: color var(--rg-transition-fast);
}

.node-title a:hover {
    color: var(--rg-cyan);
}

.node--unread .node-title a {
    color: #ffffff;
    font-weight: 700;
}

.node-description {
    color: var(--rg-text-secondary);
    font-size: 0.85rem;
}

.node-subNodeList a {
    color: var(--rg-text-secondary);
    font-size: 0.82rem;
    transition: color var(--rg-transition-fast);
}

.node-subNodeList a:hover {
    color: var(--rg-cyan);
}

.node-subNodeList .node-subNodeLink--unread a {
    color: var(--rg-text-primary);
    font-weight: 600;
}

/* ── Node Stats ── */
/* .node-stats is a table-cell: do NOT set display or width */
.node-stats {
    color: var(--rg-text-muted);
}

.node-statLabel {
    color: var(--rg-text-faint);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.node-stats .pairs dt {
    color: var(--rg-text-faint);
    font-size: 0.75rem;
}

.node-stats .pairs dd {
    color: var(--rg-text-muted);
    font-weight: 600;
}

/* ── Node Extra (Latest Post) ── */
/* .node-extra is a table-cell: do NOT set display or width */
.node-extra {
    color: var(--rg-text-muted);
}

.node-extra .node-extra-icon {
    color: var(--rg-text-muted);
}

.node-extra .node-extra-title {
    color: var(--rg-text-secondary);
    font-size: 0.85rem;
}

.node-extra .node-extra-title a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast);
}

.node-extra .node-extra-title a:hover {
    color: var(--rg-cyan);
}

.node-extra .node-extra-user {
    color: var(--rg-text-muted);
    font-size: 0.8rem;
}

.node-extra .node-extra-user a {
    color: var(--rg-text-muted);
}

.node-extra .node-extra-user a:hover {
    color: var(--rg-cyan);
}

.node-extra .node-extra-date {
    color: var(--rg-text-faint);
    font-size: 0.78rem;
}

.node-extra .node-extra-date a,
.node-extra time {
    color: var(--rg-text-faint);
}

.node-extra .node-extra-date a:hover {
    color: var(--rg-cyan);
}

/* ── Node Meta (category description etc.) ── */
.node-meta {
    color: var(--rg-text-muted);
}

/* ── Link/Page Nodes ── */
.node--link .node-title a {
    color: var(--rg-cyan-dim);
}

.node--page .node-title a {
    color: var(--rg-text-primary);
}


/* ============================================================================
   SECTION 4: THREAD LIST (.structItem)
   ============================================================================ */

/* ── Struct Item — DO NOT set display, width, table-layout, padding ── */
.structItem {
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.structItem:hover {
    background-color: var(--rg-glass-bg-hover);
}

.structItem:last-child {
    border-bottom: none;
}

/* ── Struct Item Cells — table-cells: only visual properties ── */
.structItem-cell {
    color: var(--rg-text-secondary);
    border-color: var(--rg-border-subtle);
}

/* ── Icon Cell ── */
.structItem-cell--icon {
    color: var(--rg-text-muted);
}

.structItem-cell--icon .structItem-iconContainer {
    color: var(--rg-text-muted);
}

.structItem-cell--icon .avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Main Cell ── */
.structItem-cell--main {
    color: var(--rg-text-primary);
}

.structItem-title {
    color: var(--rg-text-primary);
    font-weight: 500;
}

.structItem-title a {
    color: var(--rg-text-primary);
    transition: color var(--rg-transition-fast);
}

.structItem-title a:hover {
    color: var(--rg-cyan);
}

/* ── Unread Threads ── */
.structItem--unread .structItem-title a,
.structItem.is-unread .structItem-title a {
    color: #ffffff;
    font-weight: 700;
}

.structItem.is-unread .structItem-title::before {
    color: var(--rg-cyan);
}

/* ── Sticky/Pinned Threads ── */
.structItem--sticky,
.structItem.is-sticky {
    border-left: 3px solid var(--rg-purple-dim);
    background-color: rgba(167, 139, 250, 0.03);
}

.structItem--sticky:hover,
.structItem.is-sticky:hover {
    background-color: rgba(167, 139, 250, 0.06);
}

/* ── Thread Prefix ── */
.label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--rg-radius-sm);
    color: #ffffff;
}

.label--accent {
    background-color: var(--rg-purple);
}

/* ── Thread Minor Info ── */
.structItem-minor {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

.structItem-minor a {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.structItem-minor a:hover {
    color: var(--rg-cyan);
}

.structItem-parts {
    color: var(--rg-text-muted);
}

.structItem-parts li {
    color: var(--rg-text-muted);
}

/* ── Meta Cell (Reply Count, Views) ── */
.structItem-cell--meta {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

.structItem-cell--meta dt {
    color: var(--rg-text-faint);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.structItem-cell--meta dd {
    color: var(--rg-text-muted);
    font-weight: 600;
}

.structItem-cell--meta .pairs {
    color: var(--rg-text-muted);
}

/* ── Latest Post Cell ── */
.structItem-cell--latest {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

.structItem-cell--latest a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast);
}

.structItem-cell--latest a:hover {
    color: var(--rg-cyan);
}

.structItem-cell--latest .structItem-latestDate {
    color: var(--rg-text-faint);
    font-size: 0.78rem;
}

.structItem-cell--latest time {
    color: var(--rg-text-faint);
}

/* ── Thread Status Icons ── */
.structItem-status {
    color: var(--rg-text-muted);
}

.structItem-status--locked i {
    color: var(--rg-text-faint);
}

/* ── Thread List Separator ── */
.structItemContainer-group {
    background-color: rgba(167, 139, 250, 0.06);
    color: var(--rg-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(167, 139, 250, 0.12);
}

.structItemContainer-group--sticky {
    background-color: rgba(167, 139, 250, 0.04);
    color: var(--rg-purple-dim);
}


/* ============================================================================
   SECTION 5: THREAD VIEW (Individual Post Page)
   ============================================================================ */

/* ── Message Container ── */
.message {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-sm);
    margin-bottom: 16px;
    transition: box-shadow var(--rg-transition-base), border-color var(--rg-transition-base);
}

.message:hover {
    box-shadow: var(--rg-shadow-md);
    border-color: var(--rg-glass-border-hover);
}

.message--post {
    background-color: var(--rg-glass-bg);
}

/* ── Message Inner ── */
.message-inner {
    background-color: transparent;
    border-color: var(--rg-border);
}

/* ── User Info (Left Column) ── */
.message-user {
    background-color: rgba(255, 255, 255, 0.02);
    border-right: 1px solid var(--rg-border-subtle);
    color: var(--rg-text-secondary);
}

.message-user .message-avatar {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.message-userDetails {
    color: var(--rg-text-secondary);
}

.message-name a {
    color: var(--rg-text-primary);
    font-weight: 600;
    transition: color var(--rg-transition-fast);
}

.message-name a:hover {
    color: var(--rg-cyan);
}

.message-userTitle {
    color: var(--rg-text-muted);
    font-size: 0.78rem;
}

.message-userExtras {
    color: var(--rg-text-faint);
    font-size: 0.75rem;
}

.message-userExtras dt {
    color: var(--rg-text-faint);
}

.message-userExtras dd {
    color: var(--rg-text-muted);
}

/* ── User Banners ── */
.userBanner {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--rg-radius-sm);
}

.userBanner--staff {
    background: var(--rg-gradient-purple);
    color: #ffffff;
}

/* ── Message Content ── */
.message-content {
    background-color: transparent;
    color: var(--rg-text-primary);
}

.message-body {
    color: var(--rg-text-primary);
    line-height: 1.7;
}

.message-body .bbWrapper {
    color: var(--rg-text-primary);
}

/* ── Message Attribution (Header) ── */
.message-attribution {
    color: var(--rg-text-faint);
    font-size: 0.78rem;
    border-bottom: 1px solid var(--rg-border-subtle);
}

.message-attribution a {
    color: var(--rg-text-faint);
    transition: color var(--rg-transition-fast);
}

.message-attribution a:hover {
    color: var(--rg-cyan);
}

.message-attribution-main a {
    color: var(--rg-text-faint);
}

.message-attribution-opposite {
    color: var(--rg-text-faint);
}

/* ── Post Content Typography ── */
.message-body h1,
.message-body h2,
.message-body h3 {
    color: #ffffff;
}

.message-body a {
    color: var(--rg-cyan);
}

.message-body a:hover {
    color: #33ebff;
}

.message-body strong {
    color: #ffffff;
    font-weight: 700;
}

.message-body em {
    color: var(--rg-text-primary);
}

.message-body code {
    background-color: rgba(0, 229, 255, 0.08);
    color: var(--rg-cyan);
    border-radius: 4px;
    font-size: 0.88em;
}

.message-body pre {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-md);
    color: var(--rg-text-primary);
}

/* ── Quoted Text ── */
.bbCodeBlock--quote {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--rg-border);
    border-left: 3px solid var(--rg-cyan);
    border-radius: var(--rg-radius-md);
}

.bbCodeBlock-title {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    border-bottom: 1px solid var(--rg-border-subtle);
}

.bbCodeBlock-content {
    color: var(--rg-text-secondary);
}

.bbCodeBlock-expandLink {
    color: var(--rg-cyan);
}

.bbCodeBlock-expandLink:hover {
    color: #33ebff;
}

/* ── Code Blocks ── */
.bbCodeBlock--code {
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-md);
}

.bbCodeBlock--code .bbCodeBlock-title {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--rg-text-muted);
    border-bottom: 1px solid var(--rg-border);
}

.bbCodeCode {
    color: var(--rg-text-primary);
}

.bbCodeCode code {
    background-color: transparent;
    color: var(--rg-text-primary);
}

/* ── Spoiler Blocks ── */
.bbCodeSpoiler-button {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    color: var(--rg-text-muted);
    border-radius: var(--rg-radius-sm);
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast);
}

.bbCodeSpoiler-button:hover {
    background-color: var(--rg-glass-bg-hover);
    color: var(--rg-text-primary);
}

.bbCodeSpoiler-content {
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
}

/* ── Inline Spoiler ── */
.bbCodeInlineSpoiler {
    background-color: rgba(255, 255, 255, 0.1);
    color: transparent;
    border-radius: 3px;
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast);
}

.bbCodeInlineSpoiler:hover,
.bbCodeInlineSpoiler.bbCodeInlineSpoiler--uncovered {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--rg-text-primary);
}

/* ── Post Actions (Like, Reply, etc.) ── */
.message-footer {
    border-top: 1px solid var(--rg-border-subtle);
    color: var(--rg-text-muted);
}

.message-actionBar {
    color: var(--rg-text-muted);
}

.actionBar-set a,
.actionBar-action {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.actionBar-set a:hover,
.actionBar-action:hover {
    color: var(--rg-cyan);
}

.actionBar-action--reply {
    color: var(--rg-text-muted);
}

.actionBar-action--reply:hover {
    color: var(--rg-cyan);
}

/* ── Reaction Bar ── */
.reactionsBar {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

.reactionsBar a {
    color: var(--rg-text-muted);
}

.reactionsBar a:hover {
    color: var(--rg-cyan);
}

.reactionsBar-link {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.reactionsBar-link:hover {
    color: var(--rg-cyan);
}

/* ── Reaction Summary ── */
.reactionSummary {
    color: var(--rg-text-muted);
}

/* ── Message Notices ── */
.message-notice {
    background-color: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.15);
    color: var(--rg-text-secondary);
    border-radius: var(--rg-radius-md);
}

/* ── Signature ── */
.message-signature {
    color: var(--rg-text-faint);
    border-top: 1px solid var(--rg-border-subtle);
    font-size: 0.82rem;
}

.message-signature a {
    color: var(--rg-text-muted);
}

.message-signature a:hover {
    color: var(--rg-cyan);
}

/* ── Last Edit Notice ── */
.message-lastEdit {
    color: var(--rg-text-faint);
    font-size: 0.78rem;
}

/* ── Thread Reply Area ── */
.js-replyNewMessageContainer {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
}

/* ── Quick Reply ── */
.block--quickReply {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
}


/* ============================================================================
   SECTION 6: EDITOR & FORMS
   ============================================================================ */

/* ── Text Inputs ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rg-text-primary);
    border-radius: var(--rg-radius-md);
    transition: border-color var(--rg-transition-fast), box-shadow var(--rg-transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    border-color: var(--rg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder {
    color: var(--rg-text-faint);
}

/* ── Textarea ── */
textarea {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rg-text-primary);
    border-radius: var(--rg-radius-md);
    transition: border-color var(--rg-transition-fast), box-shadow var(--rg-transition-fast);
}

textarea:focus {
    border-color: var(--rg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

textarea::placeholder {
    color: var(--rg-text-faint);
}

/* ── Select ── */
select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rg-text-primary);
    border-radius: var(--rg-radius-md);
    transition: border-color var(--rg-transition-fast);
}

select:focus {
    border-color: var(--rg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

select option {
    background-color: var(--rg-bg-raised);
    color: var(--rg-text-primary);
}

/* ── Checkbox & Radio ── */
.iconic--checkbox,
.iconic--radio {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.iconic--checkbox:checked,
.iconic--radio:checked {
    color: var(--rg-cyan);
}

input[type="checkbox"] {
    accent-color: var(--rg-cyan);
}

input[type="radio"] {
    accent-color: var(--rg-cyan);
}

/* ── XenForo Form Rows ── */
.formRow {
    border-bottom: 1px solid var(--rg-border-subtle);
}

.formRow-main {
    color: var(--rg-text-primary);
}

.formRow-label {
    color: var(--rg-text-secondary);
    font-weight: 600;
}

.formRow-hint {
    color: var(--rg-text-faint);
    font-size: 0.82rem;
}

.formRow-explain {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

/* ── Form Sections ── */
.formInfoRow {
    background-color: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.12);
    color: var(--rg-text-secondary);
    border-radius: var(--rg-radius-md);
}

/* ── Input Groups ── */
.inputGroup {
    border-radius: var(--rg-radius-md);
}

.inputGroup .input {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rg-text-primary);
}

.inputGroup .inputGroup-text {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rg-text-muted);
}

/* ── Buttons: Primary ── */
.button--primary {
    background: var(--rg-gradient-btn-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--rg-radius-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.25);
    transition: box-shadow var(--rg-transition-fast), transform var(--rg-transition-fast), background var(--rg-transition-fast);
}

.button--primary:hover {
    background: var(--rg-gradient-btn-hover);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.35);
    transform: translateY(-1px);
    color: #ffffff;
}

.button--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.2);
}

/* ── Buttons: Default/Secondary ── */
.button {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    color: var(--rg-text-secondary);
    border-radius: var(--rg-radius-md);
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast), border-color var(--rg-transition-fast);
}

.button:hover {
    background-color: var(--rg-glass-bg-hover);
    border-color: var(--rg-glass-border-hover);
    color: var(--rg-text-primary);
}

.button:active {
    background-color: var(--rg-glass-bg-active);
}

/* ── Buttons: Link Style ── */
.button--link {
    background-color: transparent;
    border: none;
    color: var(--rg-cyan);
}

.button--link:hover {
    color: #33ebff;
    background-color: transparent;
}

/* ── Buttons: Icon ── */
.button--icon {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.button--icon:hover {
    color: var(--rg-cyan);
}

/* ── Buttons: CTA / Create Thread ── */
.button--cta {
    background: var(--rg-gradient-btn-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--rg-radius-md);
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.25);
    transition: box-shadow var(--rg-transition-fast), transform var(--rg-transition-fast);
}

.button--cta:hover {
    background: var(--rg-gradient-btn-hover);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.35);
    transform: translateY(-1px);
    color: #ffffff;
}

/* ── XenForo Editor ── */
.fr-box {
    border-radius: var(--rg-radius-md);
}

.fr-toolbar {
    background-color: var(--rg-bg-raised);
    border-color: var(--rg-border);
    color: var(--rg-text-primary);
    border-radius: var(--rg-radius-md) var(--rg-radius-md) 0 0;
}

.fr-toolbar .fr-command.fr-btn {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast), background-color var(--rg-transition-fast);
}

.fr-toolbar .fr-command.fr-btn:hover {
    background-color: var(--rg-glass-bg-hover);
    color: var(--rg-text-primary);
}

.fr-toolbar .fr-command.fr-btn.fr-active {
    color: var(--rg-cyan);
    background-color: rgba(0, 229, 255, 0.08);
}

.fr-toolbar .fr-separator {
    background-color: var(--rg-border);
}

.fr-wrapper {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--rg-border);
}

.fr-element {
    background-color: transparent;
    color: var(--rg-text-primary);
}

.fr-second-toolbar {
    background-color: var(--rg-bg-raised);
    border-color: var(--rg-border);
    border-radius: 0 0 var(--rg-radius-md) var(--rg-radius-md);
}

.fr-counter {
    color: var(--rg-text-faint);
}

/* ── Draft Indicator ── */
.formButtonGroup .formButtonGroup-extra {
    color: var(--rg-text-muted);
}

/* ── Token Inputs / Tag Inputs ── */
.tagItem {
    background-color: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--rg-cyan);
    border-radius: var(--rg-radius-sm);
}

.tagItem:hover {
    background-color: rgba(0, 229, 255, 0.15);
}

/* ── File Upload / Attachments ── */
.attachmentUploader {
    background-color: var(--rg-glass-bg);
    border: 2px dashed var(--rg-border-medium);
    border-radius: var(--rg-radius-md);
    color: var(--rg-text-muted);
    transition: border-color var(--rg-transition-fast), background-color var(--rg-transition-fast);
}

.attachmentUploader:hover {
    border-color: var(--rg-cyan-dim);
    background-color: var(--rg-glass-bg-hover);
}

.attachmentManager-filelist {
    background-color: transparent;
}

.attachmentFile {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    color: var(--rg-text-secondary);
}

.attachmentFile:hover {
    background-color: var(--rg-glass-bg-hover);
}


/* ============================================================================
   SECTION 7: NAVIGATION BREADCRUMBS & PAGE CONTROLS
   ============================================================================ */

/* ── Breadcrumbs ── */
.p-breadcrumbs {
    color: var(--rg-text-muted);
}

.p-breadcrumbs a {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.p-breadcrumbs a:hover {
    color: var(--rg-cyan);
}

.p-breadcrumbs li::after {
    color: var(--rg-text-faint);
}

.p-breadcrumbs .p-breadcrumb {
    color: var(--rg-text-muted);
}

/* ── Page Navigation ── */
.pageNav {
    color: var(--rg-text-muted);
}

.pageNav-main {
    color: var(--rg-text-muted);
}

.pageNav-page {
    color: var(--rg-text-muted);
}

.pageNav-page a {
    color: var(--rg-text-secondary);
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-sm);
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast), border-color var(--rg-transition-fast);
}

.pageNav-page a:hover {
    background-color: var(--rg-glass-bg-hover);
    color: var(--rg-text-primary);
    border-color: var(--rg-glass-border-hover);
}

.pageNav-page.pageNav-page--current a,
.pageNav-page.pageNav-page--current {
    background-color: var(--rg-cyan);
    color: #0f1117;
    border-color: var(--rg-cyan);
    font-weight: 700;
}

.pageNav-page--skip {
    color: var(--rg-text-faint);
}

.pageNav-jump a {
    color: var(--rg-text-muted);
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-sm);
}

.pageNav-jump a:hover {
    color: var(--rg-cyan);
    border-color: var(--rg-glass-border-hover);
}

/* ── Page Title Bar ── */
.p-title {
    color: var(--rg-text-primary);
}

.p-title-value {
    color: #ffffff;
    font-weight: 700;
}

.p-title-pageAction .button {
    background: var(--rg-gradient-btn-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--rg-radius-md);
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.2);
    transition: box-shadow var(--rg-transition-fast), transform var(--rg-transition-fast);
}

.p-title-pageAction .button:hover {
    background: var(--rg-gradient-btn-hover);
    box-shadow: 0 4px 16px rgba(167, 139, 250, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
}

/* ── Page Description ── */
.p-description {
    color: var(--rg-text-secondary);
}

/* ── Section Header ── */
.p-sectionHeader {
    color: var(--rg-text-primary);
    border-bottom: 1px solid var(--rg-border);
}

.p-sectionHeader-title {
    color: var(--rg-text-primary);
    font-weight: 700;
}

/* ── Tabs / Tab Navigation ── */
.tabs {
    border-bottom: 1px solid var(--rg-border);
}

.tabs-tab {
    color: var(--rg-text-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--rg-transition-fast), border-color var(--rg-transition-fast);
}

.tabs-tab:hover {
    color: var(--rg-text-primary);
    border-bottom-color: var(--rg-glass-border-hover);
}

.tabs-tab.is-active {
    color: var(--rg-cyan);
    border-bottom-color: var(--rg-cyan);
    font-weight: 600;
}

.tabs-tab a {
    color: inherit;
}

.tabPanes {
    background-color: transparent;
}

/* ── Filter Bar / Sort Options ── */
.filterBar {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
}

.filterBar-filter {
    color: var(--rg-text-muted);
}

.filterBar-filter a {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.filterBar-filter a:hover {
    color: var(--rg-cyan);
}

.filterBar-filter.is-active a {
    color: var(--rg-cyan);
    font-weight: 600;
}

.filterBar-menuTrigger {
    color: var(--rg-text-muted);
}


/* ============================================================================
   SECTION 8: ALERTS, CONVERSATIONS, ACCOUNT PAGES
   ============================================================================ */

/* ── Alert List ── */
.alert {
    background-color: var(--rg-glass-bg);
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.alert:hover {
    background-color: var(--rg-glass-bg-hover);
}

.alert--unread,
.alert.is-unread {
    border-left: 3px solid var(--rg-cyan);
    background-color: rgba(0, 229, 255, 0.04);
}

.alert--unread:hover,
.alert.is-unread:hover {
    background-color: rgba(0, 229, 255, 0.06);
}

.alert-body {
    color: var(--rg-text-secondary);
}

.alert-body a {
    color: var(--rg-text-primary);
    font-weight: 600;
}

.alert-body a:hover {
    color: var(--rg-cyan);
}

.alert .alert-date {
    color: var(--rg-text-faint);
    font-size: 0.78rem;
}

.alertRow {
    background-color: var(--rg-glass-bg);
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.alertRow:hover {
    background-color: var(--rg-glass-bg-hover);
}

.alertRow--unread,
.alertRow.is-unread {
    border-left: 3px solid var(--rg-cyan);
    background-color: rgba(0, 229, 255, 0.04);
}

/* ── Conversation List ── */
.structItem--conversation {
    border-bottom: 1px solid var(--rg-border-subtle);
}

.structItem--conversation .structItem-title a {
    color: var(--rg-text-primary);
}

.structItem--conversation .structItem-title a:hover {
    color: var(--rg-cyan);
}

.structItem--conversation.is-unread .structItem-title a {
    color: #ffffff;
    font-weight: 700;
}

/* ── Conversation View ── */
.conversation-message {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    margin-bottom: 12px;
}

/* ── Account Pages ── */
.p-account {
    color: var(--rg-text-primary);
}

.p-account .block {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
}

.p-account .formRow {
    border-bottom: 1px solid var(--rg-border-subtle);
}

/* ── Account Sidebar Navigation ── */
.p-account .listSideBar {
    background-color: transparent;
}

.p-account .listSideBar a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast), background-color var(--rg-transition-fast);
}

.p-account .listSideBar a:hover {
    color: var(--rg-text-primary);
    background-color: var(--rg-glass-bg-hover);
}

.p-account .listSideBar a.is-active {
    color: var(--rg-cyan);
    background-color: rgba(0, 229, 255, 0.06);
    font-weight: 600;
}

/* ── Security / 2FA Pages ── */
.block--security {
    background-color: var(--rg-glass-bg);
}

/* ── Preferences ── */
.block--preferences {
    background-color: var(--rg-glass-bg);
}

/* ── Following / Ignoring ── */
.block--followedContent {
    background-color: var(--rg-glass-bg);
}

/* ── Alerts Page ── */
.p-body-pageContent--alerts .alert {
    border-radius: var(--rg-radius-md);
    margin-bottom: 8px;
}

/* ── Connected Accounts ── */
.block--connectedAccounts .block-body {
    background-color: transparent;
}


/* ============================================================================
   SECTION 9: MEMBER PROFILES
   ============================================================================ */

/* ── Profile Header / Banner ── */
.memberProfileBanner {
    background-color: var(--rg-bg-raised);
}

.memberHeader {
    background-color: var(--rg-glass-bg);
    backdrop-filter: var(--rg-glass-blur);
    -webkit-backdrop-filter: var(--rg-glass-blur);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-lg);
}

.memberHeader-content {
    color: var(--rg-text-primary);
}

.memberHeader-nameWrapper {
    color: #ffffff;
}

.memberHeader-name {
    color: #ffffff;
}

.memberHeader-name .username {
    font-weight: 700;
}

.memberHeader-blurb {
    color: var(--rg-text-secondary);
}

/* ── Profile Stats ── */
.memberHeader-stats {
    color: var(--rg-text-muted);
}

.pairJustifier dt {
    color: var(--rg-text-faint);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pairJustifier dd {
    color: var(--rg-text-primary);
    font-weight: 600;
}

/* ── Profile Tabs ── */
.memberHeader-tabs {
    border-top: 1px solid var(--rg-border);
}

/* ── Profile Sidebar ── */
.memberTooltip {
    background-color: var(--rg-bg-raised);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-lg);
    color: var(--rg-text-primary);
}

.memberTooltip-name {
    color: #ffffff;
    font-weight: 700;
}

.memberTooltip-blurb {
    color: var(--rg-text-secondary);
}

/* ── Profile Posts (Recent Activity) ── */
.message--profilePost {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    margin-bottom: 12px;
}

.message--profilePost:hover {
    border-color: var(--rg-glass-border-hover);
}

/* ── Profile Info Area ── */
.memberHeader-info {
    color: var(--rg-text-secondary);
}

.memberHeader-info dt {
    color: var(--rg-text-faint);
}

.memberHeader-info dd {
    color: var(--rg-text-primary);
}

/* ── About Section ── */
.block--memberAbout {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.aboutSection {
    color: var(--rg-text-secondary);
    border-bottom: 1px solid var(--rg-border-subtle);
}

.aboutSection .pairs dt {
    color: var(--rg-text-muted);
}

.aboutSection .pairs dd {
    color: var(--rg-text-primary);
}

/* ── Member Card ── */
.memberCard {
    background-color: var(--rg-bg-raised);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-lg);
}

.memberCard-name {
    color: #ffffff;
    font-weight: 700;
}

.memberCard-title {
    color: var(--rg-text-muted);
}

.memberCard-stats dt {
    color: var(--rg-text-faint);
}

.memberCard-stats dd {
    color: var(--rg-text-primary);
}

/* ── Member List ── */
.memberList-member {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    transition: background-color var(--rg-transition-fast), box-shadow var(--rg-transition-fast);
}

.memberList-member:hover {
    background-color: var(--rg-glass-bg-hover);
    box-shadow: var(--rg-shadow-md);
}

.memberList-member .memberList-name a {
    color: var(--rg-text-primary);
    font-weight: 600;
}

.memberList-member .memberList-name a:hover {
    color: var(--rg-cyan);
}

.memberList-member .memberList-stat dt {
    color: var(--rg-text-faint);
}

.memberList-member .memberList-stat dd {
    color: var(--rg-text-muted);
}


/* ============================================================================
   SECTION 10: OVERLAYS & DROPDOWNS
   ============================================================================ */

/* ── Overlay Container ── */
.overlay-container {
    background-color: var(--rg-bg-raised);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-xl);
    color: var(--rg-text-primary);
    backdrop-filter: var(--rg-glass-blur);
    -webkit-backdrop-filter: var(--rg-glass-blur);
}

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.overlay-title {
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid var(--rg-border);
}

.overlay-content {
    color: var(--rg-text-primary);
    background-color: transparent;
}

.overlay-footer {
    border-top: 1px solid var(--rg-border);
    background-color: rgba(255, 255, 255, 0.02);
}

/* ── Menu / Dropdown ── */
.menu {
    background-color: var(--rg-bg-raised);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-lg);
    backdrop-filter: var(--rg-glass-blur);
    -webkit-backdrop-filter: var(--rg-glass-blur);
}

.menu-content {
    background-color: transparent;
    color: var(--rg-text-primary);
}

.menu-header {
    color: var(--rg-text-primary);
    font-weight: 700;
    border-bottom: 1px solid var(--rg-border);
}

.menu-footer {
    color: var(--rg-text-muted);
    border-top: 1px solid var(--rg-border);
    background-color: rgba(255, 255, 255, 0.02);
}

.menu-footer a {
    color: var(--rg-text-secondary);
}

.menu-footer a:hover {
    color: var(--rg-cyan);
}

.menu-row {
    color: var(--rg-text-primary);
    transition: background-color var(--rg-transition-fast);
}

.menu-row:hover {
    background-color: var(--rg-glass-bg-hover);
}

.menu-row--highlighted {
    background-color: rgba(0, 229, 255, 0.06);
}

.menu-row a {
    color: var(--rg-text-primary);
}

.menu-row a:hover {
    color: var(--rg-cyan);
}

.menu-separator {
    border-top: 1px solid var(--rg-border);
}

.menu-linkRow {
    color: var(--rg-text-secondary);
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast);
}

.menu-linkRow:hover {
    background-color: var(--rg-glass-bg-hover);
    color: var(--rg-text-primary);
}

/* ── Tooltip ── */
.tooltip {
    background-color: var(--rg-bg-elevated);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-sm);
    box-shadow: var(--rg-shadow-md);
    color: var(--rg-text-primary);
}

.tooltip-content {
    color: var(--rg-text-primary);
}

.tooltip-arrow {
    border-color: var(--rg-bg-elevated);
}

/* ── Popup / Popover ── */
.popover {
    background-color: var(--rg-bg-raised);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-lg);
}

/* ── Notices / System Messages ── */
.notices {
    color: var(--rg-text-secondary);
}

.notice {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    color: var(--rg-text-secondary);
}

.notice--primary {
    background-color: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.15);
}

.notice--warning {
    background-color: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.15);
    color: var(--rg-warning);
}

.notice--error {
    background-color: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.15);
    color: var(--rg-error);
}

/* ── Flash Messages ── */
.flashMessage {
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-md);
}

.flashMessage--success {
    background-color: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: var(--rg-success);
}

.flashMessage--error {
    background-color: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--rg-error);
}


/* ============================================================================
   SECTION 11: SIDEBAR WIDGETS (Right Side)
   ============================================================================ */

/* ── Sidebar Block (Not .rg-sidebar — XenForo's native sidebar) ── */
.p-body-sidebar .block {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
    backdrop-filter: var(--rg-glass-blur);
    -webkit-backdrop-filter: var(--rg-glass-blur);
    margin-bottom: 16px;
}

.p-body-sidebar .block-header {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04));
    border-bottom: 1px solid rgba(167, 139, 250, 0.12);
    color: var(--rg-purple);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    border-radius: var(--rg-radius-lg) var(--rg-radius-lg) 0 0;
}

.p-body-sidebar .block-header a {
    color: var(--rg-purple);
}

.p-body-sidebar .block-header a:hover {
    color: #c4b5fd;
}

.p-body-sidebar .block-body {
    background-color: transparent;
}

.p-body-sidebar .block-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--rg-border);
    color: var(--rg-text-muted);
}

/* ── Sidebar Content Links ── */
.p-body-sidebar a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast);
}

.p-body-sidebar a:hover {
    color: var(--rg-cyan);
}

/* ── Sidebar User Lists (Online, Staff, etc.) ── */
.p-body-sidebar .avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Widget: Members Online ── */
.block--onlineNow {
    color: var(--rg-text-secondary);
}

.block--onlineNow .pairs dt {
    color: var(--rg-text-faint);
}

.block--onlineNow .pairs dd {
    color: var(--rg-text-muted);
}

/* ── Widget: New Posts ── */
.block--newPosts .contentRow-title a {
    color: var(--rg-text-primary);
    transition: color var(--rg-transition-fast);
}

.block--newPosts .contentRow-title a:hover {
    color: var(--rg-cyan);
}

.block--newPosts .contentRow-minor {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

/* ── Widget: Forum Statistics ── */
.block--forumStatistics {
    color: var(--rg-text-secondary);
}

.block--forumStatistics .pairs dt {
    color: var(--rg-text-faint);
}

.block--forumStatistics .pairs dd {
    color: var(--rg-text-muted);
    font-weight: 600;
}

/* ── Widget: Share Page ── */
.block--sharePage a {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.block--sharePage a:hover {
    color: var(--rg-cyan);
}

/* ── Content Row (used in sidebar widgets) ── */
.contentRow {
    color: var(--rg-text-secondary);
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.contentRow:last-child {
    border-bottom: none;
}

.contentRow:hover {
    background-color: var(--rg-glass-bg-hover);
}

.contentRow-title {
    color: var(--rg-text-primary);
    font-weight: 600;
}

.contentRow-title a {
    color: var(--rg-text-primary);
    transition: color var(--rg-transition-fast);
}

.contentRow-title a:hover {
    color: var(--rg-cyan);
}

.contentRow-minor {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}

.contentRow-minor a {
    color: var(--rg-text-muted);
}

.contentRow-minor a:hover {
    color: var(--rg-cyan);
}

.contentRow-snippet {
    color: var(--rg-text-secondary);
    font-size: 0.88rem;
}

.contentRow-extra {
    color: var(--rg-text-faint);
}

.contentRow-figure {
    color: var(--rg-text-muted);
}


/* ============================================================================
   SECTION 12: RESPONSIVE / MOBILE
   ============================================================================ */

/* 
   Mobile overrides: only color/visual properties.
   XenForo handles all layout changes at these breakpoints — we only ensure
   the dark theme and visual styling carries through.
*/

@media (max-width: 900px) {
    /* ── Ensure glass panels remain styled on tablet ── */
    .block {
        border-radius: var(--rg-radius-md);
    }

    .block--category {
        border-radius: var(--rg-radius-md);
    }

    .block--category .block-header {
        border-radius: var(--rg-radius-md) var(--rg-radius-md) 0 0;
    }

    .message {
        border-radius: var(--rg-radius-md);
    }

    /* ── Sidebar block adjustments ── */
    .p-body-sidebar .block {
        border-radius: var(--rg-radius-md);
    }
}

@media (max-width: 650px) {
    /* ── Even smaller radius on mobile ── */
    .block {
        border-radius: var(--rg-radius-sm);
        margin-bottom: 12px;
    }

    .block--category {
        border-radius: var(--rg-radius-sm);
    }

    .block--category .block-header {
        border-radius: var(--rg-radius-sm) var(--rg-radius-sm) 0 0;
    }

    .message {
        border-radius: var(--rg-radius-sm);
        margin-bottom: 10px;
    }

    /* ── Ensure text remains readable on mobile ── */
    .node-title a {
        color: var(--rg-text-primary);
    }

    .structItem-title a {
        color: var(--rg-text-primary);
    }

    /* ── Pagination on mobile ── */
    .pageNav-page a {
        border-radius: var(--rg-radius-sm);
    }
}


/* ============================================================================
   SECTION 13: ADDITIONAL XENFORO COMPONENTS
   ============================================================================ */

/* ── Pairs (Key-Value Displays) ── */
.pairs {
    color: var(--rg-text-secondary);
}

.pairs dt {
    color: var(--rg-text-muted);
}

.pairs dd {
    color: var(--rg-text-primary);
}

.pairs a {
    color: var(--rg-cyan);
}

.pairs a:hover {
    color: #33ebff;
}

/* ── Data Lists ── */
.dataList {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.dataList-row {
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.dataList-row:hover {
    background-color: var(--rg-glass-bg-hover);
}

.dataList-row:last-child {
    border-bottom: none;
}

.dataList-cell {
    color: var(--rg-text-primary);
}

.dataList-cell--main {
    color: var(--rg-text-primary);
}

.dataList-cell--min {
    color: var(--rg-text-muted);
}

.dataList-header .dataList-cell {
    background-color: rgba(167, 139, 250, 0.06);
    color: var(--rg-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(167, 139, 250, 0.12);
}

/* ── Toggle / Switch ── */
.toggle {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    transition: background-color var(--rg-transition-fast);
}

.toggle.is-active {
    background-color: var(--rg-cyan);
}

/* ── Avatars ── */
.avatar {
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.avatar--s {
    border-radius: 50%;
}

.avatar--m {
    border-radius: 50%;
}

.avatar--l {
    border-radius: 50%;
}

/* ── Username Styling ── */
.username {
    font-weight: 600;
    transition: color var(--rg-transition-fast);
}

.username:hover {
    color: var(--rg-cyan);
}

/* ── Badges / Trophies ── */
.trophy {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
}

.trophy-icon {
    color: var(--rg-warning);
}

.trophy-title {
    color: var(--rg-text-primary);
    font-weight: 600;
}

.trophy-description {
    color: var(--rg-text-muted);
}

/* ── Tags ── */
.tagList a {
    background-color: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.15);
    color: var(--rg-cyan-dim);
    border-radius: var(--rg-radius-sm);
    font-size: 0.78rem;
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast);
}

.tagList a:hover {
    background-color: rgba(0, 229, 255, 0.15);
    color: var(--rg-cyan);
}

/* ── Share Buttons ── */
.shareButtons a {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.shareButtons a:hover {
    color: var(--rg-cyan);
}

/* ── Likes / Reactions List ── */
.reactionList {
    color: var(--rg-text-secondary);
}

.reactionList-link {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.reactionList-link:hover {
    color: var(--rg-cyan);
}

/* ── Thread Poll ── */
.pollBlock {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-sm);
}

.pollBlock-question {
    color: #ffffff;
    font-weight: 700;
}

.pollBlock-responseBar {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--rg-radius-sm);
}

.pollBlock-responseBar .pollBlock-responseBarFill {
    background: var(--rg-gradient-cyan);
    border-radius: var(--rg-radius-sm);
}

.pollBlock-response {
    color: var(--rg-text-primary);
}

.pollBlock-voters {
    color: var(--rg-text-faint);
}

/* ── Inline Moderation Bar ── */
.inlineModBar {
    background-color: var(--rg-bg-elevated);
    border: 1px solid var(--rg-glass-border);
    box-shadow: var(--rg-shadow-lg);
    color: var(--rg-text-primary);
    border-radius: var(--rg-radius-md);
}

.inlineModBar a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast);
}

.inlineModBar a:hover {
    color: var(--rg-cyan);
}

/* ── Thread View Extras ── */
.block--threadPoll {
    background-color: var(--rg-glass-bg);
}

.block--threadPoll .block-header {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04));
    color: var(--rg-purple);
}

/* ── Watched Thread Indicator ── */
.structItem-status i.fa-eye {
    color: var(--rg-cyan-dim);
}

/* ── Thread Type Icons ── */
.threadStatus {
    color: var(--rg-text-faint);
}

.threadStatus--locked {
    color: var(--rg-text-faint);
}

.threadStatus--sticky {
    color: var(--rg-purple-dim);
}

/* ── Resource Manager (if installed) ── */
.block--resource {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.resourceList-item {
    border-bottom: 1px solid var(--rg-border-subtle);
    transition: background-color var(--rg-transition-fast);
}

.resourceList-item:hover {
    background-color: var(--rg-glass-bg-hover);
}

.resourceInfo {
    color: var(--rg-text-secondary);
}

.resourceInfo-title a {
    color: var(--rg-text-primary);
    font-weight: 600;
}

.resourceInfo-title a:hover {
    color: var(--rg-cyan);
}

.resourceInfo-tag {
    color: var(--rg-text-muted);
}

.resourceMeta {
    color: var(--rg-text-muted);
}

/* ── Likes Summary ── */
.likeSummary {
    color: var(--rg-text-muted);
}

.likeSummary a {
    color: var(--rg-text-secondary);
}

.likeSummary a:hover {
    color: var(--rg-cyan);
}

/* ── Watched / Bookmarks ── */
.structItem-status--watched i {
    color: var(--rg-cyan-dim);
}

.structItem-status--bookmarked i {
    color: var(--rg-purple);
}


/* ============================================================================
   SECTION 14: SEARCH PAGES
   ============================================================================ */

/* ── Search Form ── */
.block--search {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.block--search .block-header {
    color: var(--rg-purple);
}

/* ── Search Results ── */
.contentRow--searchResult {
    border-bottom: 1px solid var(--rg-border-subtle);
}

.contentRow--searchResult:hover {
    background-color: var(--rg-glass-bg-hover);
}

.contentRow--searchResult .contentRow-title a {
    color: var(--rg-text-primary);
    font-weight: 600;
}

.contentRow--searchResult .contentRow-title a:hover {
    color: var(--rg-cyan);
}

.contentRow--searchResult .contentRow-snippet {
    color: var(--rg-text-secondary);
}

.contentRow--searchResult .contentRow-snippet mark,
.contentRow--searchResult .contentRow-snippet em {
    background-color: rgba(0, 229, 255, 0.15);
    color: var(--rg-cyan);
}


/* ============================================================================
   SECTION 15: MEDIA GALLERY (if installed)
   ============================================================================ */

.mediaItem {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    transition: box-shadow var(--rg-transition-fast), border-color var(--rg-transition-fast);
}

.mediaItem:hover {
    box-shadow: var(--rg-shadow-md);
    border-color: var(--rg-glass-border-hover);
}

.mediaItem-title a {
    color: var(--rg-text-primary);
    transition: color var(--rg-transition-fast);
}

.mediaItem-title a:hover {
    color: var(--rg-cyan);
}

.mediaItem-info {
    color: var(--rg-text-muted);
    font-size: 0.82rem;
}


/* ============================================================================
   SECTION 16: ERROR PAGES & SPECIAL STATES
   ============================================================================ */

/* ── Error Page ── */
.p-body-pageContent--error {
    color: var(--rg-text-primary);
}

.block--error {
    background-color: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.15);
    border-radius: var(--rg-radius-lg);
}

.block--error .block-header {
    color: var(--rg-error);
    background-color: rgba(248, 113, 113, 0.08);
}

/* ── Confirmation Page ── */
.block--confirm {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

/* ── Loading Indicator ── */
.globalAction-loading {
    color: var(--rg-cyan);
}

/* ── Empty State ── */
.block-row--emptyState {
    color: var(--rg-text-muted);
    font-style: italic;
}


/* ============================================================================
   SECTION 17: MISCELLANEOUS XENFORO ELEMENTS
   ============================================================================ */

/* ── Captcha Area ── */
.formRow--captcha {
    background-color: var(--rg-glass-bg);
    border-radius: var(--rg-radius-md);
}

/* ── Privacy Policy / Terms ── */
.p-body-pageContent--legal {
    color: var(--rg-text-primary);
    line-height: 1.7;
}

.p-body-pageContent--legal h2 {
    color: var(--rg-purple);
    font-weight: 700;
}

/* ── Help Pages ── */
.block--help {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.block--help .block-header {
    color: var(--rg-purple);
}

/* ── Debug Output (if enabled) ── */
.p-debugOutput {
    background-color: var(--rg-bg-deepest);
    color: var(--rg-text-muted);
    border-top: 1px solid var(--rg-border);
}

/* ── Invisible / Moderation Styles ── */
.message--deleted {
    background-color: rgba(248, 113, 113, 0.04);
    border-color: rgba(248, 113, 113, 0.12);
}

.message--moderated {
    background-color: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.12);
}

/* ── Thread Preview Tooltip ── */
.previewTooltip {
    background-color: var(--rg-bg-raised);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-lg);
    color: var(--rg-text-primary);
}

/* ── Quick Search ── */
.quickSearch {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
}

.quickSearch input {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--rg-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.quickSearch input:focus {
    border-color: var(--rg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

/* ── Dismissible Notices ── */
.notice-dismiss {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.notice-dismiss:hover {
    color: var(--rg-text-primary);
}

/* ── Featured Threads ── */
.featuredThread {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
}

.featuredThread:hover {
    box-shadow: var(--rg-shadow-lg);
    border-color: var(--rg-glass-border-hover);
}

.featuredThread-title a {
    color: #ffffff;
    font-weight: 700;
}

.featuredThread-title a:hover {
    color: var(--rg-cyan);
}

.featuredThread-snippet {
    color: var(--rg-text-secondary);
}

/* ── What's New Page ── */
.p-body-pageContent--whatsNew .contentRow {
    border-bottom: 1px solid var(--rg-border-subtle);
}

/* ── Report Center ── */
.block--report {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

/* ── Approval Queue ── */
.block--approvalQueue {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

/* ── Moderator Bar ── */
.p-modBar {
    background-color: rgba(167, 139, 250, 0.08);
    border-bottom: 1px solid rgba(167, 139, 250, 0.15);
    color: var(--rg-text-secondary);
}

.p-modBar a {
    color: var(--rg-purple);
    transition: color var(--rg-transition-fast);
}

.p-modBar a:hover {
    color: #c4b5fd;
}


/* ============================================================================
   SECTION 18: BBCODE ELEMENTS & RICH CONTENT
   ============================================================================ */

/* ── Image Embeds ── */
.bbImage {
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-sm);
}

/* ── Video Embeds ── */
.bbMediaWrapper {
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-sm);
}

/* ── Attachment Thumbnails ── */
.attachmentList {
    color: var(--rg-text-secondary);
}

.attachmentThumbnail {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    transition: border-color var(--rg-transition-fast), box-shadow var(--rg-transition-fast);
}

.attachmentThumbnail:hover {
    border-color: var(--rg-glass-border-hover);
    box-shadow: var(--rg-shadow-sm);
}

.attachmentThumbnail-name {
    color: var(--rg-text-secondary);
    font-size: 0.78rem;
}

/* ── Attachment File Links ── */
.attachmentFile-name a {
    color: var(--rg-cyan);
}

.attachmentFile-name a:hover {
    color: #33ebff;
}

.attachmentFile-size {
    color: var(--rg-text-faint);
}

/* ── List Styles ── */
.bbCodeBlock--unfurl {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    transition: border-color var(--rg-transition-fast);
}

.bbCodeBlock--unfurl:hover {
    border-color: var(--rg-glass-border-hover);
}

.bbCodeBlock--unfurl .contentRow-title {
    color: var(--rg-text-primary);
}

.bbCodeBlock--unfurl .contentRow-snippet {
    color: var(--rg-text-muted);
}

.bbCodeBlock--unfurl .contentRow-minor {
    color: var(--rg-text-faint);
}

/* ── Table BB Code ── */
.bbTable {
    border-color: var(--rg-border);
}

.bbTable th {
    background-color: rgba(167, 139, 250, 0.08);
    color: var(--rg-purple);
    font-weight: 700;
    border-color: var(--rg-border);
}

.bbTable td {
    border-color: var(--rg-border);
    color: var(--rg-text-primary);
}

.bbTable tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ── Horizontal Rule in BBCode ── */
.bbCodeHR {
    border-color: var(--rg-border);
}

/* ── BB Code General Blocks ── */
.bbCodeBlock {
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-md);
}


/* ============================================================================
   SECTION 19: ADMIN-FACING WIDGETS IN FRONTEND
   ============================================================================ */

/* ── Widget Framework ── */
.widget {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.widget-header {
    color: var(--rg-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.widget-body {
    color: var(--rg-text-secondary);
}

/* ── Mini Stats Row ── */
.block-row {
    border-bottom: 1px solid var(--rg-border-subtle);
    color: var(--rg-text-secondary);
    transition: background-color var(--rg-transition-fast);
}

.block-row:last-child {
    border-bottom: none;
}

.block-row:hover {
    background-color: var(--rg-glass-bg-hover);
}

.block-row a {
    color: var(--rg-text-primary);
}

.block-row a:hover {
    color: var(--rg-cyan);
}


/* ============================================================================
   SECTION 20: POST THREAD / NEW THREAD PAGE
   ============================================================================ */

/* ── Thread Creation Form ── */
.block--newThread {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md);
}

.block--newThread .block-header {
    color: var(--rg-purple);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04));
}

/* ── Thread Title Input ── */
.input--title {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 600;
    border-radius: var(--rg-radius-md);
}

.input--title:focus {
    border-color: var(--rg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

/* ── Thread Prefix Selector ── */
.input--prefix {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rg-text-primary);
}


/* ============================================================================
   SECTION 21: STAFF / ADMIN PAGES (Frontend)
   ============================================================================ */

/* ── Warning Overlay ── */
.xenOverlay .block--warning {
    background-color: var(--rg-bg-raised);
    border: 1px solid rgba(248, 113, 113, 0.2);
    color: var(--rg-text-primary);
}

/* ── Info/Status Blocks ── */
.blockMessage {
    background-color: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.12);
    color: var(--rg-text-secondary);
    border-radius: var(--rg-radius-md);
}

.blockMessage--error {
    background-color: rgba(248, 113, 113, 0.06);
    border-color: rgba(248, 113, 113, 0.15);
    color: var(--rg-error);
}

.blockMessage--warning {
    background-color: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.15);
    color: var(--rg-warning);
}

.blockMessage--success {
    background-color: rgba(52, 211, 153, 0.06);
    border-color: rgba(52, 211, 153, 0.15);
    color: var(--rg-success);
}

.blockMessage a {
    color: var(--rg-cyan);
}

.blockMessage a:hover {
    color: #33ebff;
}


/* ============================================================================
   SECTION 22: CONVERSATION / DIRECT MESSAGE PAGES
   ============================================================================ */

/* ── Conversation List ── */
.structItem--conversation {
    transition: background-color var(--rg-transition-fast);
}

.structItem--conversation:hover {
    background-color: var(--rg-glass-bg-hover);
}

.structItem--conversation .structItem-minor {
    color: var(--rg-text-muted);
}

/* ── Conversation Message View ── */
.message--conversation {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
    margin-bottom: 12px;
}

.message--conversation .message-user {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ── Conversation Participants ── */
.block--conversationParticipants {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.block--conversationParticipants .block-header {
    color: var(--rg-purple);
}

/* ── Invitation Box ── */
.block--conversationInvite {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}


/* ============================================================================
   SECTION 23: NAVIGATION ELEMENTS (WITHIN CONTENT)
   ============================================================================ */

/* ── Sub-Navigation (Category/Forum Tabs) ── */
.p-navgroup {
    color: var(--rg-text-muted);
}

.p-navgroup-link {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast), background-color var(--rg-transition-fast);
}

.p-navgroup-link:hover {
    color: var(--rg-text-primary);
    background-color: var(--rg-glass-bg-hover);
}

.p-navgroup-link.is-selected {
    color: var(--rg-cyan);
}

/* ── Thread Navigation (Prev/Next) ── */
.block--threadNav {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
}

.block--threadNav a {
    color: var(--rg-text-secondary);
    transition: color var(--rg-transition-fast);
}

.block--threadNav a:hover {
    color: var(--rg-cyan);
}


/* ============================================================================
   SECTION 24: FORUM HOME SPECIFIC
   ============================================================================ */

/* ── Page Node Style ── */
.node--page .node-icon i {
    color: var(--rg-purple-dim);
}

/* ── Category Node ── */
.node--category {
    background-color: transparent;
}

/* ── Private Node (logged-out) ── */
.node--forum.node--locked .node-icon i {
    color: var(--rg-text-faint);
}

/* ── Redirect Node ── */
.node--link .node-icon i {
    color: var(--rg-info);
}


/* ============================================================================
   SECTION 25: THREAD VIEW PAGE EXTRAS
   ============================================================================ */

/* ── Thread Header Info ── */
.p-body-header {
    color: var(--rg-text-primary);
}

.p-body-header .p-title-value {
    color: #ffffff;
}

/* ── Thread Status Badges ── */
.u-labelBadge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--rg-radius-sm);
}

/* ── Post Number / Link ── */
.message-attribution-opposite a {
    color: var(--rg-text-faint);
    font-size: 0.78rem;
    transition: color var(--rg-transition-fast);
}

.message-attribution-opposite a:hover {
    color: var(--rg-cyan);
}

/* ── Edit History ── */
.message-historyTarget {
    background-color: rgba(0, 229, 255, 0.04);
    border-left: 3px solid var(--rg-cyan);
}

/* ── Bookmark Indicator ── */
.message--bookmarked {
    border-left: 3px solid var(--rg-purple);
}

/* ── Multi-Quote ── */
.message-multiQuote {
    color: var(--rg-text-muted);
    transition: color var(--rg-transition-fast);
}

.message-multiQuote.is-active {
    color: var(--rg-cyan);
}

/* ── Thread Watch ── */
.block--threadWatch {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
}

/* ── Similar Threads ── */
.block--similarThreads {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

.block--similarThreads .block-header {
    color: var(--rg-purple);
}

.block--similarThreads .contentRow-title a {
    color: var(--rg-text-primary);
}

.block--similarThreads .contentRow-title a:hover {
    color: var(--rg-cyan);
}


/* ============================================================================
   SECTION 26: REGISTERED FEEDS & NOTICES
   ============================================================================ */

/* ── RSS Feed Block ── */
.block--feed .contentRow {
    border-bottom: 1px solid var(--rg-border-subtle);
}

.block--feed .contentRow-title a {
    color: var(--rg-text-primary);
}

.block--feed .contentRow-title a:hover {
    color: var(--rg-cyan);
}

/* ── System Notices ── */
.p-notices .notice {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-md);
    color: var(--rg-text-secondary);
}

.p-notices .notice a {
    color: var(--rg-cyan);
}

.p-notices .notice a:hover {
    color: #33ebff;
}


/* ============================================================================
   SECTION 27: FIND NEW / WHAT'S NEW
   ============================================================================ */

/* ── What's New Tabs ── */
.block--whatsNew .tabs-tab {
    color: var(--rg-text-muted);
}

.block--whatsNew .tabs-tab.is-active {
    color: var(--rg-cyan);
    border-bottom-color: var(--rg-cyan);
}

/* ── New Content Rows ── */
.block--whatsNew .contentRow {
    border-bottom: 1px solid var(--rg-border-subtle);
}

.block--whatsNew .contentRow:hover {
    background-color: var(--rg-glass-bg-hover);
}


/* ============================================================================
   SECTION 28: USER GROUP STYLING & BANNERS
   ============================================================================ */

/* ── Staff Banner ── */
.userBanner--staff {
    background: var(--rg-gradient-purple);
    color: #ffffff;
}

/* ── Admin Banner ── */
.userBanner--admin {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #ffffff;
}

/* ── Moderator Banner ── */
.userBanner--moderator {
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #ffffff;
}

/* ── Premium / VIP Banner ── */
.userBanner--premium {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #0f1117;
}

/* ── Generic Styled User Banners ── */
.userBanner--green {
    background: linear-gradient(135deg, #34d399, #059669);
    color: #ffffff;
}

.userBanner--gray {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    color: var(--rg-text-secondary);
}


/* ============================================================================
   SECTION 29: LOADING STATES & ANIMATIONS
   ============================================================================ */

/* ── Spinner ── */
.spinner {
    color: var(--rg-cyan);
}

/* ── Loading Overlay ── */
.is-loading::after {
    background-color: rgba(15, 17, 23, 0.7);
}

/* ── Skeleton Loading (if applicable) ── */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%);
    border-radius: var(--rg-radius-sm);
}

/* ── Transition for interactive elements ── */
.button,
.pageNav-page a,
a,
.menu-row,
.contentRow,
.structItem,
.node,
.alert,
.alertRow,
.block-row {
    transition: background-color var(--rg-transition-fast), color var(--rg-transition-fast), border-color var(--rg-transition-fast), box-shadow var(--rg-transition-fast);
}


/* ============================================================================
   SECTION 30: XENFORO SPECIFIC UTILITY CLASSES
   ============================================================================ */

/* ── Pairs Columns ── */
.pairs--columns dt {
    color: var(--rg-text-muted);
}

.pairs--columns dd {
    color: var(--rg-text-primary);
}

/* ── Pairs Inline ── */
.pairs--inline dt {
    color: var(--rg-text-faint);
}

.pairs--inline dd {
    color: var(--rg-text-muted);
}

/* ── Pairs Justified ── */
.pairs--justified dt {
    color: var(--rg-text-muted);
}

.pairs--justified dd {
    color: var(--rg-text-primary);
}

/* ── List Plain ── */
.listPlain {
    color: var(--rg-text-secondary);
}

.listPlain a {
    color: var(--rg-text-secondary);
}

.listPlain a:hover {
    color: var(--rg-cyan);
}

/* ── List Inline ── */
.listInline {
    color: var(--rg-text-muted);
}

.listInline a {
    color: var(--rg-text-secondary);
}

.listInline a:hover {
    color: var(--rg-cyan);
}

/* ── Input Choices (token/tag style) ── */
.inputChoices-choice {
    background-color: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.15);
    color: var(--rg-cyan);
    border-radius: var(--rg-radius-sm);
}

/* ── Content Veto (Soft Delete) ── */
.message--deleted .message-inner {
    background-color: rgba(248, 113, 113, 0.03);
}

.message--deleted .message-attribution {
    color: var(--rg-error);
}

/* ── Featured Resource ── */
.featuredResource {
    background-color: var(--rg-glass-bg);
    border: 1px solid var(--rg-glass-border);
    border-radius: var(--rg-radius-lg);
}

/* ── Extra Footer ── */
.p-extraFooter {
    background-color: var(--rg-bg-deepest);
    color: var(--rg-text-faint);
    border-top: 1px solid var(--rg-border);
}



/* ============================================================================
   LAYOUT FIX — Custom Sidebar Compensation
   The custom 300px sidebar reduces available content width.
   XenForo default table cell widths (46 + 140 + 280 = 466px) exceed
   the available space, crushing .node-main to zero width.
   These overrides restore proper proportions.
   ============================================================================ */

/* Hide .node-stats on desktop — the same data shows in .node-statsMeta on narrow layouts */
.node-stats {
    display: none;
}

/* Reduce .node-extra width to fit within the narrower content area */
.node-extra {
    width: 220px;
}

/* Also fix .structItem cell widths for thread lists */
.structItem-cell--meta {
    width: 80px;
}

.structItem-cell--latest {
    width: 160px;
}

/* Ensure node-main gets adequate space */
.node-main {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================================================
   END OF THEME
   Total: Comprehensive dark glass theme for all XenForo 2.x pages.
   No !important used. No display/width/table-layout on table elements.
   No .rg-sidebar or .rg-header styles included.
   ============================================================================ */