/**
 * NEMA Confluence Search - Main Application Stylesheet
 * Location: /scripts/index.css
 */

/* ==========================================================================
   1. LOGIN REQUIRED GATE STYLES (SCOPED)
   ========================================================================== */
body.login-gate {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
}
.login-gate .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    text-align: center;
}
.login-gate .logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 20px;
}
.login-gate h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 26px;
    margin: 0 0 10px 0;
}
.login-gate p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}
.login-gate .btn {
    display: inline-block;
    background: var(--accent-color);
    color: #ffffff;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.15s ease;
}
.login-gate .btn:hover { 
    background: var(--accent-hover); 
}
.login-gate .btn-login-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

[data-theme="high-contrast"] body.login-gate {
    background-color: #030712 !important;
    background-image: none !important;
    color: #ffffff !important;
}
[data-theme="high-contrast"] .login-gate .card {
    background-color: #0f172a !important;
    border: 1.5px solid #475569 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    border-radius: 12px !important;
}
[data-theme="high-contrast"] .login-gate .btn,
[data-theme="high-contrast"] .login-gate .btn-login {
    background-color: #facc15 !important;
    color: #030712 !important;
    border: 1.5px solid #facc15 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}
[data-theme="high-contrast"] .login-gate .btn svg path,
[data-theme="high-contrast"] .login-gate .btn-login svg path {
    fill: #030712 !important;
}
[data-theme="high-contrast"] .login-gate .btn:hover,
[data-theme="high-contrast"] .login-gate .btn-login:hover {
    background-color: #fde047 !important;
    color: #030712 !important;
    border-color: #fde047 !important;
}
[data-theme="high-contrast"] .login-gate .btn:hover svg path,
[data-theme="high-contrast"] .login-gate .btn-login:hover svg path {
    fill: #030712 !important;
}

.classic-transition-banner {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 16px;
    margin-bottom: 24px;
}
.classic-transition-banner-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-color);
    margin-bottom: 12px;
}
.classic-transition-banner-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
}
.classic-transition-banner-logo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.classic-transition-banner-logo-col img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.classic-transition-banner-logo-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
}
.classic-transition-banner-logo-brand {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 4px;
}
.classic-transition-banner-arrow {
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.classic-transition-banner-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* ==========================================================================
   2. STATIC COMPONENT UTILITIES (PREVIOUSLY INLINE STYLES)
   ========================================================================== */
.a11y-quick-bar {
    background: var(--card-bg, #0f172a);
    border: 2px solid var(--accent-color, #facc15);
    padding: 10px 14px;
    margin-bottom: 22px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}



footer.site-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: var(--meta-text);
    flex-wrap: wrap;
    gap: 16px;
}

footer.site-footer .footer-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-header-login {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.btn-header-admin {
    background: var(--accent-subtle) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

.badge-pinned {
    font-size: 11px;
    padding: 2px 7px;
    background: var(--accent-subtle);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

.badge-recently-added {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.portal-sidebar-column,
.telemetry-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recent-article-title {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.dashboard-card-arrow {
    flex-shrink: 0;
    margin-left: 8px;
}

/* ==========================================================================
   3. MAIN APPLICATION THEMES, LAYOUT & COMPONENT STYLES
   ========================================================================== */

        :root,
        [data-theme="light"] { 
            --bg-color: #f8fafc; 
            --card-bg: #ffffff; 
            --card-hover: #ffffff;
            --text-color: #0f172a; 
            --text-secondary: #334155;
            --meta-text: #64748b;
            --border-color: #e2e8f0; 
            --border-subtle: #f1f5f9;
            --accent-color: #4f46e5; 
            --accent-hover: #4338ca;
            --accent-subtle: rgba(79, 70, 229, 0.08);
            --link-color: #4f46e5;
            --link-hover: #3730a3;
            --cat-bg: #eef2ff; 
            --cat-text: #4338ca; 
            --sec-bg: #f1f5f9; 
            --sec-text: #475569; 
            --btn-bg: #0f172a; 
            --btn-text: #ffffff;
            --btn-hover: #1e293b;
            --highlight-bg: #fef08a; 
            --highlight-text: #854d0e;
            --panel-bg: #f8fafc; 
            --panel-border: #e2e8f0;
            --kbd-bg: #f1f5f9;
            --kbd-border: #cbd5e1;
            --kbd-text: #64748b;
            --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
            --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
            --shadow-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
        }
        [data-theme="dark"] { 
            --bg-color: #0b0f19; 
            --card-bg: #131b2e; 
            --card-hover: #1a253d;
            --text-color: #f8fafc; 
            --text-secondary: #cbd5e1;
            --meta-text: #94a3b8;
            --border-color: #1e293b; 
            --border-subtle: #162036;
            --accent-color: #fb923c; 
            --accent-hover: #f97316;
            --accent-subtle: #2a1b12;
            --link-color: #38bdf8;
            --link-hover: #7dd3fc;
            --cat-bg: #0c4a6e; 
            --cat-text: #bae6fd; 
            --sec-bg: #3b0764; 
            --sec-text: #e9d5ff; 
            --btn-bg: #f8fafc; 
            --btn-text: #0b0f19;
            --btn-hover: #e2e8f0;
            --highlight-bg: #78350f; 
            --highlight-text: #fef08a;
            --panel-bg: #2a1b12; 
            --panel-border: #7c2d12;
            --kbd-bg: #1e293b;
            --kbd-border: #334155;
            --kbd-text: #94a3b8;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        }
        [data-theme="classic"] {
            --bg-color: #1d2125;
            --card-bg: #2c333a;
            --card-hover: #333b43;
            --text-color: #f4f5f7;
            --text-secondary: #98a2b3;
            --meta-text: #8c95a0;
            --border-color: #454f59;
            --border-subtle: #2c333a;
            --accent-color: #579dff;
            --accent-hover: #3b82f6;
            --accent-subtle: #1e293b;
            --link-color: #579dff;
            --link-hover: #7db3ff;
            --cat-bg: #2b1d42;
            --cat-text: #dfd8ff;
            --sec-bg: #2b1d42;
            --sec-text: #dfd8ff;
            --btn-bg: #454f59;
            --btn-text: #f4f5f7;
            --btn-hover: #5a6673;
            --highlight-bg: #422006;
            --highlight-text: #fef08a;
            --panel-bg: #2c333a;
            --panel-border: #454f59;
            --kbd-bg: #2c333a;
            --kbd-border: #454f59;
            --kbd-text: #98a2b3;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
        }
        [data-theme="girlypop"] {
            --bg-color: #fff0f5;
            --card-bg: #ffffff;
            --card-hover: #ffe4e6;
            --text-color: #881337;
            --text-secondary: #9f1239;
            --meta-text: #be185d;
            --border-color: #fbcfe8;
            --border-subtle: #fdf2f8;
            --accent-color: #ec4899;
            --accent-hover: #db2777;
            --accent-subtle: #fce7f3;
            --link-color: #db2777;
            --link-hover: #be185d;
            --cat-bg: #fce7f3;
            --cat-text: #9d174d;
            --sec-bg: #fae8ff;
            --sec-text: #86198f;
            --btn-bg: #db2777;
            --btn-text: #ffffff;
            --btn-hover: #be185d;
            --highlight-bg: #fbcfe8;
            --highlight-text: #881337;
            --panel-bg: #fdf2f8;
            --panel-border: #fbcfe8;
            --kbd-bg: #fce7f3;
            --kbd-border: #fbcfe8;
            --kbd-text: #be185d;
            --shadow-sm: 0 1px 3px 0 rgba(236, 72, 153, 0.08);
            --shadow-md: 0 4px 6px -1px rgba(236, 72, 153, 0.12), 0 2px 4px -2px rgba(236, 72, 153, 0.08);
            --shadow-hover: 0 10px 15px -3px rgba(236, 72, 153, 0.18), 0 4px 6px -4px rgba(236, 72, 153, 0.1);
        }
        [data-theme="stratosphere"] {
            --bg-color: #0c192c;
            --card-bg: #15263f;
            --card-hover: #1e3557;
            --text-color: #f8fafc;
            --text-secondary: #93c5fd;
            --meta-text: #7dd3fc;
            --border-color: #1e3a8a;
            --border-subtle: #1a2d48;
            --accent-color: #38bdf8;
            --accent-hover: #60a5fa;
            --accent-subtle: rgba(56, 189, 248, 0.15);
            --link-color: #60a5fa;
            --link-hover: #93c5fd;
            --cat-bg: #1e3a8a;
            --cat-text: #f0f9ff;
            --sec-bg: #1d4ed8;
            --sec-text: #ffffff;
            --btn-bg: #0284c7;
            --btn-text: #ffffff;
            --btn-hover: #0369a1;
            --highlight-bg: #1d4ed8;
            --highlight-text: #ffffff;
            --panel-bg: #112238;
            --panel-border: #1e3a8a;
            --kbd-bg: #1e293b;
            --kbd-border: #3b82f6;
            --kbd-text: #f8fafc;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
        }
        [data-theme="stratosphere"] body {
            background-color: #0c192c;
            background-image: 
                radial-gradient(circle at 15% 18%, rgba(224, 242, 254, 0.12) 0%, rgba(56, 189, 248, 0.08) 25%, transparent 55%),
                radial-gradient(circle at 80% 12%, rgba(186, 230, 253, 0.14) 0%, rgba(147, 197, 253, 0.06) 30%, transparent 60%),
                radial-gradient(ellipse at 50% 45%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 25% 75%, rgba(147, 197, 253, 0.1) 0%, rgba(56, 189, 248, 0.04) 35%, transparent 55%),
                radial-gradient(circle at 85% 82%, rgba(224, 242, 254, 0.11) 0%, rgba(56, 189, 248, 0.05) 30%, transparent 50%);
            background-attachment: fixed;
        }
        [data-theme="girlypop"] body,
        [data-theme="girlypop"] input,
        [data-theme="girlypop"] button,
        [data-theme="girlypop"] select,
        [data-theme="girlypop"] textarea,
        [data-theme="girlypop"] .brand-slogan,
        [data-theme="girlypop"] .search-input,
        [data-theme="girlypop"] .theme-switch-btn,
        [data-theme="girlypop"] .theme-toggle,
        [data-theme="girlypop"] .section-card,
        [data-theme="girlypop"] .card-title,
        [data-theme="girlypop"] .stat-pill,
        [data-theme="girlypop"] .suggestion-title,
        [data-theme="girlypop"] .search-kbd,
        [data-theme="stratosphere"] body,
        [data-theme="stratosphere"] input,
        [data-theme="stratosphere"] button,
        [data-theme="stratosphere"] select,
        [data-theme="stratosphere"] textarea,
        [data-theme="stratosphere"] .brand-slogan,
        [data-theme="stratosphere"] .search-input,
        [data-theme="stratosphere"] .theme-switch-btn,
        [data-theme="stratosphere"] .theme-toggle,
        [data-theme="stratosphere"] .section-card,
        [data-theme="stratosphere"] .card-title,
        [data-theme="stratosphere"] .stat-pill,
        [data-theme="stratosphere"] .suggestion-title,
        [data-theme="stratosphere"] .search-kbd {
            font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }
        [data-theme="girlypop"] h1,
        [data-theme="girlypop"] h2,
        [data-theme="girlypop"] h3,
        [data-theme="girlypop"] h4,
        [data-theme="girlypop"] .brand-name,
        [data-theme="girlypop"] .article-title,
        [data-theme="stratosphere"] h1,
        [data-theme="stratosphere"] h2,
        [data-theme="stratosphere"] h3,
        [data-theme="stratosphere"] h4,
        [data-theme="stratosphere"] .brand-name,
        [data-theme="stratosphere"] .article-title {
            font-family: 'Fredoka', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }
        [data-theme="geek"] {
            --bg-color: #0c1708;
            --card-bg: #14250d;
            --card-hover: #1b3312;
            --text-color: #18e699;
            --text-secondary: #1bbc68;
            --meta-text: #148526;
            --border-color: #148526;
            --border-subtle: #10540e;
            --accent-color: #18e699;
            --accent-hover: #1bbc68;
            --accent-subtle: #10540e;
            --link-color: #18e699;
            --link-hover: #1bbc68;
            --cat-bg: #10540e;
            --cat-text: #18e699;
            --sec-bg: #14250d;
            --sec-text: #1bbc68;
            --btn-bg: #18e699;
            --btn-text: #0c1708;
            --btn-hover: #1bbc68;
            --highlight-bg: #10540e;
            --highlight-text: #18e699;
            --panel-bg: #14250d;
            --panel-border: #148526;
            --kbd-bg: #10540e;
            --kbd-border: #148526;
            --kbd-text: #18e699;
            --shadow-sm: 0 1px 3px 0 rgba(24, 230, 153, 0.12);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(24, 230, 153, 0.15);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 0 14px rgba(24, 230, 153, 0.22);
        }
        [data-theme="geek"] body,
        [data-theme="geek"] input,
        [data-theme="geek"] button,
        [data-theme="geek"] select,
        [data-theme="geek"] textarea,
        [data-theme="geek"] .brand-name,
        [data-theme="geek"] .brand-slogan,
        [data-theme="geek"] .search-input,
        [data-theme="geek"] .article-title,
        [data-theme="geek"] .theme-switch-btn,
        [data-theme="geek"] .theme-toggle,
        [data-theme="geek"] .section-card,
        [data-theme="geek"] .card-title,
        [data-theme="geek"] .stat-pill,
        [data-theme="geek"] .suggestion-title,
        [data-theme="geek"] .search-kbd,
        [data-theme="geek"] code,
        [data-theme="geek"] kbd,
        [data-theme="geek"] h1, [data-theme="geek"] h2, [data-theme="geek"] h3, [data-theme="geek"] h4 {
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace !important;
        }
        [data-theme="cosmic"] {
            --bg-color: #0B0516;
            --card-bg: #160C28;
            --card-hover: #1e1038;
            --text-color: #F3EFFB;
            --text-secondary: #B37DEA;
            --meta-text: #B37DEA;
            --border-color: #231745;
            --border-subtle: #1c1137;
            --accent-color: #FF44A0;
            --accent-hover: #ff66b2;
            --accent-subtle: #241138;
            --link-color: #d946ef;
            --link-hover: #FF44A0;
            --cat-bg: #291244;
            --cat-text: #FF44A0;
            --sec-bg: #210d3b;
            --sec-text: #c084fc;
            --btn-bg: #FF44A0;
            --btn-text: #ffffff;
            --btn-hover: #ff66b2;
            --highlight-bg: #4a154b;
            --highlight-text: #ffd5eb;
            --panel-bg: #160C28;
            --panel-border: #231745;
            --kbd-bg: #231745;
            --kbd-border: #382566;
            --kbd-text: #F3EFFB;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(104, 25, 147, 0.15);
            --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.5), 0 0 18px rgba(104, 25, 147, 0.25);
            --shadow-hover: 0 10px 25px -3px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 68, 160, 0.28);
        }
        [data-theme="cosmic"] body {
            background-color: #0B0516;
            background-image: 
                radial-gradient(ellipse at 15% 15%, rgba(104, 25, 147, 0.25) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 25%, rgba(255, 68, 160, 0.16) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 85%, rgba(111, 0, 255, 0.18) 0%, transparent 55%);
            background-attachment: fixed;
        }
        [data-theme="cosmic"] .search-input-wrapper {
            background-color: rgba(22, 12, 40, 0.88);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-color: #231745;
            border-radius: 14px;
        }
        [data-theme="cosmic"] .search-input-wrapper:focus-within {
            border-color: #FF44A0;
            box-shadow: 0 0 0 3px rgba(255, 68, 160, 0.2), 0 0 25px rgba(104, 25, 147, 0.4);
        }
        [data-theme="cosmic"] .section-card,
        [data-theme="cosmic"] .settings-card,
        [data-theme="cosmic"] .card,
        [data-theme="cosmic"] .login-card,
        [data-theme="cosmic"] .profile-card,
        [data-theme="cosmic"] .modal-content,
        [data-theme="cosmic"] .overview-container {
            background-color: rgba(22, 12, 40, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid #231745;
            border-radius: 14px;
        }
        [data-theme="cosmic"] .theme-toggle,
        [data-theme="cosmic"] .theme-switch-btn {
            background-color: rgba(22, 12, 40, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-color: #231745;
            color: #F3EFFB;
        }
        [data-theme="cosmic"] .theme-toggle:hover,
        [data-theme="cosmic"] .theme-switch-btn:hover {
            border-color: #FF44A0;
            color: #FF44A0;
            box-shadow: 0 0 12px rgba(255, 68, 160, 0.3);
        }
        [data-theme="cosmic"] .stat-pill,
        [data-theme="cosmic"] .scope-tab {
            border-color: #231745;
            background: rgba(35, 23, 69, 0.5);
            color: #B37DEA;
        }
        [data-theme="cosmic"] .scope-tab.active {
            background: #FF44A0;
            color: #ffffff;
            border-color: #FF44A0;
            box-shadow: 0 0 15px rgba(255, 68, 160, 0.35);
        }
        [data-theme="cosmic"] .highlight {
            background: rgba(104, 25, 147, 0.45);
            color: #ffd5eb;
            border-bottom: 2px solid #FF44A0;
            border-radius: 2px;
            padding: 0 2px;
        }
        [data-theme="cosmic"] .brand-slogan {
            color: #B37DEA;
        }
        [data-theme="cosmic"] .brand-name {
            color: #F3EFFB;
            background: linear-gradient(135deg, #F3EFFB 30%, #FF44A0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Nightcall Theme (Retro 80s Retrowave Arcade Landscape — Driving Rainstorm & Vivid Neon Pink) */
        [data-theme="nightcall"] {
            --bg-color: #08060f;
            --card-bg: rgba(18, 12, 30, 0.90);
            --card-hover: rgba(30, 16, 48, 0.96);
            --text-color: #fdf2f8;
            --text-secondary: #f472b6;
            --meta-text: #ff80bf;
            --border-color: rgba(255, 20, 147, 0.65);
            --border-subtle: rgba(255, 20, 147, 0.35);
            --accent-color: #ff1493;
            --accent-hover: #ff4da6;
            --accent-subtle: rgba(255, 20, 147, 0.32);
            --link-color: #ff69b4;
            --link-hover: #ff1493;
            --cat-bg: rgba(255, 20, 147, 0.28);
            --cat-text: #ff80bf;
            --sec-bg: rgba(255, 20, 147, 0.20);
            --sec-text: #ff69b4;
            --btn-bg: #ff1493;
            --btn-text: #ffffff;
            --btn-hover: #ff4da6;
            --highlight-bg: rgba(255, 20, 147, 0.55);
            --highlight-text: #ffffff;
            --panel-bg: rgba(22, 14, 38, 0.92);
            --panel-border: rgba(255, 20, 147, 0.65);
            --kbd-bg: rgba(255, 20, 147, 0.25);
            --kbd-border: #ff1493;
            --kbd-text: #ff80bf;
            --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 20, 147, 0.35);
            --shadow-md: 0 4px 18px -2px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 20, 147, 0.48);
            --shadow-hover: 0 10px 30px -3px rgba(0, 0, 0, 0.8), 0 0 42px rgba(255, 20, 147, 0.75);
        }
        [data-theme="nightcall"] body {
            background-color: #08060f;
            background-image: 
                /* Atmospheric dark purple/magenta storm vignette and neon horizon glow */
                radial-gradient(ellipse at 50% 20%, rgba(10, 6, 22, 0.40) 0%, rgba(8, 6, 15, 0.88) 85%),
                radial-gradient(ellipse at 50% 100%, rgba(255, 20, 147, 0.28) 0%, transparent 60%),
                /* 80s Retrowave arcade landscape with grid, mountains, palm trees, storm clouds, and neon aesthetic */
                url('/img/nightcall_retrowave_storm.webp');
            background-size: 100% 100%, 100% 100%, cover;
            background-position: center center, center bottom, center top;
            background-attachment: fixed, fixed, fixed;
            background-repeat: no-repeat, no-repeat, no-repeat;
            position: relative;
        }

        /* Retro 80s arcade CRT scanline texture overlay */
        [data-theme="nightcall"] body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 1;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%);
            background-size: 100% 4px;
            opacity: 0.35;
        }

        [data-theme="nightcall"] .container,
        [data-theme="nightcall"] header,
        [data-theme="nightcall"] main,
        [data-theme="nightcall"] .search-container {
            position: relative;
            z-index: 2;
        }

        [data-theme="nightcall"] .search-input-wrapper {
            background-color: rgba(22, 14, 38, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid rgba(255, 20, 147, 0.65);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 20, 147, 0.35);
        }
        [data-theme="nightcall"] .search-input-wrapper:focus-within {
            border-color: #ff1493;
            box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.45), 0 0 45px rgba(255, 20, 147, 0.75), 0 8px 30px rgba(0, 0, 0, 0.85);
        }
        [data-theme="nightcall"] .section-card,
        [data-theme="nightcall"] .settings-card,
        [data-theme="nightcall"] .card,
        [data-theme="nightcall"] .login-card,
        [data-theme="nightcall"] .profile-card,
        [data-theme="nightcall"] .modal-content,
        [data-theme="nightcall"] .overview-container,
        [data-theme="nightcall"] .article-card {
            background-color: rgba(20, 13, 34, 0.90);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1.5px solid rgba(255, 20, 147, 0.65);
            border-radius: 14px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 20, 147, 0.38), inset 0 0 16px rgba(255, 20, 147, 0.12);
            position: relative;
        }
        [data-theme="nightcall"] .section-card::before,
        [data-theme="nightcall"] .settings-card::before,
        [data-theme="nightcall"] .article-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 5%;
            right: 5%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #ff1493 25%, #ff69b4 50%, #ff1493 75%, transparent 100%);
            opacity: 1;
            border-radius: 2px;
            pointer-events: none;
            box-shadow: 0 0 12px #ff1493;
        }
        [data-theme="nightcall"] .section-card:hover,
        [data-theme="nightcall"] .article-card:hover {
            border-color: #ff1493;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 38px rgba(255, 20, 147, 0.7), inset 0 0 20px rgba(255, 20, 147, 0.25);
            transform: translateY(-2px);
        }
        [data-theme="nightcall"] .theme-toggle,
        [data-theme="nightcall"] .theme-switch-btn {
            background-color: rgba(24, 14, 40, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1.5px solid rgba(255, 20, 147, 0.55);
            color: #fdf2f8;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 20, 147, 0.25);
        }
        [data-theme="nightcall"] .theme-toggle:hover,
        [data-theme="nightcall"] .theme-switch-btn:hover {
            border-color: #ff1493;
            color: #ffffff;
            background: rgba(255, 20, 147, 0.35);
            box-shadow: 0 0 24px rgba(255, 20, 147, 0.75), inset 0 0 12px rgba(255, 20, 147, 0.3);
        }
        [data-theme="nightcall"] .stat-pill,
        [data-theme="nightcall"] .scope-tab {
            border-color: rgba(255, 20, 147, 0.55);
            background: rgba(255, 20, 147, 0.15);
            color: #f472b6;
            box-shadow: 0 0 12px rgba(255, 20, 147, 0.22);
        }
        [data-theme="nightcall"] .scope-tab:hover {
            border-color: #ff1493;
            color: #ffffff;
            background: rgba(255, 20, 147, 0.35);
            box-shadow: 0 0 18px rgba(255, 20, 147, 0.5);
        }
        [data-theme="nightcall"] .scope-tab.active {
            background: linear-gradient(135deg, #ff1493 0%, #ff4da6 100%);
            color: #ffffff;
            border-color: #ff1493;
            box-shadow: 0 0 28px rgba(255, 20, 147, 0.85), 0 2px 10px rgba(0, 0, 0, 0.5);
            font-weight: 700;
        }
        [data-theme="nightcall"] .highlight {
            background: rgba(255, 20, 147, 0.55);
            color: #ffffff;
            border-bottom: 2px solid #ff1493;
            border-radius: 3px;
            box-shadow: 0 0 14px rgba(255, 20, 147, 0.55);
            padding: 0 4px;
        }
        [data-theme="nightcall"] .brand-slogan {
            color: #ff80bf;
            letter-spacing: 0.16em;
            text-shadow: 0 0 10px rgba(255, 20, 147, 0.55);
        }
        [data-theme="nightcall"] .brand-name {
            color: #ffffff;
            background: linear-gradient(135deg, #ffffff 10%, #ff69b4 50%, #ff1493 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 18px rgba(255, 20, 147, 0.85));
        }
        [data-theme="nightcall"] .header-bookmark-badge {
            background: #ff1493 !important;
            box-shadow: 0 0 14px rgba(255, 20, 147, 0.85);
        }
        [data-theme="nightcall"] ::selection {
            background: #ff1493;
            color: #ffffff;
        }
        [data-theme="nightcall"] ::-webkit-scrollbar-thumb {
            background: #ff1493;
            border-radius: 4px;
            box-shadow: 0 0 12px rgba(255, 20, 147, 0.7);
        }
        [data-theme="nightcall"] ::-webkit-scrollbar-thumb:hover {
            background: #ff4da6;
            box-shadow: 0 0 18px rgba(255, 20, 147, 0.95);
        }
        [data-theme="nightcall"] .section-title,
        [data-theme="nightcall"] .card-title {
            color: #ffffff;
            text-shadow: 0 0 12px rgba(255, 20, 147, 0.4);
        }
        [data-theme="nightcall"] a.a11y-toggle-btn.is-active[data-a11y-val="on"] {
            background: #ff1493 !important;
            border-color: #ff1493 !important;
            color: #ffffff !important;
            box-shadow: 0 0 16px rgba(255, 20, 147, 0.7) !important;
        }

        /* High Contrast Theme (Modernized Amber & Gold — WCAG AAA Compliant) */
        [data-theme="high-contrast"] {
            --bg-color: #030712;
            --card-bg: #0f172a;
            --card-hover: #1e293b;
            --text-color: #ffffff;
            --text-secondary: #cbd5e1;
            --meta-text: #94a3b8;
            --border-color: #475569;
            --border-subtle: #334155;
            --accent-color: #facc15;
            --accent-hover: #fde047;
            --accent-subtle: rgba(250, 204, 21, 0.12);
            --link-color: #38bdf8;
            --link-hover: #7dd3fc;
            --cat-bg: #0f172a;
            --cat-text: #facc15;
            --sec-bg: #0f172a;
            --sec-text: #ffffff;
            --btn-bg: #facc15;
            --btn-text: #030712;
            --btn-hover: #fde047;
            --highlight-bg: rgba(250, 204, 21, 0.28);
            --highlight-text: #ffffff;
            --panel-bg: #0f172a;
            --panel-border: #475569;
            --kbd-bg: #1e293b;
            --kbd-border: #64748b;
            --kbd-text: #facc15;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
        }
        [data-theme="high-contrast"] body {
            background-color: #030712 !important;
            background-image: none !important;
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .search-box,
        [data-theme="high-contrast"] .article-card,
        [data-theme="high-contrast"] .section-card,
        [data-theme="high-contrast"] .result-item,
        [data-theme="high-contrast"] .external-item,
        [data-theme="high-contrast"] .modal-content,
        [data-theme="high-contrast"] .overview-container,
        [data-theme="high-contrast"] .suggestion-container,
        [data-theme="high-contrast"] .recent-card,
        [data-theme="high-contrast"] .a11y-quick-bar,
        [data-theme="high-contrast"] .dashboard-card,
        [data-theme="high-contrast"] .welcome-callout-panel,
        [data-theme="high-contrast"] .trending-box,
        [data-theme="high-contrast"] .empty-state-box,
        [data-theme="high-contrast"] .hc-notice-banner,
        [data-theme="high-contrast"] .notice-box {
            background-color: #0f172a !important;
            border: 1.5px solid #475569 !important;
            border-radius: 10px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .article-card:hover,
        [data-theme="high-contrast"] .section-card:hover,
        [data-theme="high-contrast"] .result-item:hover,
        [data-theme="high-contrast"] .external-item:hover,
        [data-theme="high-contrast"] .dashboard-card:hover {
            border-color: #facc15 !important;
            background-color: #1e293b !important;
            box-shadow: 0 0 0 1px #facc15, 0 8px 20px rgba(0, 0, 0, 0.6) !important;
        }
        [data-theme="high-contrast"] .dashboard-card p {
            color: #cbd5e1 !important;
        }
        [data-theme="high-contrast"] .theme-toggle,
        [data-theme="high-contrast"] .theme-switch-btn,
        [data-theme="high-contrast"] .clear-btn,
        [data-theme="high-contrast"] .filter-btn,
        [data-theme="high-contrast"] .density-toggle,
        [data-theme="high-contrast"] .density-toggle-btn {
            background-color: #1e293b !important;
            border: 1.5px solid #64748b !important;
            color: #ffffff !important;
            border-radius: 8px !important;
            font-weight: 600 !important;
        }
        [data-theme="high-contrast"] .theme-toggle:hover,
        [data-theme="high-contrast"] .theme-switch-btn:hover,
        [data-theme="high-contrast"] .theme-toggle:focus,
        [data-theme="high-contrast"] .theme-switch-btn:focus,
        [data-theme="high-contrast"] .density-toggle-btn:hover {
            border-color: #facc15 !important;
            color: #facc15 !important;
            background-color: #334155 !important;
            outline: 2px solid #facc15 !important;
            outline-offset: 1px !important;
        }
        [data-theme="high-contrast"] .action-icon-btn,
        [data-theme="high-contrast"] .copy-btn,
        [data-theme="high-contrast"] .copy-intercom-btn,
        [data-theme="high-contrast"] .bookmark-btn,
        [data-theme="high-contrast"] .nexus-btn {
            background-color: #1e293b !important;
            border: 1.5px solid #64748b !important;
            color: #ffffff !important;
            border-radius: 6px !important;
        }
        [data-theme="high-contrast"] .action-icon-btn:hover,
        [data-theme="high-contrast"] .copy-btn:hover,
        [data-theme="high-contrast"] .copy-intercom-btn:hover,
        [data-theme="high-contrast"] .bookmark-btn:hover,
        [data-theme="high-contrast"] .nexus-btn:hover {
            background-color: #334155 !important;
            border-color: #facc15 !important;
            color: #facc15 !important;
        }
        [data-theme="high-contrast"] .external-direct-btn {
            background-color: #facc15 !important;
            color: #030712 !important;
            border: 1.5px solid #facc15 !important;
            font-weight: 700 !important;
            border-radius: 6px !important;
        }
        [data-theme="high-contrast"] .external-direct-btn:hover {
            background-color: #fde047 !important;
            color: #030712 !important;
            border-color: #fde047 !important;
        }
        [data-theme="high-contrast"] .sc-badge {
            background-color: #1e293b !important;
            color: #cbd5e1 !important;
            border: 1px solid #64748b !important;
        }
        [data-theme="high-contrast"] .external-badge {
            background-color: rgba(56, 189, 248, 0.15) !important;
            color: #38bdf8 !important;
            border: 1px solid #38bdf8 !important;
        }
        [data-theme="high-contrast"] .suggestion-badge {
            background-color: rgba(250, 204, 21, 0.15) !important;
            color: #facc15 !important;
            border: 1px solid #facc15 !important;
        }
        [data-theme="high-contrast"] .parent-pill {
            background-color: #1e293b !important;
            color: #38bdf8 !important;
            border: 1px solid #64748b !important;
        }
        [data-theme="high-contrast"] .parent-pill:hover {
            background-color: #334155 !important;
            color: #facc15 !important;
            border-color: #facc15 !important;
        }
        [data-theme="high-contrast"] .article-meta-badge {
            color: #cbd5e1 !important;
        }
        [data-theme="high-contrast"] .search-count-badge {
            background-color: #1e293b !important;
            border: 1.5px solid #64748b !important;
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .search-count-badge strong {
            color: #facc15 !important;
        }
        [data-theme="high-contrast"] .trending-item {
            border: 1px solid transparent !important;
            border-radius: 8px !important;
        }
        [data-theme="high-contrast"] .trending-item:hover {
            background-color: #1e293b !important;
            border: 1px solid #475569 !important;
        }
        [data-theme="high-contrast"] .trending-rank {
            color: #facc15 !important;
            font-weight: 700 !important;
        }
        [data-theme="high-contrast"] .trending-item a {
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .trending-item:hover a {
            color: #38bdf8 !important;
            text-decoration: underline !important;
        }
        [data-theme="high-contrast"] code,
        [data-theme="high-contrast"] kbd,
        [data-theme="high-contrast"] pre,
        [data-theme="high-contrast"] .kb-hint-bar kbd,
        [data-theme="high-contrast"] .search-kbd {
            background-color: #1e293b !important;
            color: #facc15 !important;
            border: 1px solid #64748b !important;
            border-radius: 4px !important;
        }
        [data-theme="high-contrast"] a.theme-toggle[href="/user_login"],
        [data-theme="high-contrast"] .btn-header-login,
        [data-theme="high-contrast"] .header-bookmark-badge {
            color: #000000 !important;
        }
        [data-theme="high-contrast"] a.theme-toggle[href="/user_login"] {
            background-color: #1e293b !important;
            border: 1.5px solid #64748b !important;
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] a.theme-toggle[href="/user_login"] svg path {
            fill: #ffffff !important;
        }
        [data-theme="high-contrast"] a.theme-toggle[href="/user_login"]:hover {
            border-color: #facc15 !important;
            color: #facc15 !important;
        }
        [data-theme="high-contrast"] a.theme-toggle[href="/user_login"]:hover svg path {
            fill: #facc15 !important;
        }
        [data-theme="high-contrast"] .search-input {
            background-color: #0f172a !important;
            color: #ffffff !important;
            border: 2px solid #64748b !important;
            border-radius: 10px !important;
        }
        [data-theme="high-contrast"] .search-input:focus {
            border-color: #facc15 !important;
            outline: 3px solid #facc15 !important;
            outline-offset: 2px !important;
        }
        [data-theme="high-contrast"] .search-input::placeholder {
            color: #94a3b8 !important;
        }
        [data-theme="high-contrast"] .article-title,
        [data-theme="high-contrast"] .card-title,
        [data-theme="high-contrast"] .kb-title-link,
        [data-theme="high-contrast"] .result-header-row h3 a {
            color: #38bdf8 !important;
            text-decoration: underline !important;
            text-underline-offset: 2px !important;
        }
        [data-theme="high-contrast"] .article-card:hover .article-title,
        [data-theme="high-contrast"] .section-card:hover .card-title,
        [data-theme="high-contrast"] .kb-title-link:hover,
        [data-theme="high-contrast"] .result-header-row h3 a:hover {
            color: #7dd3fc !important;
        }
        [data-theme="high-contrast"] .result-item p {
            color: #cbd5e1 !important;
        }
        [data-theme="high-contrast"] .stat-pill,
        [data-theme="high-contrast"] .scope-tab {
            border: 1.5px solid #64748b !important;
            background: #0f172a !important;
            color: #cbd5e1 !important;
            font-weight: 600 !important;
            border-radius: 8px !important;
        }
        [data-theme="high-contrast"] .scope-tab.active {
            background: #facc15 !important;
            color: #030712 !important;
            border-color: #facc15 !important;
            font-weight: 700 !important;
        }
        [data-theme="high-contrast"] .scope-tab.active .scope-count {
            background-color: #030712 !important;
            color: #facc15 !important;
            border-color: #030712 !important;
        }
        [data-theme="high-contrast"] .scope-tab:not(.active) .scope-count {
            background-color: #1e293b !important;
            color: #cbd5e1 !important;
            border-color: #64748b !important;
        }
        [data-theme="high-contrast"] .highlight,
        [data-theme="high-contrast"] mark,
        [data-theme="high-contrast"] .highlight-token {
            background: #facc15 !important;
            color: #030712 !important;
            font-weight: 800 !important;
            padding: 1px 4px !important;
            border-radius: 3px !important;
        }
        [data-theme="high-contrast"] mark strong,
        [data-theme="high-contrast"] mark b,
        [data-theme="high-contrast"] .highlight strong,
        [data-theme="high-contrast"] .highlight b,
        [data-theme="high-contrast"] .highlight-token strong,
        [data-theme="high-contrast"] .highlight-token b,
        [data-theme="high-contrast"] .scope-tab.active strong,
        [data-theme="high-contrast"] .scope-tab.active b,
        [data-theme="high-contrast"] .external-direct-btn strong,
        [data-theme="high-contrast"] .external-direct-btn b {
            color: #030712 !important;
        }
        [data-theme="high-contrast"] .brand-slogan {
            color: #facc15 !important;
        }
        [data-theme="high-contrast"] .brand-name {
            color: #ffffff !important;
            background: none !important;
            -webkit-text-fill-color: initial !important;
        }
        [data-theme="high-contrast"] a {
            color: #38bdf8 !important;
        }
        [data-theme="high-contrast"] a:hover {
            color: #7dd3fc !important;
        }
        [data-theme="high-contrast"] strong,
        [data-theme="high-contrast"] b {
            color: #ffffff !important;
            font-weight: 700 !important;
        }
        [data-theme="high-contrast"] .welcome-callout-panel {
            background-color: #0f172a !important;
            border: 1.5px solid #475569 !important;
            color: #ffffff !important;
            border-radius: 10px !important;
        }
        [data-theme="high-contrast"] .welcome-callout-panel .callout-title {
            color: #facc15 !important;
        }
        [data-theme="high-contrast"] .welcome-callout-panel .callout-body {
            color: #cbd5e1 !important;
        }
        [data-theme="high-contrast"] .welcome-callout-panel .callout-body a {
            color: #38bdf8 !important;
            text-decoration: underline !important;
        }

        /* Accessibility Features (Universal & Theme-Adaptive) */
        html.a11y-underline a,
        body.a11y-underline a,
        [data-a11y-underline="true"] a,
        [data-a11y-underline="on"] a,
        html.a11y-underline .result-item a,
        body.a11y-underline .result-item a,
        [data-a11y-underline="true"] .result-item a,
        [data-a11y-underline="on"] .result-item a,
        html.a11y-underline .kb-trackable-link,
        body.a11y-underline .kb-trackable-link,
        [data-a11y-underline="true"] .kb-trackable-link,
        [data-a11y-underline="on"] .kb-trackable-link,
        html.a11y-underline .kb-title-link,
        body.a11y-underline .kb-title-link,
        [data-a11y-underline="true"] .kb-title-link,
        [data-a11y-underline="on"] .kb-title-link,
        html.a11y-underline .result-header-row h3 a,
        body.a11y-underline .result-header-row h3 a,
        [data-a11y-underline="true"] .result-header-row h3 a,
        [data-a11y-underline="on"] .result-header-row h3 a {
            text-decoration: underline !important;
            text-underline-offset: 3px !important;
            text-decoration-thickness: 2px !important;
        }

        body.a11y-underline a.theme-switch-btn,
        body.a11y-underline a.a11y-toggle-btn,
        body.a11y-underline a.scope-tab,
        body.a11y-underline a.action-btn,
        body.a11y-underline a.theme-toggle,
        body.a11y-underline a.btn,
        body.a11y-underline a.header-brand-link,
        body.a11y-underline a.header-back-arrow,
        body.a11y-underline a.login-btn,
        body.a11y-underline a.parent-pill,
        body.a11y-underline a.nexus-btn,
        body.a11y-underline a.external-direct-btn,
        body.a11y-underline a.tag-pill,
        body.a11y-underline a.stat-pill,
        body.a11y-underline a.chip-category,
        body.a11y-underline a.chip-section,
        body.a11y-underline .dashboard-card-arrow,
        [data-a11y-underline="true"] a.theme-switch-btn,
        [data-a11y-underline="true"] a.a11y-toggle-btn,
        [data-a11y-underline="true"] a.scope-tab,
        [data-a11y-underline="true"] a.action-btn,
        [data-a11y-underline="true"] a.theme-toggle,
        [data-a11y-underline="true"] a.btn,
        [data-a11y-underline="true"] a.header-brand-link,
        [data-a11y-underline="true"] a.header-back-arrow,
        [data-a11y-underline="true"] a.login-btn,
        [data-a11y-underline="true"] a.parent-pill,
        [data-a11y-underline="true"] a.nexus-btn,
        [data-a11y-underline="true"] a.external-direct-btn,
        [data-a11y-underline="true"] a.tag-pill,
        [data-a11y-underline="true"] a.stat-pill,
        [data-a11y-underline="true"] a.chip-category,
        [data-a11y-underline="true"] a.chip-section,
        [data-a11y-underline="true"] .dashboard-card-arrow {
            text-decoration: none !important;
        }

        body.a11y-dyslexic *:not(pre):not(code):not(kbd):not(samp):not(.font-mono),
        [data-a11y-dyslexic="true"] *:not(pre):not(code):not(kbd):not(samp):not(.font-mono) {
            font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
            letter-spacing: 0.03em !important;
            word-spacing: 0.08em !important;
        }

        body.a11y-focus a:focus-visible,
        body.a11y-focus button:focus-visible,
        body.a11y-focus input:focus-visible,
        body.a11y-focus textarea:focus-visible,
        body.a11y-focus select:focus-visible,
        body.a11y-focus [tabindex]:focus-visible,
        [data-a11y-focus="true"] a:focus-visible,
        [data-a11y-focus="true"] button:focus-visible,
        [data-a11y-focus="true"] input:focus-visible,
        [data-a11y-focus="true"] textarea:focus-visible,
        [data-a11y-focus="true"] select:focus-visible,
        [data-a11y-focus="true"] [tabindex]:focus-visible {
            outline: 3px solid var(--accent-color, #3b82f6) !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 5px var(--card-bg, #000000) !important;
        }
        [data-theme="high-contrast"] body.a11y-focus *:focus-visible,
        [data-theme="high-contrast"][data-a11y-focus="true"] *:focus-visible {
            outline: 3px solid var(--accent-color, #facc15) !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 5px #030712 !important;
        }

        * { box-sizing: border-box; }
        body { 
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            margin: 0; 
            padding: 40px 20px; 
            transition: background-color 0.2s ease, color 0.2s ease; 
            position: relative;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        .container { max-width: 1120px; margin: 0 auto; }
        
        /* Header Brand & Navigation */
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
        .header-left { display: flex; align-items: center; gap: 12px; }
        
        .header-back-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            color: var(--text-color);
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            text-decoration: none;
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            flex-shrink: 0;
            position: relative;
            box-shadow: var(--shadow-sm);
        }
        .header-back-arrow:hover {
            background: var(--accent-subtle);
            color: var(--accent-color);
            border-color: var(--accent-color);
            transform: translateX(-2px);
            box-shadow: var(--shadow-md);
        }
        .header-back-arrow:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        /* CSS Tooltip for Back Arrow */
        .header-back-arrow[data-tooltip] {
            position: relative;
        }
        .header-back-arrow[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: var(--btn-bg, #0f172a);
            color: var(--btn-text, #ffffff);
            font-size: 11.5px;
            font-weight: 600;
            white-space: nowrap;
            padding: 5px 10px;
            border-radius: 6px;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--border-color);
            z-index: 100;
        }
        .header-back-arrow[data-tooltip]::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(2px);
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent var(--btn-bg, #0f172a) transparent;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
            z-index: 100;
        }
        .header-back-arrow[data-tooltip]:hover::after,
        .header-back-arrow[data-tooltip]:hover::before,
        .header-back-arrow[data-tooltip]:focus-visible::after,
        .header-back-arrow[data-tooltip]:focus-visible::before {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(4px);
        }

        .header-brand-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; border-radius: 8px; transition: transform 0.15s ease; }
        .header-brand-link:hover { transform: translateY(-1px); }
        .header-logo { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1)); flex-shrink: 0; }
        .brand-text-block { display: flex; flex-direction: column; justify-content: center; }
        .brand-name { 
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 28px; 
            font-weight: 800; 
            letter-spacing: -0.04em; 
            line-height: 1; 
            margin: 0;
            color: var(--text-color);
        }
        .brand-slogan { 
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 11px; 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 0.1em; 
            color: var(--meta-text); 
            margin-top: 4px;
            line-height: 1.1;
        }
        @media (max-width: 600px) {
            body { padding: 24px 16px; }
            .header-logo { width: 40px; height: 40px; }
            .brand-name { font-size: 24px; }
            .brand-slogan { font-size: 10px; letter-spacing: 0.08em; }
            .header-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
            .btn-header-profile .header-profile-name { max-width: 90px; }
        }
        
        .header-actions { display: flex; align-items: center; gap: 8px; }
        .header-actions .theme-toggle,
        .theme-toggle { 
            box-sizing: border-box;
            height: 36px;
            min-height: 36px;
            background: var(--card-bg); 
            border: 1px solid var(--border-color); 
            color: var(--text-color); 
            padding: 0 14px; 
            border-radius: 20px; 
            cursor: pointer; 
            text-decoration: none; 
            font-size: 0.85rem; 
            font-weight: 600;
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
            gap: 6px;
            line-height: 1;
            box-shadow: var(--shadow-sm);
            transition: all 0.15s ease;
        }
        .header-actions .theme-toggle:hover,
        .theme-toggle:hover { 
            border-color: var(--accent-color); 
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .btn-header-profile {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: inherit;
        }
        .btn-header-profile .header-profile-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            flex-shrink: 0;
        }
        .btn-header-profile .header-profile-name {
            font-weight: 600;
            color: var(--text-color);
            white-space: nowrap;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }
        .btn-header-profile:hover .header-profile-name {
            color: var(--accent-color);
        }

        .btn-header-logout {
            width: 36px;
            height: 36px;
            min-height: 36px;
            padding: 0 !important;
            justify-content: center;
            flex-shrink: 0;
            color: var(--text-color);
        }
        .btn-header-logout:hover {
            background: rgba(239, 68, 68, 0.08) !important;
            border-color: rgba(239, 68, 68, 0.35) !important;
            color: #ef4444 !important;
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }

        .header-bookmark-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 9px;
            background: var(--accent-color);
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin-left: 3px;
            line-height: 1;
        }
        
        .back-link { 
            display: inline-flex; 
            align-items: center; 
            gap: 6px; 
            margin-bottom: 20px; 
            color: var(--accent-color); 
            text-decoration: none; 
            font-weight: 600; 
            font-size: 0.92rem;
            padding: 4px 10px;
            border-radius: 6px;
            background: var(--accent-subtle);
            transition: all 0.15s ease;
        }
        .back-link:hover { text-decoration: none; transform: translateX(-2px); }

        /* Command-Style Search Hero */
        .search-container { position: relative; margin-bottom: 28px; z-index: 10; }
        .mochi-cat-container {
            position: absolute;
            top: 0;
            right: 48px;
            z-index: 1; /* Positioned behind search input wrapper (z-index: 2) */
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translateY(20px) scale(0.9);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
        }
        .mochi-cat-container.mochi-visible {
            transform: translateY(-90px) scale(1);
            opacity: 1;
            pointer-events: auto;
        }
        .mochi-nametag {
            background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 12px;
            box-shadow: 0 3px 10px var(--accent-subtle);
            letter-spacing: 0.5px;
            margin-bottom: -6px;
            z-index: 3;
            animation: mochiBounce 2s ease-in-out infinite;
            white-space: nowrap;
        }
        .mochi-cat-wrapper {
            position: relative;
        }
        @keyframes mochiWormWiggle {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(5deg) scale(1.04); }
        }
        .mochi-worm {
            transform-origin: 80px 80px;
            animation: mochiWormWiggle 0.7s ease-in-out infinite;
        }
        @keyframes mochiBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        .search-input-wrapper { 
            position: relative; 
            display: flex; 
            align-items: center; 
            background-color: var(--card-bg); 
            border: 2px solid var(--border-color); 
            border-radius: 12px; 
            box-shadow: var(--shadow-md);
            transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .search-input-wrapper:focus-within { 
            border-color: var(--accent-color); 
            box-shadow: 0 0 0 3px var(--accent-subtle), 0 8px 24px -4px var(--accent-subtle), var(--shadow-md);
        }

        /* Rainbow Border Focus Animation (20% chance on focus) */
        @keyframes rainbow-border-slide {
            0% {
                background-position: 0 0, 0% 50%;
            }
            100% {
                background-position: 0 0, 300% 50%;
            }
        }
        @keyframes rainbow-border-glow {
            0%, 100% {
                box-shadow: 0 0 0 3px rgba(255, 65, 108, 0.25), 0 0 16px rgba(255, 75, 43, 0.22), var(--shadow-md);
            }
            16% {
                box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.25), 0 0 16px rgba(255, 153, 0, 0.22), var(--shadow-md);
            }
            33% {
                box-shadow: 0 0 0 3px rgba(255, 220, 0, 0.25), 0 0 16px rgba(255, 220, 0, 0.22), var(--shadow-md);
            }
            50% {
                box-shadow: 0 0 0 3px rgba(16, 204, 82, 0.25), 0 0 16px rgba(16, 204, 82, 0.22), var(--shadow-md);
            }
            66% {
                box-shadow: 0 0 0 3px rgba(0, 176, 255, 0.25), 0 0 16px rgba(0, 176, 255, 0.22), var(--shadow-md);
            }
            83% {
                box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), 0 0 16px rgba(168, 85, 247, 0.22), var(--shadow-md);
            }
        }
        @keyframes rainbow-icon-hue {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }
        .search-input-wrapper.rainbow-border:focus-within,
        .search-input-wrapper.rainbow-border {
            border: 2px solid transparent !important;
            background-image: 
                linear-gradient(var(--card-bg), var(--card-bg)), 
                linear-gradient(90deg, #ff3366, #ff7700, #ffea00, #00e676, #00b0ff, #7c4dff, #ff007f, #ff3366) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            -webkit-background-clip: padding-box, border-box !important;
            background-size: 100% 100%, 300% 100% !important;
            animation: rainbow-border-slide 2.8s linear infinite, rainbow-border-glow 2.8s linear infinite !important;
        }
        .search-input-wrapper.rainbow-border:focus-within .search-icon {
            animation: rainbow-icon-hue 2.8s linear infinite;
            color: #ff3366;
        }
        .search-icon { 
            position: absolute; 
            left: 18px; 
            width: 22px; 
            height: 22px; 
            color: var(--meta-text); 
            pointer-events: none;
            transition: color 0.15s ease;
        }
        .search-input-wrapper:focus-within .search-icon { color: var(--accent-color); }
        .search-box { 
            width: 100%; 
            padding: 16px 110px 16px 52px; 
            font-family: inherit;
            font-size: 17px; 
            border: none; 
            background: transparent; 
            color: var(--text-color); 
            outline: none; 
        }
        .search-box::placeholder { color: var(--meta-text); opacity: 0.8; }
        .search-shortcuts { 
            position: absolute; 
            right: 14px; 
            display: flex; 
            align-items: center; 
            gap: 8px;
        }
        .search-kbd { 
            font-family: inherit;
            font-size: 11px; 
            font-weight: 700; 
            background: var(--kbd-bg); 
            color: var(--kbd-text); 
            border: 1px solid var(--kbd-border); 
            padding: 3px 7px; 
            border-radius: 5px; 
            line-height: 1; 
            box-shadow: 0 1px 0 var(--kbd-border);
            user-select: none;
        }
        .search-clear-btn {
            background: none;
            border: none;
            color: var(--meta-text);
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            border-radius: 50%;
            transition: color 0.15s ease;
        }
        .search-clear-btn:hover { color: var(--text-color); }

        /* Live Search Suggestions Dropdown */
        .suggestions-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: var(--shadow-hover);
            z-index: 1000;
            overflow: hidden;
            max-height: 380px;
            overflow-y: auto;
            display: none;
        }
        .suggestions-dropdown.active {
            display: block;
        }
        .suggestion-item {
            padding: 11px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-subtle);
            transition: background-color 0.12s ease;
            text-decoration: none;
            color: var(--text-color);
        }
        .suggestion-item:last-child {
            border-bottom: none;
        }
        .suggestion-item:hover, .suggestion-item.selected {
            background-color: var(--card-hover);
        }
        .suggestion-item.selected {
            border-left: 3px solid var(--accent-color);
            padding-left: 13px;
        }
        .suggestion-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }
        .suggestion-icon {
            color: var(--meta-text);
            font-size: 14px;
            flex-shrink: 0;
        }
        .suggestion-title {
            font-size: 14.5px;
            font-weight: 500;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .suggestion-title mark {
            background: transparent;
            color: var(--accent-color);
            font-weight: 700;
        }
        .suggestion-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .suggestion-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 10px;
            background: var(--accent-subtle);
            color: var(--accent-color);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .suggestion-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
            transform: translateX(4px);
        }
        .suggestion-item:hover .suggestion-actions,
        .suggestion-item:focus-within .suggestion-actions,
        .suggestion-item.selected .suggestion-actions {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(0);
        }
        .suggestion-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            padding: 0;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background-color: var(--card-bg);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
            flex-shrink: 0;
            text-decoration: none;
        }
        .suggestion-action-btn:hover {
            background-color: var(--panel-bg);
            border-color: var(--accent-color);
            color: var(--accent-color);
            transform: scale(1.06);
        }
        .suggestion-action-btn:active {
            transform: scale(0.94);
        }
        .suggestion-action-btn svg {
            width: 13px;
            height: 13px;
            display: block;
        }
        .suggestion-bookmark-btn.bookmarked {
            color: var(--accent-color);
            border-color: var(--accent-color);
            background-color: var(--accent-subtle);
        }
        .suggestion-bookmark-btn.bookmarked svg {
            fill: currentColor;
        }
        .suggestion-action-btn.copied {
            background-color: var(--accent-subtle) !important;
            border-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
        }

        /* Global Toast Notifications */
        #nemaToastContainer {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }
        .nema-toast {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-radius: 8px;
            background: var(--card-bg, #ffffff);
            color: var(--text-color, #1e293b);
            border: 1px solid var(--border-color, #e2e8f0);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
            font-size: 13.5px;
            font-weight: 500;
            pointer-events: auto;
            animation: nemaToastSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            max-width: 360px;
        }
        .nema-toast.toast-success {
            border-left: 4px solid #10b981;
        }
        .nema-toast.toast-info {
            border-left: 4px solid var(--accent-color, #3b82f6);
        }
        .nema-toast.toast-warning {
            border-left: 4px solid #f59e0b;
        }
        .nema-toast.toast-error {
            border-left: 4px solid #ef4444;
        }
        .nema-toast-icon {
            display: inline-flex;
            align-items: center;
            color: var(--accent-color, #3b82f6);
            flex-shrink: 0;
        }
        .nema-toast.toast-success .nema-toast-icon { color: #10b981; }
        .nema-toast.toast-warning .nema-toast-icon { color: #f59e0b; }
        .nema-toast.toast-error .nema-toast-icon { color: #ef4444; }
        .nema-toast-msg {
            flex: 1;
            line-height: 1.4;
        }
        .nema-toast-fade-out {
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        @keyframes nemaToastSlideIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Search Results Summary Header */
        .search-summary-row { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 20px; 
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }
        .search-count-badge { 
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 15px; 
            font-weight: 600; 
            color: var(--text-secondary); 
        }
        .search-count-badge strong { color: var(--text-color); }

        /* Recommended Categories Container */
        .categories-container { 
            background-color: var(--card-bg); 
            border: 1px solid var(--border-color); 
            border-radius: 8px; 
            padding: 10px 14px; 
            margin-bottom: 14px; 
            box-shadow: var(--shadow-sm);
        }
        .categories-container h4 { 
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0 0 6px 0; 
            font-size: 11px; 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 0.06em; 
            color: var(--meta-text); 
        }
        .category-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .chip-category { 
            background-color: var(--cat-bg); 
            color: var(--cat-text); 
            padding: 4px 12px; 
            border-radius: 14px; 
            font-size: 12px; 
            font-weight: 600; 
            text-decoration: none; 
            transition: transform 0.12s ease, box-shadow 0.12s ease;
        }
        .chip-category:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
        .chip-section { 
            background-color: var(--sec-bg); 
            color: var(--sec-text); 
            padding: 4px 12px; 
            border-radius: 14px; 
            font-size: 12px; 
            font-weight: 600; 
            text-decoration: none; 
            transition: transform 0.12s ease, box-shadow 0.12s ease;
        }
        .chip-section:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

        /* Results List & Cards */
        .results { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
        [data-density="compact"] .results { gap: 8px; margin-top: 6px; }
        
        .result-item { 
            background-color: var(--card-bg); 
            border: 1px solid var(--border-color); 
            padding: 22px 26px; 
            border-radius: 10px; 
            box-shadow: var(--shadow-sm);
            transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            outline: none;
            animation: nemaFadeSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
            animation-delay: min(calc(var(--stagger-index, 0) * 35ms), 300ms);
        }
        .result-item:hover { 
            transform: translateY(-2px); 
            box-shadow: var(--shadow-hover), 0 0 16px -4px var(--accent-subtle); 
            border-color: var(--accent-color);
        }

        /* Subtle Color Accents & Distinctive Badges for Help Center (HC) and Support Center (SC) */
        .result-item[data-source="internal"] {
            background: linear-gradient(0deg, rgba(79, 70, 229, 0.035), rgba(79, 70, 229, 0.035)), var(--card-bg);
            border-left: 3.5px solid #4f46e5;
            border-color: rgba(79, 70, 229, 0.18);
        }
        .result-item[data-source="external"] {
            background: linear-gradient(0deg, rgba(16, 185, 129, 0.045), rgba(16, 185, 129, 0.045)), var(--card-bg);
            border-left: 3.5px solid #10b981;
            border-color: rgba(16, 185, 129, 0.22);
        }
        [data-theme="dark"] .result-item[data-source="internal"] {
            background: linear-gradient(0deg, rgba(99, 102, 241, 0.07), rgba(99, 102, 241, 0.07)), var(--card-bg);
            border-left-color: #818cf8;
            border-color: rgba(99, 102, 241, 0.25);
        }
        [data-theme="dark"] .result-item[data-source="external"] {
            background: linear-gradient(0deg, rgba(16, 185, 129, 0.09), rgba(16, 185, 129, 0.09)), var(--card-bg);
            border-left-color: #34d399;
            border-color: rgba(16, 185, 129, 0.3);
        }
        [data-theme="high-contrast"] .result-item[data-source="internal"] {
            border-left: 4px solid var(--accent-color, #facc15) !important;
        }
        [data-theme="high-contrast"] .result-item[data-source="external"] {
            border-left: 4px solid var(--link-color, #38bdf8) !important;
        }

        .hc-source-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            background: rgba(79, 70, 229, 0.12);
            color: #4f46e5;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-right: 8px;
            vertical-align: middle;
        }
        .sc-source-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            background: rgba(16, 185, 129, 0.15);
            color: #059669;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-right: 8px;
            vertical-align: middle;
        }
        [data-theme="dark"] .hc-source-badge {
            background: rgba(99, 102, 241, 0.2);
            color: #818cf8;
        }
        [data-theme="dark"] .sc-source-badge {
            background: rgba(16, 185, 129, 0.25);
            color: #34d399;
        }

        /* Compact Mode Single-Row Result Cards */
        [data-density="compact"] .result-item {
            padding: 8px 16px;
            border-radius: 8px;
            box-shadow: none;
            border-color: var(--border-color);
            min-height: 42px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        [data-density="compact"] .result-item:hover {
            transform: translateY(-1px);
            border-color: var(--accent-color);
            box-shadow: var(--shadow-sm);
        }

        /* Accessible Keyboard Scanning Focus States */
        .result-item:focus-visible,
        .external-item:focus-visible,
        .result-item.kb-nav-active,
        .external-item.kb-nav-active {
            outline: 2px solid var(--accent-color) !important;
            outline-offset: 2px !important;
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 3px var(--accent-subtle), var(--shadow-hover) !important;
            transform: translateY(-1px);
        }

        .result-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
        [data-density="compact"] .result-header-row {
            align-items: center;
            gap: 12px;
            margin-bottom: 0;
        }
        
        .result-header-row h3 { 
            margin: 0; 
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 18px; 
            font-weight: 700;
            line-height: 1.35;
        }
        [data-density="compact"] .result-header-row h3 {
            font-size: 14.5px;
            font-weight: 600;
            line-height: 1.35;
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .result-header-row h3 a { 
            color: var(--link-color); 
            text-decoration: none; 
            transition: color 0.12s ease; 
        }
        .result-header-row h3 a:hover { color: var(--link-hover); text-decoration: underline; }
        [data-density="compact"] .result-header-row h3 a.kb-title-link {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 100%;
        }

        .result-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
        [data-density="compact"] .result-actions { gap: 6px; }

        /* Compact & Expanded Action Buttons */
        .action-icon-btn, .copy-btn, .copy-intercom-btn, .bookmark-btn { 
            background: var(--bg-color); 
            border: 1px solid var(--border-color); 
            color: var(--text-color); 
            cursor: pointer; 
            padding: 5px 12px; 
            border-radius: 6px; 
            font-family: inherit;
            font-size: 13px; 
            font-weight: 600; 
            white-space: nowrap; 
            transition: all 0.12s ease; 
            display: inline-flex;
            align-items: center;
            gap: 5px;
            user-select: none;
            text-decoration: none;
        }
        .action-icon-btn svg, .copy-btn svg, .copy-intercom-btn svg, .bookmark-btn svg {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }
        .copy-btn:hover { 
            background: var(--border-color); 
            border-color: var(--meta-text);
        }
        .copy-intercom-btn:hover {
            background: var(--border-color);
            border-color: var(--link-color);
            color: var(--link-color);
        }
        .bookmark-btn:hover {
            background: var(--border-color);
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .bookmark-btn.bookmarked {
            background: var(--accent-subtle);
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .bookmark-btn.bookmarked:hover {
            background: var(--accent-hover);
            color: #ffffff;
            border-color: var(--accent-hover);
        }

        /* High-Density Action Buttons */
        [data-density="compact"] .action-icon-btn,
        [data-density="compact"] .copy-btn,
        [data-density="compact"] .copy-intercom-btn,
        [data-density="compact"] .bookmark-btn,
        [data-density="compact"] .nexus-btn {
            padding: 3px 8px;
            font-size: 12px;
            height: 26px;
            border-radius: 5px;
            gap: 4px;
        }
        [data-density="compact"] .nexus-btn span {
            display: none;
        }

        /* Mobile Viewport: Icon-Only Action Buttons for Both Compact and Expanded Result Views */
        @media (max-width: 768px), (max-width: 640px) {
            .result-actions .nexus-btn span,
            .result-actions .bookmark-btn span,
            .result-actions .copy-btn span,
            .result-actions .copy-intercom-btn span,
            .result-actions .action-icon-btn span,
            .result-actions button span,
            .result-actions a.nexus-btn span {
                display: none !important;
            }
            .result-actions .nexus-btn,
            .result-actions .bookmark-btn,
            .result-actions .copy-btn,
            .result-actions .copy-intercom-btn,
            .result-actions .action-icon-btn,
            .result-actions button {
                padding: 6px 8px !important;
                gap: 0 !important;
                min-width: 32px;
                height: 32px;
                justify-content: center;
                display: inline-flex !important;
                align-items: center;
            }
            .result-actions .nexus-btn svg,
            .result-actions .bookmark-btn svg,
            .result-actions .copy-btn svg,
            .result-actions .copy-intercom-btn svg {
                margin: 0 !important;
            }
            [data-density="compact"] .result-actions .nexus-btn,
            [data-density="compact"] .result-actions .bookmark-btn,
            [data-density="compact"] .result-actions .copy-btn,
            [data-density="compact"] .result-actions .copy-intercom-btn,
            [data-density="compact"] .result-actions .action-icon-btn,
            [data-density="compact"] .result-actions button {
                padding: 4px 6px !important;
                min-width: 26px;
                height: 26px;
            }
            [data-density="compact"] .result-actions .nexus-btn span,
            [data-density="compact"] .result-actions .bookmark-btn span,
            [data-density="compact"] .result-actions .copy-btn span,
            [data-density="compact"] .result-actions .copy-intercom-btn span,
            [data-density="compact"] .result-actions button span {
                display: none !important;
            }
        }

        .nexus-btn { 
            background: var(--bg-color); 
            border: 1px solid var(--border-color); 
            padding: 5px 8px; 
            border-radius: 6px; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            cursor: pointer; 
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
            opacity: 0.85; 
            text-decoration: none; 
            color: var(--accent-color);
            gap: 5px;
            font-size: 13px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            user-select: none;
            will-change: transform, box-shadow;
        }
        .nexus-btn:hover { 
            opacity: 1; 
            background: var(--card-bg); 
            border-color: var(--accent-color); 
            color: var(--accent-color);
            transform: translateY(-1px);
            box-shadow: 0 2px 6px -1px var(--accent-subtle);
        }
        .nexus-icon { 
            width: 14px; 
            height: 14px; 
            display: block; 
            flex-shrink: 0; 
            transform-origin: center center;
            transition: transform 0.2s ease;
        }
        
        /* AI Generation & Spinning Animation on Nexus Button */
        @keyframes nexus-ai-spin {
            0% { 
                transform: rotate(0deg) scale(1); 
                filter: drop-shadow(0 0 2px var(--accent-color));
            }
            35% { 
                transform: rotate(135deg) scale(1.32); 
                filter: drop-shadow(0 0 8px var(--accent-color));
            }
            70% { 
                transform: rotate(270deg) scale(1.18); 
                filter: drop-shadow(0 0 6px var(--accent-color));
            }
            100% { 
                transform: rotate(360deg) scale(1); 
                filter: drop-shadow(0 0 2px var(--accent-color));
            }
        }
        @keyframes nexus-ai-pulse-glow {
            0%, 100% {
                box-shadow: 0 0 0 1px var(--accent-color), 0 0 8px var(--accent-subtle);
            }
            50% {
                box-shadow: 0 0 0 2px var(--accent-color), 0 0 16px var(--accent-subtle);
            }
        }
        @keyframes nexus-ai-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        @keyframes nexus-ai-text-fade {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }
        .nexus-btn.is-generating {
            pointer-events: none;
            background: linear-gradient(90deg, var(--bg-color) 0%, var(--accent-subtle) 50%, var(--bg-color) 100%) !important;
            background-size: 200% 100% !important;
            border-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
            transform: scale(0.97);
            animation: nexus-ai-pulse-glow 0.55s ease-in-out infinite, nexus-ai-shimmer 0.75s linear infinite;
        }
        .nexus-btn.is-generating .nexus-icon {
            animation: nexus-ai-spin 0.55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        .nexus-btn.is-generating span {
            animation: nexus-ai-text-fade 0.55s ease-in-out infinite;
            letter-spacing: 0.2px;
        }
        
        .result-item p {
            margin: 0;
            font-size: 14.5px;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        /* Highlight Tokens */
        .highlight-token { 
            background-color: var(--highlight-bg); 
            color: var(--highlight-text); 
            font-weight: 600; 
            padding: 1px 4px; 
            border-radius: 4px; 
        }

        /* Document Badge Metadata Presentation Rules */
        .article-meta-badge { 
            font-size: 13px; 
            color: var(--meta-text); 
            font-weight: 500; 
            margin-left: 8px; 
            white-space: nowrap; 
            font-family: 'Inter', sans-serif;
            display: inline-flex;
            align-items: center;
        }
        [data-density="compact"] .article-meta-badge {
            font-size: 11.5px;
            margin-left: 6px;
            opacity: 0.85;
            flex-shrink: 0;
        }
        .popularity-meter {
            display: inline-flex;
            align-items: flex-end;
            gap: 2px;
            height: 12px;
            margin-left: 6px;
            vertical-align: middle;
            cursor: help;
        }
        .signal-bar {
            width: 3px;
            border-radius: 1px;
            background-color: var(--border-color);
            transition: background-color 0.15s ease;
        }
        .signal-bar.bar-1 { height: 3px; }
        .signal-bar.bar-2 { height: 6px; }
        .signal-bar.bar-3 { height: 9px; }
        .signal-bar.bar-4 { height: 12px; }
        .signal-bar.active {
            background-color: var(--accent-color);
        }

        /* Search Summary Row Controls & Keyboard Hints */
        .search-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 12px;
        }
        .search-summary-controls {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .density-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.15s ease;
            user-select: none;
        }
        .density-toggle-btn:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
            background: var(--panel-bg);
        }
        .kb-hint-bar {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            color: var(--meta-text);
            font-family: 'Inter', sans-serif;
        }
        .kb-hint-bar kbd {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-bottom-width: 2px;
            border-radius: 4px;
            padding: 1px 5px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-color);
        }
        .kb-hint-bar .kb-sep {
            opacity: 0.4;
            margin: 0 1px;
        }
        @media (max-width: 768px) {
            .kb-hint-bar { display: none; }
        }

        /* Empty State */
        .empty-state-box {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 48px 32px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            margin-top: 10px;
        }
        .empty-state-icon {
            font-size: 40px;
            margin-bottom: 12px;
        }
        .empty-state-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 20px;
            font-weight: 700;
            margin: 0 0 8px 0;
            color: var(--text-color);
        }
        .empty-state-desc {
            color: var(--meta-text);
            font-size: 15px;
            max-width: 480px;
            margin: 0 auto 20px auto;
        }
        .suggestion-callout {
            display: inline-block;
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            color: var(--highlight-text);
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
        }
        .suggestion-callout a {
            color: var(--accent-color);
            font-weight: 700;
            text-decoration: underline;
        }

        /* Home Portal Layout */
        .portal-layout-grid { display: grid; grid-template-columns: 1fr 310px; gap: 24px; align-items: start; margin-top: 5px; }
        @media (max-width: 850px) { .portal-layout-grid { grid-template-columns: 1fr; } }

        .welcome-portal { 
            background-color: var(--card-bg); 
            border: 1px solid var(--border-color); 
            padding: 32px 36px; 
            border-radius: 12px; 
            box-shadow: var(--shadow-sm);
        }
        .welcome-portal h1, .welcome-portal h2 { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            font-weight: 800;
            margin-top: 0;
            color: var(--text-color);
        }
        .welcome-callout-panel {
            background-color: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 10px;
            padding: 18px 22px;
            margin-bottom: 26px;
            box-shadow: var(--shadow-sm);
        }
        .welcome-callout-panel .callout-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--accent-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .welcome-callout-panel .callout-body {
            font-size: 14.5px;
            color: var(--text-color);
            line-height: 1.6;
        }
        .welcome-callout-panel .callout-body p {
            margin: 0;
        }
        .welcome-callout-panel .callout-body a {
            color: var(--link-color);
            text-decoration: underline;
            font-weight: 600;
        }
        .welcome-callout-panel .callout-body a:hover {
            color: var(--link-hover);
        }

        /* Sidebar Notification Banner for Content Requests */
        .hc-notice-banner {
            background-color: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 10px;
            padding: 9px 12px;
            margin: 0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            box-shadow: var(--shadow-sm);
            transition: opacity 0.25s ease, transform 0.25s ease, margin-bottom 0.25s ease;
        }
        .hc-notice-content {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            font-size: 12px;
            color: var(--text-color);
            line-height: 1.45;
            flex: 1 1 auto;
        }
        .hc-notice-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-color);
            flex-shrink: 0;
            margin-top: 1px;
        }
        .hc-notice-text {
            font-size: 12px;
            color: var(--text-color);
            line-height: 1.45;
        }
        .hc-notice-text strong {
            font-weight: 700;
            font-size: 12px;
            color: var(--text-color);
        }
        .hc-notice-text a {
            color: var(--link-color);
            text-decoration: underline;
            font-weight: 600;
        }
        .hc-notice-text a:hover {
            color: var(--link-hover);
        }
        .hc-notice-close {
            background: transparent;
            border: none;
            color: var(--meta-text);
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease, color 0.15s ease;
            flex-shrink: 0;
            margin-top: -1px;
        }
        .hc-notice-close:hover {
            background: var(--border-subtle);
            color: var(--text-color);
        }
        .featured-article-card {
            background-color: var(--panel-bg);
            border: 2px solid var(--accent-color);
            border-left: 6px solid var(--accent-color);
            border-radius: 14px;
            padding: 0;
            margin-bottom: 24px;
            box-shadow: 0 10px 25px -5px var(--accent-subtle), var(--shadow-md);
            overflow: hidden;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .featured-article-card:hover {
            box-shadow: 0 14px 30px -5px var(--accent-subtle), var(--shadow-hover);
        }
        .featured-article-header {
            background-color: var(--accent-subtle);
            border-bottom: 1px solid var(--panel-border);
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }
        .featured-article-header h3 {
            margin: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--accent-color);
        }
        .featured-article-section-label {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .featured-article-body {
            display: flex;
            align-items: center;
            gap: 22px;
            padding: 22px 24px;
            background: linear-gradient(135deg, var(--panel-bg) 0%, var(--card-bg) 100%);
        }
        .featured-article-media {
            flex-shrink: 0;
            width: 160px;
            height: 120px;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--panel-border);
            box-shadow: var(--shadow-sm);
            background-color: #0f172a;
        }
        .featured-article-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .featured-article-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .featured-article-title-link {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 19px;
            font-weight: 800;
            color: var(--text-color);
            text-decoration: none;
            line-height: 1.35;
            display: inline-block;
            transition: color 0.15s ease;
        }
        .featured-article-title-link:hover {
            color: var(--accent-color);
        }
        .featured-article-excerpt {
            margin: 0;
            font-size: 13.5px;
            color: var(--text-secondary);
            line-height: 1.55;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-left: 3px solid var(--accent-color);
            border-radius: 6px;
            padding: 10px 14px;
        }
        @media (max-width: 640px) {
            .featured-article-body {
                flex-direction: column;
                align-items: flex-start;
                padding: 18px;
            }
            .featured-article-media {
                width: 100%;
                height: 130px;
            }
        }
        .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 24px; }
        .new-articles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
        @media (max-width: 600px) { .new-articles-grid { grid-template-columns: 1fr; } }
        .dashboard-card { 
            background-color: var(--card-bg); 
            border: 1px solid var(--border-color);
            border-radius: 10px; 
            padding: 20px 18px; 
            text-align: left; 
            text-decoration: none; 
            color: var(--text-color); 
            font-weight: 600; 
            font-size: 15px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.15s ease;
        }
        .dashboard-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .dashboard-card p { margin: 0; }
        .dashboard-card-arrow {
            color: var(--meta-text);
            font-size: 16px;
            transition: transform 0.15s ease, color 0.15s ease;
        }
        .dashboard-card:hover .dashboard-card-arrow {
            color: var(--accent-color);
            transform: translateX(3px);
        }
        
        /* Trending Sidebar */
        .trending-box { 
            padding: 24px; 
            background-color: var(--card-bg); 
            border: 1px solid var(--border-color); 
            border-radius: 12px; 
            box-shadow: var(--shadow-sm);
        }
        .trending-box h4 { 
            margin: 0 0 16px 0; 
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 15px; 
            font-weight: 700;
            color: var(--text-color); 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .trending-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
        .trending-item {
            display: flex;
            align-items: baseline;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            transition: background 0.12s ease;
        }
        .trending-item:hover {
            background: var(--border-subtle);
        }
        .trending-rank {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: var(--accent-color);
            width: 16px;
            flex-shrink: 0;
        }
        .trending-item a { 
            color: var(--text-color); 
            text-decoration: none; 
            font-weight: 500; 
            font-size: 14px; 
            line-height: 1.4; 
            flex-grow: 1;
            transition: color 0.12s ease;
        }
        .trending-item:hover a { color: var(--link-color); }

        /* Floating Back to Top Button */
        .scroll-top-btn { 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            background-color: var(--btn-bg); 
            color: var(--btn-text); 
            border: 1px solid var(--border-color); 
            width: 44px; 
            height: 44px; 
            border-radius: 50%; 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 18px; 
            box-shadow: var(--shadow-md); 
            opacity: 0; 
            visibility: hidden; 
            pointer-events: none; 
            transition: opacity 0.2s, visibility 0.2s, transform 0.15s, background-color 0.15s; 
            z-index: 9999; 
        }
        .scroll-top-btn.visible { opacity: 1; visibility: visible; pointer-events: auto; }
        .scroll-top-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
        .scroll-top-btn:active { transform: translateY(0); }

        /* Search Scope Selector Tabs */
        .search-scope-tabs {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            margin-bottom: 6px;
            padding: 3px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            max-width: 100%;
            flex-wrap: wrap;
        }
        .scope-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 20px;
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
            outline: none;
            white-space: nowrap;
        }
        .scope-tab:hover {
            color: var(--text-color);
            background: var(--card-hover);
        }
        .scope-tab:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 1px;
        }
        .scope-tab.active {
            background: var(--accent-subtle);
            border-color: var(--accent-color);
            color: var(--accent-color);
            box-shadow: var(--shadow-sm);
        }
        .scope-tab .scope-count {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            padding: 1px 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text-secondary);
            line-height: 1.3;
        }
        .scope-tab.active .scope-count {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }

        /* Split Pill for Scope Tabs */
        .scope-tab-split {
            position: relative;
            display: inline-flex;
            align-items: center;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 20px;
            color: var(--text-secondary);
            transition: all 0.15s ease;
            user-select: none;
            white-space: nowrap;
        }
        .scope-tab-split:hover {
            color: var(--text-color);
            background: var(--card-hover);
        }
        .scope-tab-split.active {
            background: rgba(79, 70, 229, 0.1) !important;
            border-color: rgba(79, 70, 229, 0.3) !important;
            color: #4f46e5 !important;
            box-shadow: 0 1px 3px rgba(79, 70, 229, 0.15) !important;
        }
        .scope-tab-split.active .scope-count {
            border-color: rgba(79, 70, 229, 0.3) !important;
            color: #4f46e5 !important;
        }
        .scope-tab[data-scope="external"].active {
            background: rgba(16, 185, 129, 0.12) !important;
            border-color: rgba(16, 185, 129, 0.35) !important;
            color: #059669 !important;
            box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
        }
        .scope-tab[data-scope="external"].active .scope-count {
            border-color: rgba(16, 185, 129, 0.35) !important;
            color: #059669 !important;
        }
        [data-theme="dark"] .scope-tab-split.active {
            background: rgba(99, 102, 241, 0.2) !important;
            border-color: rgba(99, 102, 241, 0.4) !important;
            color: #818cf8 !important;
        }
        [data-theme="dark"] .scope-tab-split.active .scope-count {
            border-color: rgba(99, 102, 241, 0.4) !important;
            color: #818cf8 !important;
        }
        [data-theme="dark"] .scope-tab[data-scope="external"].active {
            background: rgba(16, 185, 129, 0.22) !important;
            border-color: rgba(16, 185, 129, 0.45) !important;
            color: #34d399 !important;
        }
        [data-theme="dark"] .scope-tab[data-scope="external"].active .scope-count {
            border-color: rgba(16, 185, 129, 0.45) !important;
            color: #34d399 !important;
        }
        .scope-tab-main {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 8px 5px 14px;
            background: transparent;
            border: none;
            border-radius: 20px 0 0 20px;
            color: inherit;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            outline: none;
            transition: color 0.15s ease;
        }
        .scope-tab-main:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 1px;
        }
        .scope-tab-split .scope-count {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            padding: 1px 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text-secondary);
            line-height: 1.3;
        }
        .scope-tab-split.active .scope-count {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .scope-section-clear-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.08);
            border: none;
            color: inherit;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            margin: 0 2px;
            padding: 0;
            transition: background 0.15s ease;
        }
        .scope-section-clear-btn:hover {
            background: rgba(0, 0, 0, 0.2);
        }
        .scope-tab-dropdown-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 10px 5px 6px;
            background: transparent;
            border: none;
            border-left: 1px solid var(--border-color);
            border-radius: 0 20px 20px 0;
            color: inherit;
            cursor: pointer;
            outline: none;
            transition: all 0.15s ease;
        }
        .scope-tab-split.active .scope-tab-dropdown-btn {
            border-left-color: var(--accent-subtle);
        }
        .scope-tab-dropdown-btn:hover {
            background: rgba(0, 0, 0, 0.04);
        }
        .scope-tab-dropdown-btn:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 1px;
        }
        .scope-tab-dropdown-btn.menu-open svg {
            transform: rotate(180deg);
        }
        .scope-tab-dropdown-btn svg {
            transition: transform 0.15s ease;
        }

        /* Scope Section Popover Menu */
        .scope-section-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 250px;
            max-height: 320px;
            overflow-y: auto;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            z-index: 100;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .scope-section-menu-header {
            padding: 6px 10px 4px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 4px;
        }
        .scope-section-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 7px 10px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: var(--text-color);
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 500;
            text-align: left;
            cursor: pointer;
            transition: background 0.12s ease;
            outline: none;
        }
        .scope-section-option:hover,
        .scope-section-option:focus-visible {
            background: var(--card-hover);
        }
        .scope-section-option.selected {
            background: var(--accent-subtle);
            color: var(--accent-color);
            font-weight: 700;
        }
        .scope-section-option .option-check {
            flex-shrink: 0;
            margin-left: 8px;
            color: var(--accent-color);
        }

        /* High-contrast theme overrides for split pill */
        [data-theme="high-contrast"] .scope-tab-split {
            border: 1.5px solid #64748b !important;
            background: #0f172a !important;
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .scope-tab-split.active {
            background: #facc15 !important;
            color: #030712 !important;
            border-color: #facc15 !important;
            font-weight: 800 !important;
        }
        [data-theme="high-contrast"] .scope-tab-split .scope-tab-dropdown-btn {
            border-left: 1px solid currentColor !important;
        }
        [data-theme="high-contrast"] .scope-section-menu {
            border: 1.5px solid #facc15 !important;
            background: #0f172a !important;
        }
        [data-theme="high-contrast"] .scope-section-option {
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .scope-section-option.selected {
            background: #facc15 !important;
            color: #030712 !important;
            font-weight: 800 !important;
        }

        /* Unified Search Results Stream & Source Badges */
        .source-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 10px;
            text-transform: none;
            letter-spacing: 0.04em;
            user-select: none;
            vertical-align: middle;
            line-height: 1.3;
        }
        .source-badge.internal-badge {
            background: var(--accent-subtle);
            color: var(--accent-color);
            border: 1px solid var(--border-color);
        }
        .source-badge.external-badge {
            background: rgba(2, 132, 199, 0.1);
            color: #0284c7;
            border: 1px solid rgba(2, 132, 199, 0.28);
        }
        [data-theme="dark"] .source-badge.external-badge {
            background: rgba(2, 132, 199, 0.2);
            color: #38bdf8;
            border-color: rgba(2, 132, 199, 0.4);
        }
        [data-theme="high-contrast"] .source-badge.internal-badge {
            background: rgba(250, 204, 21, 0.15) !important;
            color: #facc15 !important;
            border: 1px solid #facc15 !important;
        }
        [data-theme="high-contrast"] .source-badge.external-badge {
            background: rgba(56, 189, 248, 0.15) !important;
            color: #38bdf8 !important;
            border: 1px solid #38bdf8 !important;
        }

        .external-pill {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 6px;
            background: rgba(2, 132, 199, 0.08);
            color: #0284c7;
            border: 1px solid rgba(2, 132, 199, 0.2);
            white-space: nowrap;
        }
        [data-theme="dark"] .external-pill {
            background: rgba(2, 132, 199, 0.18);
            color: #38bdf8;
            border-color: rgba(2, 132, 199, 0.35);
        }
        [data-theme="high-contrast"] .external-pill {
            background: rgba(56, 189, 248, 0.15) !important;
            color: #38bdf8 !important;
            border: 1px solid #38bdf8 !important;
        }

        /* Search Layout with Sidebar */
        .search-layout-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 26px;
            align-items: start;
            margin-top: 6px;
        }
        .search-layout-grid.scope-external-only {
            grid-template-columns: minmax(0, 1fr);
        }
        .search-layout-grid.scope-internal-only {
            grid-template-columns: minmax(0, 1fr);
        }
        @media (max-width: 980px) {
            .search-layout-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 20px;
            }
        }
        @media (min-width: 1280px) {
            body.has-search-sidebar .container {
                max-width: 1240px;
            }
        }

        .search-main-column {
            min-width: 0;
        }
        .search-sidebar-column {
            min-width: 0;
        }

        /* External Support Center Results */
        .external-results-container {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px dashed var(--border-color);
        }
        [data-density="compact"] .external-results-container {
            margin-top: 20px;
            padding-top: 16px;
        }
        .external-results-sidebar-container {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px 22px;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 20px;
        }
        .external-sidebar-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 14px;
            margin-bottom: 16px;
        }
        .external-sidebar-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .external-sidebar-status {
            font-size: 12px;
            color: var(--meta-text);
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .external-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }
        [data-density="compact"] .external-header-row {
            margin-bottom: 10px;
        }
        .sc-badge {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            background: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
            padding: 2px 7px;
            border-radius: 6px;
            letter-spacing: 0.04em;
            display: inline-flex;
            align-items: center;
        }
        [data-theme="dark"] .sc-badge {
            background: rgba(255, 255, 255, 0.08);
            color: #cbd5e1;
            border-color: rgba(255, 255, 255, 0.15);
        }
        .external-badge {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            background: #e0f2fe;
            color: #0284c7;
            padding: 2px 8px;
            border-radius: 6px;
            letter-spacing: 0.04em;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        [data-theme="dark"] .external-badge {
            background: rgba(2, 132, 199, 0.2);
            color: #38bdf8;
        }
        .external-item {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 18px 22px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            position: relative;
            outline: none;
        }
        .external-item:hover {
            border-color: var(--link-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        /* Compact Mode External Result Cards */
        [data-density="compact"] .external-item {
            padding: 8px 16px;
            border-radius: 8px;
            margin-bottom: 8px;
            box-shadow: none;
            border-color: var(--border-color);
            min-height: 42px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        [data-density="compact"] .external-item:hover {
            transform: translateY(-1px);
            border-color: var(--accent-color);
            box-shadow: var(--shadow-sm);
        }

        .external-item-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 6px;
        }
        [data-density="compact"] .external-item-header {
            align-items: center;
            gap: 12px;
            margin-bottom: 0;
            flex-wrap: nowrap;
        }

        .external-item-title {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
        }
        [data-density="compact"] .external-item-title {
            font-size: 14.5px;
            font-weight: 600;
            line-height: 1.35;
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .external-item-title a {
            color: var(--link-color);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .external-item-title a:hover {
            color: var(--link-hover);
            text-decoration: underline;
        }
        [data-density="compact"] .external-item-title a.kb-title-link {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 100%;
        }

        .external-item-desc {
            margin: 0 0 10px 0;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .external-direct-card {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 10px;
            padding: 14px 18px;
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }
        [data-density="compact"] .external-direct-card {
            padding: 10px 16px;
            margin-top: 10px;
            border-radius: 8px;
        }
        .external-direct-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--accent-color);
            color: #ffffff !important;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.15s ease;
        }
        [data-density="compact"] .external-direct-btn {
            padding: 5px 12px;
            font-size: 12px;
        }

        /* Sidebar Specific Result Card Adjustments */
        .search-sidebar-column .external-item {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 10px;
            padding: 13px 15px;
            margin-bottom: 12px;
            box-shadow: none;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .search-sidebar-column .external-item:hover {
            border-color: var(--link-color);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }
        .search-sidebar-column .external-item-header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 6px;
        }
        .search-sidebar-column .external-item-title {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
            margin: 0;
        }
        .search-sidebar-column .external-item-title a {
            color: var(--link-color);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .search-sidebar-column .external-item-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 6px;
            margin-top: 2px;
        }
        .search-sidebar-column .external-item-desc {
            font-size: 12.5px;
            line-height: 1.45;
            color: var(--text-secondary);
            margin: 6px 0 8px 0;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .search-sidebar-column .external-direct-card {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 14px;
            margin-top: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .search-sidebar-column .external-direct-card .external-direct-btn {
            align-self: flex-start;
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Scope External Only (Full Width Mode) */
        .scope-external-only .search-sidebar-column .external-results-sidebar-container {
            position: static;
            padding: 24px;
        }
        .scope-external-only .search-sidebar-column .external-item {
            background: var(--card-bg);
            border-color: var(--border-color);
            padding: 18px 22px;
            margin-bottom: 14px;
        }
        .scope-external-only .search-sidebar-column .external-item-header {
            flex-direction: row;
            align-items: baseline;
            justify-content: space-between;
        }
        .scope-external-only .search-sidebar-column .external-item-title {
            font-size: 16px;
        }
        .scope-external-only .search-sidebar-column .external-item-desc {
            font-size: 14px;
            -webkit-line-clamp: unset;
            display: block;
        }
        .scope-external-only .search-sidebar-column .external-direct-card {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-radius: 6px;
        }

        /* Full Width Dedicated Tab Pane for External Support Center Results */
        .external-results-tab-section {
            width: 100%;
            margin-top: 18px;
        }
        .external-results-tab-section .results {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .external-results-tab-section .external-item {
            width: 100%;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 18px 22px;
            margin-bottom: 0;
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        }
        .external-results-tab-section .external-item:hover {
            border-color: var(--link-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }
        [data-density="compact"] .external-results-tab-section .external-item {
            padding: 8px 16px;
            border-radius: 8px;
            min-height: 42px;
        }
        [data-density="compact"] .external-results-tab-section .results {
            gap: 8px;
        }
        .external-direct-btn:hover {
            background: var(--accent-hover);
        }
        .external-spinner {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid var(--accent-color);
            border-top-color: transparent;
            border-radius: 50%;
            animation: extSpin 0.7s linear infinite;
        }
        @keyframes extSpin {
            to { transform: rotate(360deg); }
        }

        /* Disable Animations Mode - Comprehensive suppression of all animations and transitions */
        [data-theme="high-contrast"] *,
        [data-theme="high-contrast"] *::before,
        [data-theme="high-contrast"] *::after,
        html[data-disable-animations="true"] *,
        html[data-disable-animations="true"] *::before,
        html[data-disable-animations="true"] *::after,
        body[data-animations="disabled"] *,
        body[data-animations="disabled"] *::before,
        body[data-animations="disabled"] *::after,
        body.disable-animations *,
        body.disable-animations *::before,
        body.disable-animations *::after {
            animation: none !important;
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition: none !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }

        /* Explicit overrides for rainbow animation and animated gradients */
        html[data-disable-animations="true"] .search-input-wrapper.rainbow-border,
        html[data-disable-animations="true"] .search-input-wrapper.rainbow-border:focus-within,
        body[data-animations="disabled"] .search-input-wrapper.rainbow-border,
        body[data-animations="disabled"] .search-input-wrapper.rainbow-border:focus-within,
        body.disable-animations .search-input-wrapper.rainbow-border,
        body.disable-animations .search-input-wrapper.rainbow-border:focus-within {
            animation: none !important;
            background-image: none !important;
            background: var(--card-bg) !important;
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 3px var(--accent-subtle), var(--shadow-md) !important;
        }

        html[data-disable-animations="true"] .search-input-wrapper.rainbow-border:focus-within .search-icon,
        body[data-animations="disabled"] .search-input-wrapper.rainbow-border:focus-within .search-icon,
        body.disable-animations .search-input-wrapper.rainbow-border:focus-within .search-icon {
            animation: none !important;
            filter: none !important;
            color: var(--accent-color) !important;
        }

        /* Suppress mascot wiggles, pulses, and bounces */
        html[data-disable-animations="true"] .mochi-worm,
        body[data-animations="disabled"] .mochi-worm,
        body.disable-animations .mochi-worm,
        html[data-disable-animations="true"] .mochi-nametag,
        body[data-animations="disabled"] .mochi-nametag,
        body.disable-animations .mochi-nametag,
        html[data-disable-animations="true"] .nexus-btn.is-generating,
        body[data-animations="disabled"] .nexus-btn.is-generating,
        body.disable-animations .nexus-btn.is-generating,
        html[data-disable-animations="true"] .nexus-btn.is-generating .nexus-icon,
        body[data-animations="disabled"] .nexus-btn.is-generating .nexus-icon,
        body.disable-animations .nexus-btn.is-generating .nexus-icon,
        html[data-disable-animations="true"] .external-spinner,
        body[data-animations="disabled"] .external-spinner,
        body.disable-animations .external-spinner {
            animation: none !important;
            transform: none !important;
        }

        /* Hide cosmic rainbow toggle when animations are disabled */
        html[data-disable-animations="true"] #cosmicRainbowWrapper,
        body[data-animations="disabled"] #cosmicRainbowWrapper,
        body.disable-animations #cosmicRainbowWrapper {
            display: none !important;
        }

/* ==========================================================================
   SEARCH RESULTS PAGINATION & LOAD MORE STYLES
   ========================================================================== */
.load-more-section {
    text-align: center;
    margin: 36px 0 28px 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.load-more-counter {
    font-size: 13px;
    color: var(--meta-text, #64748b);
    margin: 0 0 14px 0;
    font-family: inherit;
}

.load-more-counter strong {
    color: var(--text-color, #0f172a);
    font-weight: 700;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 12px;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #0f172a);
    border: 1px solid var(--border-color, #e2e8f0);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    transition: all 0.18s ease;
}

.load-more-btn:hover {
    background: var(--accent-subtle);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn.loading {
    opacity: 0.75;
    pointer-events: none;
}

.load-more-btn.loading .load-more-icon {
    animation: nemaSpin 1s linear infinite;
}

@keyframes nemaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}