/**
 * NEMA Application - Unified Core Stylesheet
 * Location: /nema/scripts/main.css
 * Shared across Home, Settings, Profile, Admin, Intercom, Bookmarks
 */

/* ==========================================================================
   1. GLOBAL THEME DESIGN TOKENS (9 THEMES)
   ========================================================================== */

:root,
[data-theme="light"] { 
    --bg-color: #f8fafc; 
    --card-bg: #ffffff; 
    --card-hover: #ffffff;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(15, 23, 42, 0.04);
    --badge-bg: rgba(79, 70, 229, 0.08);
    --badge-text: #4f46e5;
    --success-color: #10b981; 
    --success-bg: #ecfdf5;
    --success-text: #065f46;
    --error-bg: #fef2f2; 
    --error-text: #991b1b;
    --warn-bg: #fffbeb; 
    --warn-text: #92400e; 
    --danger-btn: #dc2626;
    --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;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --badge-bg: rgba(251, 146, 60, 0.12);
    --badge-text: #fb923c;
    --success-color: #34d399;
    --success-bg: #064e3b;
    --success-text: #a7f3d0;
    --error-bg: #450a0a; 
    --error-text: #fecaca;
    --warn-bg: #451a03; 
    --warn-text: #fde68a;
    --danger-btn: #ef4444;
    --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;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(255, 255, 255, 0.06);
    --badge-bg: rgba(87, 157, 255, 0.12);
    --badge-text: #579dff;
    --success-color: #36b37e;
    --success-bg: #1c3829;
    --success-text: #abf5d1;
    --error-bg: #421f1d;
    --error-text: #ffbdad;
    --warn-bg: #382800;
    --warn-text: #ffe380;
    --danger-btn: #ff5630;
    --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;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(236, 72, 153, 0.08);
    --badge-bg: rgba(236, 72, 153, 0.12);
    --badge-text: #ec4899;
    --success-color: #10b981;
    --success-bg: #fdf2f8;
    --success-text: #065f46;
    --error-bg: #ffe4e6;
    --error-text: #9f1239;
    --warn-bg: #fffbeb;
    --warn-text: #92400e;
    --danger-btn: #f43f5e;
    --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;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(56, 189, 248, 0.08);
    --badge-bg: rgba(56, 189, 248, 0.15);
    --badge-text: #38bdf8;
    --success-color: #34d399;
    --success-bg: #0c2e28;
    --success-text: #6ee7b7;
    --error-bg: #3f1019;
    --error-text: #fda4af;
    --warn-bg: #38240b;
    --warn-text: #fde047;
    --danger-btn: #f43f5e;
    --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="geek"] {
    --bg-color: #0c1708;
    --card-bg: #14250d;
    --card-hover: #1b3312;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(24, 230, 153, 0.08);
    --badge-bg: #10540e;
    --badge-text: #18e699;
    --success-color: #18e699;
    --success-bg: #10540e;
    --success-text: #18e699;
    --error-bg: #350808;
    --error-text: #ff6b6b;
    --warn-bg: #352508;
    --warn-text: #ffd166;
    --danger-btn: #ef4444;
    --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="cosmic"] {
    --bg-color: #0B0516;
    --card-bg: #160C28;
    --card-hover: #1e1038;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(255, 68, 160, 0.1);
    --badge-bg: rgba(255, 68, 160, 0.18);
    --badge-text: #FF44A0;
    --success-color: #34d399;
    --success-bg: #132b21;
    --success-text: #6ee7b7;
    --error-bg: #3f1025;
    --error-text: #fda4af;
    --warn-bg: #3b2512;
    --warn-text: #fde047;
    --danger-btn: #f43f5e;
    --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"] .brand-name {
    color: #F3EFFB;
    background: linear-gradient(135deg, #F3EFFB 30%, #FF44A0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="nightcall"] {
    --bg-color: #08060f;
    --card-bg: rgba(18, 12, 30, 0.90);
    --card-hover: rgba(30, 16, 48, 0.96);
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: rgba(255, 20, 147, 0.18);
    --badge-bg: rgba(255, 20, 147, 0.25);
    --badge-text: #ff80bf;
    --success-color: #34d399;
    --success-bg: rgba(16, 185, 129, 0.2);
    --success-text: #6ee7b7;
    --error-bg: rgba(239, 68, 68, 0.25);
    --error-text: #fca5a5;
    --warn-bg: rgba(245, 158, 11, 0.25);
    --warn-text: #fde68a;
    --danger-btn: #ff1493;
    --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: 
        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%),
        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;
}
[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"] .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="high-contrast"] {
    --bg-color: #030712;
    --card-bg: #0f172a;
    --card-hover: #1e293b;
    --bg-card: var(--card-bg);
    --bg-hover: var(--card-hover);
    --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;
    --hover-bg: #1e293b;
    --badge-bg: #1e293b;
    --badge-text: #facc15;
    --success-color: #facc15;
    --success-bg: #0f172a;
    --success-text: #facc15;
    --error-bg: #450a0a;
    --error-text: #ffffff;
    --warn-bg: #451a03;
    --warn-text: #ffffff;
    --danger-btn: #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"] .brand-name {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Theme-specific typography bindings */
[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="stratosphere"] body,
[data-theme="stratosphere"] input,
[data-theme="stratosphere"] button,
[data-theme="stratosphere"] select,
[data-theme="stratosphere"] textarea,
[data-theme="stratosphere"] .brand-slogan {
    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="stratosphere"] h1,
[data-theme="stratosphere"] h2,
[data-theme="stratosphere"] h3,
[data-theme="stratosphere"] h4,
[data-theme="stratosphere"] .brand-name {
    font-family: 'Fredoka', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

[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"] 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;
}


/* ==========================================================================
   2. GLOBAL ACCESSIBILITY STYLES (UNIVERSAL)
   ========================================================================== */

html.a11y-underline a,
body.a11y-underline a,
[data-a11y-underline="true"] a,
[data-a11y-underline="on"] a {
    text-decoration: underline !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;
}

body[data-animations="disabled"] *,
body.disable-animations *,
[data-disable-animations="true"] *,
[data-theme="high-contrast"] * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}


/* ==========================================================================
   3. GLOBAL RESET & BASE LAYOUT
   ========================================================================== */

* {
    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; 
    width: 100%;
}


/* ==========================================================================
   4. SHARED HEADER & BRANDING MARKUP
   ========================================================================== */

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

.header-left { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.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;
}

/* Mobile responsive shared header & layout */
@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; 
    }
}

