/* ==========================================================================
   vForum Ultimate - Modern Responsive Theme Engine
   Author: ImOriqinaL
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ================= THEMES ================= */

/* ================= THEMES ENGINE (Vibrant Light & Pure Matte Minimalist Dark) ================= */

:root {
    --theme-color: #1e3a8a;
    --primary: var(--theme-color);
    --primary-hover: color-mix(in srgb, var(--theme-color) 85%, black);
    --primary-light: color-mix(in srgb, var(--theme-color) 15%, transparent);
    --primary-text: #ffffff;
    --theme-color-dark: color-mix(in srgb, var(--theme-color) 75%, black);
    --theme-color-light: color-mix(in srgb, var(--theme-color) 80%, white);
}

/* 1. DARK MODE (Pure Minimalist Charcoal / Matte Anthracite - Eye Resting) */
html.dark, html.theme-dark, :root {
    --bg-main: #0a0e17;
    --bg-surface: #111827;
    --bg-surface-hover: #172235;
    --bg-card: #111827;
    --bg-card-header: #151f30;
    --bg-input: #0c121d;
    --border-color: #1f2c42;
    --border-subtle: #172133;
    
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-dim: #94a3b8;
    
    --accent-red: #ef4444;
    --accent-green: #10b981;
    --accent-amber: #f59e0b;
    --accent-purple: #8b5cf6;

    --badge-admin-bg: linear-gradient(135deg, #ef4444, #f97316);
    --badge-mod-bg: linear-gradient(135deg, #10b981, #06b6d4);
    --badge-member-bg: #1e293b;

    /* Dark Mode: Pure calm matte charcoal/anthracite header and navbars */
    --top-strip-bg: #060910;
    --top-strip-border: #131d2e;
    --top-strip-text: #94a3b8;

    --logo-header-bg: linear-gradient(180deg, #090e18 0%, #0d1424 100%);
    --logo-header-border: #152033;

    --navbar-bg: #0d1424;
    --navbar-border: #172338;
    --navbar-pill-active-bg: var(--theme-color);
    --navbar-pill-active-text: #ffffff;

    --category-header-bg: #141e2e;
    --category-header-text: #ffffff;
    --category-header-border: #1b293e;
    --category-header-accent: var(--theme-color);

    --table-header-bg: #0e1524;
    --table-header-text: #94a3b8;
    --table-header-border: #172236;

    --forum-row-bg: #111827;
    --forum-row-hover: #162033;
    --forum-row-border: #172236;

    --post-header-bg: #141e2e;
    --post-header-text: #cbd5e1;
    --post-header-border: #1b293e;

    --thread-tools-bg: #141e2e;
    --thread-tools-text: #cbd5e1;
    --thread-tools-border: #1b293e;

    --footer-bg: #080c14;
    --footer-border: #141d2e;
    --footer-text: #64748b;
}

/* 2. LIGHT MODE (Fresh, Crisp & Vividly Powered by Chosen Theme Color) */
html.theme-light, html:not(.dark) {
    --bg-main: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-header: #f8fafc;
    --bg-input: #ffffff;
    --border-color: #cbd5e1;
    --border-subtle: #e2e8f0;
    
    --text-main: #0f172a;
    --text-muted: #334155;
    --text-dim: #475569;
    
    --badge-admin-bg: linear-gradient(135deg, #dc2626, #ea580c);
    --badge-mod-bg: linear-gradient(135deg, #059669, #0891b2);
    --badge-member-bg: #e2e8f0;

    /* Light Mode: Selected theme color radiates across header, nav, category headers, thread tools, post headers! */
    --top-strip-bg: color-mix(in srgb, var(--theme-color) 85%, black);
    --top-strip-border: rgba(255, 255, 255, 0.15);
    --top-strip-text: #e2e8f0;

    --logo-header-bg: linear-gradient(180deg, var(--theme-color) 0%, color-mix(in srgb, var(--theme-color) 85%, black) 100%);
    --logo-header-border: rgba(255, 255, 255, 0.18);

    --navbar-bg: color-mix(in srgb, var(--theme-color) 92%, black);
    --navbar-border: rgba(255, 255, 255, 0.2);
    --navbar-pill-active-bg: rgba(255, 255, 255, 0.25);
    --navbar-pill-active-text: #ffffff;

    --category-header-bg: var(--theme-color);
    --category-header-text: #ffffff;
    --category-header-border: color-mix(in srgb, var(--theme-color) 85%, black);
    --category-header-accent: #ffffff;

    --table-header-bg: #e2e8f0;
    --table-header-text: #475569;
    --table-header-border: #cbd5e1;

    --forum-row-bg: #ffffff;
    --forum-row-hover: #f8fafc;
    --forum-row-border: #e2e8f0;

    --post-header-bg: var(--theme-color);
    --post-header-text: #ffffff;
    --post-header-border: color-mix(in srgb, var(--theme-color) 85%, black);

    --thread-tools-bg: var(--theme-color);
    --thread-tools-text: #ffffff;
    --thread-tools-border: color-mix(in srgb, var(--theme-color) 85%, black);

    --footer-bg: #e2e8f0;
    --footer-border: #cbd5e1;
    --footer-text: #475569;
}

/* 3. CLASSIC vBULLETIN NOSTALGIC BLUE */
.theme-classic-vb {
    --bg-main: #dbe4ee;
    --bg-surface: #f5f8fc;
    --bg-surface-hover: #e5edf7;
    --bg-card: #ffffff;
    --bg-card-header: linear-gradient(180deg, #376597 0%, #2b517d 100%);
    --bg-input: #ffffff;
    --border-color: #a4bad1;
    --border-subtle: #c7d6e5;
    
    --text-main: #1e334a;
    --text-muted: #4e637a;
    --text-dim: #798da2;
    
    --primary: #295483;
    --primary-hover: #1d3e63;
    --primary-light: rgba(41, 84, 131, 0.15);
    --primary-text: #ffffff;
    
    --badge-admin-bg: linear-gradient(135deg, #991b1b, #c2410c);
    --badge-mod-bg: linear-gradient(135deg, #065f46, #0e7490);
    --badge-member-bg: #c7d6e5;

    --top-strip-bg: #1d3e63;
    --top-strip-border: #142e4c;
    --top-strip-text: #dbe4ee;

    --logo-header-bg: linear-gradient(180deg, #295483 0%, #1e3e63 100%);
    --logo-header-border: #142e4c;

    --navbar-bg: #1e3e63;
    --navbar-border: #142e4c;
    --navbar-pill-active-bg: #3b74b3;
    --navbar-pill-active-text: #ffffff;

    --category-header-bg: linear-gradient(180deg, #376597 0%, #2b517d 100%);
    --category-header-text: #ffffff;
    --category-header-border: #1d3e63;

    --table-header-bg: #dbe4ee;
    --table-header-text: #1e334a;
    --table-header-border: #a4bad1;

    --forum-row-bg: #ffffff;
    --forum-row-hover: #f5f8fc;
    --forum-row-border: #c7d6e5;

    --post-header-bg: linear-gradient(180deg, #376597 0%, #2b517d 100%);
    --post-header-text: #ffffff;
    --post-header-border: #1d3e63;

    --thread-tools-bg: #295483;
    --thread-tools-text: #ffffff;
    --thread-tools-border: #1d3e63;

    --footer-bg: #dbe4ee;
    --footer-border: #a4bad1;
    --footer-text: #1e334a;
}

/* 4. DYNAMIC COLOR ACCENT PALETTES */
[data-accent="emerald"] {
    --primary: #10b981;
    --primary-hover: #059669;
    --primary-light: rgba(16, 185, 129, 0.15);
    --primary-text: #ffffff;
}
[data-accent="violet"] {
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-light: rgba(139, 92, 246, 0.15);
    --primary-text: #ffffff;
}
[data-accent="amber"] {
    --primary: #f59e0b;
    --primary-hover: #d97706;
    --primary-light: rgba(245, 158, 11, 0.15);
    --primary-text: #ffffff;
}
[data-accent="rose"] {
    --primary: #f43f5e;
    --primary-hover: #e11d48;
    --primary-light: rgba(244, 63, 94, 0.15);
    --primary-text: #ffffff;
}
[data-accent="cyan"] {
    --primary: #06b6d4;
    --primary-hover: #0891b2;
    --primary-light: rgba(6, 182, 212, 0.15);
    --primary-text: #ffffff;
}

/* ================= BASE RESETS ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary);
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Common Theme Utility Classes */
.bg-main { background-color: var(--bg-main) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.text-main { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dim { color: var(--text-dim) !important; }
.border-main { border-color: var(--border-color) !important; }
.border-subtle { border-color: var(--border-subtle) !important; }

.container,
.site-boxed-wrapper {
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

/* ================= TOP PJAX LOADING BAR ================= */
#pjax-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    width: 0%;
    z-index: 99999;
    transition: width 0.2s ease, opacity 0.3s ease;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}

/* ================= NAVBAR & HEADER ================= */
.navbar {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 16px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.brand-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.nav-link:hover, .nav-link.active {
    color: var(--text-main);
    background-color: var(--bg-surface-hover);
}

.nav-search {
    position: relative;
    width: 240px;
}

.nav-search input {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 7px 14px 7px 34px;
    color: var(--text-main);
    font-size: 0.85rem;
    outline: none;
    transition: all var(--transition-fast);
}

.nav-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    width: 280px;
}

.nav-search .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
}

.search-result-item {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.875rem;
}

.search-result-item:hover {
    background-color: var(--bg-surface-hover);
}

.search-result-meta {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* User Actions & Selectors */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    color: var(--text-main);
    border-color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-text);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.btn-primary:hover {
    background: var(--primary-hover);
    color: #fff;
}

.btn-secondary {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--primary);
}

/* User Avatar Thumbnail */
.user-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

/* ================= MAIN LAYOUT ================= */
.main-wrapper {
    flex: 1;
    padding: 24px 0 48px;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

/* ================= BREADCRUMB ================= */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.breadcrumb-sep {
    color: var(--text-dim);
}

/* ================= CATEGORY & FORUM BLOCKS ================= */
.category-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.category-header {
    background: var(--bg-card-header);
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.01em;
}

.category-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.forum-list {
    list-style: none;
}

.forum-row {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
    transition: background-color var(--transition-fast);
}

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

.forum-row:hover {
    background-color: var(--bg-surface-hover);
}

.forum-icon-box {
    width: 44px;
    height: 44px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.forum-main {
    flex: 1;
    min-width: 0;
}

.forum-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 4px;
}

.forum-description {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.forum-counters {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 110px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.counter-value {
    font-weight: 700;
    color: var(--text-main);
}

.forum-last-post {
    width: 250px;
    flex-shrink: 0;
    font-size: 0.825rem;
    padding-left: 16px;
    border-left: 1px solid var(--border-subtle);
}

.last-post-title {
    font-weight: 600;
    color: var(--text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.last-post-meta {
    color: var(--text-dim);
    font-size: 0.775rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ================= THREADS LIST TABLE ================= */
.threads-table {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.thread-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
    transition: background-color var(--transition-fast);
}

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

.thread-row:hover {
    background-color: var(--bg-surface-hover);
}

.thread-row.is-sticky {
    background-color: rgba(59, 130, 246, 0.04);
}

.thread-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.badge-sticky {
    background-color: var(--accent-amber);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.thread-meta {
    font-size: 0.8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================= POST ITEM (vBulletin / XenForo Style) ================= */
.thread-view-header {
    margin-bottom: 20px;
}

.thread-heading {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.posts-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    scroll-margin-top: 90px;
    transition: outline 0.3s ease, box-shadow 0.3s ease;
}

.target-anchor {
    scroll-margin-top: 90px;
    height: 1px;
    visibility: hidden;
}

@keyframes targetPostPulse {
    0% {
        outline: 3px solid #3b82f6;
        box-shadow: 0 0 22px rgba(59, 130, 246, 0.45);
        background-color: rgba(59, 130, 246, 0.08);
    }
    60% {
        outline: 3px solid rgba(59, 130, 246, 0.4);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
    }
    100% {
        outline: 3px solid transparent;
        box-shadow: none;
        background-color: transparent;
    }
}

.target-post-highlight {
    animation: targetPostPulse 2.5s ease-out forwards;
}

.post-header {
    background: var(--bg-card-header);
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.post-body-layout {
    display: flex;
}

/* Author Sidebar (Desktop Sticky) */
.post-author-box {
    width: 224px;
    padding: 14px;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    position: sticky;
    top: 75px;
    align-self: flex-start;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.post-author-box::-webkit-scrollbar {
    width: 3px;
}
.post-author-box::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 4px;
}

/* Mobile Postbit Slider */
.post-mobile-card {
    transition: all 0.2s ease;
}
.mobile-postbit-slide {
    animation: fadeInSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    box-shadow: var(--shadow-md);
}

.author-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.author-badge {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 9999px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.author-badge.admin {
    background: var(--badge-admin-bg);
}

.author-badge.moderator {
    background: var(--badge-mod-bg);
}

.author-badge.member {
    background: var(--badge-member-bg);
    color: var(--text-muted);
}

.author-stats {
    width: 100%;
    font-size: 0.775rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.author-stat-item {
    display: flex;
    justify-content: space-between;
}

.author-stat-value {
    font-weight: 700;
    color: var(--text-main);
}

/* Post Content */
.post-content-wrap {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.post-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-main);
    word-break: break-word;
    margin-bottom: 20px;
}

.post-signature {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Reactions Bar & Action Buttons */
.post-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 12px;
}

.reactions-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-react {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-react:hover {
    border-color: var(--primary);
    color: var(--text-main);
    transform: translateY(-1px);
}

.btn-react.active {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}

.post-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-post-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.btn-post-action:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
}

/* ================= BBCODE STYLES ================= */
.bbcode-quote {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 10px 0;
}

.bbcode-quote .bbcode-quote {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid #6366f1;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0 10px 0;
    box-shadow: var(--shadow-sm);
}

.quote-author {
    font-weight: 700;
    font-style: normal;
    color: var(--primary);
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.bbcode-quote .bbcode-quote .quote-author {
    color: #6366f1;
    font-size: 0.78rem;
}

.bbcode-code-box {
    background: #090d16;
    color: #e2e8f0;
    border-radius: var(--radius-sm);
    margin: 12px 0;
    overflow: hidden;
    border: 1px solid #1e293b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

.code-header {
    background: #111827;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}

.bbcode-code {
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.825rem;
    line-height: 1.65;
    background: #090d16 !important;
}

.bbcode-code code {
    color: #e2e8f0;
    font-family: inherit;
    text-shadow: none;
}

/* ================= ULTRA-RICH SYNTAX HIGHLIGHTING (Prism + mIRC) ================= */
.bbcode-code .token.comment,
.bbcode-code .token.prolog,
.bbcode-code .token.doctype,
.bbcode-code .token.cdata {
    color: #64748b !important; /* Muted Slate */
    font-style: italic;
}

.bbcode-code .token.punctuation {
    color: #94a3b8 !important; /* Brackets & separators */
}

.bbcode-code .token.property,
.bbcode-code .token.tag,
.bbcode-code .token.constant,
.bbcode-code .token.symbol,
.bbcode-code .token.deleted {
    color: #f43f5e !important; /* Vibrant Rose Red */
}

.bbcode-code .token.boolean,
.bbcode-code .token.number {
    color: #fb923c !important; /* Vibrant Orange */
    font-weight: 600;
}

.bbcode-code .token.selector,
.bbcode-code .token.attr-name,
.bbcode-code .token.string,
.bbcode-code .token.char,
.bbcode-code .token.builtin,
.bbcode-code .token.inserted {
    color: #34d399 !important; /* Vibrant Emerald Green */
}

.bbcode-code .token.operator,
.bbcode-code .token.entity,
.bbcode-code .token.url {
    color: #38bdf8 !important; /* Vibrant Sky Blue */
}

.bbcode-code .token.atrule,
.bbcode-code .token.attr-value,
.bbcode-code .token.keyword {
    color: #c084fc !important; /* Vibrant Purple/Violet */
    font-weight: 700;
}

.bbcode-code .token.function,
.bbcode-code .token.class-name {
    color: #60a5fa !important; /* Vibrant Blue/Indigo */
    font-weight: 600;
}

.bbcode-code .token.regex,
.bbcode-code .token.important,
.bbcode-code .token.variable {
    color: #f472b6 !important; /* Vibrant Pink / Magenta */
    font-weight: 600;
}

/* mIRC Specific Token Styles */
.bbcode-code code.language-mirc .token.variable {
    color: #f43f5e !important; /* %variables in rose red */
    font-weight: 600;
}

.bbcode-code code.language-mirc .token.function {
    color: #38bdf8 !important; /* $identifiers in sky cyan */
    font-weight: 600;
}

.bbcode-code code.language-mirc .token.important {
    color: #fbbf24 !important; /* on *:TEXT: events in gold */
    font-weight: 700;
}

.bbcode-code code.language-mirc .token.keyword {
    color: #c084fc !important; /* alias, if, else, echo in purple */
    font-weight: 700;
}

.bbcode-link {
    color: var(--primary);
    text-decoration: underline;
}

/* ================= BBCODE LISTS, ALIGNMENT & EXTRA ELEMENTS ================= */
.bbcode-list {
    margin: 14px 0 14px 24px !important;
    padding-left: 8px !important;
    color: var(--text-main) !important;
}

ul.bbcode-list,
.bbcode-list-unordered {
    list-style-type: disc !important;
}

ol.bbcode-list,
.bbcode-list-ordered {
    list-style-type: decimal !important;
}

.bbcode-list li {
    display: list-item !important;
    margin: 5px 0 !important;
    line-height: 1.65;
    color: var(--text-main) !important;
}

.bbcode-list li::marker {
    color: var(--primary, #3b82f6);
}

/* Light Mode & Classic vB contrast fixes for custom BBCode boxes inside post content */
html:not(.dark) .post-content .text-slate-200,
html:not(.dark) .post-content .text-slate-300 {
    color: var(--text-main) !important;
}
html:not(.dark) .post-content .text-emerald-300 {
    color: #065f46 !important;
}
html:not(.dark) .post-content .text-red-300 {
    color: #991b1b !important;
}
html:not(.dark) .post-content .text-amber-300 {
    color: #92400e !important;
}
html:not(.dark) .post-content .text-blue-300 {
    color: #1e40af !important;
}
html:not(.dark) .post-content .text-yellow-200 {
    color: #713f12 !important;
}

.bbcode-list .bbcode-list {
    margin: 4px 0 4px 18px !important;
}

.bbcode-align {
    margin: 10px 0;
    line-height: 1.65;
}
.bbcode-align.text-center {
    text-align: center !important;
}
.bbcode-align.text-left {
    text-align: left !important;
}
.bbcode-align.text-right {
    text-align: right !important;
}
.bbcode-align.text-justify {
    text-align: justify !important;
}

.bbcode-hr {
    border: 0;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
    margin: 20px 0;
}

.bbcode-spoiler {
    border: 1px solid var(--border-color, #334155);
    border-radius: var(--radius-sm, 10px);
    background: var(--bg-surface, rgba(30, 41, 59, 0.4));
    margin: 14px 0;
    overflow: hidden;
}
.bbcode-spoiler summary {
    padding: 10px 16px;
    background: var(--bg-card, rgba(15, 23, 42, 0.6));
    cursor: pointer;
    font-weight: 600;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--transition-fast, 0.15s ease);
}
.bbcode-spoiler summary:hover {
    background: var(--bg-surface-hover, rgba(51, 65, 85, 0.5));
}
.bbcode-spoiler[open] summary {
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
}

.bbcode-table-wrap {
    margin: 14px 0;
    overflow-x: auto;
}
.bbcode-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    border: 1px solid var(--border-color, #334155);
    border-radius: 8px;
    overflow: hidden;
}
.bbcode-table th {
    background: var(--bg-surface-hover, #1e293b);
    color: var(--text-main, #e2e8f0);
    font-weight: 700;
    padding: 8px 14px;
    border: 1px solid var(--border-color, #334155);
}
.bbcode-table td {
    padding: 8px 14px;
    border: 1px solid var(--border-color, #334155);
    color: var(--text-muted, #94a3b8);
}
.bbcode-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ================= QUICK REPLY BOX ================= */
.quick-reply-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.quick-reply-header {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    color: var(--text-main);
    outline: none;
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* ================= SOCIAL FEED ================= */
.social-composer {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.status-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.status-content {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.status-comments {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-item {
    background: var(--bg-surface-hover);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

/* ================= MODAL DIALOGS ================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.share-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.share-btn.x { background: #000; }
.share-btn.whatsapp { background: #25D366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.facebook { background: #1877f2; }

/* ================= SIDEBAR WIDGETS ================= */
.widget {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.widget-header {
    background: var(--bg-card-header);
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-body {
    padding: 16px;
}

.online-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.online-badge {
    background: var(--bg-surface-hover);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ================= TOAST NOTIFICATION ================= */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    color: var(--text-main);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlide 0.3s ease;
}

@keyframes toastSlide {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ================= RESPONSIVE DESIGN ================= */
@media (max-width: 960px) {
    .grid-layout {
        grid-template-columns: 1fr;
    }
    .forum-counters, .forum-last-post {
        display: none;
    }
    .post-body-layout {
        flex-direction: column;
    }
    .post-author-box {
        display: none !important;
    }
    .post-mobile-card {
        display: block !important;
    }
}

/* ==========================================================================
   vBulletin 3.8.11 / Convex & IFNet Specific Design Enhancements
   ========================================================================== */

/* 1. Top Announcement Header Bar */
/* 1. Top Announcement Header Bar */
.top-header-strip {
    background: var(--top-strip-bg) !important;
    border-bottom: 1px solid var(--top-strip-border) !important;
    font-size: 0.775rem;
    padding: 6px 0;
    color: var(--top-strip-text);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.announcement-badge {
    background: var(--theme-color, #dc2626) !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 2. Main Logo & Sponsor Area */
.logo-header-area {
    background: var(--logo-header-bg) !important;
    padding: 22px 0;
    border-bottom: 1px solid var(--logo-header-border);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.site-main-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-shield {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.logo-title {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #ffffff;
    line-height: 1.1;
}

.logo-subtitle {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 3. Dark Navy Pill Navbar */
.nav-pill-bar {
    background: var(--navbar-bg) !important;
    border-bottom: 2px solid var(--navbar-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    overflow: visible !important;
    z-index: 100 !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pill-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.pill-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.pill-item.active {
    background: var(--navbar-pill-active-bg) !important;
    color: var(--navbar-pill-active-text) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Theme Swatches Active Indicator */
.theme-swatch-btn {
    outline: none;
    position: relative;
    cursor: pointer;
}
.theme-swatch-btn.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--theme-color) !important;
}
.theme-swatch-btn.active::after {
    content: '✓';
    color: #ffffff;
    font-weight: 900;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Thread Tools Bar (Screenshot 2) */
.thread-tools-bar {
    background: var(--thread-tools-bg) !important;
    color: var(--thread-tools-text) !important;
    border: 1px solid var(--thread-tools-border);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 40;
    transition: background 0.2s ease;
}

.thread-tools-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    user-select: none;
}
.thread-tools-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.thread-tools-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 290px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    z-index: 99999;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
}

.thread-tools-dropdown-header {
    background: var(--theme-color);
    color: #ffffff;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.thread-tools-section-title {
    background: var(--bg-surface-hover);
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.thread-tools-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.thread-tools-item:hover {
    background: var(--primary-light);
    color: var(--theme-color);
}

.post-header-bar {
    background: var(--post-header-bg) !important;
    color: var(--post-header-text) !important;
    border-bottom: 1px solid var(--post-header-border);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.2s ease;
}

/* Master Category Header & Table Rows */
.category-main-header {
    background: var(--category-header-bg);
    color: var(--category-header-text);
    border: 1px solid var(--category-header-border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

html.dark .category-main-header, html.theme-dark .category-main-header {
    border-left: 4px solid var(--theme-color) !important;
}

.category-chevron {
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    cursor: pointer;
}
.category-chevron:hover {
    color: #ffffff;
}

.table-columns-header {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    border: 1px solid var(--table-header-border);
}

.forum-table-row {
    background: var(--forum-row-bg);
    border-bottom: 1px solid var(--forum-row-border);
    transition: background-color var(--transition-fast);
}
.forum-table-row:hover {
    background: var(--forum-row-hover);
}

.forum-title-link {
    color: var(--text-main);
    transition: color var(--transition-fast);
}
.forum-title-link:hover {
    color: var(--theme-color) !important;
    text-decoration: underline;
}

.forum-bubble-icon {
    background: var(--primary-light);
    color: var(--theme-color);
}

.sponsor-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: all var(--transition-fast);
}
.sponsor-card:hover {
    border-color: var(--theme-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.site-main-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text);
}

/* Footer Dynamic Partner & Ad Links (Adapts instantly to --theme-color) */
.footer-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.footer-link-chip:hover {
    color: var(--primary-text, #ffffff);
    background: var(--theme-color);
    border-color: var(--theme-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-color) 35%, transparent);
}
.footer-link-chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--theme-color);
    transition: background 0.2s ease;
}
.footer-link-chip:hover .chip-dot {
    background: #ffffff;
}

.footer-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
}
.footer-switcher-btn:hover, .footer-switcher-btn.active {
    color: var(--theme-color);
    border-color: var(--theme-color);
    background: var(--primary-light);
}

/* 4. IFtagram (Instagram Stories Bar) */
.iftagram-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.iftagram-label {
    font-weight: 900;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #f43f5e, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.story-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.story-circle-item:hover {
    transform: scale(1.05);
}

.story-ring {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.story-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1e293b;
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
}

.story-badge-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
}

.story-author-label {
    font-size: 0.725rem;
    font-weight: 600;
    color: var(--text-main);
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-add-story {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-add-story:hover {
    background: var(--primary-hover);
    transform: rotate(90deg) scale(1.08);
}

/* 5. IFter (Quote Ticker Bar) */
.ifter-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
}

.btn-ifter-pill {
    background: var(--theme-color);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-ifter-pill:hover {
    background: var(--primary-hover);
}

/* 6. Full-screen Instagram Reels / Story Viewer */
.story-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}

.story-phone-card {
    width: 100%;
    max-width: 420px;
    height: 90vh;
    max-height: 720px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.story-progress-wrapper {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 20;
}

.story-bar-segment {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 9999px;
    overflow: hidden;
}

.story-bar-fill {
    height: 100%;
    width: 0%;
    background: #ffffff;
}

.story-viewer-header {
    position: absolute;
    top: 24px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    z-index: 20;
}

.story-center-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    color: #ffffff;
    text-align: center;
    position: relative;
}

.story-center-content {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.story-viewer-footer {
    padding: 16px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    z-index: 20;
}

/* 7. Tabbed Recent Topics Bar (Convex / IFNet Style) */
.tabbed-topics-header {
    background: var(--table-header-bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--theme-color);
    overflow-x: auto;
    scrollbar-width: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.recent-tab-item {
    padding: 12px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-right: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.recent-tab-item:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
}

.recent-tab-item.active {
    background: var(--theme-color) !important;
    color: #ffffff !important;
}

/* 8. Forum Row & Sub-forum specifics */
.active-viewers-badge {
    color: #f97316;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 6px;
}

.subforum-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    margin-right: 8px;
}

.subforum-chip:hover {
    text-decoration: underline;
}

/* 9. Mobile Bottom Navigation Bar (Image 5) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    display: none;
    align-items: center;
    justify-content: space-around;
    z-index: 9999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    flex: 1;
    text-align: center;
}

.mobile-nav-item.active, .mobile-nav-item:hover {
    color: var(--primary);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    body {
        padding-bottom: 60px;
    }
}

/* Mention Tag in Posts */
.mention-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa !important;
    font-weight: 700;
    transition: all 0.15s ease-in-out;
    text-decoration: none !important;
}

.mention-tag:hover {
    background-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd !important;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
}

/* ================= ULTRA PROFESSIONAL BBCODE EDITOR ================= */
.vforum-editor-wrapper {
    position: relative;
    z-index: 15;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-surface);
    overflow: visible !important;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast);
}

.vforum-editor-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.vforum-editor-toolbar {
    position: relative;
    z-index: 20;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    border-radius: 13px 13px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

.vforum-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    position: relative;
    overflow: visible !important;
}

.vforum-toolbar-row + .vforum-toolbar-row {
    border-top: 1px dashed var(--border-subtle);
    background-color: color-mix(in srgb, var(--bg-surface) 55%, var(--bg-card));
}

.vforum-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

.vforum-editor-select {
    height: 28px;
    padding: 2px 8px;
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--text-main);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.vforum-editor-select:hover {
    border-color: var(--border-hover);
}

.vforum-editor-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.825rem;
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.vforum-editor-btn:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

.vforum-editor-divider {
    width: 1px;
    height: 18px;
    background-color: var(--border-color);
    margin: 0 4px;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vforum-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.28), 0 8px 12px -6px rgba(0, 0, 0, 0.18);
    z-index: 40;
    animation: dropdownFadeIn 0.15s ease-out;
}

.vforum-popover-header {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vforum-popover-btn {
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--text-main) !important;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.vforum-popover-btn:hover {
    background-color: var(--bg-surface-hover);
    color: var(--theme-color, #3b82f6) !important;
}

.vforum-popover-badge {
    font-size: 9px;
    color: var(--text-muted);
    background-color: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.vforum-popover-tag {
    font-size: 10px;
    font-family: monospace;
    color: var(--theme-color, #10b981);
    background-color: color-mix(in srgb, var(--theme-color, #10b981) 12%, transparent);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.vforum-popover::-webkit-scrollbar {
    width: 5px;
}

.vforum-popover::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.vforum-popover::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.vforum-editor-textarea {
    width: 100%;
    min-height: 160px;
    padding: 12px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-surface);
    border: none;
    outline: none;
    resize: vertical;
    display: block;
    position: relative;
    z-index: 10;
}

.vforum-editor-textarea::placeholder {
    color: var(--text-dim);
    opacity: 0.8;
}

.vforum-editor-footer {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 7px 7px;
    font-size: 0.75rem;
}

.vforum-editor-tag {
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

/* ================= HOME TOPIC TABS (Image 3) ================= */
.home-topic-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
}

.home-topic-tab:hover {
    color: var(--text-main);
    background: var(--bg-surface-hover);
}

.home-topic-tab.active {
    color: var(--theme-color, #3b82f6);
    background: var(--bg-card);
    border-bottom-color: var(--theme-color, #3b82f6);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}

.dark .home-topic-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
    background: var(--bg-card);
}

/* ================= SMILIES & ANIMATED STICKERS ================= */
.vforum-smiley {
    display: inline-block;
    width: 22px;
    height: 22px;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    vertical-align: -4px;
    margin: 0 2px;
}

.vforum-sticker {
    display: inline-block;
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 8px;
    margin: 4px 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vforum-sticker:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   15 CUSTOM GRANITE & GEMSTONE STYLES (User Groups & Postbit Badges)
   ========================================================================== */

@keyframes graniteShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes graniteGlowPulse {
    0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)); }
    50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); }
}

.group-ribbons-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
}

.group-ribbon-img {
    max-width: 100%;
    height: auto;
    max-height: 38px;
    object-fit: contain;
    border-radius: 4px;
    margin: 0 auto;
    display: block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.group-ribbon-img:hover {
    transform: scale(1.03);
}

.group-ribbon-strip {
    position: relative;
    display: block;
    width: 100%;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-size: 200% 200%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.25s ease;
    overflow: hidden;
}

.group-ribbon-strip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 1. Granite Obsidian */
.granite-obsidian {
    background: linear-gradient(135deg, #090a0f 0%, #1e2029 35%, #2c2d3a 50%, #12131a 70%, #000000 100%) !important;
    border-color: #4b4e6d !important;
    color: #e2e8f0 !important;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.5) !important;
}
.granite-obsidian-text {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 35%, #94a3b8 50%, #e2e8f0 75%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)) !important;
}

/* 2. Granite Emerald */
.granite-emerald {
    background: linear-gradient(135deg, #064e3b 0%, #059669 40%, #10b981 60%, #047857 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.granite-emerald-text {
    background: linear-gradient(135deg, #6ee7b7 0%, #10b981 40%, #34d399 70%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5)) !important;
}

/* 3. Granite Ruby */
.granite-ruby {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 40%, #f43f5e 65%, #991b1b 100%) !important;
    border-color: #fb7185 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.granite-ruby-text {
    background: linear-gradient(135deg, #fda4af 0%, #f43f5e 35%, #e11d48 70%, #be123c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 4px rgba(225, 29, 72, 0.5)) !important;
}

/* 4. Granite Sapphire */
.granite-sapphire {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 40%, #38bdf8 65%, #1d4ed8 100%) !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.granite-sapphire-text {
    background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 40%, #60a5fa 70%, #1d4ed8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5)) !important;
}

/* 5. Granite Amethyst */
.granite-amethyst {
    background: linear-gradient(135deg, #581c87 0%, #7e22ce 40%, #c084fc 65%, #6b21a8 100%) !important;
    border-color: #d8b4fe !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.granite-amethyst-text {
    background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 40%, #a855f7 70%, #7e22ce 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.5)) !important;
}

/* 6. Granite Gold */
.granite-gold {
    background: linear-gradient(135deg, #78350f 0%, #d97706 30%, #fde047 50%, #b45309 75%, #ca8a04 100%) !important;
    border-color: #fde047 !important;
    color: #1c1917 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.granite-gold-text {
    background: linear-gradient(135deg, #fef08a 0%, #eab308 30%, #facc15 50%, #ca8a04 75%, #a16207 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 3px rgba(202, 138, 4, 0.6)) !important;
}

/* 7. Granite Rose Gold */
.granite-rosegold {
    background: linear-gradient(135deg, #881337 0%, #be123c 35%, #fecdd3 55%, #fb7185 75%, #9f1239 100%) !important;
    border-color: #fda4af !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35) !important;
}
.granite-rosegold-text {
    background: linear-gradient(135deg, #ffe4e6 0%, #fb7185 40%, #f43f5e 70%, #be123c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 3px rgba(244, 63, 94, 0.5)) !important;
}

/* 8. Granite Aquamarine */
.granite-aquamarine {
    background: linear-gradient(135deg, #164e63 0%, #0891b2 40%, #67e8f9 65%, #0e7490 100%) !important;
    border-color: #a5f3fc !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35) !important;
}
.granite-aquamarine-text {
    background: linear-gradient(135deg, #cffafe 0%, #22d3ee 40%, #06b6d4 70%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.5)) !important;
}

/* 9. Granite Onyx */
.granite-onyx {
    background: linear-gradient(135deg, #18181b 0%, #3f3f46 45%, #71717a 55%, #27272a 75%, #09090b 100%) !important;
    border-color: #a1a1aa !important;
    color: #f4f4f5 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}
.granite-onyx-text {
    background: linear-gradient(135deg, #f4f4f5 0%, #a1a1aa 45%, #e4e4e7 65%, #71717a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 3px rgba(113, 113, 122, 0.6)) !important;
}

/* 10. Granite Amber */
.granite-amber {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 35%, #fb923c 55%, #ea580c 75%, #9a3412 100%) !important;
    border-color: #fed7aa !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.35) !important;
}
.granite-amber-text {
    background: linear-gradient(135deg, #ffedd5 0%, #fb923c 40%, #f97316 70%, #c2410c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.5)) !important;
}

/* 11. Granite Pearl */
.granite-pearl {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 30%, #fdf4ff 50%, #e0e7ff 70%, #ffffff 100%) !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.granite-pearl-text {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 35%, #fbcfe8 55%, #c7d2fe 75%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)) !important;
}

/* 12. Granite Titanium */
.granite-titanium {
    background: linear-gradient(135deg, #0284c7 0%, #6366f1 35%, #ec4899 65%, #f59e0b 100%) !important;
    border-color: #e0e7ff !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4) !important;
    animation: graniteShimmer 4s ease infinite !important;
}
.granite-titanium-text {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 35%, #f472b6 65%, #fbbf24 100%) !important;
    background-size: 200% 200% !important;
    animation: graniteShimmer 4s ease infinite !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
}

/* 13. Granite Magma */
.granite-magma {
    background: linear-gradient(135deg, #450a0a 0%, #b91c1c 35%, #f97316 60%, #eab308 85%, #7f1d1d 100%) !important;
    border-color: #fdba74 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.45) !important;
    animation: graniteGlowPulse 2.5s ease-in-out infinite !important;
}
.granite-magma-text {
    background: linear-gradient(135deg, #fef08a 0%, #f97316 40%, #ef4444 70%, #991b1b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.7)) !important;
}

/* 14. Granite Lapis */
.granite-lapis {
    background: linear-gradient(135deg, #172554 0%, #1d4ed8 40%, #eab308 55%, #1e40af 80%, #0f172a 100%) !important;
    border-color: #fde047 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(29, 78, 216, 0.4) !important;
}
.granite-lapis-text {
    background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 40%, #fde047 60%, #1d4ed8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6)) !important;
}

/* 15. Granite Diamond */
.granite-diamond {
    background: linear-gradient(135deg, #ffffff 0%, #bae6fd 25%, #e0e7ff 50%, #fce7f3 75%, #ffffff 100%) !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 2px 14px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    animation: graniteShimmer 3s ease infinite !important;
    font-weight: 900 !important;
}
.granite-diamond-text {
    background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 25%, #c084fc 50%, #f472b6 75%, #ffffff 100%) !important;
    background-size: 200% 200% !important;
    animation: graniteShimmer 3s ease infinite !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) !important;
}

/* ==========================================================================
   WCAG AA ACCESSIBILITY & LIGHTHOUSE OPTIMIZATIONS
   ========================================================================== */

/* 1. Touch Targets & Minimum Dimensions (>= 48px or sufficient padding) */
.mobile-nav-item {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 6px 4px !important;
    justify-content: center !important;
}

.theme-swatch-btn {
    min-width: 38px !important;
    min-height: 38px !important;
}

/* Modal close buttons and small utility buttons */
[data-close-modal="true"], 
.modal-dialog .btn-icon,
.close-modal-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Pagination touch target sizing */
.pagination a, .pagination span {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Color Contrast Boost (WCAG AA 4.5:1 ratio compliance) */
.theme-light, [data-theme="light"] {
    --text-muted: #334155;
    --text-dim: #475569;
}

.theme-light .text-slate-400,
[data-theme="light"] .text-slate-400 {
    color: #475569 !important;
}

.theme-light .text-slate-500,
[data-theme="light"] .text-slate-500 {
    color: #334155 !important;
}

.theme-dark, [data-theme="dark"] {
    --text-dim: #94a3b8;
}

.theme-dark .text-slate-500,
[data-theme="dark"] .text-slate-500 {
    color: #94a3b8 !important;
}