/* ==========================================================================
   8. MODERN & SMOOTH TRANSITIONS & LOADING FEEDBACK
   ========================================================================== */

/* Top Slim Gradient Progress Bar (Single Quick Pass Across Header - No Repeat) */
.nema-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    background: linear-gradient(90deg, var(--accent-color, #4f46e5), var(--link-color, #38bdf8), var(--accent-hover, #6366f1));
    background-size: 100% 100%;
    box-shadow: 0 0 10px var(--accent-color), 0 0 4px var(--link-color);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
}

.nema-top-progress.is-running,
.nema-top-progress.is-active {
    animation: nemaTopProgressOnce 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

.nema-top-progress.is-finishing,
.nema-top-progress.is-done {
    opacity: 0;
    transform: scaleX(1);
    transition: opacity 0.15s ease-out;
}

@keyframes nemaTopProgressOnce {
    0% {
        opacity: 1;
        transform: scaleX(0);
    }
    60% {
        opacity: 1;
        transform: scaleX(0.85);
    }
    85% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* Slide-Fade In for Search Cards */
@keyframes nemaFadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skeleton Shimmer Wave */
@keyframes nemaSkeletonWave {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.result-skeleton-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 22px 26px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    pointer-events: none;
    animation: nemaFadeSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-density="compact"] .result-skeleton-card {
    padding: 10px 16px;
    gap: 6px;
}

.skeleton-box {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--hover-bg, rgba(15, 23, 42, 0.05)) 25%, var(--accent-subtle, rgba(79, 70, 229, 0.09)) 50%, var(--hover-bg, rgba(15, 23, 42, 0.05)) 75%);
    background-size: 200% 100%;
    animation: nemaSkeletonWave 1.8s ease-in-out infinite;
}

.skeleton-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.skeleton-badge {
    width: 48px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeleton-title {
    height: 20px;
    flex: 1;
    max-width: 55%;
    border-radius: 6px;
}

.skeleton-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.skeleton-btn {
    width: 60px;
    height: 26px;
    border-radius: 6px;
}

.skeleton-desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
}

.skeleton-line.line-full {
    width: 100%;
}

.skeleton-line.line-short {
    width: 60%;
}

/* Accessibility & Reduced-Motion Safeguards */
body[data-animations="disabled"] .nema-top-progress,
body.disable-animations .nema-top-progress,
html[data-disable-animations="true"] .nema-top-progress,
[data-theme="high-contrast"] .nema-top-progress,
body[data-animations="disabled"] .result-skeleton-card,
body.disable-animations .result-skeleton-card,
html[data-disable-animations="true"] .result-skeleton-card,
[data-theme="high-contrast"] .result-skeleton-card,
body[data-animations="disabled"] .skeleton-box,
body.disable-animations .skeleton-box,
html[data-disable-animations="true"] .skeleton-box,
[data-theme="high-contrast"] .skeleton-box {
    animation: none !important;
    transition: none !important;
}

body[data-animations="disabled"] .nema-top-progress,
body.disable-animations .nema-top-progress,
html[data-disable-animations="true"] .nema-top-progress,
[data-theme="high-contrast"] .nema-top-progress {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .nema-top-progress {
        display: none !important;
    }
    .result-skeleton-card,
    .skeleton-box {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   9. ENHANCED MICRO-INTERACTIONS & POLISHED UI ANIMATIONS
   ========================================================================== */

/* 1. Smooth Card Hover Lift & Accent Border Glow */
.result-item,
.recent-card,
.dashboard-card,
.section-tile,
.featured-article-card {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}

.result-item:hover,
.recent-card:hover,
.dashboard-card:hover,
.section-tile:hover,
.featured-article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover), 0 0 16px -4px var(--accent-subtle);
    border-color: var(--accent-color);
}

/* 2. Interactive Pill Tab Slide Transitions */
.scope-tab,
.scope-tab-main {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scope-tab.active,
.scope-tab-main.active {
    transform: scale(1.02);
}

/* 3. Floating Back-to-Top Button Scale Pulse */
.jump-to-top-btn {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.jump-to-top-btn.visible:hover {
    transform: translateY(-4px) scale(1.08);
}

/* 4. Subtle Dropdown & Menu Slide-Fade Entrances */
@keyframes nemaDropdownFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.help-center-section-menu,
.suggestions-dropdown.active {
    animation: nemaDropdownFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Accessibility Safeguards for Enhanced Animations */
body[data-animations="disabled"] .result-item,
body.disable-animations .result-item,
html[data-disable-animations="true"] .result-item,
[data-theme="high-contrast"] .result-item,
body[data-animations="disabled"] .recent-card,
body.disable-animations .recent-card,
html[data-disable-animations="true"] .recent-card,
[data-theme="high-contrast"] .recent-card,
body[data-animations="disabled"] .dashboard-card,
body.disable-animations .dashboard-card,
html[data-disable-animations="true"] .dashboard-card,
[data-theme="high-contrast"] .dashboard-card,
body[data-animations="disabled"] .jump-to-top-btn,
body.disable-animations .jump-to-top-btn,
html[data-disable-animations="true"] .jump-to-top-btn,
[data-theme="high-contrast"] .jump-to-top-btn,
body[data-animations="disabled"] .help-center-section-menu,
body.disable-animations .help-center-section-menu,
html[data-disable-animations="true"] .help-center-section-menu,
[data-theme="high-contrast"] .help-center-section-menu {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .result-item,
    .recent-card,
    .dashboard-card,
    .section-tile,
    .featured-article-card,
    .scope-tab,
    .scope-tab-main,
    .jump-to-top-btn,
    .help-center-section-menu,
    .suggestions-dropdown.active {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   10. GLASSMORPHISM FROSTED CARDS & REFINED TYPOGRAPHY/BADGES
   ========================================================================== */

/* Glassmorphism Frosted Card Backdrops */
.result-item,
.recent-card,
.dashboard-card,
.section-tile,
.featured-article-card,
.trending-box,
.hc-notice-banner {
    background-color: var(--card-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
}

/* High Contrast override: disable frosted blur for maximum contrast */
[data-theme="high-contrast"] .result-item,
[data-theme="high-contrast"] .recent-card,
[data-theme="high-contrast"] .dashboard-card,
[data-theme="high-contrast"] .section-tile,
[data-theme="high-contrast"] .featured-article-card,
[data-theme="high-contrast"] .trending-box,
[data-theme="high-contrast"] .hc-notice-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Refined Typography & Badge Styling */
.result-item h3,
.recent-card h3,
.dashboard-card-title,
.section-title {
    letter-spacing: -0.01em;
    font-weight: 600;
}

.sc-source-badge,
.hc-source-badge,
.suggestion-badge,
.article-meta-badge {
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
    padding: 2px 7px;
    letter-spacing: 0.02em;
}

.sc-source-badge {
    background: var(--accent-subtle);
    color: var(--accent-color);
    border: 1px solid var(--border-subtle);
}

.hc-source-badge {
    background: var(--badge-bg);
    color: var(--badge-text);
    border: 1px solid var(--border-subtle);
}